Juicer事業部2016年10月、中途採用でPLAN-Bへ入社。自社DMPの開発を行なうJuicer事業部にて、機能開発、フロントエンド領域を担当。RSSを購読するFacebookでシェアFacebookでいいね!Twitterでシェアはてなブックマーク目次フレームワーク開発環境ルーティングCSSJavaScriptライブラリセキュリティディレクトリ構成とアーキテクチャビルドとデプロイまとめ最近、社内でReactを使ってシステムリプレイスと新規機能開発を行ったので、その知見をまとめたいと思います。ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をJavaScriptで書くこともありますが、今回はそのケースではありません。フレームワーク昨今のJSのフレームワークはフレームワーク戦争と言われるほど多種多様なフレームワークが出ては消えを繰り返し今に至っています。jQueryやprototype.jsなどのフレームワーク(ライブラリ)が出始めた2005年から比べるとフレームワークを使わないという選択肢はもう無いでしょう。丸腰のJSでDOMをいじっていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。(2以降)に関しては運用に乗せたのはReactのみになります。開発段階では選択肢に上がっていた同一のアプリケーション(プロトタイプ)を開発してみて感じたことは、コンポーネント指向、レンダリングの最適化、アーキテクチャなどの共通点があり、また開発環境においても各フレームワークにサポート用のCLIツールがあり、開発環境の構築に時間を要することなく開発初動が早いということです。開発環境フレームワークでも触れましたが、公式が提供しているボイラープレートを使用するのがおすすめです。startルーティング部分的にReactアプリやAngularアプリにする場合はルーティングは必要なく指定DOMに対してアサインしますが、ページ全てをSPAとする時はルーティングは必須です。ルーティングはルーティングモジュールを使いましょう。Reactの時は、react-routerVueの時は、vue-routerAngularの時は、app.component.tsの@RouteConfigCSSBootstrapなど多くのCSSフレームワークは一部の挙動がjQueryに依存しているため、そのまま導入すると結構バグります。CSSフレームワークに限らずですが、jQueryとVirtualDOMはまぜると危険です。VirtualDOMとjQueryを混ぜる時は必ずレンダリングが完了したあとVirtialDomから生Domに変換した後に動作するようにコーディングしましょう。JavaScriptライブラリ前項でも解説しましたが、生Dom前提で構築させているJavaScriptライブラリを使うと使い方によっては結構バグります。アニメーションライブラリや描画ライブラリ(svg、webGLなど)はreactやvueに最適化されているライブラリを使うようにしましょう。セキュリティSPAの特徴であるフロントエンドとバックエンドの疎結合化。マイクロサービス化をすることができ、開発の並列分業やテストタブルなど得られる恩恵も多いですが当然デメリットもあります。それがセキュリティ対策や認証処理。開発ツールなどが発達しフロントからの通信などは傍受される危険性もあり、特に注意しなければならない部分です。例として認証処理のシーケンスを記載します。ディレクトリ構成とアーキテクチャ今回システムリプレイスに採用したアーキテクチャはFluxですがVueにもVuexというFluxアーキテクチャを提供するフレームワークがあります。ディレクトリ構成が決められているわけではありませんので規模に応じて柔軟に構成を変える必要があります。自由な反面、設計次第では保守しにくくもなるのでしっかりと設計する必要があります。下記は今回システムリプレイスで開発したReactのディレクトリ構成です。FluxUtilsで実装しているので、ReduxやVue、Angularでのディレクトリ構成とは異なりますが、参考までに。上記の説明を簡単にするとエントリーポイントApp/App.jsがビルドする際のエントリーポイントになり、ここにルーティングやDomへのアサインを行います。コンテナcontainers/xxxContainer.jsがコンテナとなり、ストアの状態を監視し、ビュー(コンポーネント)に通知します。ビューcomponents/xxxComponent.jsが各ビューとなります。アクションクリエイターactions/xxxActionCreators.jsが各ストアがもつデータへのアクセス起点となります。アプリケーションの規模によっては直接ビューからディスパッチャに処理を行うこともありますが、データの前処理を行いたい場合は実装するとビューから汚れません。ディスパッチャdispatcher/xxxDispacher.jsがディスパッチャとなり、各ストアでリッスンしているイベントをエミットします。ストアstores/xxxStore.jsが各データを管理しています。ディスパッチャ経由でデータの更新がされ、更新後ビューにコンテナ経由で通知されます。ヘルパー(独自追加)helpers/xxxHelper.jsが各データやオブジェクトに対して行う処理をまとめてビューとロジックを疎結合にします。データマネージャー(独自追加)data_managers/xxxManager.jsfが非同期処理部分の実装を行います。レコード(独自追加)records/xxx.jsが通信のレスポンス結果をオブジェクトモデルとして定義します。ビルドとデプロイ本番運用するためには、デプロイとビルドは同時に自動実行するよう仕組みを作っておくべきです。ビルド後に生成するファイルは以下のようなものが一般的だと思います。コマンドに設定して出力できるようにしておきます。jest",}またデプロイ自動化にはCircleCIやTravisCIなどgithubと連動したCIサービスを使う。ビルドとデプロイを実行するコマンドAPIを用意する。まとめSPA開発は最近多くのサービスやプロダクトに採用されることも多く、フロントエンド開発においては積極的に採用できるまでに成長した開発スタイルです。ReactやAngular、VueといったフレームワークライブラリはそのSPA開発を加速させる素晴らしいツールです。CREATIONMARKETINGDMP/AIRSS購読ファンになるページトップに戻る株式会社PLAN-Bは確実な成果に特化したデジタルマーケティングカンパニーです。企業に役立つ情報を発信します。