Valibot Schema Driven UI - ユーザーがノーコードで自由に UI を組み立てられるエディタを Next.js と Valibot で構築する - ROUTE06 Tech Blog
近年 Bubble や Webflow、日本だと STUDIO などのノーコードプラットフォームが注目を集めています。これらのツールは、プログラミングの知識がなくてもユーザーが思い思いの UI を構築できる機能を提供し、アプリケーション開発の民主化に貢献しています。 このようなノーコードでユーザーが自由に UI を組み立てる仕組みはどのように構築されているのでしょうか。一見複雑に見えますが、基本的な考え方を理解すれば独自のエディタを構築することも不可能ではありません。アーキテクチャの中核となるのは、動的な UI コンポーネントを表現するスキーマ定義と、それを実際の UI 要素に変換する仕組みです。この過程では、データのバリデーション、データ型の絞り込みと UI コンポーネントの動的生成、そしてそれらの適切な配置が重要な役割を果たします。 本記事では、ユーザーがブラウザ上で UI を自由に構
Next.jsのRoute Handlerを型安全にするType Alias - ROUTE06 Tech Blog
Next.jsのApp Routerには特定のルートにカスタムリクエストハンドラーを作成できるRoute Handlerがあります。 nextjs.org Route Handlerは非常に強力ですが、デフォルトではResponseの型情報を参照できないという小さな欠点があります。この記事では、Type Aliasを活用してレスポンスの型情報を推論する方法をご紹介します。 Next.jsのRoute Handlerについて 型推論のソリューションに入る前に、Route Handlerとは何か、そしてなぜそれほど有用なのかを簡単に見てみましょう。 Next.jsのRoute Handlerは、アプリケーションの特定のルートに対してAPIエンドポイントやカスタムサーバーサイドロジックを作成する方法を提供します。これらはWeb RequestとResponse APIを使用しており、他のサーバー
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
Azure Static Web Appに認証機能付きのReactアプリケーションを10分でデプロイする - ROUTE06 Tech Blog
Azure OpenAI Serviceを使うためにMicrosoft Azure環境を用意することがこれから増えてくると思います。その際、ウェブのフロントエンドをMicrosoft Azureで用意できると便利ですね。 Azure Static Web Appというサービスを使うと、GitHubのリポジトリと連携してフロントエンドの環境を用意でき、さらにパスワードを使った閲覧制限をかけることも可能です。 無料で使い始めることができ、パスワードを使った閲覧制限をかける場合も、1時間あたり$0.01で使い始めることができ、本番環境はもちろん、検証環境としても便利に使えると思ったので、この記事で Viteで作成したReactアプリケーションをAzure Static Web Appにデプロイし、パスワード制限をかける流れを紹介します。 Azure Static Web Appを作成する Azu
GraphQL成熟度モデルをROUTE06のtoBプロダクトに当てはめてみる - ROUTE06 Tech Blog
ROUTE06でソフトウェアエンジニアをしている宮城です。 oisham.hatenablog.com 早速参照したこの記事は、Meta 社 relay.dev チームの Jordan Eldredge 氏のTweetで紹介された GraphQL 成熟度モデル (GraphQL maturity model) を、ブログ著者のjunyさんの個人的な見解を加えながら和訳した記事となっています。 この記事を見かけ、とても参考になり面白かったのですが、「あなたの組織はどの程度成熟して（＝使いこなせて）いますか？」という Jordan さんの問いかけに反応し、ROUTE06でのto BプロダクトでのGraphQL活用状況を紹介していきます！ 対象となるプロダクト ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。簡単にプロダクトの特徴を説明します。 エ
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
