『Udemy』向け『Vue.js』講座をリリースして約10日。
リリース前から追加予定だった、
『GoogleBooksApi』を使った簡単な読書管理アプリの作り方を、
『セクション8』として追加しました。
合わせて、
- 紹介動画
- 参考資料
- ダウンロードできるコード
も追加変更しております。
ややこしい『Vuex』の前段として、
『Vuex』を使わないでアプリをつくるというお題で作成しております。
講座の無料公開分抜粋。
サンプルアプリの紹介(VueCLI+VueRouter+Vuetify+GoogleBookAPI+LocalStorage)
GoogleBooksAPI
『Vue.js』読書管理アプリで使っている技術
- Vue.js 2.6.11
- VueCLI 4.x (SFC シングルファイルコンポーネント)
- VueRouter (SPA シングルページアプリケーション)
- Vuetify 2.3.10 (UIフレームワーク)
Vue.jsの機能など
- OptionsAPI(data/methods/)
- ライフサイクルフック(mounted)
- PropsDown/EventUp
- ディレクティブ(v-for/v-model)
- イベント(@click)
- 配列操作(push/splice)
- DOM更新後の処理($nextTick)
VueRouterの機能
- ルーティング(名前つき/パラメータ付)
- リダイレクト
- ヒストリーモード
- ナビゲーションガード(BeforeRouteEnter)
Vuetifyで使ったコンポーネント
- v-app/v-container
- グリッド(v-container/v-row/v-col)
- カード(v-card/v-card-title/v-card-actions)
- フォーム(v-text-field)
- ピッカー(v-date-picker/v-menu)
- その他(v-spacer/v-img/v-icon/v-btn)
JavaScriptの機能
- fetch(async/await)
- window.confirm
- window.location
ブラウザの機能
- LocalStorage
使ったAPI
- GoogleBooksAPI
こうやって改めて書くといろんな技術使ってますね。。
『Vue.js』読書管理アプリをつくってみて
隙間時間で制作し、
作成した日にちは約3日、合計5,6時間だったと思いますが、
作成後、
どうも怪しいなぁと思うところがいくつかあり、
特にprops down/ event up と
ナビゲーションガード、$nextTick のあたりは、
いろいろとリサーチし、
ある程度は満足できる内容になってはいます。
とはいえ、
コンポーネントの作り方が甘いような気もしており、
今後の『Vuex』、『Vue3』などのセクションでは、
そのあたりも踏まえて解説ができればと思います。
『Vue.js』読書管理アプリを作って思った事
認証機能やサーバー側の実装がない形なので、
シンプルといえばシンプルな内容ではあるものの、
『SPA(シングルページアプリケーション)』で、
それなりの見た目も気にしてつくるとなると、
どうしてもそれなりの学習コストがかかってしまいます。
仮に同じ内容を、
『SPA』にこだわらなければ、
もっと簡単にできるよなぁと思ったりもします。
『5G』の普及に伴って、
『SPA』と『サーバーサイドで作成したページ』の読み込み速度の差が縮まれば、
また変わってくるような気もします。
一方、
クライアント側でよりリッチな、
おしゃれでかっこよくてぬるぬる動くページの需要も広まれば、
より『SPA』の需要が増えるとも思え、
どうなるかは神のみぞ知る、としか言えないぁと思ってます。
『Vue.js』講座 今後の予定
私毎ですが、
今週来週にも第2子出産予定ということで、
実家に帰る(録音環境がない)ので、
10月いっぱいは収録をお休みとし、
代わりにブログをコツコツ書きつつ、
次のネタをリサーチしておこうと思っています。
- フロントエンド・・『Vuex』『vee-validate』『Vue3』など
- バックエンド側・・『Laravel8』
- 機械学習・・統計学×Python
- XR・・Unity+α
他にもネタ募集しておりますので、
こんな内容が知りたいなどあれば、
ぜひ遠慮なくご連絡いただければ幸いです。
この記事へのコメントはありません。