Vue + TypeScript + Babel + Bulma + webpackで作るSPAでレスポンシブなフロント開発1(開発環境構築編)


リンク

いざjQueryから脱出してモダンなフロント開発をしたいと思っても、どこから勉強すればいいのかわからないかと思います。
そんなときはgithubにあるプロジェクトをクローンしてサンプルを動作させて、なんとなく勉強することが理解しやすいのかと思ったので、今回はサンプルを動作させつつ広く浅く説明します。
これらを使って、SPA(Single Page Application)でレスポンシブなサイト構築を目指します。

ソースはこちら
落としてみてください。

開発環境の構成と説明

とりあえず、以下の構成で説明します。

ライブラリ バージョン 説明
Vue 2系 view層のJSフレームワーク
TypeScript 2系 静的型付けのためのトランスパイラ
babel 6系 es2015を書くためのトランスパイラ
webpack 2系 モジュール管理 
sass 6?系 CSSプリプロセッサ
gulp 3系 タスクランナー。自動コンパイル。ビルド。
npm 5.7系 JS,CSSのパッケージマネージャ
Bulma 0.6系 CSSフレームワーク グリッドデザインでレスポンシブサイトを作れる

セットアップ

macで動作させるためのコマンドです。
windowsの場合はググってみてください。
セットアップはソースをダウンロードした後に一度だけコマンドラインで実行すればOKです。

$ brew install node
$ npm install -g gulp
$ npm install

起動方法

起動させたいたびにコマンドラインでgulpの実行が毎回必要となります。
今回のタスクはwebpack dev serverが起動します。
webpack dev serverは開発用のサーバで、本番ではnginx等を使うとは思いますが、開発時にはwebpack dev serverを使っていきます。

$ gulp

これでwebpack dev serverが立ち上がりました。ブラウザで以下のurlにアクセスしてみてください。

とりあえず、開発環境が構築されました。
ちょろちょろっと触ってみてください。

github