【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つ。

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自体は優秀なので、これからの広がりに期待しています。」

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

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

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

東京オリンピック開催の影響で「海外向けサイト」の需要が増えている

現在、観光客の増加や、東京オリンピックの開催が決定したことによって、海外向けの多言語サイトの需要が急激に増えています。海外に拠点を持つ企業は、この9年で約2倍にまで増加しているそうです。

藁科：「需要が増える一方、多言語化されたサイトにはメリットとデメリットの両方があります」

メリット

• プラグインやwebサービスで対応可能
• 自動翻訳を活用もできる
• 導入コストが安い

デメリット

• 海外向けのSEOが対応しにくい
• 日本のサイトを翻訳するだけなので、
• コンテンツがローカル対応できていない
• 画像に入っているテキストは翻訳できない

藁科：「これらのメリットを上手に活かしつつ、デメリットを解消するために便利なのが、”WordPressのマルチサイト機能”です」

誰にでも簡単に海外向けサイトが制作できる「マルチサイト」とは

マルチサイトとは、1つのWordPressでサブドメン or サブディレクトリ複数のサイトを展開できる機能のことを指します。

藁科：「運用コストを抑えられるだけでなく、サイトごとにデザインやコンテンツ内容を自由に変えられるメリットもあります」

母国語のサイトを複製し、それらを個別の言語に翻訳するという操作が簡単にできるので、国別にサイトを立ち上げなくても海外向けサイトが作れるのです。

GIGでも実際、海外向けサイトの制作の受注を開始しています。

https://giginc.co.jp/service/global

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

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

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

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

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

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

お気軽にどうぞ！