おはようございます。マイクです。
FMラジオ「zenncast」、2026年1月23日、金曜日の朝7時を回りました。みなさんいかがお過ごしでしょうか。
この時間は、Zennに上がっているトレンドの記事から、開発のヒントになりそうなお話をゆるっとご紹介していきます。今日もコーヒー片手に、最後までお付き合いください。
さて今日は、お便りの紹介はお休みで、さっそく本題にいきたいと思います。
今日ご紹介する記事は全部で5本です。AIコーディングから動画生成、データサイズの感覚、そしてCSSとSVGの小ワザまで、盛りだくさんでお届けします。
まず1本目。
タイトルは「GitHub Copilotを使いこなすための概念整理」。
Copilotをなんとなく「すごい補完ツール」として使っている方、多いと思うんですけど、この話では「そもそもLLMってどう動いているの？」というところから整理してくれてます。ポイントは、Copilotは“魔法”じゃなくて「今見えているコンテキストの続きとして、一番それっぽいコードを出しているだけ」っていう理解ですね。だからこそ、いいコンテキストを渡せる人が、いい提案を引き出せる。インライン補完だけじゃなくて、Next Edit Suggestionsで「次の変更ここじゃない？」って出してくれたり、Copilot Chatの中にもAsk、Edit、Agent、Planって4つのモードがあって、どこまで自律的に任せるか選べるようになっている。さらに、`#file`とか`#codebase`で明示的に文脈を渡したり、`.github/copilot-instructions.md`や`AGENTS.md`にプロジェクトのルールを書いておくと、提案の質がガッと上がるんですよね。最近はVS CodeのエージェントモードやGitHubのCoding Agent、MCP連携まであって、「かなりの自動化」ができてしまうんですが、著者は「でも最終的なレビューは人間がちゃんとやろうね」と釘を刺しています。特にセキュリティとかビジネスロジックは鵜呑みにしない。そのうえで、プロジェクトに合わせたカスタマイズにちょっと時間をかけると、Copilotは“たまに当たる占い師”から“頼れるチームメイト”くらいには進化してくれるよ、というお話でした。
。。。。
続いて2本目。
タイトルは「Anthropic ハッカソン優勝者のClaude Codeの設定がすごすぎた」。
Claude Code、名前は聞いたことあるけど、まだちゃんと触れてない…という人も多いんじゃないでしょうか。この記事では、そのClaude Codeを「実務レベルでガチ運用するための設定テンプレ集」を紹介しています。名前が「everything-claude-code」で、まさに全部入り。タスクごとに役割を分けたエージェント、/tdd とか /plan みたいなコマンド、dev・research・reviewといったコンテキストのプリセット、さらに「セキュリティチェック必須」とか「TDD基本」みたいなルール群がまとまっているんですね。加えて、ドメイン知識やTDDのやり方をまとめたSkills、ツールの実行タイミングで自動チェックを走らせるHooks、GitHubやSupabaseとつなぐMCPの設定例まで付いてくる。プロジェクト単位やユーザー単位でのCLAUDE.mdもあって、「このチーム、この自分はこう振る舞ってね」とAIに教えておくイメージです。面白いのが、最初から全部盛りではなく、コンテキスト節約やモジュール化、セキュリティを意識しながら“段階的に導入できる”ように設計されているところ。いきなり自作で環境を組むのは大変ですが、こういうベストプラクティス集があると、「とりあえずこれを自分チーム用にカスタムしていけばいいか」と、かなりハードルが下がりますよね。Claude Codeを本気で仕事道具として育てたい人には、すごく良い雛形になりそうです。
。。。。
3本目。
タイトルは「AntigravityでRemotionのSkillをつかって動画を作成してみた」。
これはちょっとワクワク系の話です。Reactで動画を作れるフレームワーク、Remotionにエージェント用のスキルが追加されたということで、筆者はふだん使っているAntigravityから、このRemotion Skillを叩いて動画を自動生成できるか試してみたそうです。やっていることはシンプルで、READMEに目的と「このスキルを使いますよ」という宣言を書いておいて、Antigravityを起動して「セットアップとサンプル作成お願い」と頼むだけ。するとAIが、ゼロからRemotionの環境を構築して、HelloWorldコンポーネントを作り、最終的にmp4動画まで出力してくれた、と。対話型CLIが使えないという制約の中でも、AIがpackage.jsonや設定ファイルを自分で組み立てて、エラーが出たら自己修復して、ちゃんとレンダリングまでいくのが面白いですよね。さらに発展編として、外部のニュース記事を読み込ませてテロップ動画を作らせたり、JSONファイルをpropsとして渡して、同じフォーマットの動画を量産できるフローも試しています。つまり、「外部データ → コマンド一発 → 量産動画」というパイプラインが、ほぼノーコードに近いノーOps状態でできちゃう。テンプレ動画やダッシュボード動画を量産したい人には、かなり夢がある組み合わせだなと感じました。
。。。。
4本目。
タイトルは「〇〇MBって大きい？小さい？エンジニアなら身に付けておくべきデータサイズの感覚とは」。
これ、地味なんですけど、めちゃくちゃ実務で効いてくるテーマです。この記事では、まず「1バイトは半角1文字くらい」「テキストはKB単位」「画像は数MB」「動画は数百MB〜GB」と、ざっくりした“体感のものさし”を作ることをゴールに置いています。たとえば、スマホ写真は1〜5MB、1分の動画はだいたい100MBくらい、というイメージですね。そこから、「プロフィール画像の上限はこのくらい」「ユーザー1人あたりストレージはこのレンジ」といった、要件定義でそのまま使えそうなテンプレ回答まで紹介しています。さらにありがたいのが、AWSのサイズ制限周り。S3は1オブジェクト5TBいけるけど、API Gatewayは10MBまで、Lambdaの同期レスポンスは6MB、DynamoDBは1アイテム400KB、SQSは1MB…といった具合で、「あ、それ越えると死ぬんだ」というラインがまとまっている。で、結論としては「でかいデータはS3に置いて、アプリ側はURLで扱おう」という定番パターンに落ち着くんですが、その背景の“サイズ感”を身体で覚えておくと、設計の初期段階で変な構成を避けられますよ、というお話です。新人さんへのオンボーディング資料にも、すごく良さそうな内容でした。
。。。。
最後、5本目。
タイトルは「CSSで頑張らなくても、SVGで楽にできるときもある」。
これはフロントエンドの“発想の転換”の話ですね。筆者が作っていたのは、ノートの紙みたいなデザインで、見出しの下に「縦線が一定間隔で並んでいて、長い線と短い線が混ざっていて、しかも下端だけ丸い」という、ちょっとクセのある罫線。最初はCSSのrepeating-linear-gradientでがんばってみたんですが、縦線の下だけ丸くする、っていう表現がかなり難しかったそうです。グラデーションで線を繰り返したり、長短を表現することはできても、“線の下にだけ丸みを付ける”となると、トリッキーなテクニックが必要になってくる。そこで発想を変えて、SVGの出番です。patternとpathを使って、下側が円弧になっている縦棒の図形を1本描いて、それを一定ピッチで敷き詰めるようにしたところ、一気にシンプルに、狙いどおりの見た目が実現できた。コードとしても、むしろこちらのほうがわかりやすくて、あとから直すのも楽そうだ、という感想でした。CSSだけでなんとかしようとしがちですけど、「これ完全に図形だよな」と思ったら、一歩引いてSVGを選択肢に入れてみると、デザインの自由度と保守性がいっぺんに上がる、という気づきを与えてくれる記事でした。
。。。。
ということで、今日は5本の記事を駆け足でご紹介しました。
GitHub Copilotを“ちゃんとチームメイトに育てる”ための概念整理、Claude Codeを実務用にチューンするテンプレ集、AntigravityとRemotion Skillでの自動動画生成、エンジニアに必須なデータサイズの肌感覚、そしてCSSとSVGの使い分けの話まで、一気に振り返りましたが、気になるトピックはありましたでしょうか。
詳しい内容や元の記事へのリンクは、番組のショーノートにまとめておきますので、通勤・通学のあとで、ぜひゆっくりチェックしてみてください。
「zenncast」では、番組の感想や、取り上げてほしいテーマ、普段の開発の悩みなども大募集中です。ラジオネームを添えて、気軽に送ってください。
それでは今日はこのへんで。
お相手はマイクでした。次回の「zenncast」でまたお会いしましょう。いってらっしゃい！