webアプリを独力で作る体験をするのだ[vue-cliを使って敗者の環境構築]

Vue.js

React.jsと肩を並べる人気フレームワークで、 React.jsよりも学習コストが低めと聞いて使うことを決めました。

導入

公式ドキュメント

とりあえずチュートリアルでもやろうかなと思い、 公式ページを訪問したら、公式ドキュメントがめっちゃいい感じに流れに沿った解説だったので、 しばらく読み進めることにしました。 しかしながら、手を動かしながらじゃないと楽しくないし、眠くなるので、 先に環境を整えて遊びながらやっていこうと決めました。

環境構築

思ったよりも最高に大変でした。 まずは 単一コンポーネント という概念があるということから難関は始まるのですが、、、

単一コンポーネント

普通にhtmlとjsを分離して、js側にvueを使って書いていく方法と、 .vue拡張子のファイルにhtml, js, css全て詰め込んで部品を組み立てていく方法の 二種類が存在します。 単一コンポーネントの方がvueっぽいし楽しそう！ しかもドキュメントが見た所多そう！！(Qiita斜め読み調べ) ということで単一コンポーネントと呼ばれる .vue拡張子を基礎とした書き方でいくことに決めました。

vue-cli

さて、環境構築に入るのですが、 まずはフレームワークのインストールですね。 なんとなくnpmでやればいいかなと思って

npm i -S vue

えい！これで入りました。あら簡単だ！ ここまではよかったのですが、今回 単一コンポーネント を扱うため、 ビルドツールが必要とのことです。 Qiitaから察するに webpack が人気そう！ということでwebpackを導入。 webpackの設定をvueのsample repositoryを参照に書いていく。
...ムズイ。
今になって思うとバベルが何かあまりわかっていなかったことが敗因と思われるのですが、 結論から言うと諦めました。

CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、CLI を使用する前に、ビルドツールなしでガイドを参照することを強くお勧めします。

公式に上記のように書かれており、 使ってはいけないと思っていた vue-cliと呼ばれるcliツールを使用することにしました。

npm i -g vue-cli
vue init webpack my-project
cd my-project
npm i
npm run dev

まぁ、便利ですよね、そりゃ、 一瞬で環境構築が終わってしまいました。 webpack.configが書けなかった時点で、 ビルド周りの理解はとりあえず後回しにすることを決め、 とりあえずはこのテンプレートのなかでできることを増やしていく方針にしました。 これにて導入は完了？

最初に入って学習すべきもの

babelとは何か

基本的には将来的に実装されることが決まっているが、 ブラウザがまだ対応していないESバージョンを書かせてくれる。 そして、ビルド時によしなに対応させてくれるっぽい。 新しいESまで勉強できて良いかもしれない。 altJSの一つとしてしか認識していなかったため、 勉強するの面倒としか思っておらず避けようとしていたのですが、 触れられてよかったと今は思っています。

webpackの簡単な使い方

vue-cliを使っていれば

# 開発用簡易サーバー起動
npm run dev
# 本番用ビルド
npm run build

さえ覚えていれば、正直大丈夫な気もします。 ただ、configディレクトリに入っている dev.env.jsなどを用いて環境変数を設定できるので、 それらの使い方だけは見ておくと便利かと思います。 自分はbackendのurlをここで分けています。

eslintとは何か

これはつい最近、タイポが多すぎて勉強していたので面くらわずにすみました。 簡単に言うと書き方が汚いと小煩く叱ってくれるソフトです。 エディタはAtomを使っているのですが、 Atomだと書きながらリアルタイムでeslintが添削を行ってくれます。 Atom使えないシェルでいちいち怒られるか、ブラウザで毎回怒られることになりそうなので、 IDE万歳と思いました。

test(まだ何も触ってない)

これからやります。 とりあえずtestは開発とともに書き溜めるものと言う認識のみあります。 認識だけで実際に書いていないので私はクソです。

まとめ

とりあえず何か作るたいならvue-cliめっちゃ便利