こんにちは。最近YouTube動画を使ってヨガレッスンをはじめた、GIG社員のまえちゃんです。GIGでは空前のスポーツブームが起こっていて、フットサルチームやボルダリング部、バドミントン部が相次いで結成されました。

オフィス周辺には運動するのにぴったりな施設がいくつかあって、中でも中央区立の体育館はGIGから徒歩4分と手近。21時半まで一般開放されているので、仕事終わりにも立ち寄りやすいです。

デスクワークによる首・腰のトラブルを回避するためにも、適度な運動を続けていきたいものですね。

さて、今回登壇してくれたのはエンジニアの張 程さん。フロントエンドのフレームワークであるVue.jsについて、わかりやすく解説してくれました。

張 程（チェンジェン）：エンジニア、デザイナー。GIGで働く傍ら、休日に自分のWebサービスやアプリ、ゲームを作るほどの開発好き。柔軟でDRYなコードを書けるとテンションが上がる。個人サイトはコチラ。

  当日使用したスライドは以下からご覧いただけます。

フレームワーク「Vue.js」とは？

Vue.jsは、React.js・Angular.jsと並んで人気のフロントエンドフレームワークのひとつです。大きな特徴は次の3つ。

1. UIライフサイクルを管理してくれる
2. 状態管理が直感的で、扱いやすい
3. 簡単に導入できる

v-bindなどのテンプレート構文や、イベントハンドラーにば若干癖がありますが「React.jsを使った経験がある人にとって、Vue.jsはかなりとっつきやすいフレームワーク」とのこと。 

Vue.jsで状態管理するためのベストプラクティスとは？

張さんは、Vue.jsを実際に社内プロジェクトの一部に導入した経験をお話してくれました。

張さん：
- v-*というVue.js特有な属性でHTMLコードの可読性が減りました。特にv-if, v-showなど、慣れる必要があります

張さん：
テンプレートはJSXを利用しない場合はタグを文字列として書くので、書きにくいです。コンポーネント化しない限り、ソースは肥大化してしまいます。

上記のような問題点を解消するためのベストプラクティスは以下の3つ。

1. コンポーネント化を徹底する
2. JSX + webpackでコンパイルする
3. v-if, v-showなどはできるだけコンポーネントに収める

一見重宝しそうなVue.jsですが、既存のReact.js・Angular.jsのユーザにとってはまだ少し、魅力不足だと張さんは感じているそうです。 

張さん：
Vue.jsとは違い、React.jsはReact-Nativeを利用すれば、特に新しい記述方などを覚えなくてもネイティブアプリも開発できてしまうという、大きなメリットがあります。これからフロントエンドフレームワークを覚えようとしている方には、まずReact.jsをすすめしたいです。

張さん：
また、これからweb開発だけ絞りたい方にはVue.jsが良い選択肢ですが、今のところwebしか活用する場がない現状です。Vue.js自体は優秀なので、これからの広がりに期待しています。

LTの後はピザを囲んで乾杯！

すっかり撮影に慣れてきたGIGメンバー。おのずと、乾杯のポーズで10秒間キープしてくれるようになりました！！すごい！！

この日はGIGの1992年生まれが揃いました。左からエンジニアのよしさん、デザイナーのちゃっきーさん、2018年新卒の編集者じきるさん、インターンのコルさん。

今回もとてもためになる、有意義な勉強会になりました。

GIGでは、一緒に働く仲間を募集しています

現在GIGでは「一緒に学びながら、成長していきたい！」と意欲のある仲間を募集しています。

詳しくは下記サイトをご覧ください。

GIG BLOG編集部

株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。