Enjoy native rendering on Android, iOS, and Web, or pixel-perfect consistency across mobile and desktop via our custom renderer.
せっかく作ったAIエージェントは一般ユーザにも届けたいですよね？？ 皆さん、AIエージェント触ってますか？ 私は最近LangGraphを触るのが楽しいです。 せっかく作ったエージェントは一般ユーザにも届けたいですよね？？ で、あればフロントエンドも作りたいんですが、これが私の様な素人には意外と難しいです。 APIとしてデプロイして蹴って使うのも手間ですし、Streamlitで実装するのも、 チャット履歴は？ツールを使った場合の表示はどうする？など意外と考える事が多くて面倒です。 もっとエージェント開発に注力してフロントエンドはサクッとモダンなものを実装したい... そんな風にして調べていたらChainlitと出会ってしまいました。 ※この記事の続編はこちら [Chainlit✖︎AWS]超簡単!?LangGraphマルチエージェントのチャット履歴をAWSクラウド上に保存しよう Chainl
はじめに Next.jsにServer Actionが新しく導入されました。サーバ上の関数をブラウザから直接呼び出すようなコードの書き味を提供するもので、非常に魅力のあるコンセプトだと私は思っています。ただしサーバ上で実行されるコードとブラウザで実行されるコードの境界が曖昧で、"use server"のセキュリティ上の懸念もよく議論されています。 一方で、私の先日の記事Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点からで、私はこの"use server"問題には言及しませんでした。まだ非常に新しい話題でかつNext.js側の対応も進行中だというのもありますが、実は個人的にあまり気にならないのが最大の理由です。 気にならなくなったきっかけは、Server ActionをRuby on Railsのコントローラと同じように考え始めたことです。こうする
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
Update (Dec 2024): React Router v7 has been released! We now recommend starting all new projects with React Router v7 and upgrading existing Remix apps. We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Ro
こんにちは、電話自動応答サービスIVRyでエンジニアをしている小瀬です！ 実は先月、ユーザーさんには伝わらない形で大幅な「作り直し」を行っておりました。 余談ですが、このブログを書いている時にちょうどこのツイートがバズっているのを見かけました。 過去のコードを作り直したいけど、作り直せない、みたいなことってあるあるなんだなと改めて思いました笑 今回僕らは勇気を出して作り直す決断をして、過去のコードはレポジトリ単位で捨てて、新規でAPIを100本弱、2-3ヶ月ほどかけて粛々と実装しました。 完全な作り替えだったので、リスクの高めのリリースでしたが、無事に障害なく乗り越えることができました。 今回は、作り直しの動機や、失敗しないために気をつけたことなどをブログにまとめていきたいと思います。 さらなる飛躍のために、一時停止 IVRyは、初めからリッチな構成で作ったわけではなく、どちらかと言うとプ
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
React開発におけるベストプラクティスである、bulletproof-reactを紹介します。 bulletproof-reactはReactアプリ開発のベストプラクティスとして作られたリポジトリです。 Reactには多くのライブラリがあり便利ですが、その反面多過ぎてどのライブラリを利用するのが良いのか選定に悩む場合があります。また、Reactはディレクトリ構造など自由に作ることができ柔軟性があります。しかし、ある程度決められた構成が無いと、コードに一貫性が無くなったり、複雑で読みにくくなる場合があります。bulletproof-reactでは、パフォーマンスや保守性、拡張性を踏まえてどのようなプロジェクト構成が良いかを提案しています。もちろんあくまで参考程度であり、実際に採用するかは個人の判断になります。 プロジェクト構成 bulletproof-reactで勧められている、React
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
はじめに こんにちは。ニフティ株式会社に入社して新卒四年目の佐々木です。 今回は、業務で触れる機会のあった「NextAuth.js」について紹介したいと思います。 この記事の内容 NextAuth.jsの特徴NextAuth.jsの実装方法 NextAuth.jsとは NextAuth.jsとは、Next.jsで認証機能を実装するためのライブラリです。 特徴 NextAuth.jsの特徴としては以下になります。 セッションデータの保存をデータベースなしでも使用できるサーバーレス環境向けに設計されている（それ以外の環境でも利用はできる）デフォルトの設定でセキュアになるように設計されている ログインのセッションについては、データベースを使用せずにJWTで管理することができます。 例えばユーザー情報をアプリケーション側に保持しなくても良い場合は、「ログイン機能のためにデータベースを用意する」とい
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript） アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。 本書籍では、NextAuth.js を使って Next.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒に NextAuth.js による認証機能を学んでいきましょう。
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
サムネイル こんにちは！kintone のフロントエンド刷新プロジェクト（フロリア）の@nkgrnkgrです。 フロリアでは、kintone のフロントエンドの ClosureToolsで書かれたコードを React に置き換えています。 本記事では フォーム画面の UI の状態管理に使うライブラリを選定する際に、どのような検証と意思決定を行ったかについて紹介します。この記事が UI の状態管理を行う際に何かの参考になれば幸いです。 kintoneのアプリ作成フォーム はじめに アプリ作成フォーム画面 アプリ作成フォーム画面とは？ ユーザーの操作と状態管理で考慮すべきこと ライブラリを選ぶ上での前提 今回の選定で考慮したライブラリの種類と特徴 ３つのライブラリの特徴 Redux(ReduxToolkit) について Zustand について Jotai について 利用状況とプロダクト要件を
React is easily one of the single most popular libraries in use today. Given that it was made within a juggernaut like Facebook, you might have assumed it was always destined for success. But what if we told you that React’s first brush with the public sphere was anything but glamorous? React.js: The Documentary brings you the full story behind the early days of React, focusing on the dedicated gr
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開 代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画「React.js: The Documentary」がYouTubeで公開されています。 動画の作成と公開を行ったのは、ITエンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画「Kubernetes: The Documentary」を公開しています。 参考：KubernetesをGoogleが開発し、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く