Developer Relationsチームの三木です。
11月3日(土)に秋葉原 UDX 4F / UDX ギャラリーにて開催された、国内初のVue.jsのカンファレンス「Vue Fes Japan 2018」にて、LINEはゴールド＆ランチスポンサーを務めさせていただきました。また当日はスポンサーブースにて、LINEのフロントエンド開発チーム「UIT」が、Vue.jsユーザーの参加者の方に楽しんで頂くために、お楽しみ企画「UIT Vue.js Quiz」を提供しました。その模様をレポートいたします。
「UIT Vue.js Quiz」について
問題は全部で5問で、「Vue.js入門 基礎から実践アプリケーション開発まで」の共著者である喜多啓介(@kitak)を含め、LINEのフロントエンド開発チームで考えました。当日の参加者175名のうち全問正答者が13.6%と、かなりの難問ですが、本記事に問題を掲載するので、本記事の読者の皆様も、ぜひ挑戦してみてください！
※正解はこの記事の最後に記載します。
Q1. Vから始まるイケてるJavaScript Frameworkはどれ？
- [0] Vae.js
- [1] View.js
- [2] Vue.js
- [3] LINE Front-end Framework
Q2. vuejs v2.5.0のコードネームは以下のうちどれでしょう？
- [0] Kill la Kill
- [1] Dragon Ball
- [2] Evangelion
- [3] Level E
Q3. 無限ループに注意しなければならないライフサイクルはどれ？
- [0] created
- [1] mounted
- [2] updated
- [3] destroyed
Q4. おっと！このやり方ではComponentに変更が絶対に伝わらない！危ないのはどれ？
- [0] this.myObject.property = "hi"
- [1] this.myArray[0] = "hi"
- [2] this.myNumber++
- [3] this.myString += "hi"
Q5. {{これ}} がなくて困る。どれ？
- [0] beforeRouteEnter
- [1] mounted
- [2] beforeRouteUpdate
- [3] beforeRouteLeave
今回のスポンサーブースを準備するに当たり、私たち運営スタッフが目指したのは「LINEにおけるフロントエンド開発を体感してもらう」ということです。
といった内容についてご紹介させていただきました。詳細は資料をご覧ください。
そこで「UIT Vue.js Quiz」は、単にVue Fes Japan 2018を盛り上げるコンテンツとしてだけでなく、LINE上で動作するVue.jsアプリケーションのより実用的なデモとして開発しました。このクイズは、会場のどこからでも空き時間に回答してもらえるよう、ブースの前ではLINEでBOTアカウントの友だち追加だけしてもらえれば良いようになっています。さらに、参加していただいた方に抽選券を発行して、それを後の楽しみとしてもらえるように、Vue.jsのロゴをモチーフにしたオリジナルのTシャツや、先に触れた「Vue.js入門 基礎から実践アプリケーション開発まで」など多数景品を用意させていただきました。当選発表をPUSH通知で受け取ることができるので、抽選発表の時間を気にする必要もなく、引き換え忘れの心配もありません。
本日開催のVue Fes Japan 2018でのLINEブースの企画「UIT Vue.jsクイズ」は終了しました。沢山のご回答ありがとうございました！最終的な正答率は13.2%でした。Vue.jsオリジナルTシャツ＆書籍をゲットの皆様おめでとうございます！まだFesは続きますが最後の懇親会まで楽しみましょう！#uit #vuefes pic.twitter.com/44cxTGsbeg
— LINE_DEV (@LINE_DEV) 2018年11月3日
といった内容についてご紹介させていただきました。詳細は資料をご覧ください。
最後に
LINEは、今回のようなカンファレンス協賛などの機会を通じて、フロントエンド技術者の方との交流や、技術コミュニティ発展への支援に力を入れています。
また、LINEのフロントエンド開発チーム「UIT」は、LINEの新宿オフィスを会場に、その名前も「UIT」という勉強会を定期的に主催しています（UITとは、User Interface Technology の略称です）。次回は11月29日にVue.jsをテーマに「UIT#5 わたしたちにとってのVue.js」を開催（参加は抽選となります。11月15日応募締切）。
今後もさまざまなフロントエンド技術をテーマで企画していますので、お気軽に足を運んで頂けると嬉しいです。
LINEでは、以下職種にてフロントエンドエンジニアを募集しています。興味のある方は応募をご検討ください。
「UIT Vue.js Quiz」正解
Q1. Vから始まるイケてるJavaScript Frameworkはどれ？
答え: [2] Vue.js
言わずもがなですね！UIT Vue.js QuizはLIFF(LINE Front-end Framework)というLINEで動くWebview上にVue.jsで実装されています。
Q2. vuejs v2.5.0のコードネームは以下のうちどれでしょう？
答え: [3] Level E
vuejs/vue リポジトリのリリースノートをチェックするとコードネームを知ることができます！どれも日本に住むひとにとっては馴染みにある名前ですよね。
https://github.com/vuejs/vue/releases/tag/v2.5.0
Q3. 無限ループに注意しなければならないライフサイクルはどれ？
答え: [2] updated
誰もが一度はやってしまうのかもしれません。updatedの中でステートを書き換えてしまうと、無限ループに陥る可能性があるため、注意しなければなりません。
https://jp.vuejs.org/v2/api/#updated
Q4. おっと！このやり方ではComponentに変更が絶対に伝わらない！危ないのはどれ？
答え: [1] this.myArray[0] = "hi"
myObject.propertyが引っ掛けでした。前の状態が明示されていない以上[0]も正解になり得ますが、Arrayのindex変更は確実に問題が発生します。v3系ではArrayのindex変更が検知されるようになる予定です。要チェック！
https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf
Q5. {{これ}} がなくて困る。どれ？
答え: [0] beforeRouteEnter
この問題だけVueRouterからの出題でした。{{これ}} を「this」に変換して考えます。選択肢の中でthisが参照できないのは、beforeRouteEnterです。
今後も他のフロントエンドのイベントでも同様のクイズコンテンツの提供を予定していますので、もしLINEのスポンサーブースにご来場の際は挑戦してみてください！