Vue.jsをインストールして実際に触れてみよう!2019.04.08むつたくスワローに入社してはや1ヶ月。スワローライフを満喫しているたくやです!月日が経つのはあっという間ですね。先月はNode.jsの勉強しつつ、それを使ってシステム構築して、Gitのことも少しずつ理解して(Git使ったことないんですよ・・・、今まで人間Gitですw)ここを見ながらWordPress環境を構築して・・・、と頭爆発しそうですが自分に無い知識をどんどん得られていて、満悦至極ですwちなみにデスクに積み上げられてる本たちはこんな感じ覚えないといけないことがたくさん・・・wさて、本題ですが、Node.jsをそこそこに今月はVue.jsについて勉強しております。そこで今回は、Vue.jsの世界に触れていきたいと思います!とりあえず、インストールからサンプルの起動を行います。やることVue.jsとは?Nodo.jsのインストールVue.jsのインストールプロジェクトの作成Vue.jsとは?ざっくり説明しますw数多あるJavaScriptフレームワークの一つです。Vue.jsはMVVMを設計基盤とし採用されていて、以下のような構成になっています。Model:データ管理(ViewModelの担当外全てを担当)View:ユーザインターフェースViewModel:Model→Viewへの出力データを渡し、View→Modelへの入力データを渡す(・・・たくやは上記のように理解しています。)詳しくはWikipediaを参照くださいまし。Vue.jsについて調査していると以下のことが言えるようです。フレームワーク独自の機能が少なく、学習コストが低い柔軟性があり、変更が容易にできるコンポーネント思考で、再利用可能なコンポーネントを作成し、開発効率アップ何より日本語ドキュメントが豊富!(公式サイトも日本語がありますw)まだ、実案件で使用したわけではないので、上記の事柄は実感できませんが、学習段階でもわかるのは、学習コストの低さです!HTMLとCSS、JavaScriptの基本さえ押さえていれば、誰でもVue.jsを扱えるのではないか!と思えるほどです。それでは、実際にVue.jsをインストールしましょう!Node.jsのインストールVue.jsを使用するには、「npm」コマンドがインストールされていることが前提です。インストールされていない方は、必要なものをこちらの記事に記載してますので、(千田さんのBlogですが)読んでみてください。Manager」の略です。Vue.jsのインストールさぁ!いよいよ本稿主役であるVue.jsをインストールしていきましょう!Vue.jsを使う環境を構築するために、「vue-cli」を(今回は、最新版の3.0系を)インストールします。@vue/cliインストール後、バージョンを確認します。ここでエラーになる場合、npmのアップデート、sudoで実行してみてください。作業するディレクトリに移動し、プロジェクトを作成します。<ProjectName>上記実行すると、プロジェクトで使用するプラグインを聞かれます。今回はデフォルト(Babel、ESLintがインストールされます)のままで大丈夫ですが、Manually・・・を見てみましょう。選択するとこんな感じになります。作成するプロジェクトに追加するプラグインを選択できます。Pre-processors、Linter/formatter」があれば十分かなと。Enterキーを押下すると、次は下の画面が表示されます。Routerのヒストリーモードを使用するかどうか確認されます。APIを使用してシングルページアプリケーションの場合でも、ページのリロード無しにURL遷移を実現することが出来ます。(リンクの#が完全URLになりますよーみたいなことです)詳細は公式サイトのHTML5Historyモードを参照ください。pre-processer使用するCSSプリプロセッサを確認されます。config使用するLinterとコードフォーマッターの選択ですね。TypeScriptを使用する場合は、TSLintが出てきたと思います。何がいいとか、何が最適とかまだたくやはわかっていませんwまだあります。features追加のLint機能の選択です。commit(コミット時実行)の2種類がありますが、両方がいいと思います。etc.?Babel、PostCSS、ESLintなどの設定をどこでするかを確認されます。「専用の設定ファイル」か「package.json」が選択可能です。projects?今回の設定内容を次回以降のプロジェクトで使用するために保存しておくかを確認されます。流用できるので、保存した方が楽ですね。as保存する場所を聞かれますので、保存するディレクトリを入力してください。するとインストールが開始されますので、気長にお待ちください。ちなみにプラグインを追加したいときは、以下のコマンドで可能です。そのときは、プロジェクトディレクトリで実行してください。<PluginName>また、今回はこれだけでしたが、手動で選択したプラグインが他にもある場合、同じように確認されることがありますので、都度適当に選択or入力していってください。さぁこれで簡単なプロジェクトが完成しました!作業ディレクトリから今回作成したプロジェクトディレクトリに移動して、アプリを起動します。serve起動まで少々長いので、気長に待っててください。完了すると、ターミナルが切り替わりますので、http://localhost:8080にアクセスしましょう!Vue.jsのこんな感じのサンプルが表示されます。ちなみにプロジェクト管理のGUIも存在してます。uiここでプロジェクトにプラグインの追加/削除を行ったり、ビルドしたり・・・と色々できるのでコマンドが苦手な方には嬉しいかもしれませんwということで、第1回目はこんな感じになっております。?説明不足なところもあったかもしれませんが、簡単にプロジェクトが作成、起動ができました。次回は、今回作成したサンプルの解説と少し手を加えて行こうと思います。