React Router v7 の内部構造を探る：リクエストからレンダリングまでの道のり
はじめに React Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で Data API が導入され、フルスタックフレームワークとしての側面が強化されましたが、v7 ではさらに進化し、Vite との統合、Single Fetch、Lazy Loading といったモダンな機能がデフォルトで組み込まれ、より洗練された開発体験とパフォーマンスを提供します。 しかし、これらの機能がどのように連携し、ブラウザのリクエストがどのように処理され、最終的にページが表示されるのか、その内部構造は少し複雑に見えるかもしれません。 この記事では、React Router v7 で構築されたアプリケーションの動作フローを、主要なパッケージやコンポーネントの役割、データ取得の仕組み、レンダリングプロセスなどに焦点を当てて、内
フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け
【忙しい人のための】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がフレームワークではな
2025年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには3つのアイコンが必要
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、3つのアイコンで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて3つだけです。 ファビコンに必要な3つのアイコン、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2025: Three files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2025/2/20: 元記事がアップデートされたので、当記事もアップデートしました。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしま
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
クライアントサイドJavaScriptとOSSライセンスの関係、及び、その自動チェック - 理系学生日記
多くのライブラリにはライセンスが付属しています。 利用する側は、当然このライセンスに定められた条件を満たさねば、当該ライブラリを使うことができません。 多くのライセンスでは「頒布」(distribution) 行為に対して条件を課しています。そして、この「頒布」に関し、問題になり得るのがJavaScriptです。 JavaScriptで作成されるWebアプリケーションには、様々なOSSのモジュールがimportされbuildされ、クライアントにダウンロードされるわけです。 果たして、これは「頒布」にあたるのか、というところを懸念していました。 なお、僕はこの界隈の専門家ではないので、それを前提に以下お読みください。 クライアントサイドJavaScriptの利用形態は頒布にあたる ライセンスについて ライセンスのチェック クライアントサイドJavaScriptの利用形態は頒布にあたる 以下は
Hooks時代のReactライフサイクル完全理解への道
はじめに これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。 厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。 そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。 もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。 モチベーション 僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
Micro Frontends Architecture Patterns
本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
2020年の11の必見のフロントエンドトレンド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 2020年の11の必見のフロントエンドトレンド ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良
fetch() upload streaming は WebSocket の代替になるのか。Fetch を使ってカメラから取得した映像をストリーミングで送信する - 別にしんどくないブログ
Fetch Upload Streaming が Chrome 85 から Origin Trial で使えるようになりました。 何ができるかというと ReadableStream を fetch() の body に渡すことができるようになります。 getUserMedia でカメラから取得した映像をブラウザからストリーミング送信したいときに使えそうと考えたので、今回試してみました。 blog.chromium.org TL;DR fetch() で Stream のデータを送れるようになった WebSocket を使わずに映像などのデータをストリーミング送信できる 以下のコードがこの記事の内容 https://github.com/shisama/sample-streaming-video-with-fetch/blob/master/public/script.js Readabl
Web Vitals | Articles | web.dev
Published: May 4, 2020 Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. Overview Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to deliv
モダンフロントエンドの進む道 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まえがき 本記事は進化を続けるフロントエンド界隈の思想を大まかに紹介するものです。 「自分で問題を作って自分で解決する自作自演を繰り返している」というような批判をたまにうけるフロントエンド界隈ですが、 それぞれの技術はもちろん何らかの課題を解決するために生まれてきたものであり、 それらの課題と解決策を知り、フロントエンドがどのような方向に進もうとしているのかを認識しておくことは 流行のReactやVue.jsを活用していく上でも地味ながらも確かに役に立つことだと思います。 対象読者 ReactやVue.jsなどを使って現在流行のフロント
マイクロフロントエンドを調査した話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Fringe81 Advent Calendar 2018の24日目、本日はクリスマスイブですね！ 秋に調査していたマイクロフロントエンド(Micro frontends)について書きます。 マイクロフロントエンドとは [翻訳記事]マイクロフロントエンド マイクロサービスのフロントエンドへの応用でサンプルアプリケーションを交えて詳しく書かれています。 詳細はそちらに任せて、ここでは僕が大事だと思ったポイントだけ述べます。 マイクロサービスをフロントエンドまで拡張した考え方 近年SPAによって、フロントエンドとサーバサイドを切り分けて開発
「とりまわかるTTS」というお話 - Medley Developer Blog
2018-10-19「とりまわかる TTS」というお話こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「TechLunch」で、「とりまわかる TTS」と題して Web Speech API のお話をしました。 Web Speech API とは？macOS に、sayというコマンドがあるのはご存知でしょうか？ このコマンドは引数で受け取った文字列を発音してくれるというコマンドです。 ターミナルアプリを開いて、次のようなコマンドを入力してみてください。 このようにテキストから人間の声のように発音させる仕組みを音声合成といいます。 このような音声合成や音声認識に関しては macOS 以外にもAmazon TranscribeやGoogle Cloud Speech APIなどのクラウドサービスや Android ではTextToSpeech クラスという API が用意されていたり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vite によるビルド最適化：Minification、Tree Shaking、Code Splitting、アセットの最適化 - Qiita
控えめな App Router と持続可能な開発 - PWA Night vol.59
Hooks時代の設計の話 #agrinoteinside
