【GIG勉強会Vol.14】話題のフレームワーク「Vue.js」と「Word Pressマルチサイトでつくる海外向けサイト」を学ぶ

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

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

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

さて、今回も学びがたくさんだったLTの模様をご紹介します！

前半のテーマは「Vue.js」について

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

後半のテーマは「Word Pressマルチサイトでつくる海外向けサイト」について

次に登壇したのは、ディレクターのわらけんさんこと、藁科憲佑さん。CMSなどを利用して簡単に作れる「海外向けサイト」のメリットや使い方を教えてくれました。

藁科憲佑（わらしなけんすけ）：ディレクター。新卒で通販サイトのマーチャンダイザーを担当。家業の経営難が発覚し、地元に戻り立て直しを行う。事業の効率化を行い負債の30%をカット、銀行とリスケジュールの交渉で延命させる。最終的に倒産となるが、新たに立ち上げた会社で元従業員の再起に成功。2017年7月、GIGにジョイン。