ソフトウェア開発で学んだことを記録しています。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
n8nで加工したデータをスマートフォンへ送るため、Telegram APIを連携します。BotFatherによるトークン発行、Webhook設定、Markdownテンプレートの作成、レート制限への対処を説明します。
Schedule Triggerで定期実行を設定し、RSSフィードで対象サイトからデータを取得します。RSSがないサイトに備え、HTTPリクエストとHTML抽出を使うクローリングも実践します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
第1回から第14回までを振り返り、TDD導入前後のコード品質の変化と、E2Eや視覚的テストなど今後の学習テーマを紹介してシリーズを締めくくります。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
フロントエンドでテストが大切な理由、ReactでTDDを導入する利点、テストすべき範囲を説明します。
14回にわたるTDDシリーズを振り返り、保守性への利点と今後の学習テーマを紹介します。実習コードのリポジトリも掲載しています。
TDDを実務に導入するときの開発コスト、スケジュール、チームの理解を得る方法と、テスト範囲の決め方を学びます。
この記事はまだ翻訳されていません。
テスト実行時によく出るJVMの警告がCDSとどう関係するかを説明し、-Xshare:offで表示を止める方法を紹介します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
To-Doリストを作りながら、TypeScriptでのストア設計、フォームの状態管理、効率的なコンポーネント構成を学びます。
TypeScriptでcreateを理解し、selectorとshallowによる最適化やget・set・subscribeなどのストア操作を学びます。
Reactの状態管理に役立つZustandを、ReduxやContext APIと比較し、カウンターの例から基本操作を学びます。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
ViteでVue 3のプロジェクトを作り、.vue単一ファイルコンポーネント（SFC）の基本構造を理解します。
Windows上でLinuxを使えるWSLを利用し、Ubuntu 22.04 LTSをインストールして初期設定する手順を紹介します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
AIコードエディターのCursorとFigmaをつなぐcursor-talk-to-figma-mcpを紹介します。定型的なデザイン作業を自動化し、コードとデザインの行き来を減らせます。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
TypeScriptとReactを組み合わせる際に役立つパターンを学びます。ジェネリックコンポーネントの型付け、カスタムフックの型推論、ZodやYupを使ったフォームの型安全性を例とともに説明します。
React DevToolsのComponentsとProfilerの使い方、JestとReact Testing Libraryによるイベント・非同期処理・モックのテスト例、StorybookとChromaticでUIを開発してテストする手順を学びます。
ReactアプリケーションのXSSやCSRFなどの脅威への対策を、例とともに学びます。OAuth 2.0/OIDCの認証フロー、コード分割、サードパーティスクリプトを安定して管理する戦略も説明します。
Reactアプリケーションで効果的にAPI通信と非同期処理を行う戦略を学びます。FetchとAxiosの比較、AbortControllerによるリクエストのキャンセル、GraphQLクライアントの導入時期、データ読み込みのためのSuspenseまで説明します。
マイクロフロントエンド（MFE）の概念、長所と短所、実装戦略を学びます。Webpack Module Federation、Single-SPAなどの主要技術から、チームの境界、デプロイモデル、導入時の検討事項までわかりやすく説明します。
再利用しやすく保守しやすいReactコンポーネントの設計原則とパターンを学びます。SRP、Atomic Design、Container/Presentationalパターンを例とともに説明し、テストしやすくする方法を紹介します。
Reactの開発と内部動作で使われる配列、連結リスト、ツリー、グラフ、ハッシュテーブルを、一覧表示や最適化との関係から学びます。
React Router v6のHistory API、URL照合、入れ子のルート、Outlet、Link、useNavigate、コード分割を学びます。
CSR・SSR・SSGの原理と長所・短所、Hydration、Next.jsのストリーミングSSR、Islands Architectureを比較します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
Expo Routerでクエリパラメーター付きのディープリンクを設定し、特定の画面への移動とデータの受け渡しを行う方法を紹介します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
Expoアプリにプッシュ通知を段階的に追加します。expo-notificationsのインストール、トークンの取得、通知の送受信と処理、FCMとAPNsのネイティブ設定を詳しく説明します。
Context API、Redux Toolkit、Zustand、Recoilと、React Query・SWRのサーバー状態管理を、ストア・購読・選択子の原理から比較します。
ブラウザーの描画パイプライン、Reactの初回表示、JavaScriptのイベントループ、CSR・SSR・SSGの違いを詳しく学びます。
useEffectとuseLayoutEffectの違い、useRefのDOM参照と値の保持、useReducer、カスタムフックでのロジック再利用を学びます。
React 17との違い、マイクロタスク、flushSync、startTransitionから、React 18の自動バッチ処理と並行性を学びます。
フックの呼び出し順、連結リスト、Update Queue、関数型更新、バッチ処理、遅延初期化からuseStateとsetStateの内部を理解します。
Virtual DOM、Reconciliation、Fiber、優先順位のあるスケジューリング、Strict Modeを通じて、Reactの描画を理解します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
Expoでカメラ、位置情報、メディアなどの権限を安全に要求し利用する方法を、説明とTypeScriptの例で紹介します。
React Queryのクエリ処理をカスタムフックへ抽象化し、複数のページやコンポーネントで再利用する方法を実例で説明します。
React NativeとExpoでTanStack Queryを導入し、ネットワーク・フォーカス管理やクエリをJSONPlaceholderの例で学びます。
Reactで非同期APIデータを効率的に扱うため、TanStack Queryの導入、基本操作、高度なキャッシュ戦略を例とともに紹介します。
SSRの必要性と基本動作、React 18のストリーミング、renderToPipeableStreamとSuspenseの連携を段階的に説明します。
この記事はまだ翻訳されていません。
react-native-picker/pickerのインストールと各OSでの設定、使い方を例とともに解説します。
AWS LambdaとS3を連携し、画像アップロード時にリサイズとWebP変換を自動実行する、サーバーレス画像処理の手順を紹介します。
公式ガイドを基にTailwind CSS 3.0から4.0への移行、ブラウザー対応、設定構造、破壊的変更を例とともに説明します。
静的生成からISRへ移行した経緯と効果、ビルドエラーの解決方法を詳しく紹介します。
Next.jsのISRについて、概念、実装方法、高度な機能まで詳しく説明します。
Visual Studio CodeでMCP（Model Context Protocol）サーバーを設定して使う手順を、公式ドキュメントに沿って紹介します。
この記事はまだ翻訳されていません。
Model Context ProtocolのTypeScript SDKを使い、MCPサーバーを構築する手順を詳しく紹介します。
OpenAI Agents SDKの構成、機能、MCPとの統合方法を紹介し、コード例を通じてエージェントベースのAIアプリケーションを作る方法を説明します。
LLMのコンテキスト管理と外部連携を考え、Model Context Protocol（MCP）の考え方とアプリケーションのコード例を見ていきます。
IndexNowの仕組みとNaverへの連携手順を、公式ドキュメントに沿って詳しく説明します。
Expoのexpo-imageとexpo-assetを使い、画像の読み込みを最適化する手順を、例と問題解決のヒントとともに説明します。
これまでに学んだデータ取得方式を整理し、状況に合わせて適切な戦略を選ぶ実践的な指針を紹介します。
Next.jsのfetchをカスタマイズし、APIのRoute Handlerでバックエンド通信を構成する方法を学びます。
複数のリクエストを扱う並列・順次・条件付きfetchと、クライアントでデータを取得する方法を学びます。
Next.jsのfetchが提供するキャッシュオプションと、それぞれの意味を詳しく説明します。
Next.js App Routerでのデータ取得と、Server Componentsを中心とするデータの流れを学びます。
重複fetchの削減、Suspenseの整理、クライアント側の日付整形など、実際のNext.jsブログで行った性能改善をまとめます。
Next.js 15への更新に伴う主な変更点、移行手順、発生しうる問題と解決方法を段階的に説明します。
Next.js App Routerで静的HTMLを読み込み、iframeでページ内に表示する方法と注意点を説明します。
ExpoのWebBrowser APIで外部リンクをアプリ内から開く方法と、WebViewとの違いを学びます。
React NativeとExpoの環境で、Xcode 16.3への更新後に起きたビルドエラーを解消するため、Xcodeを16.2に戻した手順を紹介します。
Expoで端末の言語を取得し、i18nextで翻訳とアプリ内の言語切り替えを実装します。
React、Expo、React Nativeで、i18nextの初期化、言語パック、変数、書式設定、単数・複数形を利用する方法を説明します。
React Nativeで、画面をまたいで再利用できるボトムシートコンポーネントを作ります。
Expoで開発ビルドを設定し、ネイティブコードを変更できる環境を作る方法を説明します。
Expo Vector Iconsをプロジェクトに追加し、アイコンやアイコン付きボタンを使う方法を説明します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
React Native（Expo）でSecureStoreを設定し、安全な保存と生体認証を使う方法を学びます。
この記事はまだ翻訳されていません。
Flutterでアプリのアイコンと表示名を設定する手順を紹介します。
React Native（Expo）でreact-native-svg-transformerを設定し、SVG画像を読み込んで使う方法を説明します。
この記事はまだ翻訳されていません。
JavaScriptとTypeScriptでJSDocを使い、共同開発でコードの意図や使い方を伝えるコメントを書く方法を紹介します。
この記事はまだ翻訳されていません。
macOSでExpoプロジェクトを作り、エミュレーターやExpo Goで動作を確認する手順です。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
FlutterでFirebase Cloud Messagingを使い、プッシュ通知を送受信する方法を説明します。
flutter_native_splashでFlutterアプリの起動画面をカスタマイズする手順を説明します。
React Native（Expo）で、react-native-toast-messageを使ってトースト通知を表示し、見た目をカスタマイズします。
FlutterでFirebase Authを設定し、電話番号とSMSコードによる認証を実装する方法を説明します。
Flutterで作ったiOSアプリとAndroidアプリを、Firebaseコンソールで個別に登録する手順を説明します。
Flutterで開発したアプリをFirebaseへ登録する方法を説明します。
React、Next.js、React Native、Node.jsなどのTypeScript環境で、Axiosのリクエスト・レスポンス型とサービス層を設定します。
この記事はまだ翻訳されていません。
easy_localizationを使い、Flutterアプリの翻訳ファイルを用意して、アプリ内で言語を切り替える方法を学びます。
一つのプロジェクトフォルダーから、複数のリモートリポジトリを管理する方法を紹介します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
Flutterのページ遷移（ログイン・ナビゲーションバー）を構築するために、目標と条件を定め、初期設定を行います。
FlutterでDioとRetrofitを使うAPI通信の手順を紹介し、レスポンスの型を定義する利点を説明します。
複数の画像プレースホルダーAPIを紹介します。
Tailwindの設定ファイル、プラグイン、global.cssを使い、スタイルやフォントをカスタマイズする方法を説明します。
この記事はまだ翻訳されていません。
WindowsでExpoのプロジェクトを作成し、エミュレーターやExpo Goで動作を確認する手順です。
WindowsにReact Nativeの開発環境を構築し、Android Studioでエミュレーターを起動するまでの手順を説明します。
Next.jsのファイルシステムルーティング、動的ルート、APIのRoute Handlerの基本的な使い方を説明します。
Next.jsプロジェクトを作成し、Tailwind CSS、Shadcn/ui、Typographyを設定する手順を説明します。
ブログを構成する技術スタックと主要ライブラリについて、役割と採用理由を紹介します。
ブログとしての機能と開発成果物という二つの観点から、制作の目標を整理します。
自分でブログを作り、運営しようと決めた理由を振り返ります。
GitHub Actionsを使い、静的ファイルをS3へアップロードする方法です。
Amazon S3とCloudFrontで画像配信のCDNを構築し、独自ドメインとSSL証明書を設定する手順を紹介します。
独自APIとPrisma、およびSupabase REST APIを使い、Next.jsのCSR・SSRでデータを取得する方法を紹介します。
リポジトリを丸ごと複製するmirrorオプションの使い方を説明します。