UUUM攻殻機動隊(エンジニアブログ)

UUUMのエンジニアによる技術ブログです

タグ付きテンプレートリテラル <JavaScript の「なんだこれ・・・」その1>

前置き

序文

  • JavaScript の「なんだこれ・・・」シリーズの第一弾は、「タグ付きテンプレートリテラル (Tagged Template Literal)」です。

仕様

  • ES6 で追加された仕様に、テンプレートリテラル (Template Literal) があります。他の言語ではよく見られる機能です。この機能を使えば、変数の値を文字列中に埋め込みたい時に文字列連結演算することなくスマートにコード化できます。

  • 色々な言語のテンプレートリテラルを見てみましょう。自分が業務で扱ったことのある言語の例を挙げてみました。

# Ruby

love = '最愛の'
"#{love}嫁さん (^-^)"    # '最愛の嫁さん (^-^)'
// PHP

$love = '最愛の';
"{$love}嫁さん (^-^)"    // '最愛の嫁さん (^-^)'
# Python

love = "最愛の"
f"{love}嫁さん (^-^)"    # "最愛の嫁さん (^-^)"
// Kotlin

val love = "最愛の"
"${love}嫁さん (^-^)"    // "最愛の嫁さん (^-^)"
// Swift

let love = "最愛の"
"\(love)嫁さん (^-^)"    // "最愛の嫁さん (^-^)"
// Java

// テンプレートリテラルは存在しない   // "それでも最愛の嫁さん (^-^)"
  • Java にはテンプレートリテラルはありませんが、嫁さんへの愛は変わりませんでした。

  • 多言語を扱っていると、別プロジェクトの作業に移った際にちょっとした書式の違いにいつも悩まされます。コンパイラの構文解釈的な都合なのかなと考えてますが、一度その意図をコンパイラの作者に訪ねてみたいです。

JavaScript のテンプレートリテラル

  • それでは、ES6 で追加された JavaScript 版をみてみましょう。
// JavaScript

const love = "最愛の";
"${love}嫁さん (^-^)"    // "最愛の嫁さん (^-^)"
  • 方向性は Kotlin と同じようですね。嫁さんへの愛も同じです。

タグ付きテンプレートリテラル

  • 何かで調べ物をしている時に、「タグ付きテンプレートリテラル (Tagged Template Literal)」と出会いました。初めてコードを見た時、「( ) が抜けてるんじゃないの?」と、しばらくフリーズしたのを覚えてます。
// タグ関数を定義
function scaleTag(hashes, ...values) {
  return values
    .map((value, index) => hashes[index] + emphasize(value))
    .concat(hashes.slice(values.length))
    .join("")
  ;

  function emphasize(word) {
    if (!word) {
      return "";
    }

    return `<strong>${word}</strong>`;
  }
}

const love = "最愛の";

/*
 * 以下が「タグ付きテンプレートリテラル」の書式です。
 */
scaleTag `${love}嫁さん (^-^)`;
    // "<strong>最愛の</strong>嫁さん (^-^)"
  • 上のコード中で「scaleTag」がタグと呼ばれる箇所です。この書式を初めて見た時、まるで「ずっと昔の恋人の経年後の今を SNS で偶然見かけたような気分」で見つめていました。

  • タグとテンプレートリテラルの間に半角スペースを入れていますが、なくても動作するようです。

解説

  • テンプレートリテラルにタグを付与すると、変数を展開する際にその値を加工するための hook 処理ができるという仕様。使い所は難しいですが、以下の用途はいかがでしょう。
// 整数をカンマ区切りで表示するタグ
function commalizeTag(hashes, ...values) {
  return values
    .map((value, index) => hashes[index] + commalize(value))
    .concat(hashes.slice(values.length))
    .join("")
  ;

  function commalize(number) {
    return number
      .toString()
      .replace(/(?!^)(?=(?:\d{3})+$)/g, ",")
    ;
  }
}

const price = 2500;

