技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
Next.js（App router）における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。 ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。 しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。 そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerのディレクトリ構成については、公式ドキュメントで以下のように記載されています。 There is no "right" or "wrong" way when it comes to organi
プログラミング練習用のタイピングゲームを作った話。エンジニアなら4000点を超えたい！ - Qiita
はじめに 少しキャッチーなタイトルにしました。すみません。 あくまで、お遊び程度として是非タイピングゲームを楽しんで頂ければと思います。 以下のプログラミング練習用のタイピングゲームを作成しました。 結構面白いです。ハマります。是非、一度プレイしてみて下さい。 4000 点を超えると、結構凄いです。 目指すべきスコア こちらのプログラミング練習用のタイピングゲームで、目標にすべきスコアを簡単にまとめました。社内で色々遊んでみて、大体こんな感じかなー、という感じで適当に書いてます。 8000 点以上 まだ誰も到達したことが無い未踏の地。自分はたどり着ける気がしません。 7000 点以上 かなりタイピングが速い人。寿司打で 20000 点以上は軽く出せる人が到達できるスコアです。 6000 点以上 寿司打で 20000 点を稀に超える人が到達できるスコア。 5000 点以上 タイピングのかなり
これまで、Findy Toolsのアーキテクチャ特集記事では、テーマや分野ごとに複数の企業からアーキテクチャや技術選定の背景を伺い、まとめた記事をお届けしてきました。今回から始まる新シリーズでは、1社の技術選定についてさらに深く掘り下げ、個々の選択がどのように全体の成功に寄与しているのかをより詳細に探っていきたいと思います。初回の本記事では、まず私たち自身であるFindy Toolsが、2ヶ月という短期間でリリースに至った技術選定の裏側をご紹介します。 Findy Toolsについて Findy Toolsは開発ツールに特化したレビューサイトです。 ツールのレビューや他社のアーキテクチャを見て技術選定の参考にすることが出来ます。2024年1月にベータ版としてサービスをリリースしました。 ベータ版までは ほとんど1人で開発され、現在は3名で開発を行っています。 立ち上げのスピードを重視して、
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
株式会社ナレッジセンスは、生成AIやRAGを使ったプロダクトを、エンタープライズ向けに開発提供しているスタートアップです。本記事では、RAGの性能を高めるための「Router Retriever」という手法について、ざっくり理解します。 この記事は何 RAGを実装するエンジニアが困りがちなのは、大量の文書から「いかに、ソースとなる正しい文書を検索してくるか」という検索部分です。この記事では、そういった文書検索の精度を上げるための手法である「RouterRetriever」の論文[1]について、日本語で簡単にまとめたものです。 今回も「そもそもRAGとは？」については、知っている前提で進みます。確認する場合は以下の記事もご参考下さい。 （注：前提として、今回の手法はちょっとディープです。これまでRAGをやってきたエンジニアで、「RAGの文書検索って難しい」と感じたことがある方にだけ刺さる内容
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
Next.jsでのクリパラメータでの扱い router.queryを使う const router = useRouter(); // ... router.push({pathname: "hoge", query: {id: router.query.id}}); useSearchParamsを使う const searchParams = useSearchParams(); // ... <Link href={{pathname: "hoge", query: {id: searchParams.get("id")}}}> Link </Link> 4
特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/ScheduledComponent.tsx export function ScheduledComponent({showAt, children}: { showAt: Date; children: React.ReactNode; }) { if (new Date() < showAt) { return null; } else { return children; } } これを Next.js Pages Router などから、以下のようにして使
前回はNEC、TIS、富士通の技術者が描いた全体概要図と物理構成図に注目した。今回は論理構成図に焦点を当てる（表3-2）。まずはインターネットイニシアティブ（IIJ）のITサービスインテグレーション4部2課でテクニカルマネジャーを務める田島文郎さんらのチームが描いた論理構成図に注目しよう。 田島さんらの図はセンター拠点からインターネットへと接続するコアネットワークを主な対象とする。ネットワーク機器など構成要素の大きさや配置と、図に書き込む情報量のバランスを工夫することで、インターネットと接続する回線が4系統もある大規模ネットワークを複雑にならないようにしている。 要素を伸縮させて線を見やすく 例えば構成要素の1つであるVR（Virtual Router、仮想ルーター）*10などのノードの大きさを自在に変えている（次ページの図3-4）。この工夫によってノード間の線を全て直線で表現できるように
クラウドネイティブ時代のプロキシTraefikのDocker入門 - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。税理士ドットコム事業部の @komtaki です。 先日、税理士ドットコムの local 環境に「クラウドネイティブ時代のリバースプロキシ」Traefikを導入しました。プロキシサーバーの候補として最初に思いついたのは nginx でしたが、最終的には、設定ファイル不要で compose.yml だけで完結する Traefik に決めました。 そこで本記事では、Docker を前提としたコンテナのラベルでの設定方法など、導入の過程で調べた Traefik を使うために必要な情報をまとめています。 なお Traefik にはロードバランサーの機能もあるのですが、ここではプロキシの機能に焦点を当てて説明します。 Traefik とは 主な特徴 Docker での基本的な設定 Traefik の本体の設定 ラベルでサービスごとの設定 ポート検知 ルーティングの設定 代表的なルールの設
Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合 | ドクセル
Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合
はじめに こんにちは。calloc134 です。 自分は普段 React を利用してフロントエンドの開発をしています。 SPA のルーティングを実装する上で、TanStack Router を利用することが多いです。 この使い方について、簡単にまとまったドキュメントが思ったより少なく感じたため、まとめていきたいと思います。 TanStack Router とは TanStack Router は、React のルーティングを行うためのライブラリです。 当初は React Location として、TanStack の Tanner Linsley 氏によって開発されました。 その後、改名や設計のし直しが行われ、TanStack Router として開発されており、2023 年のクリスマスに v1 がリリースされました。 現在は色々な機能が追加されており、React のルーティングを行うため
v0 とは v0 は vercel 社が提供する React ベース[1]の UI を作ることができる生成 AI サービスです。 こちらの指示をもとに、 shadcn/ui や tailwind を使って UI を構築することができます。 先日、public Beta 版が公開され、会話形式で UI を逐次生成できるようになりました。 これまでは、プロンプトを v0 に投げると数パターン実装例を提案してくれていましたが、 ついに会話でやりとりをしながらコンポーネントをブラッシュアップしていくことが出来るようになりました。 早速ログインして試してみます。 できることとしては下記の通りです。(2024年9月1日現在) ジェネレーティブAIを使って、shadcn/uiとTailwind CSSに基づいたコピー＆ペーストしやすいReactコードを作成します。 プロンプトを送信するか画像をアップロー
Next.js App Router 初採用！ 新規プロダクトでの採用理由と決定プロセス - SmartHR Tech Blog
こんにちは！プロダクトエンジニアのshiraです。 2024年6月にリリースした採用管理機能の開発をしています。 support.smarthr.jp 採用管理機能ではNext.jsのApp Routerを採用しています。SmartHRではこれまでApp Routerを使ったプロダクトがない状態だったので、技術選定時は採用するか迷いました。 この記事ではApp Routerを採用するまでの経緯と採用してみてどうだったかについて紹介させていただきます。 Pages RouterとApp Routerについて まずはじめにPages RouterとApp Routerについて軽く説明します。ご存知の方は読み飛ばしてください。 2024年9月現在、Next.jsのルーティングシステムは2つ用意されています。それがPages RouterとApp Routerです。 Pages RouterはNe
最近の盆栽ですけれど、tanukirpcというGoのWebフレームワークを書いています。ある程度やりたいことができはじめてきたので、どんなフレームワークかを紹介します。 github.com TL;DR Webアプリケーションでよくやるようなことを、最短手順で自然に書けるように設計したフレームワーク リクエストをパースして構造体にマッピングする リクエストの内容をバリデーションする レスポンスの構造体をエンコードしてレスポンスとして書き込む グローバルスコープもしくはリクエストスコープでの構造体のコントローラーへの依存性注入 DBコネクションやAPIクライアントの保持などに使う 現在の責務範囲はWebアプリケーションのコントローラーだが、Webアプリを作る時によくやるようなことはできるだけやれるようにしてく tanukiup 開発サーバー起動用コマンド。ファイル更新を監視してビルドおよびサ
SmartHRのフロントエンドの技術的変遷 ── 技術顧問のkoba04と語るこれまでとこれから - SmartHR Tech Blog
マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直
Next.js 事務局と権利者で利用 アプリケーション基盤となるフレームワークとしてNext.jsを利用しています。2022年の4月頃の開発立ち上げ当時から使い続けています。時期的にもReactで中規模以上のアプリケーションつくるならデファクトスタンダードだったと認識しています。 開発初期はとにかく事業の立ち上げのスピードを優先しており、ゼロコンフィグで簡単にアプリケーションが立ち上がること、ファイルベースルーティングが直感的でわかりやすいことなどが採用の理由でした。 export: static 事務局と権利者アプリケーションともに全てのページでログインしないと利用できないサービスなのでstaticビルドをしています。APIサーバーはJava(Spring Boot)で動いており、ログインが確認出来次第、全てブラウザからAPIコールしています。 ビルド時にAPIサーバーへの通信は発生して
4年運用した Vue2 を幾度の挫折を乗り越えて Vue3 にアップグレードした(vite に移行した)話 #GameWith #TechWith - GameWith Developer Blog
はじめに 挫折 Vue 3 への移行の手順 Vue 2.6.12 から 2.7.16 にアップグレード 依存関係 主な修正箇所 @vue/composition-api の削除 from '@vue/composition-api' を from 'vue' に変更 root.$route を root.proxy.$route に変更 root の型定義を SetupContext['root'] から Vue に変更 補足など vue-cli から vite に移行 依存関係 主な修正箇所 コマンドの変更 環境変数の修正 babel.config.js の修正 jest.config.js の修正 tsconfig.json の修正 index.html の修正 App.vue の修正 vue.config.js の削除、vite.config.ts の追加 補足など Vue 2.7.
Previous slideNext slideToggle fullscreenOpen presenter view Remix は RSC にどう対応するのか @mizchi Remix Tokyo 2024/09/25 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります Remix は cloudflare-pages で動くから好き そろそろ Remix で RSC したくない？ export default async function MyPage() { const data = await fetch('/api/data') return <div>{JSON.stringify(data, null, 2)}</div> } 非同期関数コンポーネントで非同期データ解
はじめにSakana AIさんのThe AI Scientistを筆頭に、LLM-Based Agentの社会活用は今後拡大してくと考えています。また、Agentで推論→結果を合成データとしてTuningに利用みたいな流れで、LLM自体の発展にもAgentは活用されていくと考えます。 これらをモチベーションに最近LLM-Based Agentの勉強をしており、試しに作ったものを一部Noteで共有できたらと思っています。 今回は、LLM-Based Agentの基本的なアーキテクチャであるReflection Agentを題材に、SNS投稿コンテンツを提案してくれるAgentを作成していきたいと思います。 LangGraphでの基本的なAgent Workflowの構築については以前の記事をご参照ください。 1. Reflection AgentとはReflection Agentでは以下の
ESLint v8のEOLなど: Cybozu Frontend Weekly (2024-09-10号)
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.me HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。 HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、
JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 Announcing Rspack 1.0 - Rspack 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 Migrating from Rspack 0.x - Rspack Safari Technology Preview 202がリリースされました。 Release Notes for Safari Technology Preview 202 CSSのbackground-clip: border-area/ruby-align、shape() function/@pageでjis-b4とjis-b5のサポートなどが追加されています。 また、ECMAScript Proposal
フロントエンドカンファレンス北海道開催など : Cybozu Frontend Weekly (2024-08-27号)
こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 8 月 27 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Boosting performance: Faire’s transition to NextJS https://www.faire.com/ が React Router から Next.js App Router へ移行した際の解説記事です。Remix や Fresh/Deno なども検討した結果、スピードやフレームワークの成熟度、移行作業のボリュームや開発者経験などから Next.js の採用に至っ
Migrating from AWS App Mesh to Amazon ECS Service Connect | Amazon Web Services
Containers Migrating from AWS App Mesh to Amazon ECS Service Connect After careful consideration, we have made the decision to discontinue support for AWS App Mesh, effective September 30th, 2026. Until this date, existing AWS App Mesh customers will be able to use the service as normal, including creating new resources and onboarding new accounts via the AWS CLI and AWS CloudFormation. Additional
Web で縦書きの段組みレイアウトは意外と難しい
概要 Web で文字数が不定の文章を縦書き段組みでいい感じにレイアウトするのは意外と難しい、ということを紹介する記事です。[1] 環境 Next.js App Router: v14.2.5 React を簡単にセットアップしたかっただけで、ほとんど関係ないです Windows 11 Google Chrome: v127.0.6533.120 実装 今回は「小説のような長さ不定の文章を、縦書きかつ縦スクロールで読みたい」という要望に応えることを想定します。 長い文章を縦書きかつ縦スクロールで読むには、読みやすさの観点で段組みするしかないと思います。 また一般の Web サイトにはヘッダーやフッターがあるので、最低限それらを模したレイアウトに収めることを目標にします。 縦書きで段組みする まず共通パーツとして夏目漱石の小説『こころ』の中身を詰め込んだコンポーネントを作っておきます。（中身は
What's Changed 4.19.2 Staging by @wesleytodd in #5561 remove duplicate location test for data uri by @wesleytodd in #5562 feat: document beta releases expectations by @marco-ippolito in #5565 Cut down on duplicated CI runs by @jonchurch in #5564 Add a Threat Model by @UlisesGascon in #5526 Assign captain of encodeurl by @blakeembrey in #5579 Nominate jonchurch as repo captain for http-errors, expr
はじめに 投稿予定のQiitaの記事について、AIがアドバイスをしてくれるアプリ（アプリ名：Clear Draft）を開発しました！ 初の個人開発ということで0からのアプリ作成はなかなか大変でしたが、苦労しながらもなんとか完成させることができましたので、本記事では、このアプリの詳細な機能のご紹介と、開発過程で得た知見、直面した課題、そしてそこから学んだ教訓などを共有させていただきます！ ちなみに、私がReactに初めて触れたのは約1か月前で、Reactの基本すら知らなかった状態からスタート しました。最初は試行錯誤の連続でしたが、少しずつ学びながらアプリを作り上げていった結果、ここまでのものを完成させることができました。本記事では、アプリ開発から学んだアウトプットの重要性についてもご紹介させていただきますので、是非お読みいただければ嬉しいです！ ※本アプリはプログラミングコミュニティ「JI
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
2024/8/28、TORETA TECH UPDATE #1 での資料です。
今回使用したソースコード Next.jsのセットアップ Next.js本体の準備 公式に則り npx create-next-app@latestで開始します。 $ npx create-next-app@latest ✔ What is your project named? … worksample-nextjs14 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommend
TanStack Router is an incredibly exciting project. It’s essentially a fully-featured client-side JavaScript application framework. It provides a mature routing and navigation system with nested layouts and efficient data loading capabilities at every point in the route tree. Best of all, it does all of this in a type-safe manner. What’s especially exciting is that, as of this writing, there’s a Ta
はじめに 煽りみたいなタイトルですみません。 Web ダンジョンというサイトを作りました。 階段を降りて行き、各階層にある答えを見つける、といった腕試しサイトです。 昔、隠しリンクを見つけて進んでいくようなサイトが流行ったよな〜と懐かしみながら作りました。 ちなみに階によっては開発者ツールを使ってもらう前提になっています。 駆け出しエンジニアの方や、これからエンジニアを目指すような人に、ちょっとした開発者ツールの使い方みたいなものを知ってもらえたらな、と思っています。 ベテランの方は暇潰しがてら遊んでみてください。 技術スタック フロントエンドのみのシンプルな SPA です。 バックエンドはありません。 言語 TypeScript パッケージ管理 pnpm ライブラリ追加もビルドも全体的に速い気がする npm, yarn が代替案として挙げられますが、使用感が一番良かった pnpm にしま
Rolldown + oxcによるビルド＆型生成の高速化など: Cybozu Frontend Weekly (2024-09-17号)
Rolldown + oxcによるビルド＆型生成の高速化など: Cybozu Frontend Weekly (2024-09-17号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/09/17のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 2024 WebKit Contributors Meeting WebKit Contributors Meeting 2024 の情報が公開されていました。 WebKit Contributor であれば参加できるようです。クパチーノで行われ、オンライン参加も可能とのことです。 Rolld
JSer.info #708 - date-fns v4.0.0がリリースされました。 Release v4.0.0 · date-fns/date-fns v4.0 is out with first-class time zones support! date-fns v4.0.0ではTimeZoneをサポート、ESMとCJSのdual packageに変更などが行われています。 TimeZoneのサポートは今まではdate-fns-tzという外部のパッケージで提供されていましたが、v4.0.0からは@date-fns/tzというIntlをベースにした新しいパッケージが提供されるようになりました。 Deno 2.0 RCがリリースされました。 Deno 2.0 Release Candidate Deno 2.0 RCではさまざまな破壊的な変更が行われているため、マイグレーションガイド
1. はじめに Next.js(App Router)をCloud Runにデプロイしようとしたのですが、Next.jsのビルド時に環境変数を設定するのに苦労したので備忘録です。 実はVercelを使えば即効で終わるのですが、それでもCloud Runを使いたい人向けの記事です。 2. 前提 Next.jsの環境変数はCloud Runに設定済みとします Cloud RunにNext.jsをビルドしようとする際はCloud Buildが走りnext buildを行います Cloud Runに環境変数を設定してもCloud Buildは環境変数を知らないので正常にビルドできません Next.jsが正常にビルドできるようにするには.envファイルなどで環境変数を教えてあげる必要があります Dockerfileやcloudbuild.yaml(つまりコード内)に機密情報をハードコーディングするこ
はじめに こんにちは、インフラ部のsue445です。 ピクシブでは2023年末に自社のデータセンターとAWSとをDirect Connect Gatewayで、データセンターとGoogle CloudとをCloud Interconnectで、それぞれインターコネクト（閉域網接続）を開通しました。 現在PastelaではDirect Connect Gatewayを、pixivcobanではCloud Interconnectをそれぞれ利用してオンプレミスのデータセンターと閉域網接続を行っています。 皆さんの会社でもデータセンターと各クラウドとを専用線などで閉域網接続は行っているかもしれません。しかし複数クラウドでの開通というのはあまり無い事例だと思います。 このエントリでは複数クラウドでの閉域網接続を通して得られた知見や、AWSとGoogle Cloudの微妙な仕様の違いを紹介させていた
ローカルLLM自由帳
言語モデルの「記憶」を管理する方法としては、１）追加学習や知識編集によってLLM自体の知識更新を試みる方法と、２）外部の記憶データから必要情報を適時検索してモデルに渡す方法、の2つの方向性があります。 この論文は後者の系統に属する研究で、人間のエピソード記憶のあり方を参照し、外部データを効果的に整理・検索することを目指した研究のようです。 タイトルは"Human-like Episodic Memory for Infinite Context LLMs"で、Huaweiの研究所とUCLの研究者らによって2024年7月に投稿されています。 arxiv.org 要旨 大規模言語モデル（LLM）は目覚ましい能力を示しているが、広範なコンテキストの処理にはまだ苦戦しており、長いシーケンスにわたって一貫性と正確さを維持する能力には限界がある。これとは対照的に、人間の脳は、生涯にわたる膨大な時間スケ
NIH症候群の逆襲 - タオルケット体操
僕がプログラマーになった20代前半の時期は、ちょうどRubyやPythonが日本でもキャズムの峠を越え始めたあたりだったようにおもう。 なので最初の数年間は、当初の所属組織がSIerやハードウェア寄りのお堅い環境だったのもあって 「OSSはとにかく最高でバンバン使え」 「（他人が作った）小さいパーツをとにかく組み合わせろ」 「自分で書いたコードは少ないほど良い」 という当初の風潮を無邪気に信用していたようにおもう。 （とはいえ僕がプログラミングを覚えた言語であるPythonは他と比べると比較的堅実で、標準でできることをちょっと楽に書けるだけのライブラリは入れるんじゃねえ！というような文化はあった） 現代でもそうなのかは知らないが、当時のSIerはほんの少しの不確実性が混じるくらいなら確実で再現性のある失敗を選ぶといった感じで、とにかく技術的にまともなライブラリ選定というものは存在しなかった
生成AI時代のNext.jsアプリケーション開発実践
この記事は？ 前回のアップデートからだいぶ時間が空いてしまいましたが、著者がこの1年Next.js周りの開発で着目していたのは生成AIによってスピードアップした開発ができないか どうか、ということです。 著者が思う大きなアップデートはv0を使ってのNext.jsの開発が盛んになってきた ことです。 v0を使ったコード生成 最も簡単なアプリケーションとして、掲示板の開発を考えてみましょう。 v0に対しては以下のような指示を与えてみます。 create a bulletin board site. Frontend should include header, and thread title, each thread include user name, comment この結果、生成されるファイルは以下の通りです: ・prismaに関するファイル群 generator client { p
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザー体験重視のSPAアーキテクチャ改 - laiso
2ヶ月でリリースしたFindy Toolsの技術選定の裏側 - Findy Tools
RAGで文書検索の精度を上げるには、複数の埋め込みモデルを使う
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介！
React Server Components で時限式コンポーネントを作る - mizdra's blog
ネットワーク図が情報過多になっていないか、IIJやNTT系に学ぶ見やすくするワザ
TanStack Routerでサクッと始める型安全ルーティング
public beta になった v0 を試してWebサイトを作る
tanukirpcというWebフレームワークを作っています - ぱいぱいにっき
SimpleでStaticなNext.jsを中心としたフロントエンド技術選定
Remix は RSC にどう対応するのか
LangGraphを使ったReflection Agent： SNS投稿コンテンツ提案Agent｜はち
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6
Release 5.0.0 · expressjs/express
【個人開発】技術記事作成をアシストしてくれる万能記事エディタアプリを開発しました！ - Qiita
Next.js14をVercelにデプロイするまで。+v0+Prisma+Neon
Introducing TanStack Router – Frontend Masters Boost
エンジニアへの挑戦状的なサイト作ったんですがクリアできますか？ - Qiita
2024-09-23のJS: date-fns v.4.0.0(timezone)、Deno 2.0 RC、Safari 18.0
Next.jsをCloud Runにデプロイする際にビルド時の環境変数を設定する
AWSとGoogle Cloudでインターコネクトを同時開通しました - pixiv inside