インスタグラムのQRコード（ネームタグ）の表示・加工方法から、スキャン・シェア方法まで解説します
インフルエンサーマーケティング
2022.12.23
SPAを開発する際の重要ポイント
writer
2018.04.06
2022.12.23
最近、社内でReactを使ってシステムリプレイスと新規機能開発を行ったので、その知見をまとめたいと思います。
※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をJavaScriptで書くこともありますが、今回はそのケースではありません。
フレームワーク
昨今のJSのフレームワークはフレームワーク戦争と言われるほど多種多様なフレームワークが出ては消えを繰り返し今に至っています。
jQueryやprototype.jsなどのフレームワーク(ライブラリ)が出始めた2005年から比べるとフレームワークを使わないという選択肢はもう無いでしょう。丸腰のJSでDOMをいじっていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。
人気フレームワークの台頭になっている
- React(+Redux、Flux)
- Vue(Nuxt)
- Angular (2以降)
に関しては運用に乗せたのはReactのみになります。開発段階では選択肢に上がっていた同一のアプリケーション(プロトタイプ)を開発してみて感じたことは、コンポーネント指向、レンダリングの最適化、アーキテクチャなどの共通点があり、また開発環境においても各フレームワークにサポート用のCLIツールがあり、開発環境の構築に時間を要することなく開発初動が早いということです。
開発環境
フレームワークでも触れましたが、公式が提供しているボイラープレートを使用するのがおすすめです。
Reactの時は、create-react-app
Vueの時は vue-cli
Angularの時は angular-cli
基本は yarn install yarn start
ルーティング
部分的にReactアプリやAngularアプリにする場合はルーティングは必要なく指定DOMに対してアサインしますが、ページ全てをSPAとする時はルーティングは必須です。
またルーティングはルーティングモジュールを使いましょう。
Reactの時は、react-router
Vueの時は、vue-router
Angularの時は、app.component.tsの@RouteConfig
CSS
Bootstrapなど多くの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が通信のレスポンス結果をオブジェクトモデルとして定義します。 |
ビルドとデプロイ
本番運用するためには、デプロイとビルドは同時に自動実行するよう仕組みを作っておくべきです。
ビルド後に生成するファイルは以下のようなものが一般的だと思います。(webpack利用の場合)
|
1 2 3 4 5 |
public/ index.html assets/ styles/main.css scripts/main.bundle.js |
上記のファイルを、ビルドするコマンドを事前に準備しておき、npm-scriptのbuild などのコマンドに設定して出力できるようにしておきます。
例)
|
1 2 3 4 5 6 7 8 9 10 |
package.json { "name": "testProject", "version": "1.0.0", "main": "app/App.js", "scripts": { "start": "NODE_ENV=development node_modules/.bin/webpack-dev-server -d --progress --colors", "build": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors", "test": "BABEL_JEST_STAGE=0 jest", } |
またデプロイ自動化には
- CircleCIやTravisCIなどgithubと連動したCIサービスを使う。
- gitのwebhook + ビルドとデプロイを実行するコマンドAPIを用意する。
などの方法があります。
まとめ
SPA開発は最近多くのサービスやプロダクトに採用されることも多く、フロントエンド開発においては積極的に採用できるまでに成長した開発スタイルです。
ReactやAngular、VueといったフレームワークライブラリはそのSPA開発を加速させる素晴らしいツールです。1つ学べば他のライブラリにも通ずる部分があるので一度試してみてはいかがでしょうか？
2016年10月、中途採用でPLAN-Bへ入社。自社DMPの開発を行なうJuicer事業部にて、機能開発、フロントエンド領域を担当。
【５分でわかる】GTM(Googleタグマネージャー)の設定方法
インターネット広告
2023.12.22
2024年3月のGoogleコア アップデートが開始！影響や対策について解説
SEO対策
2024.04.10
2023年｜国内の検索エンジンシェア率ランキングTOP10！ Google以外に注目すべきは？
SEO対策
2024.04.17
GA4でページビュー（PV数）を確認する方法！調べ方の手順と見方をスクショ付きで解説！
SEO対策
2024.04.17
【2023年最新版】初心者でも簡単！Instagram広告の出し方完全ガイド
インターネット広告
2024.03.05
Webサイトで使用される定番フォント9選！ フォントの選び方や良いフォントの特徴も解説！
Webサイト制作
2023.05.11
404 not found（404エラー）とは？原因と解決方法・効果的な404エラーページの作り方
SEO対策
2024.04.25