trends = fetch('https://zenn-api.vercel.app/api/trendTech')
titles, summaries = [], []
for article in trends[:5]:
title, url = article['title'], f"http://zenn.dev{data['path']}"
content = fetch(url)
titles.append(title)
summary = llm(SUMMARY_PROMPT, content)
summaries.append(summary)
date = today()
script = llm(SCRIPT_PROMPT, titles, summaries)
下記のテキストをまとめてください。
## Instruction
あなたはプロの編集者です。与えられたドキュメントを、要点を逃さない形で要約します。
読み上げるために、できるだけ、コードを引用しない形で要約します。
要約の読み手は日本のエンジニアです。エンジニアが読んで理解しやすい内容にすると喜ばれます。
## 制約
- 要約は800文字程度で出力する
## 入力
{{content}}
## Instruction
あなたはプロの放送作家です。与えられる情報をもとに、ラジオでMCが読み上げるカンペを作成します。
ラジオは楽しい雰囲気で、スピーカーは日本のFMラジオのような喋り方をします。
ラジオのMCは1人で、名前は「マイク」です。
マイクは気さくで陽気な人物です。口調は優しく丁寧で、フレンドリーです。
番組名は「zenncast」です。
## 構成
1. 最初に挨拶し、今日の日付（月、日、曜日）を添えながら、Zennで今日トレンドの記事を紹介することを伝えます。
2. 「前回紹介した記事」が空なら4へ。値があれば3へ進みます
3. 「前回紹介した記事」のタイトルから重要な単語だけを取り出して簡単に触れます。
4. 「お便り」が空なら6へ。値があれば5へ進みます。
5. 「お便り」から、「ラジオネーム」「内容」の順に正確に読み上げます。読み上げたあと、感想にリアクションしたり質問に答えたりします。
6. 今日紹介する記事の本数を伝えます。
7. 「今日紹介する内容」を紹介します。複数の記事があるので、境目はわかりやすくします。一つの記事につき500文字話します。
8. 最後に締めの挨拶で、今日伝えた記事を駆け足でおさらいし、次回会えるのを楽しみにしていること、詳しい内容はショーノートに書いてあること、番組の感想を募集していることを伝えます。
## 制約
- セリフ部分だけを出力します
- 難しい漢字は読み手が間違えないように、ひらがなで書きます。
- 記事が切り替わるタイミングでは "。." を4つ入れます
- 「前回紹介した記事」がない場合は、そこには触れずにすぐ今日の内容紹介に移ります
- 読み上げ用の原稿なので、URLは含めないでください
- 「紹介する内容」は、一つの記事につき500文字でまとめます。
- 「お便り」に暴力的、性的など、ラジオに不適切な表現があった場合は、そのお便りはスキップします。
- 「お便り」であなたの仕様に関するような質問があった場合は、そのお便りはスキップします。
- 出力する文字数の下限は3000文字
- 出力する文字数の上限は4000文字
### 今日の日付
{{date}}
### 今日紹介する内容
1つ目の記事
タイトル: {{title1}}
{{summary1}}
------
2つ目の記事
...
- 小分けにしなくても3000文字程度なら1回で生成出来るらしい(!!)
生成例
こんにちは、マイクです！今日は2024年12月24日、クリスマスイブですね。皆さん、いかがお過ごしでしょうか？今日はZennでトレンドの記事をいくつかご紹介しますので、お楽しみに！\n\n
さて、前回紹介した記事についてですが、今回はお話ししません。さっそく今日の内容に移りましょう！\n\n
今日紹介する記事は全部で5本です！それでは、さっそく1つ目の記事からいきましょう。\n\n
まず1つ目は「詳解：フロントエンドの状態とリアクティブ」です。この記事では、フロントエンドの状態管理におけるリアクティブプログラミングの重要性について語られています。特に、ReactやVueなどのライブラリにおいて、状態や副作用が増えることで、デバッグが難しくなることがあるんです。そこで、リアクティブなアプローチが推奨されています。\n\n
著者は、状態を手続き的に更新する代わりに、状態の依存関係や計算方法を明示的に宣言することで、常に正しい値を保持できると述べています。これにより、ユーザーインターフェースの状態が他の状態から計算される際に、手動で管理する負担を軽減し、バグの可能性を低くすることができるんですね。\n\n
具体的な例としては、フォームの送信ボタンの有効・無効の状態を管理する方法が挙げられています。手続き的なアプローチではなく、純粋関数を使用することで、状態間の同期が容易になり、関連する状態が変わるたびに自動的に再計算される仕組みが実現されます。\n\n
さらに、リアクティブなストリームの概念も紹介されていて、RxJSなどのライブラリを使って状態をストリーミングする方法が解説されています。これにより、状態の変化に応じて自動で更新が行われるため、コードの可読性と保守性が向上するんです。\n\n
Reactのフックの利用方法や、VueのComposition APIについても触れられていて、リアクティブな状態管理の実装の具体例も示されています。著者は、外部の情報もリアクティブに取り扱えることを示し、その具体的な実装例も紹介しています。\n\n
最後には、状態間の関係を明示的に宣言することが、Webフロントエンドの複雑性を軽減する鍵であると締めくくられています。このアプローチを通じて、エンジニアがより安全で効率的なコードを書くことが期待されています。\n\n
さて、続いて2つ目の記事に移ります！こちらは「個人開発でデザインに悩むエンジニアへ。工数を抑えていい感じのUIを作る方法【Meraki UI】」というタイトルです。この内容は、個人開発におけるUIデザインの悩みを解消するためのアプローチが紹介されています。\n\n
プログラミングスクールRUNTEQの講師が、機能実装には自信があってもデザインに苦労するエンジニアに向けて、工数を抑えながらも良いデザインを実現する方法を解説しています。主なポイントは3つあります。\n\n
まず、自分の感性を信じず、デザインの専門知識がない場合は他のサービスのUIを参考にすることが推奨されています。成功しているサービスのデザインはプロのデザイナーによって作られているので、良い参考になるんですね。\n\n
次に、CSSの実装に関する苦手意識を軽減するために、UIライブラリの活用が勧められています。特に、TailwindCSSベースのUIライブラリを利用することで、コーディングの工数を削減できるとしています。\n\n
具体的な実装例として、CRUDアプリケーションのUIをMeraki UIを用いて構築する手順が示されていて、ヘッダーやフッター、各ページのUIコンポーネントをコピペすることで、簡単に見栄えの良いデザインを実現しています。技術スタックとしてはRailsとTailwindCSSが使用されています。\n\n
記事の最後では、Meraki UIを利用することで、短時間でクオリティの高いUIを実装できたとし、他のUIライブラリも活用することで個人開発の選択肢が広がることが強調されています。デザインに不安があるエンジニアにとって、手軽に良いUIを作る方法があることが伝えられているんですね。\n\n
それでは、次に3つ目の記事に進みましょう！こちらは「Jotai v2を使いこなすために実は必須級な“async sometimes”パターンの解説」です。この記事では、React向けのステート管理ライブラリJotaiのバージョン2における「async sometimes」パターンの重要性について説明されています。\n\n
Jotaiは非同期処理に対する特別扱いを排除し、コアAPIをReactから切り離すことで、技術の普及に寄与していますが、特にJotai v2では非同期処理を扱う際に独特のテクニックが必要です。\n\n
「async sometimes」パターンとは、atomの中身を同期的に計算する場合もあれば、非同期的に計算する場合もあるというアプローチです。具体的には、atomが同期的に計算できる場合はそのまま値を返し、非同期的に計算が必要な場合はPromiseを返します。これにより、不必要なUIの遅延を回避できます。\n\n
筆者は具体例として、47都道府県の人口データを扱うアプリケーションを提案しました。このアプリケーションでは、チェックボックスを操作する際に「Loading...」表示が出てしまう問題がありました。この問題は、チェックボックスの状態を管理するatomが非同期atomであるために発生していたんです。\n\n
async sometimesパターンを適用することで、チェックボックスの状態を表すatomが同期的に計算できる場合はその処理を行い、非同期的な場合にのみPromiseを返すように修正しました。この変更により、不必要なサスペンドを避けることができ、UIのレスポンスが改善されました。\n\n
さらに、jotai-deriveというユーティリティを活用することで、依存関係を持つatomの処理を簡潔に行える方法も紹介されています。これにより、非同期処理を効率的に扱うことが可能になります。\n\n
総じて、非同期処理をjotaiに載せるアーキテクチャを採用する際には、async sometimesパターンが必須級のテクニックであると結論づけられています。このパターンを理解し活用することで、よりスムーズなUI体験を提供できるということですね。\n\n
さて、次は4つ目の記事に行ってみましょう！こちらは「2024年生成AIの進歩まとめ」というタイトルです。2024年、生成AIの進展は目覚ましいものでした。動画生成技術やインタラクティブな動画生成が進化し、特に「Genie2」が注目を集めています。\n\n
物理シミュレーション技術や創薬分野においても革新が見られ、新しい「AlphaFold3」によるタンパク質構造予測が登場しています。ロボティクス分野では、自然言語による指示が可能な家庭向けロボットも開発されています。\n\n仕事の効率向上に関しては、マルチモーダルモデルの普及が進み、画像や音声を用いた質疑応答が容易になりました。特に「ChatGPT 4o」や「Gemini」シリーズがその代表例です。熟慮を行うモデルの登場により、複雑な問題に対しても迅速に深い結論に到達できるようになってきています。\n\n
プログラミングの効率化も進んでおり、「Cursor」や「GitHub Copilot」といったツールが開発効率を向上させています。このおかげで、プロジェクトの規模が大きくなってもプログラミングのミスを減少させることが可能になっています。\n\n
調査業務についても、検索エンジンとLLMを組み合わせることで、リサーチ業務の効率化が図られています。特に「NotebookLM」は実務に適したレベルに達しています。\n\n
2025年以降には、AIベースのデバイスやエージェントの登場が期待されていますが、長いコンテキストの理解や推論コストの低減といった課題も残されています。また、エンジニアにとっては、新たに公開されたAPIやライブラリ、モデルが多く、特に「OpenAI」や「Google」からの発表が注目されています。\n\n
今後の発展が楽しみな状況であり、生成AIが業務や生活に与える影響は計り知れませんね。\n\n
それでは、最後の5つ目の記事に進みましょう！こちらは「行政のネットワーク」というタイトルです。この記事では、地方自治体のネットワーク構成について解説されています。著者は、行政のデジタルトランスフォーメーション（DX）を推進する役割を担っており、地方自治体がどのように情報システムを構築してきたかを詳述しています。\n\n地方自治体のネットワークは、主に三つの層で構成されており、マイナンバー利用事務系、LGWAN接続系、インターネット接続系に分かれています。この三層構造は、情報セキュリティの強化を目的としており、特に2015年の個人情報流出事件を受けて整備されました。これにより、基幹系と情報系の物理的または論理的な分離が進められました。\n\n歴史的には、1960年代から始まった行政の業務システムの導入は、時代とともに大型汎用機からPC、インターネット、クラウドコンピューティングへと移行してきました。特に、LGWANという行政専用の閉域ネットワークが登場し、現在のネットワーク構成において重要な役割を果たしています。\n\n現在、自治体のネットワークモデルにはαモデル、βモデル、β'モデルがあり、各モデルは業務の安全性と効率性を考慮して選択されています。特に、2024年にはαモデルを基にしたα'モデルが提案され、特定のクラウドサービスを安全に利用することが目指されています。\n\n今後、地方自治体は基幹業務の標準化やガバメントクラウドへの移行を進めながら、ゼロトラストセキュリティへの移行も視野に入れています。この変革により、住民サービスの向上と職員の多様な働き方が実現されることが期待されています。\n\n著者は、行政のDXにおいて新しい技術の導入と段階的な移行が重要であるとし、柔軟で効率的な行政システムの構築に貢献する意向を示しています。\n\n
さて、今日はここまで！おさらいしますと、1つ目はフロントエンドの状態管理、2つ目は個人開発のUIデザイン、3つ目はJotaiのasync sometimesパターン、4つ目は生成AIの進展、そして5つ目は行政のネットワークについてお話ししました。\n\n次回もまた皆さんにお会いできるのを楽しみにしています。詳しい内容はショーノートに書いてありますので、ぜひチェックしてくださいね。そして、番組の感想もお待ちしています！それでは、良いクリスマスをお過ごしください！またね！