プログラミング Vue 3を体系的に学ぶロードマップ｜初心者がリアクティブ・REST API・Swagger連携・Vuetifyまで理解する手順
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vue 3 を学び始めたとき、私がいちばん困ったのは「何から手をつければいいのか分からない」ことでした。リアクティブ、Composition API、Vue Router、...
2026-07
プログラミング 
プログラミング Vue 3 + REST API + Swagger + VuetifyでCRUDアプリを作る｜完成編
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。このシリーズの総まとめです。これまで学んだ「リアクティブ・コンポーネント・REST API・OpenAPI・Vuetify」を1つにつなげ、小さなタスク管理アプリ（CRUD...
プログラミング Vuetifyのフォーム・入力チェック・API送信｜v-formとrulesの基本
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vuetify を導入できたら、次は実用の山場である入力フォームです。ただ入力欄を置くだけでなく、「必須なのに空」「文字数オーバー」を弾き、送信中はボタンを押せなくし、サー...
プログラミング VuetifyをVue 3に導入する｜なぜ最後に入れるのか・最小セットアップ
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vuetify は Vue 用の UI コンポーネントフレームワークです。ボタン・入力欄・テーブル・ダイアログなどが最初から用意されていて、自分で CSS を書かなくても整...
プログラミング 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 の型...
プログラミング SwaggerとOpenAPIの違いをわかりやすく｜Vue連携の前に整理する
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。API 連携を調べると、必ず「Swagger」と「OpenAPI」が出てきます。私は最初、この2つを別物だと思って混乱しました。結論を先に言うと、OpenAPI は「仕様（...
プログラミング 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> と <...