社内LT会でオールアバウトにおけるReact.js, Vue.jsの活用について紹介！
こんにちは、最近Google Homeで遊んでます。@amymdです。
弊社では定期的にエンジニアで社内ワークショップを行っているのですが、 先日「オールアバウトにおけるjavascriptフレームワークの採用例を実例と共に紹介！」と題して、弊社で使用しているJavascriptフレームワークに関するLT会を開催しました。今回はその内容を報告したいと思います。
発表タイトルは、下記のとおりです。
1. Vue.js + Laravelを利用したオールアバウトのCMS開発
2. Vuexによる最近のフロント開発紹介
3. オールアバウト社内システムでのReact.jsの利用例
1. Vue.js + Laravelを利用したオールアバウトのCMS開発@C058
@C058さんからは、Vue.js + Laravelを利用した社内CMSについて発表していただきました。
発表資料にある 「PICUP（ピカップ）」というサービスは、2017年7月にリリースされた、各分野に精通する専門家が独自の目線で商品を厳選し、オススメを紹介するメディアです。
こちらのメディアの記事を入稿するCMSで、Vue.jsを採用しています。
オールアバウトで主に使用しているPHPのフレームワークがLaravelなのですが、Laravel 5.3以降からは標準JSフレームワークにVue.jsを採用しているため、導入しやすくなっています。
またVueを導入する上で覚えておくこととして、データバインディングと双方向データバインディングについてデモ用ToDoアプリを用いてわかりやすく説明していただきました。
2. Vuexによる最近のフロント開発紹介@sinpey_g2
@sinpey_g2さんからはVuexについて発表していただきました。
Vuexとは、Vue.jsアプリケーションのための状態管理パターン + ライブラリです。
Vue.jsで開発をしていると、親子間での状態の受け渡しによって発生するprops地獄や、他コンポーネントとの状態共有など手間が掛かってしまうところがあります。
Vuexでは、State（状態の保持）, Mutation（状態の変更）, Action（非同期処理）を活用することで、複数コンポーネントでの状態共有がとても便利になります。
詳しくは資料をご覧ください。
3. オールアバウト社内システムでのReact.jsの利用例@pakkun
@pakkunさんからはオールアバウトの記事生成ツール（CMS）にReact + Fluxを導入した話について発表していただきました。
React + Fluxを導入して良かったこととして、
- Virtual DOMが提供する一方通行のフローにより、サーバサイドと似た構造にできる
- コードをシンプルに書ける
- Immutable.jsを使うとさらに楽
の3つを取り上げていました。実際に導入してみると、コードを一度作った後はシンプルに高速で実装できるようになったそうです。
大変だったことについては詳しくはスライドを見ていただきたいのですが、jQueryとの共存が難しい点やFluxの学習コストが高い点について取り上げていました。
特にFluxについては、CQRS(Command Query Responsibility Segregation)（コマンドとクエリの責務分離）を理解していないと難しいとのことです。
CQRSとは、アーキテクチャレベルでコマンドとクエリに分離しようという考え方です。
CQRSを理解するには、まずはBertrand Meyer氏が『オブジェクト指向入門』という書籍で述べた概念、CQS(Command Query Separation)（コマンドとクエリの分離）を知っておくと良いそうです。
また、React + Fluxを導入するにあたってやったことを抜粋すると、@pakkunさんは社内勉強会（QiitaのAPIを使用したハンズオン）の開催やBoilerplateの作成などを行うことで、導入しやすい環境づくりを行っていました。
ちなみに以前ブログで社内勉強会について紹介した記事がこちらになります。
まとめ
社内LT会にて報告されたオールアバウトにおけるReact.js, Vue.jsの活用方法について紹介いたしました。 オールアバウトではエンジニアのスキルアップや交流を目的に定期的にこのような社内勉強会を開催しています。
学生の方には特別に社内勉強会に招待していますので、興味のある方は↓のリンクから申し込んでみて下さい！
