はじめに 数年前は私はメモ化警察でした。 「はーい、メモ化してなーい！」 脳死でメモ化してましたが、本当にメモ化って必要なのか考えるようになり、明確な答えを持たないまま、レビュー時にもメモ化が必要かという問いに「パフォーマンスに問題が出たら」という便利な言葉を使用し、逃げていました。 それはもう尻尾を巻いて。 そしてメモ化警察を退職しました。 煽りタイトルですが、いつメモ化すればいいかメモ化の基準とメモ化するかどうかの判断方法について、個人的に考察した考察記事となります。 今回はアニメーションなどなく、zen.devさんのようなWEBサービスを想定します。 この記事で取り扱わないこと Reactの書き方 メモ化の仕方 仮想DOMによる差分レンダリング Core Web Vitalsに関して メモ化の基準 早速結論ですが、レンダリング時に以下に当てはまる場合メモ化を検討するというのが私の結論
ここ2年ほど、すっかりフロントエンド開発者になっている藤田です。以前、Reactフロントエンドの状態管理ライブラリRecoilについて記事を書きました。 Recoilで快適フロントエンド開発 Recoil Syncでさらに快適フロントエンド開発 その後どうなったかというと、実はRecoilからJotaiに乗り換えていて、半年ほど経ちましたので、Jotaiについて書きたいと思います。 サイトの一行目から「Recoilにインスパイアされた」と言ってるとおり、Recoilの良いところを受け継ぎ、不便なところを無くしたような状態管理ライブラリです。 Jotaiの基本 基本はRecoilとほとんど同じで、React.useStateを便利にしたような感覚で非常に簡単に使えます。3ステップで見てみましょう。 1. Providerで囲む アプリケーション全体を<Provider>で囲みます。 impo
React の useEffect の実行タイミングについて、このように思っていませんか？ 依存配列（第2引数として渡す配列）を省略したら、マウント時に、そのあと再レンダーごとに実行される 依存配列に空配列を入れたら、マウント時に実行される 依存配列に値を入れると、マウント時と、値が変わるごとに実行される しかもクリーンアップ関数も絡んで来て、もっと複雑で覚えられない… …そのように考える必要はありません。 実は、useEffect の規則は至ってシンプルで、しかも UI ロジックの頻出の課題を洗練されたパターンに落とし込んで解決してくれます。 エフェクトとクリーンアップの実行タイミングは、以下のように論理的にシンプルな形で捉えることができます。 マウント時 に初回のエフェクトが発火され、アンマウント時 に最後のクリーンアップが実行される。 再レンダリング時 に、前回のエフェクトをクリーン
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ CSSフレームワークのTailwind CSSが注目を集めています。その特徴は、flex、pt-4、text-centerといったユーティリティクラスの組み合わせだけで、ほとんどすべてのスタイリングをしてしまおうという大胆なアプローチです。これまでのベストプラクティスと真っ向から対立するようなやり方ですが、だからこそ享受できるいくつもの強みがあります。本特集では、そうしたTailwind CSSの考え方や、具体的な使い方について紹介します。 お知らせ：本特集のサンプルコードは、GitHubの筆者リポジトリからダウンロードできます。https://github.com/yuheiy/wdpress133_
はじめに この記事は GENDA Advent Calendar 2023 13日目の記事です。 株式会社GENDA FE/BEエンジニアの shinnoki です。今年は自分にとって色々と変化のあった年で、年初にはアーリーのスタートアップでCTOを務めておりましたが、ご縁があり8月にGENDAに入社いたしました。 最近社員インタビューも公開されて入社の経緯なども触れていただいたため、興味があればぜひご覧ください。 今年は個人的にあまり最新技術のキャッチアップができていなかったことを差し引いても、フロントエンド界隈では激動の1年だったのではないでしょうか。 最新技術のキャッチアップが大変なのはフロントエンドに限ったことではなくどの領域においても発生する話ですが、フロントエンドは特に大変だよねという話は周囲からもよく聞くため、感覚として間違っていないと思います。 これらとどう付き合っていくか
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
use フックは 2024 年 4 月現在、React の Canary および experimental チャンネルでのみ利用可能です。 use は、Promise や Context から値を読み取るための React フックです。以下のコードのように Promise の値を同期的に読み取ることができます。 import { use } from "react"; const fetchUsers = async () => { const response = await fetch("/api/users"); return response.json(); }; const Users = () => { const users = use(fetchUsers()); return ( <ul> {users.map((user) => ( <li key={user.id}>
前回のエントリーで、コンポーネント単位のステートをがちゃがちゃ更新していくという、オブジェクト指向型（オブジェクトの境界がコンポーネント）の考え方から、より小さな状態のインタラクションになっていくよ、という話を紹介しました。 ビジネスロジックのアーキテクチャとしては、DDD本には以下の2つが書かれています。 ドメインオブジェクト(オブジェクト指向) トランザクションスクリプト(手続き型) DDD本はご存知のようにドメインオブジェクト押しなのですが、現実にはトランザクションスクリプトもよく使われますね。ただ、リアクティブな設計はこの2つとも違いますね。2つの要素A, Bがあって、Aの処理の結果を受けて処理Bを走らせる場合。だれがこの関連を知っているか、というところが違います。 オブジェクト指向だと、AがBを知っていて、AからBに通知します。「オブザーバーパターン」というのはありますが、あれも
はじめてのプロジェクトマネジメントでやりたい放題した結果
株式会社プラハは2022年、株式会社アガルートによるM&Aで子会社となりました。 この変化の一環として、アガルート社長自らがプロダクトオーナーのひとりとして参加する新規プロダクト開発が始まりました。プロダクトの開発はプラハの私たちが担当し、私も「開発チームのリーダー」としてそのチームに加わることになりました。 私はこれまで開発メンバーとしての経験しかありませんでしたが、エクストリームプログラミングとかレガシーコードからの脱却とかめっちゃ好きで、本で学んだプラクティスをリーダーとして実践できる機会が与えられて最高にハッピーでした。しかも、プロダクトオーナーの一人として参加するアガルート社長はこれまで伝統的な開発手法しか経験したことがないとのことで、新たな開発の進め方を経験してもらう絶好の機会でもありました。 やったこと 「欲しい機能一覧」を受け取ったが、いったん白紙に戻した プロジェクトが始
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
Remix の SPA モード
Remix の SPA モード 2024.01.14 Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。 Remix は React のフルスタックフレームワークで、Web 標準に基づいて構築されていることが特徴です。例えばデータのミューテーションはクライアントからサーバーの API をコールするのではなく、HTML のフォームを使って行うといます。また Resp
Nikkei Advent Calendar 2023の 14 日目は IDE がやっていきます。いま Web チーム内の基盤改善を専門とするチームで活動しています。自分が入社するより前に作られてメンテナンスがあまりされていなかったシステムを、現代でも戦えるようにするお仕事をしています。メンテナンスを放置することはセキュリティ的によくないので、メンテナンスを専業で行っています。最近の自分の仕事は、今日紹介する rnikkei と呼ばれるマイクロサービス群の Node.js バージョンを、v12 から v18(一部は v20) まで引き上げることです。この rnikkei は当初「爆速の日経」と呼ばれていた頃に設計・実装されたサービスです。今日はそのような過去に作られたサービスにもう一度スポットライトを当ててみようと思います。 see: https://marketing.itmedia.c
romgrk
I often feel like javascript code in general runs much slower than it could, simply because it’s not optimized properly. Here is a summary of common optimization techniques I’ve found useful. Note that the tradeoff for performance is often readability, so the question of when to go for performance versus readability is a question left to the reader. I’ll also note that talking about optimization n
【30歳/完全未経験/独学】webアプリを作製しました【Golang, Next.js, MySQL, Docker, GitHub Actions CI, AWS Fargate on ECS】 - Qiita
完成物 ER図 画面遷移図 figma, 原寸画像 AWS構成図 ※備考※ GitHub Actions CIは構築済みです。 GitHub Actions CD, apiのprivate subnet化にも取り組んでいます。 EC2インタンスは通常時停止です。 技術選定理由 プログラミング、IT業界ともに未経験で着手し独学で作りました。 Go 比較対象：JAVA、Ruby、Python、PHP コンパイラ言語であり実行速度が高速である 静的型付けであり、コンパイル前にバグを発見しやすい 静的型付けかつ記述自由度が低いことから、以下２点を利点と考えた 開発を中長期まで続けた際にも、加筆・改修しやすい 他人のコードを読んだ際に学びやすい Javaも多少書いてみたが、簡素にかけるGoの方がしっくりきた SHOWROOM、IRIAM、Twitch、AbemaTVといった動画配信サービスにも採用さ
こちらの記事は カケハシ Advent Calendar 2023 の 16日目の記事になります。 概要 こんにちは。AI在庫管理の開発チームでSWEをしている小室です。 私は普段ドメイン駆動設計(以下、DDD)を意識しながら開発することが多く、実践を重ねるほどDDDの素晴らしさを実感しております。 最近異動してきたAI在庫管理の開発チームでは、現状はあまりDDDを意識して開発を進めていないのですが、プロダクトが対象としている世界が非常に複雑であることと、今まさに多くの法人様に利用していただけるようになったうれしい悲鳴として成長痛を感じ始めており、ドメイン駆動設計を何かのヒントとしてプロダクトによる価値提供速度を加速できればと考えています。 しかしながら、ドメイン駆動設計は独自の価値観や学習コストの高さから、まだ取り組んだことのないメンバーとしては大きな不安を感じる部分があると思います。
こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します
HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章 - Qiita
概要 リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。 React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み返しながら随時更新していきます。 そもそもリーダブルコードとは ダスティン・ボスウェル著書の良いコードを書くための技術書です。 エンジニアになったら1度は目を通した方が良いとされる代表格の技術書ではないでしょうか？ 意味としてのリーダブル(readable)コード(code)とは、「読みやすいコード」と直訳できます。 チーム開発ではスムーズな開発や保守性を担保するために読みやすいコードが必要とされます。 リーダブルコードではそんな読みやすいという
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
Next.js 14
As we announced at Next.js Conf, Next.js 14 is our most focused release with: Turbopack: 5,000 tests passing for App & Pages Router 53% faster local server startup 94% faster code updates with Fast Refresh Server Actions (Stable): Progressively enhanced mutations Integrated with caching & revalidating Simple function calls, or works natively with forms Partial Prerendering (Preview): Fast initial
筆者はこれまで、定期的にVimのプラグイン紹介の記事を定期的に投稿していたのですが、2019年のVim AdventCalenaderに投稿したNeovimでモダンなPython環境を構築するv2(LSPを添えて)以降、ほとんどプラグイン紹介記事を執筆していませんでした。 他のかたの記載されるNeovim環境構築記事を見るたびに、筆者も自分の環境を紹介したいと常々思っていました。 ワシの使っているNeovimプラグインは200個近くあるぞ vim沼: NeovimのReact、TypeScript、Tailwind CSS用セットアップ Neovimでのフロントエンド開発環境 2022 しかしNeovim v0.5のリリース以降、増え続けるluaプラグインの洪水に飲まれ、筆者のNeovim環境はプラグインを入れては消しを繰り返し、安定しない日々を過ごしていました。 Neovim v0.5リ
React Hook Form は高速。 Formik は早くない。改善は可能。 React Final Form はある程度早い。 React Hook Form が無難ではあるものの、CPU 6× slowdown で 100ms は通常では許容できると考え Formik を採用するのもあり。 比較したライブラリ 計測の対象にしたライブラリは以下の 3 つです。 React Hook Form Formik React Final Form パフォーマンス以外の特徴にも触れておくと、 React Hook Form TypeScript 製 頻繁に更新されている UI とフォームライブラリが密結合になりやすい Formik TypeScript 製 ある程度更新されている UI とフォームライブラリを疎結合にしやすい React Final Form コードのほとんどが JavaScr
2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会計ソフト！ Tailwind CSSとは Tailwind CSSは、あらかじめ多くのクラスが用意されているCSSフレームワークです。Webサイトを制作する時に、HTMLの要素に直接、定義済みのクラスを付与して使用します。基本的に1つのクラスに1つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうで
こんにちは。日頃は blockchain の記事ばかり書いていますが、たまには生成 AI についても書きたいと思います。テーマは生成 AI で出来るだけ思い通りにサイトの生成を行います。 前提 今回は以下条件のサイトを生成します。 Next.js Tailwind LP向け レスポンシブ向け また、検証で利用した GPT は ChatGPT 3.5 です。 Bing Copilot を使用する場合、可能であれば Web 検索との連動を OFF にすることをオススメします。また、自社独自の専門用語をプロンプトへ加える場合は適宜補足説明を手動、または RAG 等でプロンプトへ加えてください。 背景 この記事を書くに当たって感じていた課題と解決したことを記載します。 課題 普段は、GPT系を駆使して素早くコードを作成することを心がけています。バックエンドの生成にはそれほど問題はないのですが、フロ
はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行
管理画面を作るフレームワークrefineを使って、Next.jsで管理画面を作ってみた | DevelopersIO
管理画面って作るのめんどくさくないですか？そんなわけでrefineを使ってみました。 refineは、管理画面を作成するためのReactベースのフレームワークです。refineを使ってNext.jsな管理画面を作ってみました。 管理画面って作るのめんどくさくないですか？ 管理画面は一般的に、データのCRUD（Create, Read, Update, Delete）が行えるデータの管理画面として使われることが多いです。 そうすると、一覧画面があって、データの登録画面があって、データの編集画面があって、データの削除画面があって、データの詳細画面があって…、という感じで大体似たような画面を作ることになります。 そういった手間を軽減するために、refine を試してみました。 refine は、管理画面を作成するためのReactベースのフレームワークです。 refine | Open-sourc
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
◆ Live配信スケジュール ◆ サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。 ⇒ 詳細スケジュールはこちらから ⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください 【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜 Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。 https://tech-lab.connpass.com/event/311864/ みなさん、こんにちは。サイオステクノロジー武井です。今回は、今話題沸騰の生成AIサービスであるAzure OpenAI Se
フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
こんにちは。@chaspy です。プロダクト開発部の技術戦略グループのマネージャをしています。 技術戦略グループでは、日頃開発する上での課題の投げ込みや議論、解決するための計画をボトムアップで行っています。技術戦略グループの活動については過去のアウトプットもご覧ください。 blog.studysapuri.jp また、本稿のテーマである、組織やシステムの状況を把握するための Fact 収集については技術戦略 DevOps WG が担当しています。以前発表した資料もご覧ください。 このように、技術戦略グループではエンジニア1人1人が課題だと思うことを表明、宣言し、その課題をトリアージすること、および課題を評価するための Fact の発見・提供を行う仕組みが組織としてボトムアップで行える状態になっています。一方、開発部長として、事業戦略と結びつける形で技術戦略を策定する際には、現場のエンジニア
銀の弾丸ではないので良し悪しあるのは当然として、それを差し引いても以下の2つの要素があるのではと思った。 なんとなく使ってもメリットが十分得られない RESTでできてたことができなくなる（※ちゃんと調べればできる） なんとなく使ってもメリットが十分得られないWeb界隈は良くも悪くも新しい技術をとりあえず使ってみるところがあると思っていて、そこがGraphQLは十分に事前知識を持って導入しないとメリットが薄いところとミスマッチを起こしてネガティブな意見が出るのかなと思う。 GraphQLはもともとFacebookがReact, Relayとの組み合わせで使い始めたもので、クライアントライブラリとしてのRelayと、IDやページネーションについての追加仕様を公開している。ライブラリとしてのRelayは使わなくても仕様に乗っかることはできるのでそれをRelayスタイルと言ったりする。出典を忘れた
Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい | フューチャー技術ブログ
タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？という記事です。 Next.jsは大きすぎる？フレームワークが大きいのはたいていそうで、提供されているすべての機能を使うわけではなく、その一部だけを使います。そのサブセット自体がシンプルであればフレームワークはどれだけ大きくても問題はないはずです。JavaとかPythonとかGoのコード書いてもごく一部のライブラリしか使わないわけで、でもそれに対して「ライブラリがでかすぎる」とは言わないですよね。 Next.jsは「より高速にする」機能がたくさんありますが、別にそんなの最初から使う必要はないですし、サービスによってはそもそもその機能が合わない、というのもあります。ユーザープロフィール画面にIS
Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想 仕
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
RAG構築のためのAzure OpenAI Serviceリファレンスアーキテクチャ詳解 | SIOS Tech. Lab
◆ Live配信スケジュール ◆ サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。 ⇒ 詳細スケジュールはこちらから ⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください 【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜 Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。 https://tech-lab.connpass.com/event/311864/ こんにちは、サイオステクノロジー武井です。今回は、「RAG構築のためのAzure OpenAI Serviceリファレンスア
package by feature のススメ
最近、package by feature というディレクトリ構成が様々なところで出てきています[1]。例をあげると、これらで見れます。 next.js の app router bulletproof-react 他人がはやく読めるコードを書くために しかし、package by feature について簡潔にまとまった資料がまだないため、人に紹介するときに不便です。そこで今回は package by feature とは何なのか、何が良いのかについてまとめます。 package by feature とは? package by feature とは、ディレクトリを feature 単位でまとめる手法のことです。 # package by feature src/ └ feature/ └ recordList/ (記録を表示するための機能群) ┝ DailyAverage.tsx ┝
2023年1月から9月にかけて弊社 BtoB web アプリケーションのリアーキテクチャリングプロジェクトにフロントエンドのシステムアーキテクトとして参画し、技術選定から開発メンバーのスキルトランスファー（育成）、果ては包括的な開発プロセスの改善までと幅広く支援してきました（2023年11月現在も進行中）。そこでの奮闘で得た学びと新たに浮き彫りとなった課題についてご紹介します。
前書き ESLint は JavaScript, TypeScript のための静的検証ツールです。 ESLint を活用することで、コーディング規約やベストプラクティスを機械的に強制することによりコードレビューの手間を省き、本番環境でのエラーやパフォーマンスの悪化を抑制することができます。 TypeScript を使っているプロジェクトでは、パーサーを適切に設定すれば型情報を用いたより精密な静的検証を行うこともできます。 eslint を使う際、 eslint:recommended, plugin:@typescript-eslint/eslint-recommended などの各 eslint plugin の推奨 config のみを使って済ませたり、 eslint-config-airbnb などの config のみに頼ることも多い印象ですが、 recommended conf
みなさん、はじめまして！ 東京ガスCX推進部デジタルマーケティンググループでエンジニアチームのリーダーをしております杉山です。 このたび、当チーム（以下、内製開発チームと呼びます）での技術的な取り組みについて紹介するため、 Tech Blog を開設しました！ 実は私たち内製開発チームは note の方でも投稿しているのですが、このブログではソフトウェアエンジニアの内容に特化したものを投稿していく予定です💪 東京ガス内製開発チームって？ 私たちのチームは myTOKYOGAS を中心としたお客さま接点のあるプロダクトを扱っております。23年11月、 myTOKYOGAS のリニューアルにあたって、私たちのチームはフロントエンド部分をフルリプレイスしました。 チームや部署、内製開発を始めた経緯については、ぜひ以下の note もご覧いただけたらと思います。 note.com myTOKYO
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
じゃあさ、いつメモ化したらいいか具体的に言語化できんの？
Jotaiで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
React の useEffect とクリーンアップ関数の実行タイミングがこれだけで分かる
Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp
フロントエンドのキャッチアップ大変だよねという話 2023
Promise や Context から値を読み取る use React フック
リアクティブプログラミングについて考える | フューチャー技術ブログ
Express と handlebars で動き続ける日経 — HACK The Nikkei
「価値」から小さく始めるドメイン駆動設計 - KAKEHASHI Tech Blog
ページ遷移時にReactコンポーネントの状態を維持する - pixiv inside
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
使い込んで厳選したNeovimプラグインたちをご紹介します
パフォーマンスを気にするならReact Hook Formが無難
Tailwind CSSを使う時の疑問と解決方法
生成AI で思い通りのサイトを出力しよう - Qiita
フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature
世界一わかりみの深いAzure OpenAI Service | SIOS Tech. Lab
技術戦略策定のための Fact 収集術 - スタディサプリ Product Team Blog
GraphQLのよくないところ｜adwd
Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site
【Next.js】実務でapp routerに移行した所感
Remix vs Next.js - React Japan
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
ESLint を使い倒す（おすすめルール紹介）
はじめまして！東京ガス内製開発チームです！ - 東京ガス内製開発チーム Tech Blog