Remix v3をサンプルコードで体験する。React非依存で“明示的に”UI制御できるコア機能3つ
今回は、実際にコードを書きながらRemix v3の特徴を体験します。概念として理解することと、手を動かして体感することは異なります。本稿では、配布サンプルコードを用いて、手動リアクティビティ、型安全ルーティング、合成イベントシステムの3つの機能を実践的に学んでいきましょう。
【2/4(水)オンライン開催！】型定義＆インタラクションテストでAIフロントエンド開発のガードレールを整備する
＼2/4(水)19:00～配信／ お申し込みはこちら キャリアと技術の可能性が見つかるメディア「レバテックLAB」は、日々進化するIT業界の第一線に立ち続ける方々をゲストにお迎えしたトークセッションやセミナーを定期的に開催。開発現場の課題解決に、明日からでも実践できる情報がいち早く手に入る場の提供を目指します。 イベント概要 昨今、フロントエンド開発におけるAI活用は当たり前になりつつありますが、…
React状態管理ライブラリの選択指針：「ローカル/グローバル/サーバー」における使い分けの基準
「このプロジェクトの状態管理、どうする？」Redux Toolkit？ Zustand？ Jotai？ 各ライブラリのドキュメントを読んでも、「結局どれを選べばいいのか」という判断基準が見えてこない。今回は、状態の種類に応じた実践的なライブラリ選択指針と、状態管理パターンの進化について解説します。
Remix v3とReactのトレードオフを徹底考察：AI時代に再評価される「Web標準」への回帰
Webアプリケーションの開発を続けていると、「いつの間にかフレームワークの学習ばかりしている」と感じたことはないでしょうか。この課題は、フレームワークが「厚く」なることで生まれます。多機能で便利な反面、学習コストが高く、Web標準から遠ざかった独自の概念が増えていく。その結果、バージョンアップのたびに学び直しを強いられることになります。AIツールが普及した現代では、この問題はより深刻です。
Reactコンポーネントの不要な再レンダリングを制御する。useMemo/useCallbackの使いどころとPropsの粒度管理
適切なPropsの扱い方は、コンポーネントの再レンダリングを制御し、ユーザーエクスペリエンスの向上に大きく貢献します。本記事では、メモ化フックやPropsの粒度管理による、Propsの最適化テクニックを紹介。パフォーマンスと保守性を損なう代表的なアンチパターンもまとめました。
Reactデザインパターン「Compound Components」実践ガイド。TypeScriptの型設計でPropsを意のままに操る
「このボタンコンポーネントにどこまでのPropsを持たせるべき？」判断に迷ったことはありませんか。Propsのバケツリレーを避け、TypeScriptによる型安全性とCompound Componentsによる構造の柔軟性を両立するUIコンポーネント設計を解説します。
App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離
Reactフォルダ設計における「機能別分類」。その理論を実際のプロジェクトでどう実装するか、具体的なアプローチを紹介。index.tsによる公開API設計、Next.js App Routerとの組み合わせ方から、FSDなど選択肢を広げるための知識まで、ポイントを解説します。
Reactフォルダ構造の最適解。コンポーネントの数に合わせて選ぶ基本方針
React公式にフォルダ構造の規定はないため、規模に応じた選択が重要だ。迷いが生じにくい「フラット構造」や、「技術別」「機能別」分類など、それぞれの特徴と導入時の注意点を解説。プロジェクトに最適な構造を見つけるためのヒントを紹介する。
Atomic Designの分類を見直す。3階層から始める、UI変更に強いコンポーネント設計
一時期大きな注目を集めたUI設計手法"Atomic Design"。プロダクトやチームの性質によってはかえって不便になることも。本記事では、Atoms/Organisms/Pagesの3階層に分けることで、開発効率を向上させるアプローチを紹介します。
Zustand、Jotai、Valtioの作者はなぜReact状態管理OSSを3つ開発したのか【フォーカス】
Zustand、Jotai、Valtio。なぜ作者は、明確に思想の異なるReact状態管理ライブラリを3つも開発したのでしょうか。
処理高速化や利便性向上に期待。「State of JavaScript」最新版で見るJS開発者注目の新メソッド
配列、非同期、セット、オブジェクトの各機能からビルドツールまで。State of JavaScript最新版から注目すべき新項目をピックアップし、技術トレンドを解説します。
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能
「新発見！フロントエンド技術の今」の連載。第15回は、HTMLに実装された新しいタグやAPIについて解説します。
フロントエンドテストはやっぱり大事！人気のテストフレームワークとともに種類別に解説
「新発見！フロントエンド技術の今」の連載。第13回はアプリの品質向上に欠かせないフロントエンドテストについて解説します。
「その改善、意味あるの？」に大きな価値がある。Webフロントエンド版DX Criteriaの生かし方
開発者体験を向上し、チームをもっと良い状態にするために、Webフロントエンド版DX Criteriaをどう役立てるべきなのか？ 策定メンバーの古川さんにうかがいました。
主要バンドラーの仕様を徹底比較。Import Maps、Viteなど「脱バンドラー」の動きも
「新発見！フロントエンド技術の今」の連載。第12回ではフロントエンドアプリの配布に欠かせないビルドツール「バンドラー」について解説します。
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
「新発見！フロントエンド技術の今」の連載。第11回のテーマはアプリ開発に便利に使える「JavaScriptライブラリ」です。
群雄割拠のCSSフレームワークのトレンドを理解する
CSSフレームワークを活用してスタイル設計を効率化する方法を詳しく紹介。Bootstrap, Tailwind CSS, PureCSS, UnoCSS, Open Propsの特徴と使い方を徹底解説。
量産型UIから脱却したくて。個人開発の賃貸検索「Comfy」が提言する“探しやすさ”の形【フォーカス】
わかりやすいUIの、個人開発賃貸物件検索サービス「Comfy」。「賃貸検索はサービスとの対話でもあるはず」と語る開発者に取材しました。
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介
「新発見！フロントエンド技術の今」の連載。第7回のテーマはJavaScriptの標準規格「プログラミング言語ECMAScript」を扱います。「State of JS」2022年度版をもとに、JavaScriptのStage4前の注目機能も紹介
良いUIUXは利益になる。スピードの裏にある日本と中国で異なるUI/UXデザインの考え方
中国のアプリやミニプログラムに見られる、便利さを徹底追求したUI/UXデザイン。ユーザー離脱を防ぎコンバージョンを高める設計は、日本でも注目されている。アジア圏で普及する中国企業のサービスから、実用的で優れたデザインの共通点を探る。
SPAは万能じゃない。「革新的」と言われているPWAはどこがすごいのか？
【新発見！フロントエンド技術の今】フロントエンド開発を取り巻く環境が刻々と変化するなか、進化を遂げる技術とプロダクトの最新事情を紹介します。連載第6回は、「革新的」と言われているPWA(Progressive Web App)の魅力を解説します
CSSは日々進化している！知ったら使いたくなる「モダンCSS」機能紹介
【新発見！フロントエンド技術の今】フロントエンド開発を取り巻く環境が刻々と変化するなか、進化を遂げる技術とプロダクトの最新事情を紹介します。連載第5回は、昨今注目されている「モダンCSS」をいくつかピックアップし紹介いたします
CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】
ファミコン風Webページをすぐにつくれる大人気のCSSフレームワーク「NES.css」。開発者であるフロントエンドエンジニアのダーシノさんは、実はもともとCSSが「嫌い」だったのです。そんなダーシノさんに、嫌いな技術との上手な向き合い方について聞いてみました。
静的ホスティングサービスの仕組みと使いどころ。そのメリットや使用の注意点も解説
【新発見！フロントエンド技術の今】フロントエンド開発を取り巻く環境が刻々と変化するなか、進化を遂げる技術とプロダクトの最新事情を紹介します。連載第4回は、昨今注目されている「静的ホスティング」についてその仕組と役割について紹介します。
フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ
「フロントエンド技術の今」の連載。第3回のテーマは「仮想DOM」。字面を捉えるとDOMを仮想化したものですが、その目的はDOM更新の高速化です。今回は、画期的だった仮想DOMと脱仮想DOMへの流れと、現在話題のフレームワークを紹介します。
HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説
「Web Components」による標準技術を駆使したフロントエンド開発の新しいアプローチ。技術的な要素とその実装方法を徹底解説します。
継続のコツは「わざわざ見に行く」をなくすこと。はてなフロントエンドエキスパートmizdraの情報収集術
はてな社でフロントエンドエキスパートとして活躍するmizdraさんは、移り変わりの激しいWebフロントエンド領域でエキスパートであり続けるために、どうやって情報収集をしているのでしょうか？あらゆる「しんどい」をハックして手に入れたmizdraさん流の情報収集について伺いました。
【catnose】Zennを生んだ個人開発者に聞く、プロダクト開発の美学
個人開発者として数々のプロダクトをヒットさせてきたcatnose氏のこれまでを振り返りながら、開発哲学や、30代になるとともに起きた心境の変化など、ざっくばらんに語っていただきました。
ネット後発国だからこそ自由な設計を採用できる土壌がある。 合理的に発展する中国独自のUI/UX設計
世界共通の技術を使いながら、独特の個性を持つ中国のWebデザイン。情報量が多く原色を多用するスタイルは、一見乱雑だが現地では合理的とされる。なぜ華やかで情報過多なデザインが好まれるのか。文化的背景から中国独自のWebデザイン論を読み解く。
- 1