Vue.jsのライフサイクルとコンポーザブル｜onMountedで自動保存【入門#10】

▼ 未経験からWebエンジニアになる学習ロードマップ＋この回の完成コード＋改造課題4つを無料配布中 ページを開くたびに入力が消えてしまう名刺ジェネレーターに、自動保存を付ける回です。 onMountedなどのライフサイクルフックと、ロジックを使い回せる形に切り出すコンポーザブルを学びます。 まずApp.vueに直接コピペで実装して「同じコードが3つ並ぶ面倒くささ」を体感してから、コンポーザブルに切り出します。なぜ切り出すのかが腹落ちする順番にしています。 この動画で分かること ・ライフサイクルフック（onMounted / onUnmounted）で処理を差し込むタイミング ・テンプレート参照（useTemplateRef）でDOMを直接さわる方法と、さわってよい場面 ・localStorageを使った入力内容の自動保存 ・コンポーザブル（use〜関数）の作り方と、切り出すと何が嬉しいのか ・引数でキーを変えると同じ関数を何度でも使い回せること ━━━━━━━━━━━━━━━ 🎁 LINE登録特典 この回の完成コード＋改造課題4つ＋未経験からWebエンジニアになるための学習ロードマップを無料でプレゼント中。 下のリンクから友だち追加して、半角で「vue10」とだけ送ってください。 https://line.me/ti/p/%40468utvbz ※ 文章で復習できる副読本「Vue入門テキスト」は合言葉「vue01」で受け取れます ━━━━━━━━━━━━━━━ 📚 目次 00:00 完成デモ｜リロードしても入力が消えない 01:23 現在のコードを確認する 01:56 ライフサイクルフック（onMounted / onUnmounted） 05:55 テンプレート参照（useTemplateRef） 09:36 まずはコピペで自動保存を作ってみる 12:32 コンポーザブルに切り出す 15:50 3つの武器の呪文 16:34 改造課題・特典 18:50 次回予告 ━━━━━━━━━━━━━━━ 🔗 Vue.js入門シリーズ（全12回・順次公開） 第1回 環境構築なしで割り勘アプリを作る    • Vue.jsで何ができるか｜環境構築なしで割り勘アプリを作る【入門#1】   第2回 Vueの環境構築    • Vue.jsの環境構築｜Node.jsインストールからnpm create vueま...   第3回 プロジェクトの中身とSFC 第4回 リアクティビティと.value 第5回 ディレクティブ4つ 第6回 コンポーネント入門 第7回 defineModelとスロット 第8回 CSSとTransition 第9回 computedとwatch 第10回 ライフサイクルとコンポーザブル（この動画） 第11回 Provide・InjectとPinia 第12回 総まとめ ※公開済みの回のリンクは、公開のたびにこの欄へ追記します。 ━━━━━━━━━━━━━━━ 🛠 この動画で使ったもの ・Vue 3 + Vite（npm create vue@latestで作成したプロジェクト） ・Visual Studio Code（https://code.visualstudio.com/ ） ・ブラウザのデベロッパーツール（Applicationタブ / Local Storage） ━━━━━━━━━━━━━━━ 👤 この動画の講師 辻郁矢（フリーランスエンジニア・プログラミング講師） SES から実務経験 1 年半でフリーランス独立。マンツーマン指導スクールを運営。 #プログラミング学習 #Vue #Vuejs #onMounted #未経験エンジニア