リンク

いざ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