プログラミング Vue 3を体系的に学ぶロードマップ｜初心者がリアクティブ・REST API・Swagger連携・Vuetifyまで理解する手順
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vue 3 を学び始めたとき、私がいちばん困ったのは「何から手をつければいいのか分からない」ことでした。リアクティブ、Composition API、Vue Router、...
TypeScript
プログラミング 
プログラミング Vue 3 + REST API + Swagger + VuetifyでCRUDアプリを作る｜完成編
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。このシリーズの総まとめです。これまで学んだ「リアクティブ・コンポーネント・REST API・OpenAPI・Vuetify」を1つにつなげ、小さなタスク管理アプリ（CRUD...
プログラミング Vue 3のAPIエラー処理と認証トークンの扱い方｜axios interceptor入門
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。正常系（データが取れる）は動くのに、いざ「ログインが切れた」「入力が弾かれた」「サーバーが落ちた」となると、とたんに何をどう扱えばいいか分からなくなりました。実務のアプリは...
プログラミング 生成APIクライアントをVueに直接書かない設計｜repository層のすすめ
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。OpenAPI からクライアントを生成できるようになると、つい .vue の中で生成物を直接呼びたくなります。私も最初はそうしていました。でも API 仕様が少し変わっただ...
プログラミング OrvalでOpenAPIからVue Query向けコードを生成する｜Vue 3実務寄り
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。OpenAPI から型安全な API クライアントを生成できるようになると、次に「毎回 onMounted で取得して、ローディングとエラーを手で管理するの、地味に面倒だな...
プログラミング OpenAPI GeneratorでTypeScript APIクライアントを生成する｜Vue 3連携
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。前の記事で「OpenAPI ファイルは API の設計図」だと整理しました。ここからが面白いところで、その設計図（openapi.yaml）から TypeScript の型...
プログラミング Vue 3でREST APIを呼び出す方法｜fetch・axiosとJSON表示の基本
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vue でボタンや一覧を作れるようになると、次に出てくる壁が「サーバーのデータをどう表示するか」です。私も最初、Vue の中にデータを直接書いていて、「これ、どうやって本物...
プログラミング composablesでロジックを再利用する｜Vueの.vueを薄くする設計
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。コンポーネントを作り込んでいくと、.vue の <script setup> にデータ取得・ローディング管理・エラー処理…とロジックが溜まっていき、画面が読みにくくなります...
プログラミング Piniaはいつ必要か｜propsだけでは足りない場面と状態管理の基本
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。ログイン中のユーザー名を、ヘッダーにもマイページにも表示したい。props で親から子へ、さらにその子へ…とデータを延々と手渡ししていく「バケツリレー」に、私はすぐ音を上げ...
プログラミング Vue Routerでページ遷移を作る｜一覧・詳細・登録・編集の基本
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。コンポーネントで画面の部品は作れるようになっても、「一覧ページから詳細ページへ移動する」ようなページの切り替えはどうやるのか、最初は分かりませんでした。Vue で作る SP...
プログラミング Vueのprops・emits・slotsの使い分け｜親子コンポーネント連携
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。コンポーネントを部品に分けると、次は「部品どうしをどうつなぐか」が問題になります。親から子へデータを渡したい、子で起きたクリックを親で受け取りたい、子の中身を親から差し替え...
プログラミング Vueコンポーネント設計の基本｜画面を部品に分ける考え方
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vue に慣れてくると、次にぶつかるのが「1つの .vue ファイルがどんどん長くなって読めなくなる」問題でした。一覧・検索フォーム・削除ダイアログ…全部を1ファイルに書い...
プログラミング 【Vue 3】script setupで書く理由｜Options APIとの違いと書き方
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vue 3 を調べ始めると、同じ「カウンター」のサンプルでも書き方が2種類出てきて戸惑いました。export default { data() {...} } と書くもの（...
プログラミング VueのSFCとは何か｜.vueファイルの読み方（template/script/style）
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vue を学び始めて最初に「これは何だ？」と止まったのが .vue という見慣れない拡張子のファイルでした。開いてみると <template> と <script> と <...
プログラミング 【Vue 3入門】リアクティブの基礎を徹底解説！ref・reactive・computed・watchの使い方
Vue.js リアクティブの基礎を徹底解説リアクティブの基礎、ある意味でここが本丸だと思います。Vue.jsの核となる仕組みが リアクティブシステム です。リアクティブを理解すれば、Vueが「なぜ直感的に使えるのか」が腑に落ち、実務での活用...
プログラミング 【Vue 3入門】Vueの全体像を徹底解説！初心者が押さえるべき特徴と基本概念
Vue.jsの全体像を徹底解説JavaScriptやTypeScriptを理解している方が次に学ぶべきフロントエンド技術として人気なのが Vue.js です。ReactやAngularと並ぶ主要なフレームワークでありながら、Vueはシンプル...