</>CodingLSコーディングライフスタイル

FirebaseのCloud Firestoreは、リアルタイム同期機能を持つNoSQLデータベースとして、チャットや通知、共同編集アプリなどに最適

Vue.jsで日付入力を扱う場合、カレンダー形式のインターフェースを提供する「日付ピッカー」はユーザーの入力ミスを減らし、操作性

Vue.jsアプリケーションでデータの可視化を行う際、Chart.jsは手軽に高品質なグラフを描画できるライブラリとして人気があります

Vue 3でGoogle Maps JavaScript APIを使い、地図とマーカーを表示する方法を解説します。非推奨になったMarkerではなくAdvancedMarkerElementを使う実装、スクリプトの動的読み込み、APIキーの制限、課金設定、よくあるエラーの原因まで、動くコードでまとめました。

Vue 3でCSVファイルを読み込んでテーブル表示する方法を解説します。カンマや改行を含むセルに対応したパーサ、Shift_JISの文字化け対策、BOMの扱い、表示件数の制限、PapaParseを使う方法まで、動くコードでまとめました。

Vue 3でダークモードを実装する方法を解説します。ライト・ダーク・OS設定に合わせる3択の切り替え、localStorageへの保存、読み込み時のちらつき対策、OS設定の変更への追従、CSS変数とcolor-scheme、Tailwindでの注意点まで、動くコードでまとめました。

Vue 3とIntersection Observerで無限スクロールを実装する方法を解説します。読み込み後に次の取得が止まる落とし穴、全件取得後の終了判定、通信失敗時の再試行、rootMarginによる先読み、composableでの共通化まで、動くコードでまとめました。

Vue 3のv-onceとv-memoで、不要な再描画を止める方法を動くコードで解説します。v-onceで更新が止まる挙動、v-forの大きなリストでv-memoを使う例、依存配列の書き方、再描画回数の確かめ方、使うべきでない場面までまとめました。

Vue 3のバリデーションライブラリvee-validateの導入と使い方を解説します。useFormとdefineFieldとYupによる基本、テンプレート中心のForm・Field・ErrorMessage、独自ルールとパスワード確認、エラーメッセージの日本語化、送信ボタンを無効にしない設計まで動くコードで紹介します。

Vue 3でファイルアップロードを実装する方法を解説します。FormDataとAxiosでの送信、Content-Typeを手書きしてはいけない理由、サイズと種類の検証、複数ファイル、プレビューと進捗表示、失敗時の表示、Express+multerでの安全な受け取り方まで動くコードで紹介します。

Vue 3推奨の状態管理ライブラリPiniaの始め方を解説します。導入とOption Store・Setup Storeの書き方、分割代入でリアクティブが切れる落とし穴とstoreToRefs、Vuexとの違い、Vuexからの移行手順まで動くコードで紹介します。

Vue 3のComposition APIの基本を解説します。refを主とする状態の宣言、reactiveの3つの制限とtoRefsによる対処、script setupとsetup関数の違い、refのアンラップのルール、Composableへの切り出しまで動くコードで紹介します。

Vue 3の:classと:styleの使い方を、オブジェクト・配列・computedの書き方から、静的なclassとの併用、コンポーネントへのclass、style内のv-bind()、CSSで書くべきことの見分け方、色だけに頼らない状態の表し方まで動くコードで解説します。

Vue Router 4の基本を解説します。create-vueでの導入、routerの設定とRouterLink・RouterView、useRouteとuseRouterによるパラメータ取得と遷移、履歴モードで直接アクセスが404になる原因とnginx・Apacheの設定、404ページの用意まで動くコードで紹介します。

Vue 3でlocalStorageを使って、ページを更新しても値を保持する方法を解説します。文字列しか保存できない点とJSONの扱い、壊れたデータやプライベートブラウズへの備え、watchで保存するuseLocalStorage、他のタブとの同期、保存してはいけない情報とその理由まで動くコードで紹介します。

Vue Routerでページ遷移中にローディング表示を出す方法を解説します。beforeEach・afterEach・onErrorでの制御、200ms以上かかったときだけ表示して最低300ms残す設計、連続遷移でも早く消えないタイマー管理、beforeResolveでのデータ取得、読み上げ対応まで動くコードで紹介します。

Vue 3でAxiosを使ってAPIからJSONを取得して表示する基本パターンを解説します。loading・error・dataの扱い、axios.createによるbaseURLとtimeout、エラーの種類の見分け方、AbortControllerによる中止、CORSエラーの考え方まで動くコードで紹介します。

Vue 3のコンポーネント間のデータのやり取りを、props・emit・v-model・スロット・provide/inject・Piniaの使い分けとして整理します。propsは書き換えない理由、emitがバブリングしない点、兄弟間は状態を親へ引き上げる設計まで動くコードで解説します。

Vue 3でリストをドラッグ＆ドロップで並び替える方法を、vuedraggable（SortableJSのラッパー）で解説します。Vue 3用のインストールとitem-key、つかみ部分とアニメーション、キーボード向けの上へ・下へボタン、保存失敗時に元に戻す処理まで動くコードで紹介します。