commalizeTag `価格:${price}円`;    // "価格:2,500円"
  • 「price を commalize() で変換してから表示させる」という方法だと、文字列中に commalize(price) と記載することになりますが、その辺りのノイズが外出しされるので、文字列がどういう結果になるかを想定しやすくなるメリットはありそうです。
// どちらが良いか?
commalizeTag `価格:${price}円`;
`価格:${commalize(price)}円`;
  • 変数展開がひとつだけなら大差ないですが、例えば Excel のように金額がずらりと並ぶような表を Web ページで表示させる場合はどうでしょう。commalize() が価格表示の個数分だけ書くのに比べれば、テンプレートの直前に一回だけ記載する方法はスマートに感じます。

  • 他にもっと良さそうなサンプルを閃いた時は、随時追加していきます。

まとめ

  • JavaScript のコードに違和感を覚えてそこで立ち止まるのは、バグを探す目が自動的に反応しているのだと考えてます。超初心者の頃は、構文を知らずによく立ち止まっては「ああ、こんな構文があるのか!」と、感動して覚えたものでした。しかしながら、JavaScript で立ち止まってそれが新しい構文だったという感覚は、久しく体験していませんでした。

  • 街でふと昔の恋人を見かけて。見たことのなかった笑顔で歩いている様子に「ああ、今は幸せなんだね」と感じたような、そんな「なんだこれ・・・」でした。

  • UUUM では、技術にこだわりのあるエンジニアを募集しています!! 詳しくは以下のリンクをご覧下さい。

www.wantedly.com

www.wantedly.com

Electron で付箋紙ウィジェットを作る

この記事は、UUUM Advent Calendar 2018 6日目です。


エンジニアをしているナカハシ(@k_nakahashi)です。

付箋紙アプリ、自分に合ったものを使いたい(ので作りたい)

私は作業用のPCでは、デスクトップ上に付箋紙アプリを浮かべていることが多いです。ウィンドウっぽいものを起動せずに、とりあえずテキストを打てる領域があるって気軽でいいんですよね。

Macで仕事するようになってからは、デフォルトでインストールされているスティッキーズという付箋アプリを使っていました。

続きを読む

CSSでHIKAKINをかきました

こんにちは!エンジニア(仮)のめる(@c5meru)です。
こちらの記事は、UUUM Advent Calendar 2018 5日目の記事です!

最近「フロントエンドの方ですよね?」とお声がけいただくことが多いのですが、実は、UUUMに入社してからはバックエンドの業務をメインに開発しております😅
これまでの会社では、HTML/CSSコーディングを中心としたフロントエンドの実装が中心だったので、

「そういえば、最近CSS書いてないなあ...」

と思いまして、兼ねてからやってみたかったCSSお絵かきをやってみました!いえい!🎉パフパフ🎺

続きを読む

オフショア先と社内システム開発をエンジョイした話

この記事は、Engineering Manager vol.2 Advent Calendar 2018 4日目向けに書きました。

弊社では、UUUM Advent Calendar 2018 も公開していますので、こちらもどうぞよろしくお願いします!


開発兼マネジメントを担当しているナカハシ(@k_nakahashi)です。

先日まで半年間、ベトナムのオフショア先と一緒に社内システムの開発を行いました。

個人的にオフショア先との共同作業は初体験でどうなることかと思っていましたが、とりあえず形にはなったのではないかと思います。

やってみて初めてわかったことが多かったですし、そのとき試した進め方や感じたことなどを書いておこうと思います。

続きを読む

デザインブログ「UUUM DESIGN」をnoteではじめます。

はじめまして。デザイナー インターンのよーたです。

UUUMでは「鈴木くん」「鈴木さん」と呼ばれることが多いのですが、同じ名字が多いので、名前呼びを浸透させていきたいと勝手に思っているこの頃です(笑)

さて、本題ですが、この度、UUUMのデザインに関するあんなことやこんなことを発信する場がほしいなと思い、エンジニアブログとは別に、デザインに関する記事投稿が盛んに行われているnoteに公式ブログ「UUUM DESIGN」を開設しました 🎉

