プログラミング Vue 3を体系的に学ぶロードマップ｜初心者がリアクティブ・REST API・Swagger連携・Vuetifyまで理解する手順
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。Vue 3 を学び始めたとき、私がいちばん困ったのは「何から手をつければいいのか分からない」ことでした。リアクティブ、Composition API、Vue Router、...
プログラミング 
プログラミング 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> と <...
manabi-naoshi 統一地方選挙とは？市議選との違いと4年ごとの仕組みを学び直す
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「あちこちで市議選をやっているけど、あれって全部『統一地方選』なの？」。ニュースで聞く割に、統一地方選挙が何を指すのか、市議選とどう違うのか、この感じ、私はちゃんと知りませ...
manabi-naoshi 二元代表制とは？首長と議会を別々に選ぶ理由を議院内閣制と比べて学び直す
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「知事や市長は選挙で直接選ぶのに、総理大臣はなぜ自分たちで選べないんだろう？」。ふと気になったとき、私はこの違いをきちんと説明できませんでした。調べてみたら、その答えが二元...
manabi-naoshi 三権分立とは？立法・行政・司法が牽制し合う理由を国と地方のちがいから学び直す
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。立法・行政・司法の三権分立——言葉は学校で習ったし、地方自治体が二元代表制だということも知ってはいました。でも、「国の三権分立」と「地方の二元代表制」が、どちらも"権力を一...
manabi-naoshi 選挙区制を学び直す｜小選挙区・比例代表・大選挙区の違いを整理する
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「小選挙区」「比例代表」「死票」。選挙のニュースで当たり前のように出てくるのに、いざ説明しようとすると私は言葉に詰まりました。なので、選挙区制の基本である小選挙区・大選挙区...
manabi-naoshi 国旗掲揚日とは？意味・揚げ方・時間・マナーと今年の掲揚日カレンダー
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「祝日に国旗を揚げたいけれど、そもそもどの日が国旗掲揚日なのか、何時に揚げて何時に下ろすのか、よく分からない」。いざやろうとすると、意外と細かいルールが気になるものです。こ...
節約・生活 一人暮らしに食洗機はいる？省スペースなタンク式の選び方とおすすめ
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「一人暮らしで食洗機なんて、食器も少ないしいらないのでは」。一人暮らしだと、そう感じて見送りがちなテーマだと思います。ただ、工事のいらない省スペースなタンク式なら、一人でも...
節約・生活 食洗機で後悔しないために｜よくある失敗とタンク式の選び方
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。食洗機は、我が家では買ってよかった家電のひとつです。ただ、選び方を間違えると「思っていたのと違う…」と後悔することもあります。この記事では、実際に出やすい後悔ポイントと、そ...
節約・生活 食洗機は手洗いと比べてどっち？必要かどうかを正直に考える【時間・コスト・手間】
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「食洗機って本当に必要？手洗いで十分じゃない？」。買う前の私も、ずっとそう思っていました。結論から言うと、我が家は導入して「もっと早く買えばよかった」派になりました。ただ、...
節約・生活 工事不要で買える食洗機おすすめ｜タンク式を人数別に比較【一人暮らし〜4-5人】
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。食洗機は、我が家ではもう手放せない家電のひとつです。最初に買ったのはシロカのタンク式、今は買い替えて別のメーカーのものを使っています。工事のいらない「タンク式」なら、コンセ...
ガジェット・テレワーク 27インチ4Kからウルトラワイドに替えると後悔する？縦幅・PPI・作業領域で比較【計算ツール付き】
「27インチの4Kモニターを使っているけれど、もっと横に広い画面が欲しい」。ウルトラワイドモニターの写真を見るたびに、筆者もそう思ってきました。ただ、いざ買い替えようとスペック表を眺めると、3440×1440・5120×2160・5K2K・...
節約・生活 エアコンの電気代はいくら？畳数別・使用時間別シミュレーター付き
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「エアコンをつけると電気代がいくら上がるんだろう」——夏に冷房、冬に暖房をつけるたびにそう気になったことはないでしょうか。6畳の部屋と14畳のリビングでは消費電力がまったく...
節約・生活 エアコンの2027年問題とは？省エネ基準で格安機種がなくなる理由
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。「格安エアコンがなくなる」という話を聞いたことはありますか？2027年4月、エアコンの省エネ基準が大幅に引き上げられます。現行の廉価機種の多くはこの基準を満たせず、メーカー...
節約・生活 食洗器の電気代・水道代は月いくら？手洗いとのコスト比較ツール付き
※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。食洗器を使うと電気代は上がりますが、水道代は下がります。洗剤代も少し変わります。計算してみました。結論として、たとえば一人暮らしの場合、コスト面では不利になるケースが多いと...