皆さん、こんにちは!マイクです!今日は2025年1月13日、日曜日ですね。今日はZennでトレンドの記事を紹介していきますよ!

さて、早速ですが、前回紹介した記事について触れていきますね。「もう少し楽にBranded Typeを使えるようにしたい」「MCPを使って160行のTypeScriptでミニコーディングエージェントを作る」「FastAPI の Dependency Injection (Depends + Injector )」というタイトルでした。これらの内容もぜひ、チェックしてみてくださいね。

では、今日紹介する記事の本数をお伝えします!なんと、今日も盛りだくさんで5つの記事を紹介しますよ!

それでは、最初の記事に参りましょう!1つ目の記事のタイトルは「レンダリング大全」です。この記事では、フロントエンド開発における「レンダリング」という用語の意味と、その関連用語、CSR、SSR、SPA、MPA、PPRについて詳しく解説しています。レンダリングはデータを計算して変換するプロセスであり、ブラウザではWebコンテンツを画面に描画することを指します。

ここで、CSR(クライアントサイドレンダリング)はクライアント側でDOMを更新する手法で、初回表示時にサーバーから空のHTMLを受け取ります。一方、SSR(サーバーサイドレンダリング)はリクエスト時にサーバーでHTMLを生成し、クライアントでハイドレーションを行う手法です。そして、SPA(シングルページアプリケーション)はソフトナビゲーションを使用してページ遷移を行うアプリケーションです。

時代や文脈によって変わるレンダリングの用語を理解することは、フロントエンド開発において非常に重要なことですよ!

。.

さて、2つ目の記事に移ります!タイトルは「VSCodeおすすめ拡張機能 ~エンジニアもどき編~」です。この記事では、Visual Studio Code(VSCode)のエンジニア向け拡張機能を紹介しています。まず、日本語化するための「Japanese Language Pack for Visual Studio Code」が必須とのこと。特に日本語しか理解できないユーザーには欠かせないですね!

さらに、Pythonを使用する開発者向けに「Python」という拡張機能が推奨されています。困った際にはこの拡張機能をインストールすれば解決できるというアドバイスもありますよ。また、「Black Formatter」はPythonのコードを自動的に整形してくれる優れたツールで、ぜひ導入したいところです。

FTPサーバに接続するための拡張機能も紹介されていて、特にさくらのVPSを利用する際の便利さが述べられています。これらの拡張機能を使うことで、VSCodeをより便利に活用できること間違いなしですね!

。.

続いて、3つ目の記事です!タイトルは「Cloudflare WorkersにNext.jsアプリをデプロイする」です。2024年9月にCloudflare WorkersのStatic Assets機能がリリースされ、Next.jsアプリのデプロイが可能になったとのこと。この記事では、その手順について詳しく説明しています。

まずは新しいNext.jsプロジェクトを作成するところから始まります。デプロイ時には「Do you want to deploy your application?」には「No」と回答するのがポイントです。そして、デプロイを確認するためのコマンドを実行すると、指定したURLでアプリを確認できるようになります。

さらに、動的なコンテンツをレンダリングするために、おみくじコンポーネントを実装する手順も紹介されています。CloudflareのKVやD1データベースを利用して、運勢の履歴を保存する機能も追加されるので、非常に実践的な内容です。これからのデプロイの参考にしたいですね!

。.

4つ目の記事に行きましょう!タイトルは「Ollama + phi-4 + Cool Cline を使いローカルでコード生成を試す」です。Ollamaとphi-4モデルを用いてローカル環境でコード生成を行う手順を解説している記事です。

まず、DockerでGPUを利用可能にし、Ollamaのコンテナを起動してphi-4モデルをダウンロードします。初回の実行時にはモデルのダウンロードに時間がかかりますが、動作確認も可能とのこと。Cool Clineを使用して、生成したいコードの説明を入力すると、自動的にソースコードが生成されるという便利さに驚きですね!

特にWebブラウザで動作するToDoアプリの生成例もあり、実際に動作確認も問題なく行えたそうです。これなら手軽にローカルでのコード生成ができるので、企業利用にも適していると感じました。

。.

最後に、5つ目の記事です!タイトルは「インフラよく分かってない奴がAmplify Gen2を使ってみた」です。著者がAWSのAmplify Gen2を利用して、バックエンドの実装に関する知識があまりない状態からチャットアプリを作成し、デプロイする過程を記録しています。

Amplify Gen2の簡便さに期待しつつ、実際に手を動かして学ぶことを決意した著者。AWSアカウントの作成やNode.jsのインストールなど、準備から始まります。最終的に、Amplifyを通じてプロジェクトをデプロイし、インフラを意識せずに機能を実装できた点に感動したそうです。

インフラの知識が乏しい著者でもアプリを作成できたことが実証されており、これからの開発に役立つ情報が満載です!



それでは、今日の内容を駆け足でおさらいしましょう!今日は、レンダリングの基本からVSCodeの拡張機能、Next.jsアプリのCloudflare Workersへのデプロイ、Ollamaを使ったコード生成、そしてAWSのAmplify Gen2を使ったチャットアプリの構築についてお話ししました。

次回またお会いできるのを楽しみにしています!詳しい内容はショーノートに書いてありますので、ぜひご覧ください。番組の感想もお待ちしています!それでは、またね!

Related episodes

内容の近いエピソードを推薦しています