Vue.jsでWebアプリを作る際に参考になったページ・サイトまとめ

Vue.jsでWebサイト・アプリを作った際に、筆者が参考になったページ・サイトをまとめました。独断と偏見にまみれていますが、初心者から脱初心者くらいの方に参考になりそうなページをまとめています。

公式サイト

はじめに — Vue.js

Vue.js公式のガイド・ドキュメント。

完全日本語化されていて、サンプルコードも豊富で、読み進めていくだけでなんとなくVue.jsの概要がつかめます。ボリュームがそこそこあるので時間はかかりますが、どこかのタイミングで全部目を通すと良さそうです。

全体感

Vue.jsほぼ初心者だけのチームで既存サービスのリニューアルをやってみて得られた知見

Webによくある「とりあえず作ってみた系」ではなく、実際にVue.jsでサービスを作った際の知見が細かく解説されていてる良記事です。実物のサービスを開発した方ならではのハマりポイントや解決策が豊富に解説されています。

なんとなくVue.jsの全体像を掴むことができて、SPA + API形式での運用を考えているなら、このページは必読です。

細かい機能・設定

コンポーネント

【Vue.js】 コンポーネント間の通信について解説

コンポーネント間のデータのやり取りについて、具体的なコードとわかりやすい解説図付きで説明されているので、理解が深まります。

[Vue.js]コンポーネントの親子関係とpropsについて

最初は理解がしづらいdataとpropsの関係などを解説したページ。公式サイトで理解が進まなかった場合は、こちらを読むと理解が深まります。

filter

【Vue.js】フィルタの使い方！テキストの変換処理に！

Vue.jsにfilter機能を実装するやり方を解説した良記事。

テンプレートファイル内で使う単純なやり方から、グローバル登録までほぼ網羅されているため、これを読めばfilterについては概ね理解できます。

transition

Vue iOS-like transitions

iOSのアプリっぽい挙動を再現したVue.jsのサンプルアプリ。アプリっぽいアニメーションでtransitionを学ぶことができます。

そのまま使うのもいいですが、少ないコードで作成されているので、transitionの使い方などを学ぶ参考材料として秀逸でした。

ライフサイクル

Vue インスタンス

公式サイトのインスタンスのライフサイクルダイアグラム。この図は、暗記できるまではデスクトップに保存しておきたいやつですね。

SEO対策

Vue.jsでSPAサイトを作成するチュートリアル【7. メタ編】

Webサイトでは必須のtitleとmetaを動的に変更する方法を解説したページ。プラグインを使った方法です。

vue.js router を 使い 動的に title や meta タグを変更

プレーンなJavascriptで書く方法。初学の方はこちらのほうが掴みやすいかもしれません。

デプロイ

Netlifyへの自動デプロイをしよう

ホスティングサービス・Netlifyを使ってVue.jsプロジェクトを公開する際の解説ページ。Netlifyの会員登録から、レポジトリ登録、ビルド、ホスティングまでここを読めばNetlifyでVue.jsプロジェクトを公開する最低限の知識が得られる良記事です。

独断と偏見で選んだVue.jsでWebアプリを作る際に参考になったページ・サイトまとめでした。

最後になりましたが、各サイト・ページの作成者様に、心からの感謝の意を表したいと思います。