(出典：https://gihyo.jp/book/2018/978-4-7741-9706-7)
記事の概要💁♀️
- 勉強会に参加した感想と備忘録
- 通称パンダ本 p138〜
- 第８章 Vue.js入門&実践活用を読みながら、学んだことを残します
誰向けか😗
- あんまり勉強会に参加したことがない人
- Vueの概要を知りたい人
- Vueの環境構築をしてみたい人
Vue.jsの概要
Vueとは
- UIを構築するためのプログレッシブフレームワーク
- 中国出身のEvanYou氏が開発
Evan You 氏
- Googleのフロントエンドエンジニア
- AngularJSとか
- JavaScriptフレームワークの開発元Metor経た
- Vue.jsに注力するため独立
Vue.jsの４つの特徴
1.テンプレートとCSS
-
テンプレート言語はHTML
- 新たなDSLやプリプロセッサ（PugやHaml）を学ぶ必要がない
- 既存のWEBアプリケーションの移行コストが低い
HTMLとCSS共通して、プリプロセッサを選択できるという特徴がある
2.リアクティブシステム
- あるデータを変更した際に、変化がデータのフローに沿って伝播して関連するデータや表示なども書き換わる
- モデルはプレーンなJavaScriptオブジェクト
- モデルを変更するときにビューを更新する
3.コンポーネント
- 独立した小さな部品に分割して再利用可能にする
- 開発や管理、更新が行いやすい
4.段階的な機能の取捨選択
- Vue.jsそのものは、コンポーネントを作成して描画するためのビューレンダリング用のライブラリ
- Vue RouterやVuexなどのさまざまな機能を使うことができる
- 上記を使うことで小さくコンパクトに、大規模に開発したいときなどスケールを合わせることができる
Vueをはじめるには
主に３つの方法がある
- CDN
- ダウンロード（ソースコードをプロジェクト内部に埋め込む）
- Vue CLI (npmでインストールしていく)
Vue CLIを推奨（公式）
- 必要な環境が簡単に整う
- 便利機能が使用できる
この記事では、Vue CLIを使って環境を構築していきます！
Vue CLIをインストール(npm)
$ npm i -g vue-cli
無事にインストールできたか確認
$ vue --version
#=>2.9.6
プロジェクトを作成する
vue init webpack vueChat
- ↓エラーになる場合
Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
- 参考にした記事
- 記事を確認すると、nodeのバージョンを6以上にあげればOKとのこと（ちゃんと調べてなくてすみません。）
# 現在のNodeのバージョンを確認
nodebrew ls
v5.3.0
v9.10.1
v10.1.0
v12.12.0
current: v5.3.0
残念ながら、5.3.0でした
# とりあえず5よりもあげるようにする
nodebrew use v9.10.1
- これでエラー出なくなりました！
引き続き開発環境を作ります（初期化）
// vueChatというプロジェクト名にしました
$ vue init webpack vueChat
# ここから作成するプロジェクトについて色々入力していく
? Project name vuechat
? Project description A sample chat of Vue.js
? Author azumax
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vueChat".
- インストールが完了したら作ったディレクトリに移動して、npm実行する
# To get started:
$ cd vueChat
$ npm run dev
- ブラウザにアクセスしてみる
(http://localhost:8080)
- 上図のような画面が表示されれば、ひとまず開発環境構築は成功です！
ディレクトリ構成の確認
開発環境のディレクトリ構成を確認してみましょう
-
index.html
- プロジェクトの起点になる
- 表示用HTML
-
src
- 作成したアプリケーションのソースコード格納
- 作業用ディレクトリ
-
src配下のディレクトリ
- main.js
- アプリケーションの起点。エントリーポイントとなるファイル
- main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
## ライブラリやコンポーネントをインポートする
## この3つは大事そう！
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 以下のコードでインスタンスを作成するとVueアプリケーションが実行される
new Vue({
el: '#app', #=> 出力・描画されるHTMLの要素を指定する。index.html
router, #=> routerの設定
components: { App }, #=> 使用するコンポーネントの定義
template: '<App/>' #=> 描画
})
- インスタンスの引数のオブジェクトの各属性で各設定を行う
componentsには、使用したいコンポーネント
{key: コンポーネント}
で登録する定義されたkeyが、templateで使用するコンポーネントの要素名になる
components: { Hoge: App }, #=> keyを指定する
template: '<Hoge/>' #=> 要素名も合わせる
-
build
- webpackなどトランスパイルに必要な設定ファイルが格納される
npmコマンドについて
-
npm run dev
- ファイル更新すると表示されているページも更新されるホットリロード機能を持ったローカルホスト立ち上げコマンド
-
npm run build
- 実行すると「distディレクトリ」がプロジェクト直下に作成される
- distディレクトリには、minifyされたindex.htmlとかトランスパイルされたJSとCSSが格納されたstaticディレクトリが作成される
-
基本的には、
- ローカルホスト立ち上げなら run dev
- トランスパイル実行もしたければ run build
単一ファイルコンポーネント
- Vue.jsの醍醐味です
- 勉強会の時間内で全て終わらなかったので、途中で終わってしまいます
- 時間を見つけて続きを書いていこうかと思います🙏
-
1つのファイル内で3つのブロックに切り分けて記述を行う、Vue専用の仕組み
- JavaScriptのロジック
- テンプレート
- スタイル
拡張子は「*.vue」
-
コンポーネントを複数に分けると、色々煩雑
- すべてのコンポーネントに一意な名前を強制する
- エディタでのシンタックスハイライト使えない
- 複数行HTMLでバックスラッシュ、プラス記号が強要され、可読性さがる
- ビルド処理がないことでHTMLの制限をうける
これらの問題を解決するのが、単一ファイルコンポーネントのしくみ
最後にポエムさせてください🙇♂️
- 以前にVueの開発環境構築をしたときは、codesandboxを使ったのですが、今回はVueCLIで構築をしました
- 参考：【勉強会ポエム】Vue.js×Firebaseで簡単なTwitter風アプリケーションを作ろう
- 勉強会というタイトルではありましたが、内容はもくもく会でした
- 勉強会だと思い（ハンズオンやセミナー形式と勘違い）来場した方も複数いらっしゃり、もくもく会とわかったタイミングで帰宅する姿が見られました。
- 私自身は、もくもくやりながら、何か質問ができればいいなーくらいに考えていたので🙆♂️
- 主催者の方は何かつまずいていないか常に気にしてくれて、いい人でした！
- コミュニティ作りに力をいれているような印象を受けました！