Next.js 型安全なルーティングを使う
Next.js 型安全なルーティングを使う Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experimental.typedRoutes フラグを有効にする必要があります。next.config.mjs に以下のように設定します。 /*
はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介します。そもそも前回のブログはこれを試すために環境を整備しなおそうとしたのがきっかけでした。なお、前回のブログはこちら。 www.keisuke69.net どこらへんが最高かっていうと全てのデータソースに対してGraphQLでアクセスできるようになるところ。これって最高じゃないですかね。ま、最終的には静的サイトとしてGenerateしてしまうわけですが。 ちなみに、なぜ、今回Gridsomeを試そうと思ったかというと、最近聞いたとあるPodcastで紹介されてたからです。それだけ。 Gridsome
Rust の DI を考える –– Part 2: Rust における DI の手法の整理 - paild tech blog
paild 社でお手伝いをしている yuki です。前回に引き続き Dependency Injection 略して DI の話題を書いていきたいと思います。今回は Rust における DI についていろいろと考えてみました。今回紹介する実装はかなり単純な例を用いたもので、この記事からさらにみなさんのアプリケーションの実装状況に合わせていくつか工夫は必要になるかもしれません。ただ、とっかかりとしては十分なものになっていると思うので、DI でお困りの方はぜひ参考にしてみてください。 今回実装したいアプリケーションのお題について 今回紹介する技法の種別について コンストラクタインジェクション 静的ディスパッチを用いたもの 動的ディスパッチを用いたもの 静的ディスパッチと動的ディスパッチの利点・欠点 shaku （DI コンテナ）を用いたインジェクション shaku の利点・欠点 余談: DI
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
こんにちは、株式会社ACES でテックリードをしている奥田(@masaya_okuda)です。 AIエージェントを活用し、自然言語による指示を中心にコーディングする手法が注目を集めています。特にゼロからコードを書く場面では、その効果の高さは多くの現場で実感されているのではないでしょうか？ 私たちもこの可能性に注目し、AIコードエディター「Cursor」をフルタイムの開発チームメンバー全員に導入。日々の開発でAIエージェントの活用を積極的に進めています。 一方で、既に運用中のサービスを開発しているチームにとっては、既存コードの文脈を理解させた上でどう活用するかが大きなテーマとなります。本記事では、そうした既存コードのコンテキストを踏まえたAI活用の実践について紹介します。 開発チームの前提と課題 私の所属する開発チームはAI議事録ツール「ACES Meet」を開発しています。このプロダクトは
TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR（React Query） は Container（Pages） 層で利用する Storybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ作らない 但し、Template 層以下の next/link や next/image への依存は制御できない なお本記事では、Next.js の依存層、Pages 層とTemplate 層という言葉は以下のこ
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
大規模なAndroidアプリにおけるマルチモジュールの導入事例 - Mirrativ Tech Blog
ミラティブのAndroidエンジニアの chocomelon です。 MirrativのAndroidアプリでは、Androidアプリケーションの内部品質向上のために開発で以下を取り入れています。 データフローの単方向化（Flux導入） Viewからのロジック切り離し（Flux、Jetpack Compose導入など） 責務分割、依存方向の強制（Flux、マルチモジュール導入など） 今回の記事では特にマルチモジュールについてお話します。 MirrativのAndroidアプリは、配信/視聴機能、アバター機能、リッチなアニメーションなど複雑な要素を一つの画面で表現することが多々あります。 これらを考えなしに実装すると、可読性の悪化を招いたり、不具合が発生しやすく調査しづらいコードにしてしまいがちです。 複雑なアニメーションやアバター機能などを持つ配信画面 ミラティブでは多くのメンバーがネイテ
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。 私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、 2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パ
こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js導入によるユーザー体験向上 デモ 定量的なパフォーマンス比較 ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い 補足：工夫しているポイ
Next.js（App router）における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。 ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。 しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。 そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerのディレクトリ構成については、公式ドキュメントで以下のように記載されています。 There is no "right" or "wrong" way when it comes to organi
2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
自社データ × ChatGPTで社内AIを構築するRAG ツール｜Doox β版をリリースしました - Qiita
TLDR 社内のデータを元に質問への回答を LLM が生成する仕組み（RAG）を構築するためのサービスを開発しました。 β 版として無料で公開しているので是非使ってみてください。 サーバーレスな構成で Next.js を動かしている。技術のキャッチアップは大変だ。 背景 仕事をしていると社内の規定 / 製品情報 / 過去の履歴 .. などに関する問い合わせは日常的に発生するものだし、その工数は結構ある。通常は Wiki を作ってナレッジを共有するが、結局「近い人や担当に聞く」という行為はなかなか減らない。 色々な企業が、社内のデータを元に質問への回答を LLM が生成する仕組み（RAG）を独自に開発しているようで、技術ブログとかに書いている方も多い。 社内向け RAG の構築を SaaS プロダクトで提供したら各社の社内の問い合わせ工数と独自に RAG を構築するコストを下げられて嬉しいん
AWS上のNext.js App RouterとCDNキャッシュ利用の課題と解決策 - Findy Tech Blog
こんにちは。 Findy Toolsの開発をしている林です。 私たちのプロジェクトではフロントエンドのフレームワークにNext.js App Routerを使っており、AWSのECSへデプロイして運用しています。 そして、一部のレンダリングの処理が重いページのキャッシュを実装する際に、直面した課題と解決策を紹介します。 Next.jsのキャッシュ機構について 今回実現したいこと 課題と解決策 課題1: Next.jsの機能では要件に合わない 解決策1: CloudFrontのみでキャッシュ 課題2: エラーページがキャッシュされる 解決策2: Lambda@Edgeを用いたCache-Controlヘッダー制御 まとめ Next.jsのキャッシュ機構について まず、Next.jsのキャッシュ機構について簡単に説明します。 Next.jsではサーバサイドで使えるキャッシュ機構が次の3種類あり
React Router v7でコードを書いてくれSonnet
Claude 3.7 Sonnetに代表される現在の主力なコーディングモデルやソフトウェア開発タスクの自動化に利用されるLLMは、知識のカットオフにより2024年後半頃までにネット上に存在する情報をもとにしたソースコードしか書くことができない。例えばAnthropicのAPIを直接利用して確認すると、「React Routerの最新バージョンはv6です」と返答が来る。しかし、最新版はv7だ。v7.0.0はちょうどこの時期にリリースされたため境界にあり、つまりv7の実践的な知識はない。これに限らず、LLMの世界ではNext.jsはv14、Flaskはv2、Railsはv7と一世代遅れたバージョンを認識していることになっている。 これらのアップデートによって入った変更は、既存のソースコードに記述していればLLMが空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ
Next.jsでSSRを限界まで簡単に実現する
１．getInitialPropsの終焉 1.1. Next.jsではgetInitialPropsのSSRが終わったことにされている Next.jsの9.3以降、getStaticPropsやgetServerSidePropsが登場し、現在ではgetInitialPropsを使ったSSRが終焉を迎えたかのような風潮となっています。しかしgetStaticPropsとgetServerSidePropsは、実際の所で大きな欠点を抱えています。 getStaticPropsはSSG前提で使うなら全く問題ありません。しかし、ある程度の更新頻度をもつシステムやリアルタイムな編集機能と相性が悪いです。ISRで使う場合も有効期限後の一回目で古いデータが表示される仕様があるので、タイミングが悪いと、せっかっく訪れた人に古いデータを渡してしまうことがあります。使いどころによっては強力ですが、用途は限定
Announcing Pub/Sub: Programmable MQTT-based Messaging
Announcing Pub/Sub: Programmable MQTT-based Messaging2022-05-12 This post is also available in 简体中文, 日本語, Español. One of the underlying questions that drives Platform Week is “how do we enable developers to build full stack applications on Cloudflare?”. With Workers as a serverless environment for easily deploying distributed-by-default applications, KV and Durable Objects for caching and coordin
Starlink(スターリンク)でBCP対策、フレッツ光クロスと冗長構成、IPv6にも対応、情シス必見！？ | IIJ Engineers Blog
長くゲーム業界に出向していましたが、2022年秋に戻ってきました。ゲーム業界での経験も生かしながらIIJのエンジニアとしてちょっと面白いことを提供できていければいいなぁと思っています。格闘ゲームの世界チャンピオンになった従兄弟がいますが彼にゲームを教えたのは僕ではありません(笑) 。CAPCOM CUP進出を決めましたねー！がんばれー BCP対策とStarlink Starlinkが日本でも使えるようになり、新聞やテレビのCMでもその活躍が色々と紹介されるようになってきました。ウクライナ戦争での利用やイーロン・マスクの話題性から始まり、スターリンクトレインによる天文イベント的な認知、能登半島地震によって日本でも有用性がアピールされています。 企業のBCP対策に必要なインターネットへの接続性を確保する手段として期待は高くなる一方でいざ導入となるとどうしたらいいのか？調べてみてもなかなか的確な
【忙しい人のための】Next.js公式チュートリアルを完走してきたので記事１本で振り返る【ギュッと凝縮】 | DevelopersIO
本記事はNext.jsのチュートリアルが大きく変わったためリンク切れを起こしています。 技術メモのため記事としては残しますが、リンク切れにご留意ください。 また機会があれば新チュートリアルで記事を書こうと思いますm(_ _)m こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は以下のNext.jsのチュートリアルをほぼ一通り（SEOのところ以外）実施しましたので、ポイントを記事化しました。 https://nextjs.org/learn/foundations/about-nextjs" チュートリアル自体は、以下のような内容が分かるものとなっています。 CRA（create-react-app）のみ使用しているとイメージしづらい、素のHTML + JavaScriptとReactの関係のイメージが分かる Reactがフレームワークではな
この記事は『blessing software 夏のブログリレー企画』の5日目の記事です。 昨日はasukaさん(@a_skua)の「Flutterを用いたWeb開発の今後について考える」が公開されました。 次回はKanonさん(@samurai_se)の「私がエンジニア勉強会を作り、ブログリレーを主催するまで」です！ はじめに 以前、Type Challenges Judgeという、type-challengesのオンラインジャッジを作りました。 Type Challenges Judgeは、type-challengesの問題の回答の正誤判定を行ったり、自分がどれくらい正解したかや、他の人の回答が確認できるアプリです。 このアプリをRemix + Cloudflare（Pages、D1）に移行してみた[1]ので、やったことについて書こうと思います。 技術スタックについて Type Ch
App Routerについて色々調べたので、「Page Routerからどう変わったか？」を中心にいろいろ書きます。 ※Next.jsのバージョンは13.4です 🤗Page Routerから変わった点 「これだけ抑えておけばOK」な内容についてザックリ書きます。 特別な意味を持つファイルができた Page Routerではpages直下につくったファイルがすべてルーティングされました。 ですがApp Routerでは、app直下のpage.tsxと書かれたファイルだけがルーティングの対象になります。 ほかにも、layout.tsxと書かれたファイルを置いておくと「layout.tsxでpage.tsxを自動的にラップする」ができたりします👇
開発者のためのReactJSロードマップ
ThemeSelection 高品質でモダンなBootstrap HTMLテーマや管理者向けテンプレートを提供するUIキットベンダ この記事は、著者の許可を得て配信しています。 https://dev.to/theme_selection/reactjs-roadmap-for-developers-2824 ReactJSまたはReactは、ユーザーインターフェイスやUIコンポーネントを構築するためのオープンソースのフロントエンドのJavaScriptライブラリです。Facebookや個人の開発者や企業のコミュニティがメンテナンスをしています。近年、コンポーネントベースのGUI開発に最適なライブラリの一つとして成長しています。 AngularやVue.jsのようなフロントエンドフレームワークは他にもありますが、Reactが他と違うのは、コンポーネントベースのGUI開発だけに焦点を当ててお
大規模アプリケーション開発運用をマルチテナント方式のGKEクラスタで実現した話 - MonotaRO Tech Blog
こんにちは。EC基盤グループの宮口（@smiyaguchi）と池田（@progrhyme）です。 モノタロウではKubernetesのマネージドサービスであるGoogle Kubernetes Engine（以下、GKE）を利用しています。 このKubernetesですがとても便利な反面、管理が大変で開発者がアプリケーションの開発とKubernetesの運用を同時に行うのは負荷が高くなりあまり好ましくありません。 そこでモノタロウでは開発と運用を分離できるように、社内でGKE共通環境と呼んでいるマルチテナント方式のクラスタによるアプリケーションの実行基盤を構築しました。 今回はその紹介をします。 マルチテナント・シングルテナントとは？ なぜマルチテナントのGKE環境を作ることにしたのか 全体概要 前提・環境情報 GKE共通環境の特徴 Namespace・ノードプールの分離 RBACによる権
こんにちは。sumirenです。 この記事は、OpenTelemetry Advent Calendar 2024 22日目の記事です。 イントロダクション 先日、筆者はSREingの技術顧問として、Go言語で書かれたアプリケーションにOpenTelemetryを導入するプロジェクトを担当しました。Webサーバーとバッチスクリプトを対象に計測を行ってオブザーバビリティを大幅に向上し、パフォーマンス改善を開始することができました。 筆者はオブザーバビリティとOpenTelemetryの専門家ですが、Goの経験は浅く、Goでの計装も初めてであったため、プロジェクト内のGoの専門家とコミュニケーションを取り、リサーチを重ねながら計装することになりました。自動計装を検討したもののGoでは選択肢が限られており、結果的に手動計装を採用しましたが、この過程で多くの学びを得ることができました。 （当然なが
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
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
Zoomが安定したサービスを提供している方法について調べてみた - GMO Research & AI Tech Blog
初めまして、システム部の劉（りゅう）です。 今はGMOリサーチのクラウドパネルのシステム連携などを対応しています。2014年入社以来、海外リモートワークや産休育児休など経験して、現在も時短で勤務させていただいています。 先日4/2（金）、GMOリサーチのオンラインテックカンファレンスが開催されました。 私は「Zoomが安定したサービスを提供している方法」についてのLT（Lightning talk）を発表しましたので、今日はブログのほうでも同じ内容を共有させていただこうと思います。 Zoomの利用者は約5ヶ月で30倍に 2020年、新型コロナウイルス の影響で、世界中で在宅勤務のニーズが急増しました。 そこで色々なオンラインツールやウェビナーが大活躍しています。 その中で、Zoomは特に注目されており、プライベートの繋がりから、仕事の場面まで広く活用されています。 弊社でも、日々Zoomミ
新年あけましておめでとうございます。 昨年はあっという間に過ぎ去ってしまったので、2023年はたくさん開発していきたいです。 はじめに はじめまして、kosei28という者です。 普段は大学に通いながら個人開発している19歳です。 この度、Chatockという掲示板のようなWebアプリを開発したので、紹介させてください。 つくったもの スレッドを作って、その中に投稿することができます。 スレッドにはタグをつけることができて、タグによってスレッドを検索することができます。 いいねをすることもでき、いいねしたスレッドや投稿は自分のライブラリページから見返すことができます。 背景 さて、皆さんはSvelteKitを知っていますか？ SvelteKitとは、SvelteのWebアプリを開発するためのフレームワークで、ReactにおけるNext.jsのようなものです。 ルーティングやSSRなどができ
スマホゲーム業界におけるPHPの歴史とLaravel Octaneで広がるこれからのPHP | CyberAgent Developers Blog
3月24日、サイバーエージェントのエンジニア・クリエイターによる技術カンファレンス「CyberAgent Developer Conference2022」を開催しました。本記事では、「スマホゲーム業界におけるPHPの歴史とLaravel Octaneで広がるこれからのPHP」の様子をお届けします。 目次 ■サイバーエージェントグループのゲーム事業の歴史とPHP ■PHPで培ったもの ■多様化するゲームの要件とサイバーエージェントグループでの事例 ■PHPの変革「Swoole」「Laravel Octane」の登場 ■Laravel Octane Deep Dive ■まとめ ■サイバーエージェントグループのゲーム事業の歴史とPHP まずはサイバーエージェントグループのゲーム事業の歴史とPHPについて振り返ります。サイバーエージェントグループでは2009年からゲーム事業に参入しており、20
For React Native users, React 18 will ship in React Native with the New React Native Architecture. For more information, see the React Conf keynote here. What is Concurrent React? The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for librar
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
ADSLルーターをギターのエフェクターに改造した猛者が登場
一般のアナログ電話回線を使って高速なデータ通信を行うADSLに使うHuawei製のルーター・HG532をギターのエフェクターにして演奏をするムービーを、エンジニアのbonsembiante氏が公開しました。また、HG532をエフェクターにするためのツールがGitHubで公開されています。 ¿Cómo conectar una guitarra a un router ADSL? - YouTube GitHub - bonsembiante/router-audio-dsp: Simple delay effect (with delay time, feedback and dry-wet params), developed to run on an ADSL Huawei router with a modified firmware https://github.com/bonse
What Nano JSX is designed to build ultra fast MPAs and SPAs using JSX. It uses a different approach than other JSX libraries like React, Preact or Inferno. Nano JSX is really close to the DOM. There is no Virtual DOM and you can manipulate the DOM as you want. You can even call Nano.render() inside a Component, which then renders some JSX code to manage another part of your app. You have full cont
TVerバックエンドチームの id:takanamito , 小林 ( @k0bya4 ) です。 この記事では、TVerにおけるAPIリアーキテクチャについて紹介します。 ここでいうリアーキテクチャはAPIサーバーのソフトウェア的なアーキテクチャを変更する作業のことを指します。一部インフラにも変更点はありますが、今回の記事ではソフトウェアのリアーキテクチャにフォーカスして書いていきます。 今回の記事では、なぜリアーキテクチャをするのか、どのような課題を解決しようとしているのかを整理して解説します。 リアーキテクチャをする理由 新アーキテクチャの設計方針 オニオンアーキテクチャの採用 プロセスの分割 新アーキテクチャの具体的な取り組み アーキテクチャ構造と分割の意図 コードジェネレートの積極的な採用 OpenAPI ORM APIのマイグレーション計画について やらなかったこと できていな
こんにちは、デジスマチームでエンジニアをやっている堀田です。 これまで、TypeScriptの型で色々試したことがあります。 2年前: TSの型で麻雀の点数計算 最近: 型で足し算 遊ぶことの方が多かったですが、先日M3 TechTalkで実用的かも？と思える話をしました。 そこでは、3つの場面を想定して、それぞれの場面でより安全なコードを書くための型定義を提案しました。 この記事では、その時の話をまとめて紹介します。 1. key? 2. ログ送信 Rest parameters with tuple types Function Overloadsでも実現可能 3. 画面遷移パス生成 まとめ We are hiring!! 1. key? 早速、1つ目の場面です。 ここでは、「パラメータを受け取って、その値によって生成か更新か挙動が変わる」以下のような関数を扱うことを考えます。 fun
「そういえば、高専ではこんな教科書読まさせられた」いろんな大企業の倫理やらかしエピソードが載ってて面白い「誇り高い技術者になろう」
りくお | MarpWebEditor @riku720720 20歳高専生 | MarpWebEditor開発者 | Web Engineer | Cursor(3倍課金勢) | Next.js(App Router,Server Actions) | Supabase | AWS | 学生AIコミュニティSunrise AI幹部
デザイナーがデザインツールを使わずに、React を使ってデザインした話 | MEDLEY Developer Portal
2020-06-19デザイナーがデザインツールを使わずに、React を使ってデザインした話メドレーのデザイナー酒井です。最近、JobMedleyからCLINICSに異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のようなデザインツールを利用するのが一般的かと思います。 弊社でも基本的にはデザインツールでデザインを行うことが多いのですが、プロジェクトによっては、よりリアルなモックアップが必要なため、デザイナー自身がコーディ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape
実践Next.js - App Router への理解を深めるために -
Cursor AIエージェントによる既存コードのアップデート戦略 - ACES エンジニアブログ
Next.jsに「できるだけ」依存しないReactアプリケーションの構成
React Server Componentsを理解したい
LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション
フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ
Vue.js と Nuxt の 2023年まとめ
個人開発アプリをRemix + Cloudflare D1に移行してみた
ざっくりApp Router入門【Next.js】
Go WebサーバーへのOpenTelemetry計装から学んだ手動計装の関心事
Merging Remix and React Router
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた
React v18.0 – React
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
Nano JSX • Lightweight 1kB JSX library
TVerバックエンドAPIのリアーキテクチャ - TVer Tech Blog
型を少し工夫して、より安全なコードへ - エムスリーテックブログ