note.mu

最初は、同じユニットに所属するデザイナーで小さくスタートしていく予定でございます。

始まったばかりの「UUUM DESIGN」を暖かく見守っていただけると嬉しいです。noteのフォローもぜひよろしくお願い致します🙇‍♂️

UUUM攻殻機動隊の紹介

おはこんばんちは!! 尾藤 a.k.a BTO です

おかげさまで UUUM のエンジニアも増えて賑やかになってきて、なんとアドベントカレンダーも始められるようになってきました!! そこで初日の今日は UUUM の開発部隊であるシステムユニット(社内では通称攻殻機動隊)の紹介をしてみようと思います

おっと、申し遅れましたが、UUUM 攻殻機動隊ではバトーを担当しております。

f:id:masatobito:20151016105823j:plain

UUUMって?

UUUM は HikakinはじめしゃちょーFischer's のようなトップ YouTuber が所属する事務所です。事業はそれだけに留まらず Instagram, Twitter のような他の SNS プラットフォームへの展開や、イベント、グッズ販売、動画制作など多岐にわたっています。

2017年8月31日に東証マザーズに上場。おかげさまで業績も好調で売上も100億円を超え、営業利益も7億円を超える規模にまで成長しています。19年5月期の決算では、昨対比で売上175%営業利益278%と順調に成長しています。

19年5月期 業績ハイライト
19年5月期 業績ハイライト

社員数も右肩上がりで増えており、300名を超える規模まで成長しています。

19年5月期 社員数
19年5月期 社員数

所属チャンネルは6500超え

19年5月期 チェンネル数
19年5月期 チェンネル数

気になる今後の展望ですが、日本の動画広告市場はまだ7%に過ぎず、今後の伸びが期待できる市場となっています。

19年5月期 動画広告市場
19年5月期 動画広告市場

詳しくは弊社IR資料をご覧ください。

UUUM攻殻機動隊は何をしているか

UUUM攻殻機動隊はシステム開発を専門とする部署ですが、UUUMという会社の中で一体何をしているのでしょうか。上記で述べたように UUUM は急成長している企業です。チャンネル数6500を超え、社員数も300名を超え、今後の成長も見込まれているのでどんどん増えていきます。なのでシステム的に効率化や分析を進めていかないと、事業をスケールするのが難しくなっていくのです。

技術で経営課題を解決する

これがUUUM攻殻機動隊に課せられたミッションです。開発しているプロダクトはクリエイター向け統合ツール、クリエイター管理、支払管理、案件管理、データ分析など多岐に渡ります。必然的に私達が開発しているシステムはクリエイター向けツール、社内ツールがメインになってきます。これらのシステムは会社が成長するためにはなくてはならないシステムなのです!!

技術には手を抜かない

もちろん技術には手を抜きません。攻殻機動隊が開発しているシステムでは下記のようなことは当たり前のように行われており、モダンな環境で開発を進めています。

  • コードレビュー
  • ユニットテスト
  • コード整形
  • CI
  • インフラのコード化

私達が開発しているシステムは会社の事業にとって、非常に重要な位置づけとなっています。これらは長く安定的に運用していく必要があります。そのためにはしっかりとした品質のプロダクトを開発していくことが重要です。このようなプロダクトを開発していくのは外注ではなかなか難しい。UUUMがシステムを内製で開発しているのは、会社の事業の根幹を支えるために必要不可欠なことなのです。

技術力の向上

品質の高いシステムを開発するためには高い技術力が大切です。UUUM攻殻機動隊では社員の技術力向上にも意欲的に取り組んでいます。具体的には週一回の社内勉強会週三回の輪講会が開催されています。もちろん社外勉強会への参加や発表も推奨されています。

お弁当の勉強会
お弁当の勉強会

開発合宿に行ったりもします。

f:id:sakaryu02_u:20180511172047j:plain

向上心の高いメンバーがほとんどで、成長できる環境を提供できるように工夫しています。

結論

まるおは可愛い!!

www.youtube.com