オンライン教材

『Vue.js』Vuetify+VueCLI+VueRouter サンプルアプリの作り方動画を追加しました【Udemy】

『Udemy』向け『Vue.js』講座をリリースして約10日。

リリース前から追加予定だった、

『GoogleBooksApi』を使った簡単な読書管理アプリの作り方を、

『セクション8』として追加しました。

合わせて、

  • 紹介動画
  • 参考資料
  • ダウンロードできるコード

も追加変更しております。

ややこしい『Vuex』の前段として、

『Vuex』を使わないでアプリをつくるというお題で作成しております。

講座の無料公開分抜粋。

サンプルアプリの紹介(VueCLI+VueRouter+Vuetify+GoogleBookAPI+LocalStorage)

GoogleBooksAPI

Sponsored link

『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』などのセクションでは、

そのあたりも踏まえて解説ができればと思います。

Sponsored link

『Vue.js』読書管理アプリを作って思った事

認証機能やサーバー側の実装がない形なので、

シンプルといえばシンプルな内容ではあるものの、

『SPA(シングルページアプリケーション)』で、
それなりの見た目も気にしてつくるとなると、

どうしてもそれなりの学習コストがかかってしまいます。

仮に同じ内容を、
『SPA』にこだわらなければ、
もっと簡単にできるよなぁと思ったりもします。

『5G』の普及に伴って、

『SPA』と『サーバーサイドで作成したページ』の読み込み速度の差が縮まれば、

また変わってくるような気もします。

一方、
クライアント側でよりリッチな、
おしゃれでかっこよくてぬるぬる動くページの需要も広まれば、
より『SPA』の需要が増えるとも思え、

どうなるかは神のみぞ知る、としか言えないぁと思ってます。

『Vue.js』講座 今後の予定

私毎ですが、

今週来週にも第2子出産予定ということで、

実家に帰る(録音環境がない)ので、

10月いっぱいは収録をお休みとし、

代わりにブログをコツコツ書きつつ、

次のネタをリサーチしておこうと思っています。

  • フロントエンド・・『Vuex』『vee-validate』『Vue3』など
  • バックエンド側・・『Laravel8』
  • 機械学習・・統計学×Python
  • XR・・Unity+α

他にもネタ募集しておりますので、
こんな内容が知りたいなどあれば、
ぜひ遠慮なくご連絡いただければ幸いです。


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. 生成AI

    2024/5/14 OpenAI発表 まとめ
  2. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  3. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  4. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  5. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock