皆さん、おはようございます！マイクです！今日は2025年11月4日、月曜日です！今週も元気に、zenncastをお届けしますよ〜！今日はZennでトレンドの記事をいくつか紹介しますので、お楽しみに！
さて、前回紹介した記事は「自己補正するコンポーネント」「Ratatuiのチュートリアルをやる: その1」「Slackの会話をNotionタスクに変換するAIツールを作ってみた！」でしたね。今日は新しい記事をたくさんご紹介しますので、さっそく進んでいきましょう！
今日紹介する記事は全部で5本です！まずは1つ目の記事からいきましょう。
1つ目の記事は「使い捨てできるGPUクラウド Runpodを使おう！」です。このRunpodは手軽に高性能なGPU環境を利用できるクラウドサービスで、特に機械学習の実験を行うユーザーにとっての救世主です！Google Colabの制限や大手クラウドサービスの複雑さを解消する選択肢として、注目を集めています。アカウント作成からGPU環境の起動までが約10分で完了し、従量課金制なので使った分だけ支払えばOKです！
Runpodの特徴はその手軽さと豊富なGPU選択肢です。最新のRTX 5090やH200など、用途に応じたGPUを選べるため、機械学習のニーズに柔軟に対応できます。また、PyTorchやTensorFlow、JupyterLabなど、必要な環境が最初から用意されているのも嬉しいポイントですね。具体的な使い方も簡単で、まずアカウントを作成し、SSH鍵を設定、その後クレジットを購入してGPU Podを作成します。デプロイも数分で完了しますし、VS Codeからのリモート接続も可能ですから、ローカル開発と同じ感覚で利用できます。
ただし、注意点もあります。Podを停止し忘れると課金が続いてしまうので、実験後は必ず停止または削除することが重要です。不要なデータは削除することをおすすめします。Runpodは大学院生や研究者、機械学習初学者、データサイエンティストにとって、手軽にGPU環境を利用できる理想的なサービスです。まずは少額のクレジットを購入して、実際に試してみてくださいね！
。.
続いて2つ目の記事です！タイトルは「ブラウザストレージ比較：localStorage、Cookie、IndexedDBの選び方」です。ブラウザにはデータ保存方法としてlocalStorage、Cookie、sessionStorage、IndexedDBの4つがあります。それぞれの特徴を理解して、適切に使い分けることが重要です。
localStorageは半永続的なデータ保存が可能で、容量制限は約5MB。Cookieは小さなデータ（約4KB）を保存し、セキュリティフラグを使うことで攻撃から保護できます。sessionStorageはタブセッションが閉じるとデータが消えるので、一時的なデータ保存に適しています。一方、IndexedDBは大容量データを扱える非同期ストレージで、数百MB以上のデータ保存が可能です。
データのライフサイクルやセキュリティリスクを考慮し、認証トークンはHttpOnly + Secure + SameSite付きのCookie、ユーザー設定はlocalStorage、一時的なフォーム入力はsessionStorage、大容量データはIndexedDBが適しています。特に機密情報はCookieに保存することが推奨され、XSS攻撃のリスクを低減するため、localStorageやsessionStorageには保存しないのがベストです。
シークレットモードでのテストは通常モードと異なる挙動を示すことがあるので、注意が必要ですよ！
。.
3つ目の記事は「Cursor のアップデートで知った git worktree の便利さ - 並行開発が劇的に楽になった話」です。Cursor IDEのアップデートにより、git worktreeの機能が理解でき、これまでの誤解が解消されました。git worktreeは複数の作業ディレクトリを一つのリポジトリから簡単に作成でき、並行開発の効率を大幅に向上させるものです。
これまで私は、並行開発には複数回のgit cloneが必要だと思っていましたが、実際には.gitディレクトリを共有しながら異なるブランチで作業できることが分かりました。Cursorでは「Local」と「Worktree」を選ぶことができ、Worktreeを選ぶと自動的に新しい作業ディレクトリが作成され、セットアップスクリプトも実行されるんです。この便利さは、特に緊急対応や新機能の開発時に役立ちます。
実際に使用すると、`git worktree list`コマンドで現在のworktreeを確認でき、Cursorでのパスクリックで簡単に作業を切り替えられます。また、fishシェル用にエイリアスを設定することで、コマンド入力も効率化しましたよ。Cursorを利用した開発フローでは、プロジェクトを選んでWorktreeを指定するだけで新しい開発環境が立ち上がるので、依存関係のインストールも自動で行われ、すぐにコーディングに集中できる環境が整います。
。.
続いて4つ目の記事は「フロントエンドアーキテクチャ設計 〜Clean Architecture実践パターン〜」です。本記事では、フロントエンド開発における「クリーンアーキテクチャ」の原則を適用する方法を解説しています。特にReactを用いた実装例を通じて、アーキテクチャの全体像と各レイヤーの責務が示されています。
アーキテクチャは、Domain、UseCase、Presenter、Adapters、Viewの5つのレイヤーで構成されています。重要な原則は「依存の方向」で、依存関係は外側から内側へ向かうべきです。特に、Viewは同心円の外側に置かれることで、UI変更が内側のロジックに影響を与えないことが強調されています。
具体的な実装例として、ユーザー一覧を取得する機能が紹介されています。各レイヤーは次のように構成されています。Domain層では、`User`モデルとデータ操作のためのインターフェース（`UserRepository`）を定義し、UseCase層では、`getUsers`関数を通じてリポジトリからユーザーを取得します。Presenter層では、APIレスポンスをドメインモデルに変換する`toUser`関数が実装されています。
Adapters層では、外部からのデータ取得を行い、ドメインモデルに変換する`createAdapter`関数が定義され、Infra層では外部APIとの具体的なやり取りを管理します。View層ではReactコンポーネントがUseCaseを呼び出し、取得したデータをUI状態として管理するんですね。
クリーンアーキテクチャがフロントエンド開発においても有用であり、レイヤー分離の基本原則が今後のアーキテクチャ設計に貢献することが示唆されています。特に、依存性逆転の法則に厳密に従う必要はないものの、レイヤーの明確な分離が重要であると結論づけられています。
。.
最後に5つ目の記事は「Claude Code と Codex の使い分け」です！Claude Code（Anthropic）とCodex（OpenAI）は共にAIによるコーディング支援ツールですが、それぞれ得意な分野が異なります。Codexは要件確認や短いプロンプトでの高品質なコード生成に優れ、軽い動作指示に適しています。一方、Claude Codeは複数ファイルの同時編集や手元のツールとの連携に強みがあります。
具体的な利用フローとしては、最初にCodexで要件を確認し、その後Claude Codeで実装を行い、最後にCodexの`/review`機能を使ってコードレビューを行います。Codexの`/review`は、ローカルの変更を読み取って自動でテストを行い、重要な指摘を提示することで、AIが生成したコードを人間が読む負担を軽減します。
Claude Codeは特に複数ファイルの編集において効率的で、ローカルリポジトリを直接触れるため実装が迅速に進みますし、Codexは短い指示でのリファクタリングに適しているので、ファイルが増えすぎないような管理も可能です。
これらのツールを上手に使い分けることで、エンジニアはより効率的にコーディング作業を進めることができるでしょう。両者の特性を理解し、タスクに応じて適切なツールを選ぶことが重要ですね！
さて、今日は5本の記事をお届けしました！振り返ってみましょう。
1つ目はRunpodの手軽さ、2つ目はブラウザストレージの使い分け、3つ目はgit worktreeの便利さ、4つ目はクリーンアーキテクチャの実践、最後に5つ目はClaude CodeとCodexの使い分けについてでした。
次回もお楽しみに！詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてくださいね！番組の感想もお待ちしています！それでは、また次回お会いしましょう！ありがとうございました！