プログラムのお話

ロボットの為のVue.js 簡単なwebサイトを作る プロジェクトの作成

ロボットの為のVue.js実践編の第一弾は実際に簡単なWebサイトを作っていきます。作るwebサイトはカテゴリごとに写真を表示出来るとても簡単なものです。

今回はプロジェクトの作成方法について書いてきます。プロジェクトの作成する際に色々とよく分からない設定をしていくのですが、根気よくやっていきます。

Vue UI でプロジェクトを作成しよう

コマンドラインでもプロジェクトの作成は出来るのですが、Vue UIで作成したほうが解りやすいのでVue UIで作成します。

Vueプロジェクト専用のファルダを作成し、Vue UIを起動します。

//Vueプロジェクト用のファルダを作成する
$ mkdir vue-project
$ cd vue-project
$ vue ui

ブラウザが開いたら以下の流れので設定していきます。

  • Vueプロジェクトマネージャー画面で作成を選択する

  • プロジェクトを作成するファルダを選択する

先程作成したファルダ(vue-project)を選択します。

  • 名前、パッケージマネージャー、追加オプション、Gitレポジトリを設定する
プロジェクトファルダsamplewebsite任意のファイル名
パッケージマネージャーnpmパッケージマネージャを選択します。前回、npmでVueCLIをインストールしたのでnpmを選択します
追加オプションなし同名のファルダがある場合に上書き保存します
GitレポジトリなしGitレポジトリの設定です

  • プリセットを選択する

プリセットを選択します。プリセットは初期では、デフォルト、手動、リモートプリセットがあります。デフォルトは基本的なプラグインのみインストールします。リモートプリセットはgitレポジトリからプリセットを取ってきます。手動は好きなプラグインを自由にインストールできます。今回は手動でプラグインをインストールしていきます。

  • 追加したいプラグインを選択する

プラグインの簡単の説明は下の表のようになります。今回は、簡単なwebサイトを作成するので最低限のプラグインのみで済まします。インストールするプラグインは赤いマーカーのやつです。

Babeljavascriptの古い書き方のコードを新しいコードの書き方に変換する。
TypeScript簡単にいうと静的型付けが出来るJavascript
PWA Supportスマートフォン用のWebサイトをAppストアやGoogleplayストアなどのアプリのように使えるように出来る仕組みをサポートする
RouterVue.jsの公式ルーターです。
http://samplewebsite/page1
http://samplewebsite/page2
のようにルーティングできます
VuexVue.js公式の状態管理をするライブラリです。セッションの管理などに使えます。
CSS Pre-processorsCSSメタ言語
Liner / FormatterJavascriptの書き方やチェックしてくれます。
バグや、インデント、括弧、スペースなどをチェックしてくれます。
Unit Testing単体テスト
E2E Testing結合テスト
設定ファイルを使用するプラグインの管理をpackage.json以外のファイルを使用するかどうか

  • 先程追加したプラグインの詳細設定をする

先程選択したプラグインの詳細設定をしていきます。

Use history mode for routerRouterでヒストリモードを使用するかどうか
あり
Pick a linter / formatter configコードのチェックにどの基準を使うか選択する。オートフォーマットするかどうか
どの基準 => Airbnb ,standard config
オートフォーマット => Prettier
ESLint + Prettier
Pick additional lint featureLintの実行タイミング
どのタイミングでコードのチェックを行うか
Lint on save

  • プリセットを登録するか選択する

プリセットを登録するか選択できます。プリセットを登録すると先程までの設定が保存されて、次回以降プロジェクトを作成する際に流用できます。今回は登録せずにやっていきます

  • 完了

プロジェクトの作成が終わりました

正直、作成中にこのプラグイン何だろうと思うことが何回かありました。でも、調べることも勉強になるので良かったです。でも調べすぎに注意です(笑)。ハマり過ぎて気づいたら1時間とか平気で過ぎてしまいます。