技術で盛り上げるアプリボット総会

こんにちは。新卒2年目でフロントエンドエンジニアの久保です。

アプリボットには独自の社内文化がたくさんあり、半期に一度開催される「アプリボット総会」は全スタッフが参加する特に大規模なイベントです。今回は、2017年4月に行われたアプリボット総会2部の内容および、そこで使用した技術を紹介します。

○ 総会2部の内容と使用した技術

今回のアプリボット総会2部では、全員参加型のクイズ大会をコンテンツとして用意しました。
大人数でのクイズ大会を実現するにあたって、会場のスクリーンを問題表示に使用しました。

また、当日は参加者のスマートフォンデバイスから解答ページにアクセスしてもらい、そこから解答してもらいました。

 


運営する新卒が管理画面から操作を行い、会場のスクリーンに問題文および選択肢を表示します。
そして、参加者のデバイスにはスクリーンと同じ選択肢が表示され、解答してもらいます。
このように、管理画面からAPIを叩くとそれぞれ対応した問題と選択肢がスクリーンとデバイスに配信される仕組みになっています。

管理画面およびスクリーン画面、参加者の解答用画面は私が作成し、問題配信用API等バックエンドを同期の玉田が作成しました。
次に、フロントエンド・バックエンドそれぞれで使用した技術や用いた感想などを紹介します。

 

・バックエンドで使用した技術

バックエンドではRuby on Rails5(以下Rails)を採用しました。

担当エンジニアの玉田が学生時代にRails4系を使用した経験があり、導入や開発をスムーズに行えると考えたためです。

今回は特にActiveRecord周辺に気を配って開発を行いました。

ActiveRecordは、Railsに搭載されたORマッパーです。

命名規則が厳格である一方、設計や構造に合わせて柔軟に対応できる点が特徴です。

特に、設定ファイルを書いておけば他のテーブル情報などがすぐに参照でき、使用していて魅力的でした。

これによりAPIの開発がスムーズに進み、テーブル間の関連付けを常に分かりやすく保つことができました。

 

一方で、上記の命名規則のようにActiveRecordの制約が強すぎるデメリットもありました。

特に、複合主キー型のテーブルを複数同時に取り扱う場合や、リスト形式にデータを取り出したい場合に苦労しました。

 

以上のことから、Rails5は比較的容易に導入でき、特に小中規模のアプリケーションを作成するのには向いていると思います。

ActiveRecordはクセがあるものの使いやすいORマッパーとしてまとまっており、すぐに馴染めると思います。

サーバーサイド未経験者であっても、言語の扱いやすさや環境構築のしやすさから、サーバーサイドへの入門にピッタリのフレームワークではないでしょうか。

また、今回の構成ではAPIとDBが一つのサーバーに同居していたので、次の機会では分離した構成を試す予定です。

 

・フロントエンドで使用した技術

今回のコンテンツを作成するにあたって、フロントエンドでは次の課題に直面しました。

 

・ 多くのページ(合計10ページ)が必要になる

・「ゲーム感」を演出するために、なるべくシームレスにページ遷移を実現したい

 

以上の課題を解決するために、フロントエンドではVue.js 2.0(以下Vue)を採用しました。

Vueは環境構築を容易に行えるようにサポートされています。

用意されている公式のジェネレーターを用いてプロジェクトを生成すると、すぐにSPA化されたWebアプリケーションを作り始めることができます。

Vueにおいて各ページはテンプレートとして生成されるので、多くのページを作成していく過程で管理が煩雑にならず、またJSやCSSのスコープをテンプレートごとに明確に保つことができます。

 

Vueは個人的にはすごく書きやすかったのですが、いくつかの注意点があります。

Vueのテンプレートの中には、HTMLタグやJavaScript、場合によってはCSSも存在します。そのため(これはVueに限った話ではありませんが)、一つのテンプレートが肥大化すると内容が煩雑になりがちです。

特に、1ページ1テンプレートという設計にする場合は、CSSを外部に切り出すなど煩雑化を防ぐ工夫が必要になります。

今回のコンテンツ作成においては、いくつかのテンプレートが肥大化してしまい見通しが悪くなってしまいました。

ただし、上記のようにテンプレートごとにJavaScript、CSSのスコープが切られるので、各テンプレートの粒度を小さく保つのであれば、一つのテンプレートに全て収める方が見通しが良いかもしれません。

 

また、画像や音源などのアセット系の管理が少し複雑でした。

通常のHTMLであれば、下記のようにファイルパスを記述すると対象を参照してくれます。

 

<img src="./assets/sample.png" >

 

しかし、Vueではアセットを参照する際には、v-bindを使用します。

 

<img v-bind:src="imageSrc" >

 

この他にwebpack周りの設定やcache busterの設定も必要に応じて変更を加えます。このように、Vueではアセット周りのバインディングには注意が必要です。

 

いくつかの注意点はありますが、Vueは「比較的緩やかな規約の中で、素早くSPA Webアプリケーションを実現する」ことに向いていると思います。

React.js+Redux アーキテクチャは強力ですが、そちらよりも柔軟かつスピードを持って開発することができます。

コードの書き方によっては煩雑化を招く危険も大きくなりますが、Vuexなどのフレームワークを導入することでカバーできると思います。

またデベロッパー同士のコミュニティ(slack)が活発に動いており、情報交換・収集が行いやすいことも大きなメリットです。

上記から、Vueは本番環境への導入、運用が十分に可能なモダンフレームワークであり、選定の選択肢に入るのではないでしょうか。

 

○まとめ

今回は、アプリボットの社内文化であるアプリボット総会、および総会2部で行われたコンテンツとそこで用いた技術の紹介を行いました。

社内行事の盛り上げにモダン技術をふんだんに使ったコンテンツを作成することが、アプリボット新卒の毎年の恒例行事となっています。

今回はフロントエンドにVue.js 2.0mバックエンドにRails5を使用しました。

システム面やコンテンツ内容の完成度を上げることで、社内行事を大いに盛り上げることに成功しました。

今年度からは私が担当することはありませんが、新卒達が取り組んでくれる中で積極的な技術的チャレンジを推奨し、先輩たちが支えていく文化をこれからも残していければと思います。