Vue.jsを使った商用にも耐えれるフロントエンド開発環境を無償で手軽に整える手順。
最近、フロントエンドの共通処理方式を検討してくれと依頼されたため、前から気になっていたVue.jsを使ってみたかったこともあり、
思い切って提案したら普通に通りました。なので毎日Vue.js三昧です。楽しいです。
ただ、商用なシステムなので失敗は許されないので、いろいろと不安はありますが、いまのところうまく行ってます。
Vue.jsは単体で使用するとただのjsファイルなので、cdnとかで普通のhtmlに読み込めると使えるわけですが、
商用となるとフォルダ構成、ビルド環境、テスト環境とかどうしようか迷うわけです。
そしてチームで開発するため、その手順や運用が簡単じゃないとうまくいきません。
eclipseのテンプレートプロジェクトみたいなものがあればいいのに…と探すとありました!
ここではVue.jsを使った手軽な商用でも使える開発環境を構築する手順を記載します。
スペックにもよりますが、およそ30minくらいで構築が可能だと思います。
また、インストールなどの細かい手順はここでは記載していないのでググってください。
※今回の開発環境は期間が短く、また若手(スキルが低い)メンバーで開発をする必要があったもあって、
Nuxt.jsやVuexといった学習コストが高そうなものは採用しておりませんのでご了承ください。
その弊害でイベントの伝播で多少バケツリレーにはなりましたが、許容範囲だったと思います。
- 必要なソフトをいれる
- Visual Studio Codeに拡張機能をいれる
- VSCodeを起動してVue CLIをインストールして起動する
- vueプロジェクトを作成する
- サーバを起動する
- ソースコードを確認する
- 最後に
必要なソフトをいれる
必要となるソフトはまずはVisual Studio Code(VSCode)とNode.jsです。
以下からダウンロードしてそれぞれインストールします。
Visual Studio Codeに拡張機能をいれる
VSCodeは拡張機能をアドオンして使うものなので、最低限必要と思うものだけ記載します。
日本語で使いたいひとは必須です。
Vue.jsをVSCodeで使うときは必須です。vueファイルに対応してくれます。
デバッグするのに必須です。for Firefoxもあります。
リアルタイムにコードの静的解析をしてくれるのであったほうが便利です。
コードを整形してくれます。チームで開発するときはフォーマットがバラバラになるのであったほうが便利です。
上記は必須と思うものですが、ほかにも便利な拡張はあるかもなので必要に応じていれる。
VSCodeを起動してVue CLIをインストールして起動する
きど次にターミナルを開きます。ターミナルメニューから新しいターミナルを選択します。
ここで以下のコマンドを入力します。
npm install -g @vue/cli
次にVue UIを起動するため、以下のコマンドをたたきます。
vue ui
するとブラウザが起動し、Vue UIが起動します。
Vue.jsはie11でも動きますが、Vue UIはie11だと動かないので注意ください。
vueプロジェクトを作成する
Vue プロジェクトマネージャから作成を選択する。
任意の場所(c:\developなど)を決めて、ここに新しいプロくジェクトを作成するをクリック。
ここではプロジェクト名を「xxx」として作成することにするのでプロジェクトフォルダはxxxと入力します。
次のプリセットの選択は手動を選択します。
次の機能の有効化は以下のものを有効化します。
TypeScriptの有効化は強く推奨します。TypeScriptを使うことでコードをケアレスミスを防げますし、何よりシンプルに書けます。
最後に書いてますが、TypeScriptからJavaScriptへのコンパイルはビルド時に勝手に行われるため気にしなくてもいいです。
私が行った今回のプロジェクトではVuexは学習コストが高くなるため、見送ったので選択していませんが必要に応じて有効化してください。
- Babel
- TypeScript
- Router
- Linter / Formatter
- Unit Testing
- E2E Testing
次の画面でselectのところを以下のように選択します。 Cypressは企業のプロキシで弾かれる場合がありますので、その場合はNightwatchを選択してください。
Pick a linter : ESLint + Prettier
Pick a unit testing solution : Jest
Pick a E2E testing solution : Cypress or Nightwatch
すべて選択したらプロジェクトを作成するをクリック。
必要なファイルをダウンロードするのでそれなりに時間がかかります。
VSCodeのターミナルを見れば動いているので進捗がわかります。
終わったら以下のような画面が表示されます。
サーバを起動する
上記の画面で、左側のメニューの一番下のタスクを選択します。
表示された一覧の一番上にある「serve」を選択し、タスクの実行をクリック。
するとビルドが始まります。下のところに緑のチェックマークが出るまで待ちます。
アプリを開くをたたけばブラウザが起動し、サンプル画面が表示されます。
ソースコードを確認する
VSCodeでプロジェクトフォルダ(xxxの場所)を開くとソースが種類ごとにフォルダに分かれて配置されています。 商用だとプロジェクトの構成は重要になると思いますので、このようにサンプルファイルが予め入っていてそれを 参考に配置すればいい感じになるのはとても便利です。
srcの下にcomponentsとviewsがあります。
componentsには共通部品を、viewsには画面のソースをいれます。
画面ごとにフォルダをきってもいいと思います。
最後に
Vue.js(Vue CLI)のいいところは、簡単にオールインワンで最新の開発環境を構築できるというところだと思います。
TypeScriptといえばjsにコンパイルする環境を構築するのを勉強しなくてはいけないと思っていて
躊躇していた人もVue CLIでビルドをすれば勝手にjsに変換したものをビルドしてくれるし、
VSCode修正したtsファイルも何もせずにリアルタイムにブラウザに反映される。
さらに何もしなくてもデフォルトで今流行りのWebpackでビルドされるので、依存関係を気にせず開発でき、通信量削減にも繋がります。
これでひとまず開発環境は整いました。
あとは開発する上で気をつけることやハマったところを記事にしていきたいと思います。