Go to Qiita Advent Calendar 2024 Top
LoginSignup
13
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@taiju59in株式会社 フェリックス

やさしめ Vue.js チュートリアル(1) ~ Vue CLI でプロジェクト作成と Linter の設定

Last updated at Posted at 2019-04-27

はじめに

社内で Vue.js 勉強会(ハンズオン)をやるため作成した資料を
せっかくだからと公開したのがこの投稿となります。

今更？

Vue.js のチュートリアルは世の中に溢れかえっていますが
個人的にちょうどいいやつが見つからなかったので書きました。

本稿は自分が見たいくつかのチュートリアルに対して

  • 手を動かす :hand_splayed:
  • 教わらないと見逃しそうな話 :ear:
  • やさしさ :heart:

を重視したつもりです。
逆に、できる人 が 短時間 で 知識 を得るには
向かないと思うのでご了承くださいませ。
(とは言え、易しさは相対的なので難しいですね)

想定読者

  • 生の HTML/CSS/JavaScript (+ jQuery) はなんとなく書いたことある
  • もう少し複雑な Web アプリはどうやって作ればいいのかわからない
  • 難しい説明をされても頭に入らないので、手を動かしながら学びたい

ゴール :checkered_flag:

第1回~第4回までで億万番煎じの TODO アプリを作り、
第5回は周辺知識について学習します。
(今回は1記事目)

TODO アプリ

目次

ハンズオン

さて、前置きが長くなってしまいましたがここからが本題です。

1. 事前準備

  • (必須)Node.js のインストール
    • Mac は Homebrew 経由で brew install node で OK
  • (推奨)Yarn
    • Node.js についてくる npm で代用できるのでなくてもOK
    • Mac は Homebrew 経由で brew install yarn で OK
  • (推奨)Visual Studio Code
    • 好きなエディタで OK (あとで vscode で自動整形する方法を紹介します)

※筆者の環境は以下

$ sw_vers 
ProductName:	Mac OS X
ProductVersion:	10.14.4
BuildVersion:	18E226
$ node -v
v11.13.0
$ yarn -v
1.15.2

注記

  • npm 使う人向けの読み替え
    • yarn add xxxx => npm install xxxx
    • yarn global add xxxx => npm install -g xxxx
    • yarn serve => npm run serve
    • yarn build => npm run build

2. Vue.js のプロジェクト作成

@vue/cli インストール

  • yarn global add @vue/cli
確認
$ vue -V
3.5.5

バージョンは多少違っても OK :ok_hand:

2. プロジェクト作成

  • プロジェクトを作りたいディレクトリに移動

  • vue create lovely-vue

    • lovely-vue の部分は任意のプロジェクト名を設定

  • どの機能を入れるか聞かれるので、それぞれ以下のように選択

    • スペースキーで選択、エンターキーで次へ
    • npm or yarn を聞かれたら使っている方を選択しましょう
Vue CLI v3.5.5
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

議論のありそうな箇所について触れておきます :point_up:

  • Pick additional lint features
    • 「Lint and fix on commit」を有効化するとコミット時自動整形が入り、
      その分コミットが遅くなります
    • CI で検証する場合は不要と思います
    • 今回は初心者や JavaScript を書き慣れていない人がチームに参加することを想定し、
      熟練者にバチボコに殴られる前に有効化するのが得策と考えました
  • Pick a linter / formatter config
    • どれがいいのかあんまりわかってません。意見をお持ちの方はコメントくださいますと幸いです

確認

  • cd lovely-vue
  • yarn serve
  • 表示されたリンク(たぶん localhost:8080)をブラウザで開く

:zap: 動作 :zap:
以下のような画面が表示されれば OK!! :raised_hands: :raised_hands:

スクリーンショット 2019-04-14 0.02.30.png

:book: ソースコード :book:
https://github.com/taiju59/lovely-vue/commit/11657ad008fb3c0156f6c9e4e60b0a2fb3aaa1dd

  • さらに、 Welcome to Your Vue.js App の部分を編集して保存すると、その内容がリアルタイムに見た目にも反映されるはずです

3. Linter の設定

vscode 設定

(vscode 以外をお使いの方は読み飛ばしてください)

拡張機能

画面左の スクリーンショット 2019-04-14 0.18.21.png を押して拡張機能をインストールします。
以下2つを検索してインストールしましょう

  • Vetur
  • ESLint
settings.json の編集
  • settings.json を開く

※vscode 1.33.1 且つ Mac の場合、設定を開く(⌘,) → 画面右上 {} ボタン

  • settings.json を編集
{
    // ESLint で保存時自動整形
    "eslint.validate": [
        "javascript",
        {
            "autoFix": true,
            "language": "vue"
        }
    ],
    "eslint.autoFixOnSave": true,
    // vscode デフォルトの自動整形との競合を避ける
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[typescript]": {
        "editor.formatOnSave": false
    },
    "[vue]": {
        "editor.formatOnSave": false
    }
}

確認

  • Vetur
    • src/App.vue を開いてみる
      => 色が付いていればOK :ok_hand:
  • ESLint
    • セミコロンを外してみる
    • シングルクオートで文字列を囲んでみる
      => 保存 => 自動整形されれば OK :ok_hand:

Lint and fix on commit の確認

(Gitがわからない人は読み飛ばして OK です)

コミット時自動整形される機能の確認。

確認のため、一旦 eslint.autoFixOnSave を false にする

  1. セミコロンを外して保存 => コミット => 自動整形される :wrench:
  2. export default { の { を削除して保存 => コミット => エラーが出てコミットされない :no_entry_sign:

eslint.autoFixOnSave を true に戻す

※検知対象は変更があったファイルのみのため注意

.eslintrc.js 修正

特に template 部分も自動整形/警告されるように、以下の設定をします。

  • .eslintrc.js 修正

    • vue の規約を厳しくしてみる

      • essential => recommended
      - extends: ["plugin:vue/essential", "@vue/prettier"],
+ extends: ["plugin:vue/recommended", "@vue/prettier"],

この状態で App.vue で保存してみると自動整形が走り、
name: "app", が name: "App", となります。

:book: ソースコード :book:
https://github.com/taiju59/lovely-vue/commit/c90829fb02c5b8b5f9354d831cbed8e0bbd4a4ed
※ついでに HelloWorld.vue も修正していますが必須ではありません

補足

  • 開発中は常にブラウザのデベロッパーツールでコンソールを表示しておきましょう
    • エラーが表示されている場合はソースコードの記述を見直しましょう
    • ただし、記述途中のに保存したことで出ているエラーもあるので、
      疑わしい場合はページをリロードしてまだエラーが出るか確認しましょう

おわりに

ちゃんと最後までたどり着けましたか？

疲れちゃった人もいるかもしれませんが、
次からようやく本番、 Vue の記法を学んでいくので
もう少しお付き合いいただけますと幸いです。

やさしさ を重視しているので、わかりづらいところなどあれば
ぜひコメントや編集リクエストをお願いします :smiley:

次回 :point_right: やさしめ Vue.js チュートリアル(2) ~ データとイベントの制御

Lovely Vue :heartbeat:

参考リンク

  • Vue.js 公式: https://jp.vuejs.org
    • 日本語だしめちゃわかりやすい。これからたくさん利用することになると思います
    • 本チュートリアルでも頻繁にリンクを貼りますが、
      本チュートリアルでは単一ファイルコンポーネントで実装しており、
      ドキュメント内の記述とところどころ異なるため、
      適宜読み替えてください
  • Vue CLI: https://cli.vuejs.org
    • 今回用いる Vue.js プロジェクトを作成するための CLI ツールです
13
14
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?