Vue Fes Japan 2018 協賛レポート

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通知で受け取ることができるので、抽選発表の時間を気にする必要もなく、引き換え忘れの心配もありません。

といった内容についてご紹介させていただきました。詳細は資料をご覧ください。

 

最後に

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です。

https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%83%AB%E3%83%BC%E3%83%88%E5%8D%98%E4%BD%8D%E3%82%AC%E3%83%BC%E3%83%89

今後も他のフロントエンドのイベントでも同様のクイズコンテンツの提供を予定していますので、もしLINEのスポンサーブースにご来場の際は挑戦してみてください!

Related Post