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

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

公式サイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新着記事