フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

シングルページアプリケーション(SPA)の構築手順

前回の記事ではSPAとはどういったものなのかをご紹介しましたが、今回はSPAの構築手順となります。
用途によって多少異なりますが、おおむね以下のようなものが一般的といえます。

開発環境の構築にあたって「フレームワーク」を選択する

SPAを構築するにあたって、「どのフレームワークを選択するか」が最初の問題になります。その選択肢としてはReact、Angular、Vue.js、Ember.js、Plymerといったものがあげられますが、それぞれ特徴や得意分野があるので注意しましょう。
フレームワークの選択にあたっては、実際に開発に携わるチームメンバーのスキルセットやこれまでの経験等をよく判断した上で、知見があり、開発が行いやすいものを選択することが確実な開発を実現する第一歩といえます。

開発環境の構築方法

一般的に、SPAの開発ではBabelやwebpackといったツールが必要となります。
そのため、それらを動かすNode.jsをインストールするところからスタートします。
Node.jsは公式サイトが用意されていますので、そこからインストーラをダウンロードしてインストールする方法が確実です。

JavaScriptのビルド環境設定

続いて、Babelやwebpackのインストールです。

Babelは次世代のJavaScriptの機能をブラウザのサポートを待たずに使用できるようにするもので、ECMAScript2015以降のコードをECMAScript5のコードにトランスパイルします。
また前述のフレームワークでReactを選択していた場合、Reactで利用するJSXの記述変換にBabelのプラグインを利用しますので、このタイミングでReactもインストールするとよいでしょう。

webpackはモジュールバンドラと呼ばれるツールであり、複数のJavaScriptファイルの依存関係を解決し、1つのファイルにまとめてくれます。
また、loaderという仕組みを利用することで、モジュールをバンドルする前にBabelを含む様々な変換処理を行ったり、JavaScriptのみならず、HTMLやCSSファイルを扱ったりすることが可能となります。
ローカルで開発をする上で非常に強力なwebpack-dev-serverもインストールしておくとよいでしょう。

次回は、開発をすすめるにあたって必要な設定などをサンプルを交えながら解説していきたいと思います。

【相談無料】案件の紹介や自身のキャリアについてなど相談したい方はこちら
スタートアップ、ベンチャー、大手・上場企業、VCなどIT業界の人脈豊富なコンサルタントがサポートさせていただきます

Return Top