Vue3を開発する時のVsCodeのおすすめプラグイン設定 おすすめ拡張機能紹介 1. Volar Volar は Vue.js の開発をサポートする VS Code の拡張機能です。.vue ファイルのシンタックスハイライトやインテリセンスによる補完ができるようになります。詳細は、Vola…

Nuxt3でvalidationする方法 インストール npm i vee-validate @vee-validate/i18n @vee-validate/rules vee-validate -> veeValidate @vee-validate/i18n -> バリデーションエラーメッセージに日本語化 @vee-validate/rules -> バリデーションルールを利用す…

Nuxt3とfirebase9で認証機能設定する方法 各バージョン Nuxt: 3.0.0-rc.11 Firebase: 9.13.0 インストール npm install firebaseでpackage.jsonにfirebaseが追加されればOK Firebaseの初期設定 ■ plugins/firebase.client.ts import { initializeApp } from …

Nuxt3にtailwindを導入する 導入手順 インストール npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest @nuxtjs/tailwindcss → Nuxt3でTailwindCSSを利用するためのモジュール tailwindcss@latest → Tailwindの最新…

Nuxt3にEslintとprettierを導入する ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。 ESLint：静的解析ツール。バグの可能性がある書き方を指摘する。 Prettier：コードフォーマッター。インデント、改行などを自動整形してくれる…

フロントエンドの環境設定 概要 Babel : ES6 -> ES5への変換 Node.js : JSライブラリ管理 webpack: 1つにまとめる（読み込み速度UP) polyfill: 下位互換 vue-cli: 必要ソフトをパッケージ化 Npm ■ Npmとは Node.jsはJavaScriptを実行する環境です。 本来、Ja…

業務でフロントエンドをすることになったけど、バックエンドがメインなのでフロントエンドの勉強をしなおす。 何やったか忘れた時ようにやったことまとめる。 Vue.js 動画コンテンツ Nuxt.js 動画コンテンツ 記事コンテンツ HTML/CSS 動画コンテンツ JavaScr…

(vue.js) methods / computed / watchの比較表 オプション名 methods computed watch メソッド 算出プロパティ 監視プロパティ 使い方 一般的な関数と同様 return内に特定したいdataを含める（this.xxx) 特定したいdata名で作成コールバック関数含める キャ…

あの時の面接官に伝えたい、Vue.jsを導入するメリットは？ エンジニア採用面談にて「reactなどの他のフレームワークに比べてVue.jsを導入するメリットは何かね？」と問われモゴモゴしてしまいました。 モゴモゴしすぎて面接は落とされましたw またモゴモゴし…

vuex-persistedstateハマりポイント(Vuex) vuex-persistedstateがイケてなくてリロード時にgettersでnullになった話 ■ 原因 ローカルストレージ→storeのコピーがmounted()の後にコピーされる ■ 対策 nuxt-client-init-moduleをインストールする。 これで “nu…

Nuxt.jsデータ取得 Nuxt.js （ユニバーサルアプリケーション）では、サーバーサイドレンダリング中にデータをレンダリングするために Nuxt.js 特有のフックを使う必要があります。 この方法について調査したので、記載する。 非同期データ読み込み方法 Nuxt…

? Project name: (hello) プロジェクトネームを設定できます。カッコの中のhelloがデフォルトの値です。 ? Programming language: (Use arrow keys) ❯ JavaScript TypeScript プログラミング言語を選択します。 このコースではJavaScriptを利用します。 ? Pa…