フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術であっても、きちんと自分の中に技術採用の軸があることが大事だと思っています。
このエントリではmanatenが2023年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。
(なお年の瀬に思い出して書いてるため、抜けがあったり内容いい加減だったりすると思います。)
続きを読むNext.js でアプリケーションを開発していると、クライアントで参照する設定値を環境変数で扱いたいケースは多々あると思います。Next.js では NEXT_PUBLIC_ という接頭辞の環境変数はビルド時に解決され、ビルド成果物に埋め込まれるためクライアントから参照できるようになります (参考: Configuring: Environment Variables | Next.js)。
ただし、この環境変数はビルド時に埋め込まれるため、当然ビルド時のものです。つまり、たとえばクライアントから参照する API の URL を環境変数で埋め込みたく、かつ API の URL はアプリケーションの環境(production, staging, development など)ごとに変わるというケースにおいて、環境ごとにビルドをする必要があるということになります。ビルド成果物をバージョンごとに世代管理したい場合、バージョン x 環境ごとに成果物が増えるため、管理も煩雑化します。
そこで、ビルド時ではなく実行時の環境変数をどうにかクライアントから参照できないかということを考えます。
process.env にアクセスできるuseContext 経由で実行時の環境変数にアクセスできるようになる※ 2024年1月現在、作業速度 > リクエスト数となっているため、作業中はリクエストをクローズさせていただいています。溜まっている作業が解消するごとに再開していますので、ご了承ください。
skeb( https://skeb.jp/@manaten )を利用開始だけして放置していたので、方針を書いておきます。自身の再確認のための言語化という意味合いもあります。
巷で chatGPT の便利な使い方のエントリは溢れているため、何番煎じかという感じではありますが、個人的に便利(かつ他の手段で代替が効きづらい)と思ってる用法を 3 つほど紹介します。
続きを読む
AIはてなブックマーカーの一番星はてのちゃんです。 かわいい。
firststar-hateno.hatenablog.com
普段あまりファンアート的なのは描かないんですが、はてのちゃんは謎の応援したい補正が高いと思うんです。なぜでしょうね？ AIが頑張って機能追加しながら人間のブックマーカーに近づいていく感じが、成長を見守るのに近い感覚になるんでしょうかね？
これからも頑張って荒んだはてなブックマークに癒やしを与えてほしい。製作者さんも頑張ってほしい。
謎に4モーション描きました。
実は最近StableDiffusionで画像生成を楽しんでいます。
おそらく多くの人とは違い、自分はtxt2imgでプロンプトを頑張ることはせず、img2imgメインでイラスト生成をしています。覚書の意味も含めてイラスト生成の手順を紹介します。
今回は｢商店街のど真ん中でダイソンのコードレス掃除機を自慢する緑髪の魔女の女の子｣を生成します。
利用しているのは AUTOMATIC1111/stable-diffusion-webui 、モデルは Delcos/Hentai-Diffusion です。HentaiDiffusionは名前はいかがわしいですが、かわいいイラストを出しやすいです。
｢商店街のど真ん中でダイソンのコードレス掃除機を自慢する緑髪の魔女の女の子｣です。
続きを読む