```
こんにちは！「zenncast」へようこそ！今日は2024年6月26日、水曜日です。マイクです！今日はZennでトレンドになっている記事をいくつかご紹介しますので、最後までお付き合いくださいね。
さて、今日ご紹介する記事は全部で5本です。それでは、早速始めましょう！
....
まず最初の記事は「[翻訳]LLMで1年間開発して学んだこと〜LLMプロダクト開発を成功に導くための実践的ガイド〜」です。
大規模言語モデル、いわゆるLLMの開発が進む中、効果的なプロダクトを作るのはまだ難しいとされています。この記事では、過去1年間の開発経験をもとに、戦術、運用、戦略の3つのセクションに分けて学んだことが共有されています。
戦術セクションでは、プロンプト技術や情報検索、評価とモニタリングについて具体的な方法が紹介されています。運用セクションでは、データの品質管理やモデルの操作、プロダクト設計についてのアドバイスが記されています。そして戦略セクションでは、GPUの必要性や反復して品質を高める方法、LLMOpsの構築についての見解が述べられています。
さらに、LLMのコストが急速に下がっており、今後数年でさらに多くのアプリケーションが経済的に実現可能になると予測されています。デモから実際のプロダクトへと進化させるためには、戦術的な手法と運用技術、そして戦略的な視点が不可欠だということですね。
....
次にご紹介するのは「HTMX入門【はじめからそうやって教えてくれればいいのに！】」です。
この記事は、JavaScriptを使わずに動的なページを簡単に作成できるライブラリ「HTMX」について紹介しています。HTMXは、HTMLから直接最新のブラウザ機能にアクセスできる点が特徴です。
まず、HTMXを使用するための環境を準備します。ディレクトリを作成し、`index.html`を作成。VSCodeでHTMLのひな形を作成し、HTMXのスクリプトを追加するところから始まります。ローカルサーバーを立ち上げるために「Live Server」拡張機能をインストールし、ブラウザで確認します。
基本的な使用法として、主に4つのHTML属性が紹介されています：`hx-get`、`hx-swap`、`hx-target`、`hx-trigger`です。それぞれの属性がどのように機能するか、実際のコード例とともに詳しく説明されています。例えば、`hx-get`を使うとボタンをクリックしたときに指定されたURLの内容を取得して表示することができます。
他の学習リソースとして「100秒で理解する」シリーズのリンクも紹介されていますので、興味がある方はぜひチェックしてみてくださいね。
....
続いての記事は「思考のスピードでコードを書け！！Rust製の次世代エディタ「Zed」」です。
「Zed」は「思考のスピードでコードを書く」というキャッチコピーを掲げたRust製の高速・軽量なコードエディタです。AtomやTree-sitterの開発者が手掛け、2024年1月24日にオープンソース化されました。
特徴としては、高速・軽量な点や、AIサポート、豊富な言語サポート、Vimモード、テレメトリ機能などが挙げられます。特に、全CPUコアとGPUを効率的に使用することで、瞬時に起動・読み込みが可能です。
導入方法については、Homebrewでのインストールが推奨されており、CLIも提供されています。Vimモードはデフォルトではオフですが、設定ファイルやウェルカム画面からオンにすることができます。
また、AIサポートとしてGithub CopilotやOpenAI API、Local LLMを利用したチャット機能に対応しており、設定ファイルで言語ごとに使用有無を設定することが可能です。ターミナル機能も充実しており、画面の行き来がスムーズです。
「Zed」は非常にアクティブに開発が進められており、次世代のエディタとして注目されています。拡張機能の少なさなど課題もありますが、将来的にはメインエディタの座を獲得する可能性があります。
....
次にご紹介するのは「画像最適化の舞台裏をのぞき見👀してnext/imageを使いこなす」です。
この記事では、Next.jsのImageコンポーネントを利用した画像最適化の方法について解説されています。Next.jsのImageコンポーネントは、HTMLのimgタグをラップするReactコンポーネントで、srcset属性の利用やloading="lazy"属性の自動付与により、Webページのパフォーマンスを大幅に向上させることができます。
具体的な使用例として、NEWTアプリのTOPページでの実装方法が紹介されています。Imageコンポーネントは、異なるデバイスに対して最適な画像を提供するためにsrcset属性を使用し、画像の遅延読み込みを可能にするloading="lazy"属性を自動で付与します。
また、ローカル画像の取り扱いについても説明されています。相対パスでimportする方法と、publicディレクトリからの絶対パスを使用する方法があります。相対パスでimportした場合、画像のサイズを自動で割り当てることができ、キャッシュ設定に違いがあります。
Next.jsの画像最適化APIについても詳細に説明されており、画像のリサイズやフォーマット変換、画質の最適化、キャッシュなどの機能が提供されています。APIにリクエストする際のパラメータ（url、w、q）についても詳細に解説されています。
さらに、Next.jsはSharpという高性能な画像処理ライブラリを利用して画像の最適化を行っています。記事では、next/imageの仕組みを理解することで、Lighthouseのスコアやコストコントロールに活かせることが強調されています。
....
最後の記事は「デジタル認証アプリとのID連携で使われている標準化仕様と勘所」です。
デジタル認証アプリが公開され、開発者向けのガイドラインやAPIリファレンスが提供されました。このアプリは、マイナンバーカードを用いて当人認証を行い、民間および行政サービスにユーザー識別子や基本4情報を提供するものです。ID連携のためにOpenID Connect (OIDC)が採用されており、認証フローはスマートフォンやPC/タブレットから利用する場合に対応しています。
認証フローでは、スマートフォン内で完結する場合とクロスデバイスで行う場合の2つのパターンがあります。スマートフォンの場合、デジタル認証アプリを立ち上げ、ローカル認証を行い、マイナンバーカードの読み取りを経て認証が完了します。PC/タブレットの場合は、QRコードの読み取りと6桁の数字入力を行い、その後はスマートフォンと同様の手順で認証が行われます。
採用されている標準化仕様には、OpenID Connect Core 1.0、OAuth 2.0、JSON Web Token (JWT)などが含まれます。特に、認可コードフローやクライアント認証にはRFC6749、RFC7636、RFC7523などの仕様が関わっています。
デジタル認証アプリの勘所として、SPAやネイティブアプリのクライアントタイプがPublicになる問題や、パスキーの利用との関係が挙げられます。特に、パスキーを利用することで利便性を高める方法や、クロスデバイスの認証フローでパスキーの弱点を補う使い方が提案されています。
開発者は、APIリファレンスを読み解く際に、関連する仕様を参照することで理解を深めることが推奨されます。疑問点があれば、質問することも推奨されています。
....
さて、今日は5本の記事をご紹介しましたが、いかがでしたか？どれも非常に興味深い内容でしたね。次回もまたお楽しみに！詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてください。そして、番組の感想も募集していますので、お気軽にお便りくださいね。それでは、次回またお会いしましょう。マイクでした！
```