リンク
いざ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にアクセスしてみてください。
とりあえず、開発環境が構築されました。
ちょろちょろっと触ってみてください。