Developer Relationsチームの三木です。
11月25日（日）東京電機大学にて開催された、国内最大のフロントエンド系カンファレンスの一つである「HTML5 Conference 2018」にて、LINEはゴールド＆ランチスポンサーを務めさせていただきました。また当日はLINEのエンジニアが登壇した他、参加者の方に楽しんで頂くためにLINEのスポンサーブースでお楽しみ企画「UIT HTML5 Quiz」を提供しました。その模様をレポートいたします。
セッション「コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践」
今回、LINEのフロントエンドエンジニアであるJunとKawasakoが、「コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践」と題してセッションを行いました。HTML5のイベントで触れられることは珍しい、ターゲット言語というトピックのセッションではありましたが、聴衆の方にはLINEのフロントエンド組織の多様な取り組みが伝わったのではないでしょうか。詳細は資料をご覧ください。
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践 from LINE Corporation
「UIT HTML5 Quiz」について
今回、LINEの企業ブースでは Vue Fes Japan 2018 と同様に、回答すると景品の抽選に参加できるクイズを「UIT HTML5 Quiz」として提供し、当日180名以上の方に参加していただきました。LINE BOTを利用することで、抽選や景品の引き換えなど今回もスムーズに行うことができました。
景品の内容ですが、今回はLINEのフロントエンドエンジニアが主催する勉強会「UIT」のオフィシャルTシャツをご用意しました。HTML5のロゴイメージに寄せて、オレンジのボディカラーを新しく作りました。
今回出題した問題は以下の通りです（本ブログの最後の正解を記載しています）。本記事の読者の皆様も、ぜひ挑戦してみてください！
Q1. HTMLってなんの略？
- [0] Hyperborea Markup Language
- [1] Hypertext Mesopotamia Language
- [2] Hypertext Markup Land
- [3] Hypertext Markup Language
Q2. WWWを考案者でありHTMLの生みの親である人物は？
- [0] ティム・バーナーズ＝リー
- [1] スティーブ・ジョブス
- [2] ジョン・フォン・ノイマン
- [3] それは私のことです
Q3. Web技術の標準化を推進する非営利団体の名前は？
- [0] WWW
- [1] W3D
- [2] W3C
- [3] LINE株式会社
Q4. div:empty { background: red; } が指定されている状態で、後述するa,bの挙動はどうなる？(Google Chrome最新版基準)
a. ::before擬似要素で文字列が挿入されている div要素
b. 改行コードが挿入されている div要素
- [0] a のみ背景色が赤に
- [1] b のみ背景色が赤に
- [2] a, b 両方の背景色が赤に
- [3] どちらも背景色はつかない
Q5. [1,2,3].sort(function(a, b) { return a - b; }) を実行した場合、ECMAScriptの仕様上比較関数は何回呼ばれる？
- [0] 1回
- [1] 2回
- [2] 3回
- [3] わからない
開始から１時間が経過した時点で全問正解率がなんと0%と、問題制作者にも焦りの色が見られ始めます。会場ではQ4あたりからスマホ片手に考え込む挑戦者の方が多くみられました。読者の皆様はいかがだったでしょうか？
最終的な正解率は3.1%でした！挑戦頂いた皆様、本当にありがとうございました。
HTML5 Conference 2018でのLINEブースの企画「UIT HTML5クイズ」は終了しました。沢山のご回答ありがとうございました！最終的な正答率は3.1%でした（少し難しかったでしょうか…？）オリジナルTシャツをゲットの皆様おめでとうございます。カンファレンスの最後まで楽しみましょう！#uit #html5j pic.twitter.com/AaHDlHqg19
— LINE Developers (@LINE_DEV) 2018年11月25日
最後に
LINEは、今回のようなカンファレンス協賛などの機会を通じて、フロントエンド技術者の方との交流や、技術コミュニティ発展への支援に力を入れています。
また、LINEのフロントエンド開発チーム「UIT」は、LINEの新宿オフィスを会場に、その名前も「UIT」という勉強会を定期的に主催しています（UITとは、User Interface Technology の略称です）。次回の開催は未定ですが、今後もさまざまなフロントエンド技術をテーマで企画しています。決まり次第connpassにて募集開始いたしますので興味がある方は是非チェックして下さい。
本日LINEの新宿オフィスでは、LINEのフロントエンド開発組織が運営する勉強会「UIT」の第5回が開催中です。今回は「わたしたちにとってのVue.js」と題して、実践に基づいた有益なトークが繰り広げられています。ビール片手のカジュアルな雰囲気で進行しています！#uit_5 https://t.co/4AOTPszlUF pic.twitter.com/PVaQqusL7p
— LINE Developers (@LINE_DEV) 2018年11月29日
また、LINEでは、以下職種にてフロントエンドエンジニアを募集しています。興味のある方は応募をご検討ください。
LINEでは多くの画面や機能がWeb Applicationとして提供されており、UIT室はそのフロントエンド開発に取り組む組織です。ReactやVue.jsをはじめとして日々新しくなるWeb技術に実践を通じてコアに取り組みたいフロントエンドエンジニアを大募集しています！ #LINEのエンジニアhttps://t.co/huLgdA7N0m pic.twitter.com/twvHPXvOm4
— LINE Developers (@LINE_DEV) 2018年12月4日
「UIT HTML5 Quiz」正解
Q1. HTMLってなんの略？
言わずもがな [3] Hypertext Markup Language です！
Q2. WWWを考案者でありHTMLの生みの親である人物は？
World Wide Web は 1990年11月に [0] ティム・バーナーズ＝リー によって考案されました。もう少しで30周年ですね！
Q3. Web技術の標準化を推進する非営利団体の名前は？
World Wide Web Consortium の略で [2] W3C が正解です。２問目で登場したティム・バーナーズ＝リーによって創設されました。
Q4. div:empty { background: red; } が指定されている状態でa, bの挙動はどうなる？
a. ::before擬似要素で文字列が挿入されている div要素
b. 改行コードが挿入されている div要素
正解は [0] a のみ背景色が赤に です。::beforeでcontentを表示していても:emptyの対象、改行は空白類文字なので:emptyの対象外となります。マークアップの本来の意味を考えると順当な動作なのかもしれませんね！
Q5. [1,2,3].sort(function(a, b) { return a - b; }) を実行した場合、ECMAScriptの仕様上比較関数は何回呼ばれる？
ごめんなさい！ひっかけ問題でした。正解は [3] わからない です。Array.sortにどのようなアルゴリズムを適用するのかは定められていません。実際にSafariでは比較関数が3回呼ばれ、Chromeでは2回呼ばれるようになっています。