フロントエンド開発のトレンドは常に進化しており、長期にわたって人気があり続けるトレンドもあります。この記事では、2023 年に注目されるフロントエンド開発トレンドのいくつかを要約し、皆さんと共有します~
最高の時代もあれば、最悪の時代もあり、そんな時代でした知恵の時代、愚かさの時代、信仰の時代、疑いの時代、光の季節、暗闇の季節、希望の春、冬の冬絶望し、私たちは皆天国に向かってまっすぐに向かっていたのです。 —— ディケンズの『二都物語』
新年、装いも新たに!過去 3 年間はどの業界にとっても憂鬱な状況で、HS、GL、CY... は核酸を製造しているか、核酸の製造に向けて進んでいます。幸いなことに、疫病の霧は徐々に消え、一筋の光が見えてきました〜しかし、私たちはますます不確実性に直面しています。この不確実性に抵抗する唯一の方法は、継続的に視野を広げ、スキルを向上させることです。新年の初めは、不確実性の波に迷わないよう、フロントエンドの新しいトレンドに注目し、常に新鮮な気持ちを持ち続けてください。
経済的圧力により効率が重要なテーマとなり、生産性ツールの開発を加速することに重点が置かれることになることが予測されます。
Rome や Turbopack などのツールの迅速な開発が期待されており、これは開発者のエクスペリエンス (バンドル速度、CI##) に大きな影響を与えます。 #Astro や Aleph.js## などの React との互換性を維持しながら、JavaScript 配信および/またはスケーラブルなアーキテクチャ (サイロ) への新しいアプローチによる時間など# フレームワークはさらに注目を集めるでしょう。 私たちは、非
JavaScript (rust
、go
) で書かれたフロントエンド ツールの新時代の誕生を目撃してきました。移行コストを正当化する準備ができていない企業はまだたくさんありますが、あえて移行する企業は、(文字通り) 10 倍のビルド速度とエンジニアの幸福度の大幅な向上のメリットを享受できます。
これは、特定の方向に深く取り組むだけでなく、幅広いスキルも持つことを意味します。フロントエンド テクノロジーを習得したい人は、ネットワーキング、DevOps
、自動化、テスト、プログラミング概念、セキュリティ、SEO
、ユーザー エクスペリエンス デザイン、ソフトウェア アーキテクチャ、パフォーマンスを理解する必要があると彼は述べました。最適化、資産最適化に関する知識、分析など 美学に焦点を当て、構成と動きの概念を理解し、少なくとも色の基本を知っていることは非常に役立ちますが、Web タイポグラフィとタイポグラフィの原則についての十分な知識は必須です。
これは、2020 年 10 月以来最後のメジャー バージョン アップデートです。 React チームは React での並行性サポートの研究と開発を何年にもわたって行ってきたため、これは重要なマイルストーンであり、React コアの基盤であるレンダリング モデルの更新におけるもう 1 つの大きな前進です。 React 18 では、自動バッチ処理、
startTransition などの新しい API、Suspense
のサポートなど、すぐに使えるいくつかの改善点を確認してください。戻る ? 【###ポータル###】###
2015 年 6 月の ECMAScript 2015 (または ES6)
のリリースにより、JavaScript
言語がそれに加わりました。の黄金時代。クラスやモジュールなどの待望の機能を多数提供し、 async/await
や rest/spread
演算子などの他の重要な機能を追加した後の定期的な年次更新。
今ではかなり成熟した状態にありますが、言語はまだ年々着実に発展しています。 ECMAScript
2022 年のハイライトは、パブリック、プライベート、静的なクラス メンバー、トップレベルの await、および Object.hasOwn
です。
JS が成熟してもなお進化しているとすれば、CSS はこれまで以上に急速に進化しています。 CSS3 は HTML5 とともに大成功を収めました。CSS3 は単一の仕様としてよく語られますが、CSS レベル 3 では言語が「モジュール」と呼ばれるいくつかの独立したドキュメントに分割されました。現在、最新の CSS は単に CSS と呼ばれ、レベルは以前のバージョンと機能を区別するためにのみ使用されます。
CSS3 が革命だとしたら、別の革命が目の前にあります。より多くのビューポート ユニット、ネイティブ ネスティング、コンテナ クエリ...
ブラウザが追いつけない場合、言語の進化は無意味になります。幸いなことに、標準化の取り組みを受けて、主要なブラウザ ベンダーも標準化に準拠するために懸命に取り組んできました。現在、主要なブラウザはすべてエバーグリーン ブラウザです。つまり、バックグラウンドで自動的にアップグレードされ、常に最新バージョンが実行されます。
2022 年には、ブラウザーに多くの新機能が登場し、今後の機能についても多くの記事を書きました。 5 月 に開催される年次 Google I/O カンファレンスでは、ブラウザ チームが集結し、取り組む予定の機能と優先事項について話し合います。
Compat 2021 と Interop 2022 を振り返ってみましょう!
2022 年は、先進的な SSR
および ハイドレート
テクノロジー ( React Server Components や Selective Hydration) や Islands Architecture
などの新しいパラダイムの年。 後者について説明し、9 月に いくつかの実装を完了しました。
また、CSS-In-JS
に関する議論も見られ始めています。これは、ここ 2 ~ 3 年で、特に React
で非常に人気が高まっています。 。 10 月 では、パフォーマンスへの影響を含め、CSS-in-JS
の問題点と利点について検討しました。
TypeScript
はプログラミング言語です。 2012 年に Microsoft によってリリースされた JavaScript
のスーパーセット。これを作成するアイデアは、JS がオブジェクトの種類を制限しないという事実から生まれました。このプログラミング言語の名前が示すように、JS にはないオプションの型をサポートしています。 TypeScript
コードの編成を容易にするために列挙も追加されました。
Microsoft
のソリューションが市場にある唯一のソリューションではありません。ただし、GitHub
のステータスを見ると、TypeScript
は前年比でしっかりと 4 位に位置しています。これは今でもここで最も一般的に使用されているプログラミング言語の 1 つです。
TypeScript
は、JavaScript
構文とセマンティクスを採用しています。 JavaScript
開発者が切望する追加機能がいくつか提供されます。この言語により、開発者の生産性が向上し、増大するコード ベースの維持が容易になります。
最も強力な JavaScript
トレンドの 1 つである TypeScript
の主な利点を確認してみましょう。
始めるのが簡単: Javascript
に精通している人向け、この言語に切り替えるのはそれほど難しいことではありません。
広く採用されている: TypeScript
は、トップの Javascript
ライブラリとフレームワークによってサポートされています。さらに、読みやすく標準ベースの Javascript
をコンパイルします。
オプションの静的型付け : TypeScript
構造型または「ダック」型付けに基づきます。この言語を使用すると、既存の型を組み合わせて複合型を作成できます。これには、ユニオンまたはジェネリックを使用できます。さらに、この言語はインターフェイスをサポートします。
早期エラー検出: TypeScript
予期しない動作を強調表示することで、プログラム エラーの数を減らすことができます。これは、Javascript
自体のように、実行中ではなくコンパイル時に発生します。これが、TypeScript
が より高品質のコードを生成する方法です。
大規模ソリューションのサポート: Javascript
は、現代の Web に存在する大規模で複雑なシステムの作成を目的としたものではありません。これを行うために、TypeScript
は、インターフェイス、ジェネリック、モジュールなどのオブジェクト指向機能を借用します。
Stack Overflow Developer Survey によると、TypeScript
が 2022 年に最も愛されているプログラミング言語のトップ 5 の 1 つである理由は次のとおりです。 JS の傾向は、このテクノロジーの人気が 2023 年も引き続き高まることを示しています。
#したがって、この言語の広範な受け入れは、最近の JavaScript
の最も影響力のあるトレンドの 1 つです。ただし、欠点もあります。 TypeScript
コードは、ブラウザで実行する前に、通常の JavaScript
コードにコンパイルする必要があります。小規模なプロジェクトに取り組んでいる場合、この遅延は重大になる可能性があります。したがって、このような場合でも JavaScript
の方がより適切に機能します。
JavaScript
から TypeScript
への進化は止められません。 Web 開発の大規模な移行において、フルスタック アプリケーションのエンドツーエンドのタイプ セーフティが重要な傾向であることは間違いありません。この概念の実装は、型指定されたエンティティ (例: type User
、type BlogPost
) をサーバーからクライアント アプリケーションにブリッジするために必要な通信層 (API) に関連しています。
クライアント/サーバー通信のための Web 開発では、REST と GraphQL のどちらかを選択するのが一般的です。どちらも、REST の場合は OpenAPI、GraphQL の場合は GraphQL Code Generator とともに使用して、フロントエンド アプリケーション用の型付きスキーマ ファイルを生成できます。
ただし、REST/GraphQL の代替として使用できる、tRPC と呼ばれる将来のタイプセーフ API があります。フロントエンドとバックエンドがコードを共有する TypeScript
モノリポジトリで作業している場合、tRPC を使用すると、型付きスキーマの中間生成を行わずに、バックエンドからフロントエンド アプリケーションにすべての型をエクスポートできます。次に、フロントエンドはバックエンドで HTTP 経由で接続された型付き関数を使用してバックエンドの API を呼び出すだけで、実際のクライアント/サーバー通信が可能になります。全体的な傾向としては、tRPC、Zod、Prisma、TanStack Router などのフルスタック アプリケーションに対して、これらのタイプのセキュリティ ソリューションをより多く使用する方向に向かっていることは間違いありません。アプリケーションのエッジでタイプ セーフティを提供します。
すべては、2009 年のカンファレンスで Ryan Dahl が Node.js を発表したときに始まりました。 JavaScript をブラウザから切り離し、サーバー上で利用できるようにする実験として始まったものは、過去 10 年間にわたる JavaScript の成功の最大の推進力の 1 つになりました。基本的に、Ryan Dahl はブラウザ自体を使用せずに、V8 for Node.js と呼ばれる
JavaScript エンジン (Chrome によって実装) を使用しました。したがって、Chrome と Node.js は同じ JavaScript エンジンを使用しますが、それと対話するための独自の
JavaScript ランタイム (ブラウザ API と Node API など) を持っています。
は Deno を Node の後継として発表し、ブラウザのような API を含む開発者にとってより安全で高速な環境を約束しました ,
TypeScript とすぐに使える標準ライブラリ。
Deno も V8 上で実行されますが、現在は多数の JavaScript ランタイムの 1 つにすぎません。
JavaScript ランタイム (Cloudflare ワーカーなど) を実装しています。そのため、Deno のビジネス モデルも、
Deno Deploy と、Deno Fresh と呼ばれるインスタント エッジ レンダリング SSR フレームワーク (元々は概念実証として) により、クラウド プロバイダーになりつつあります。 Bun (JavaScriptCore Engine 上で実行され、悪名高く Zig に実装されている) のようなクラウド プロバイダーに依存しないソリューションは、最近、最速の JavaScript ランタイムをめぐる競争でもう 1 つのホットなトピックになっています。
JavaScript サポートが何年も続くことになりますが、今回はサーバー上で、異なるクラウド プロバイダーにデプロイされているため、実行時にすべての JavaScript が同等にサポートされるわけではありません。その結果、すべての関係者 (Deno、Vercel、Cloudflare など) が
WinterCG に参加し、JavaScript ランタイム間の API の相互運用性について協力することになりました。
中小企業にとっても問題はあり、開発者は「多忙な開発」に対応してローコード プラットフォームを開発しましたが、そのローコード プラットフォームは真の価値を反映していないようです。ビジネスマンにとって、これらのローコード プラットフォームの学習コストは高すぎます。
主な理由は、開発者が平均的なユーザー エクスペリエンスを考慮していないことかもしれません。しかし、実際の理由は、ビジネス担当者に適したエクスペリエンスをデザインできないことかもしれません。この問題は別の観点から見ると、金融テクノロジー企業では、Python に精通した金融エンジニアリングの人材を採用することを好みます。したがって、ローコード分野に目を向けると、これらの企業は何らかのテクノロジーに精通したデジタル人材を必要としている可能性があります。
React-land、create-react-app (CRA) が数年間主流でした。これは、初心者が React 設定でカスタム Webpack を構成することなく、すぐに使用できる React スターター プロジェクトを入手できたため、当時は小さな革命でした。しかし、ここ 1 年で、Webpack は急速に時代遅れになってきました。
Vite は、React.js などのすべての一般的なフレームワークと連携してスターター プロジェクトを作成するため、シングル ページ アプリケーション (SPA) は初めてです。 Vue.js の作成者である Evan You によって実装されたこのツールは、自らを次世代のフロントエンド ツールとして位置づけています。内部的には esbuild から強力な機能を取得しており、他の JavaScript バンドラーと比較して Go で書かれているため、Webpack などの競合他社よりも 10 ~ 100 倍速く依存関係をバンドルします。 Vite のエコシステムは Vitest
(Jest のベータ版代替品) などの新機能で繁栄していますが、Vercel のTurbopack などの他の競合他社も最近現れました。 Turbopack は、Webpack の作成者である Tobias Koppers によって主導されたため、Webpack の後継者と呼ばれています。 Next.js は現在も Webpack を使用しており、Turbopack は同じ会社によって開発されているため、将来的には Next.js と Turbopack が完全に一致する可能性があると予想されます。 新世代のツールの統合
1 月
と11 月 の記事で説明しました。 サーバー サイド レンダリング (SSR) とページ速度の最適化
人々は高速なエクスペリエンスを期待し、読み込みに時間がかかりすぎるページはすぐに放棄します。サーバー側レンダリングにより、最新のシングルページ アプリケーションがサーバー レンダリング アプリケーションと同じくらい高速でアクセスしやすくなり、同時に最初のページが読み込まれた後のアプリのようなエクスペリエンスが維持されます。
私たちは、React Server Components や Selective Hydration などのいくつかのテクノロジーを取り上げました。来年はこのパターンの採用が増える可能性が高く、React では lazy
から Suspense
までの人気も高まると予想されます。
過去 10 年間 (2010 年から 2020 年) は、Knockout.js と Ember.js を皮切りに、 クライアント側レンダリング (CSR) を備えたシングルページ アプリケーション (SPA) が主流でした。ここ数年、Angular.js、React.js、Vue.js に始まり、メタフレームワークを使用したサーバーサイド レンダリング (SSR) への関心が高まっています。私たちは長期間 (2005 年から 2010 年) マルチページ アプリケーション (MPA) で SSR と JavaScript (jQuery、MooTools、Dojo.js など) を使用してきたため、外から見ると、このサイクルが再び終わりつつあるように見えます。ただし、これまでは Java (JSP など) 以降の Ruby on Rails が SSR に使用されてきましたが、今回は JavaScript に依存しているため異なります。ここ数年、Next.js がこのトレンドの原動力となってきましたが、SvelteKit などの他のメタフレームワークが追いつきつつあります。
SSR は、完璧なパフォーマンスを求めて静的サイト生成 (SSG) と長い間競合してきました (Next.js と Gatsby.js を参照)。ただし、両方のモードはまったく異なる目的で使用されます。 。後者のモードは静的コンテンツ (ブログなどの Web サイトなど) に使用され、前者は動的コンテンツ (Web アプリケーションなど) に使用されます。 SEO が関連する場合、SSR と SSG の両方が意味を持ちます。ただし、非常に動的なコンテンツまたはユーザー中心のコンテンツと認証が必要なため、開発者は SSG (展開前に一度構築されるため静的) を選択することはできず、SSR (単一のデータ リクエストに基づく) で選択する必要があります。オンデマンドで構築する)または最新の CSR(クライアント上でオンデマンドで個人データを取得する)のどちらかを選択します。
CSR、SSR、SSG は、レンダリング テクノロジの最新のトレンドではありません。 SSR と SSG は数年前にパフォーマンス最適化のトレンドを開始しましたが、増分静的再生成 (ISR) やストリーミング SSR などのより微妙なレンダリング技術が生き始めています。前者は、Web サイト全体を再構築するのではなく、Web サイトをページごとに静的に再構築できる (たとえば、ページ X は 60 秒ごとに再構築される) ため、SSG を進化させています。さらに一歩進んで、オンデマンド再検証とも呼ばれるオンデマンド ISR を使用して、アプリケーションによって公開される API 経由で (CMS データの更新時などに) 再構築をトリガーできます。
一方、ストリーミング SSR は、サーバー側レンダリングの単一スレッドのボトルネックを最適化します。通常の SSR は、レンダリングされたコンテンツをクライアントにすぐに送信するためにサーバー上のデータを待つ必要がありますが、ストリーミング SSR を使用すると、開発者はアプリケーションを複数のチャンクに分割し、サーバーからクライアントに並行して徐々に送信できます。
過去数年間、SPA/MPA の SSG および SSR レンダリング モードは非常にシンプルでした。しかし、今日では、より微妙なバージョンが人気を集めています。ただし、ISR および SSR フローの関連性が高まっているだけでなく、部分的なハイドレーション (React サーバー コンポーネントなど) ではクライアント上の特定のコンポーネントのみをハイドレーションでき、プログレッシブ ハイドレーションではハイドレーション順序をよりきめ細かく制御できます。 MPA でアプリケーションやコンポーネントを分離する (例: Astro) ことや、水和の代わりに回復可能性を使用する (例: Qwik) ことは、今日では効果的なアプローチになりつつあります。
シングル ページ アプリケーション (SPA) とそのそれぞれのフレームワーク (React.js、Vue.js、Svelte.js など) は、多かれ少なかれ誇大宣伝サイクルを経ています。そして何年も続いています。ただし、これらのソリューションに加えてメタ フレームワークが台頭しているため、アプリケーションがクライアント サイド (CSR) からサーバー サイド レンダリング (SSR) に移行するという明らかな傾向が見られます。最近、JavaScript フレームワークを使用する場合、SSR がどこにでも使用されます。
Next.js という名前の最も人気のあるメタフレームワークは、React.js 上に構築されています。 React コア開発者の Andrew Clark 氏は、これまでのところ、これを 2022 年の「真の React 18 リリース」と呼んでいます。これは、React チームが下位レベルの基本構成要素 (サスペンス、ストリーミング SSR など) ライブラリとして提供するすべての付加機能が付属しているからです。 Vercel (Next.js を支える会社) と React.js コア チームは緊密に連携して、優れた開発者エクスペリエンスを提供します。 多くの開発者は Next.js と React.js の密接な関係を懸念していますが、
Remix(最近 Shopify に買収されました) など、React.js に代わるものもあります。 Remix は、React.js をメタフレームワークに変えるために異なるアプローチを採用しています (例: Web 標準を第一級市民として使用)。ただし、競合により 2 つのフレームワーク間には統合された機能 (例: ネストされたルーティング) もあります。 Next.js は現代の SSR 分野ですでに確立された候補であり、多くのフロントエンド開発者を自然にフルスタック開発者に変えてきましたが、注目すべきフレームワークは他にもあります。
SvelteKit(Svelte.js 上に構築) とその最新 1.0 バージョンは、Vercel および SolidStart (Solid.js 上に構築) と React を利用しています。 .js は DX と比較して改善されています。
PWAプログレッシブ Web アプリケーション (PWA) は、Web 開発への新しいアプローチです。 Web アプリケーションとネイティブ アプリケーションの長所を組み合わせて、すべてのデバイスで動作する高速で信頼性の高い魅力的なエクスペリエンスを作成します。 PWA を使用すると、Web サイトでこれまで以上に多くのことができるようになります。これらは、App Store または Google Play ストアのほか、ウェブ上でも入手できます。
PWA は、オフラインでの作業に加えて、プッシュ通知とバックグラウンド更新もサポートしているため、ユーザーは組織や機関からの最新ニュースを簡単に入手できます。
プログレッシブ ウェブ アプリは 2023 年も引き続き人気が高いでしょう。これらのアプリは、従来の Web アプリとプラットフォーム固有のアプリの間のハイブリッド エクスペリエンスを提供し、ユーザーがアプリとしてデバイスに追加できるようにします。また、オフライン体験も提供し、プッシュ通知とバックグラウンド更新もサポートします。
データ取得ライブラリ (React Query や SWR など) や Service Worker は、インストール可能な Web アプリケーションに高性能で動的なアプリのようなエクスペリエンスを提供するために不可欠であるため、今後も注目を集めることが予想されます。
あなたは、デバイス上でプラットフォーム固有のアプリを使用することに慣れているかもしれません。これらはホーム画面、ドック、タスクバーに表示され、インターネット接続の有無に関係なく機能します。これらはスタンドアロン アプリケーションとして起動され、ブラウザーや他のアプリケーション (おそらくコア オペレーティング システム以外) には依存しません。他のアプリ内でも、写真を撮ったり、ホーム画面で再生中の曲を表示したり、曲の再生を制御したりすることができます。デバイスの不可欠な部分のように感じられます。
従来の Web アプリケーションは、遠くに感じられることがよくあります。これは、通常、実行するにはインターネット アクセスが必要であり、その速度は帯域幅に依存するためです。
最近のトレンドは、両方のハイブリッドのようなプログレッシブ Web アプリケーション (PWA) の開発です。開発者は、最新の API と連携してプログレッシブ Web アプリをコード化し、単一のコード ベースを通じて誰でも、どのデバイスでも、どこにいてもアクセスできるようにしながら、強化された機能と信頼性を提供します。
PWA は非常に人気があり、やがて従来の Web アプリケーションが完全に置き換わると考える人もいます。
PWA は基本的にアプリのように見える Web サイトです。例としては、Tinder、Pinterest、YouTube Music、Trivago ホテル予約などがあります。これらは、特定のテクノロジーのセット (後で説明します) を使用して構築され、Web 経由で配信されます。 PWA は、デスクトップ コンピューターでもタブレットでも、標準に準拠したブラウザーを使用するあらゆるプラットフォームで動作するように設計されています。プログレッシブ Web アプリは、ネイティブ アプリができることのほとんどを実行できます。
それでは、プログレッシブ Web アプリケーションはどのように構築されるのでしょうか?テクノロジー スタックは HTML、JS、CSS で構成されます。テクノロジーの観点から見ると、PWA は Service Worker、HTTPS、App Shell、Web App Manifest、およびプッシュ通知で構成されます。それぞれについて説明しましょう。
Service Worker は PWA の中核であり、Web 開発業界の変革者です。 Service Worker は、ネットワークとバックグラウンドで実行されているアプリケーションの間のプロキシとして機能し、Web サイトが情報を保存できるようにして、ユーザーがオフラインでアクセスできるようにします。
HTTPS 高レベルの先進的な Web アプリケーション セキュリティを維持することで、Web アプリケーションをサイバー攻撃から保護します。
#App Shell アプリケーション ページのフレームワークとして機能します。コンテンツや動的要素のないレイアウトを表すため、シェルと呼ばれます。つまり、これは仮想フレームであり、後でアプリケーションがロードするときにコンテンツが設定されます。
Web アプリ マニフェスト は、アプリ名、説明、アイコン、開始 URL、背景、テーマの色が含まれる JSON ファイルです。
プッシュ通知 は、ユーザーが Web サイトから受け取る単なる通知です。
Google の公式紹介文 によると、PWA は高速であり、不確実なネットワーク条件下でも即座に読み込み、信頼性が高く、滑らかなアニメーションと途切れのないスクロールでユーザーに迅速に応答します。インタラクションと魅力的な - デバイス上で自然なアプリのように感じられ、没入型のユーザー エクスペリエンスを実現します。
出典:
さらに、Codica の開発者は、優れたユーザー エクスペリエンスを備えた PWA の開発において豊富な経験を持っています。たとえば、私たちの最近のプロジェクトの 1 つは、フィットネス トレーナーとそのクライアントの間のコミュニケーションを簡素化するために設計された フィットネス アプリ でした。 PWA のおかげで、クライアントとトレーナーは、インストールしなくても、どのデバイスからでもこのソリューションにアクセスできます。
5G テクノロジーの発展により、ビデオの読み込み速度が非常に速くなり、単純なリアルタイム レンダリングがビデオに直接置き換えられるようになります。複雑な場合は、サーバー レンダリング を使用して画像を Web ページに送信できます。送信が十分に速い限り、携帯電話のパフォーマンスは問題になりません。
Web 3D 研究開発コストの削減は、今後の重要な開発ルートとなるはずであり、技術的な敷居が下がるにつれて、より多くの関心のある人々が参加し、積極的な開発が促進されるでしょう。したがって、Web 3D はプラットフォーム化の方向に発展する可能性があり、シンプルで効率的なツールを提供することが Web 3D の競争力の中核となるでしょう。
WebRTC は、フロントエンドの情報伝達の新しい世界への扉を開くリアルタイム通信テクノロジーです。 -エンド開発者、情報の送信は依然として XMLHttpRequest に限定されています。全二重にアップグレードするときは、誰もが WebSocket を使用します。機能が制限されたフロントエンドにとって、WebRTC は間違いなくフロントエンドの技術的パスを広げました。
コンポーネントベースのアーキテクチャは、設計を論理要素または機能要素に分割します。これらの要素には、メソッド、プロパティ、イベントなどのよく知られたインターフェイスが含まれています。このアーキテクチャは、コンポーネントの再利用を強化することを目的としています。これらのコンポーネントは、機能をカプセル化する自己展開可能なバイナリ ユニットです。
最新の JS トレンドとフロントエンドの開発全体について言えば、Bit と呼ばれるオープンソース プラットフォームについて話さなければなりません。これは、あらゆるプロジェクトの Web コンポーネントを共有、保存、整理するための優れたツールです。これは、コードの再利用性と個別のコンポーネントでのコラボレーションの向上に役立ちます。
では、なぜ最近の JavaScript トレンドの 1 つであるコンポーネントベースのアプローチを実装する必要があるのでしょうか? [コンポーネント] を選択すると、チームが別のプロジェクトまたはオープン ソース コミュニティ全体のために開発したコードの一部を使用できます。
バックエンド マイクロサービスからインスピレーションを得て、次のソリューションとして マイクロ フロントエンド アーキテクチャを構築しました。モノリシックなフロントエンド構造。これは、独立したアプリケーションと同様に、全体の構造を独立したコンポーネントに分解することです。別々のコンポーネントに取り組むことで、開発チームは単一のコードベースの個々のコンポーネントに同時に協力して、フロントエンド全体を開発できます。
State of the Front End 2020 記録によると、開発者の 24.4% が、マイクロ フロントエンドを使用した Web アプリケーション開発の恩恵を受けており、効率的なエラーのない開発が向上し、生産を迅速に進めることができます。顕著な例は、アプリケーションを拡張するためにマイクロ フロントエンド アーキテクチャに移行した Agorapulse から取ることができます。自律的なチームがエンドツーエンドの機能アーキテクチャを担当することで、アプリケーションのマルチスレッド配信プロセスにより、より明確で高速かつ優れたユーザー エクスペリエンスが実現します。同じアーキテクチャを使用して UI/UX を拡張および改善している他の企業には、Spotify、IKEA、American Express、Starbucks、SoundCloud などがあります。
これまで、monorepos は主に大規模なアプリケーションに使用され、1 つのプロジェクトにバージョン管理されたリポジトリ内の小規模なプロジェクトが含まれていました。これらの小規模なプロジェクトはそれぞれ、単一のアプリケーション (SPA、MPA など) から再利用可能なパッケージ (機能、コンポーネント、サービスなど) まで、さまざまなものにすることができます。プロジェクトをマージする習慣は、共有コードベースとして知られていた 2000 年代初頭にまで遡ります。
しかし、現在、モノリポジトリは大規模なアプリケーションだけでなく、モノリポジトリから確実に恩恵を受けるであろう中小企業やオープンソース プロジェクトにも利用されています。たとえば、企業は、共有 UI コンポーネント、共有デザイン システム (再利用可能な共同デザインなど)、およびそれぞれのドメインの共通ユーティリティ機能を含む、さまざまなパッケージを 1 つのリポジトリに含めることができます。
これらのパッケージは、さまざまなアプリケーションにインポートできます。これらのすべての共有パッケージを使用する実際のアプリケーション (例: app.mywebsite.com クライアント側レンダリング)、ホーム/製品/ランディング ページ (例: サーバーを備えた mywebsite.com)サイド レンダリングや静的サイト生成など)では、共有デザイン システム パッケージのみを使用する SEO と、共有 UI コンポーネントと共有デザイン システム パッケージを使用する技術ドキュメント ページ (docs.mywebsite.com など) が考慮されます。
Turborepo (Vercel によって買収) は、JavaScript/TypeScript でのモノリポジトリを再び宣伝しています。 Turborepo を使用すると、チームはモノリポジトリ内のすべてのアプリケーションとパッケージのビルド パイプラインを作成できます。注目すべき点: ローカル マシン上のパイプライン内、またはチーム全体のクラウド内でビルドをキャッシュします。 Turborepo は、npm/yarn/pnpm ワークスペース (依存関係管理) や changesets (バージョン管理) などの他の重要なモノリポジトリ ツールと組み合わせることで、このツールチェーンを今年注目すべき分野にしています。
Turborepo の競合他社は、Nx、Rush、Lerna (しばらくメンテナンスされず、 は後に Nx の会社に置き換えられました) Nrwl の取得 )。
しかし、最近のサーバーサイド レンダリング (SSR) の台頭により、ユーティリティ優先の CSS に対するこの愛憎の分裂は終わりを迎えつつあるかもしれません。ここ数年、Styled Components (SC) や Emotion などの CSS-in-JS ソリューションが、最新のコンポーネントベースの Web アプリケーションのスタイリングにおいて主流となってきました。ただし、SSR の世界でのパフォーマンスが主な目標の 1 つである場合、CSS-in-JS はマイナスの影響を及ぼします。バンドル サイズの増加 (SC の場合は 12.7kB、Emotion の場合は 7.9kB)、さらに重要なのは、以前の CSS シーケンスによるものです。 DOM への挿入によって発生する実行時のオーバーヘッド。 結果として、開発者は、ユーティリティファーストCSS (Tailwind CSS、
UnoCSSなど) とペアリングのような、よりSSRに優しいソリューションに移行する可能性があります。事前定義された UI コンポーネント (例: DaisyUI)、その他の同様に人気のある代替手段 (例: CSS Modules)、または実行時間/コンパイル時間ゼロの CSS-in-JS として知られる敗者 (例: vanilla-extract、linaria、astroturf、コンパイル済み)。 サーバーレス
サーバーレス機能により、アプリケーション サーバーを 1 つ (または少数) のデータ センターに展開する代わりに、世界中に数十のデータ センターを配置できるため、別の利点が得られます。したがって、理想的な世界では、サーバーレス機能はできる限りユーザーの近くで実行されることになります。これは、クライアントとサーバーの往復が最短になることを意味し、ユーザー エクスペリエンスが向上することを意味します。サーバーレス機能をできるだけユーザーの近くに展開することにより、エッジ コンピューティングとエッジ機能という用語が生まれました。
多くのクラウド プロバイダー (Cloudflare と Cloudflare Workers、Vercel とそのエッジ ネットワーク、Deno と Deno Deploy など) がこの分野で競合しており、それぞれがエンド ユーザーのベスト インタラクション時間 (TTI) エクスペリエンスを最適化しています。 。エッジ機能は、(エンド ユーザーへの回線が短いため) SSG/SSR コンテンツをより速く提供できるだけでなく、その結果をユーザーの近くにキャッシュすることもできます。
しかし、パフォーマンスが重要なだけではなく、それが主な要因であっても、エッジ コンピューティングには他の利点 (コストの削減など) も伴います。たとえば、通常、クライアントとサーバー (ここではエッジ機能) の間で送信されるすべてのデータをメイン データ センターで計算する必要はありません。 IoT では、エッジで簡単にフィルタリングできる、メインのデータセンターに送信される無関係なデータ (フレームごとに変化がないビデオ録画など) が大量にあります。結局のところ、エッジ機能は始まりにすぎません...
Insight Partners ヘッドレス CMS ソフトウェア市場は 2020 年から 2027 年にかけて 22.6% の CAGR で成長すると予測しています 成長率が増加します。オンライン アプリケーションのユーザー ベースが増加するにつれて、企業はコンテンツ管理戦略をゆっくりと変革し、さまざまなプラットフォーム間で一貫性と統一性を提供するハイブリッド アプローチを採用しています。原則として、Headless CMS は、バックグラウンドで独立して実行され、Web サービス API を使用してコンテンツを複数のデバイスにプッシュする一元化されたコンテンツ リポジトリです。このアプローチは、大規模なチームのメンテナンスと生産コストを削減しながら、スケーラビリティの機会を提供します。
ヘッドレス CMS が提供する柔軟性とスケーラビリティにより、管理しやすい Web サイトを構築するための好ましい方法となっています。 従来の CMS は「ヘッドアップ」コンテンツ管理システムであり、コンテンツ リポジトリまたは「ボディ」がプレゼンテーション層または「ヘッド」に接続されているのに対し、ヘッドレス CMS ではコンテンツを 1 つで保存および管理できます。配置して、任意のフロントエンドにデプロイします。これにより、オムニチャネル CMS が提供する API を通じて、コンテンツを任意のシステム、ソフトウェア、または Web サイトに統合できます。 コンテンツ配信に関しては、ヘッドレス CMS を使用すると簡単かつ迅速に実行できるため、コンテンツ作成者はコードに精通している必要がありません。 ヘッドレス CMS では、フロントエンドとバックエンドは独立した (分離された) システムです。1 つのシステムがコンテンツの作成と保存を処理し、もう 1 つのシステムがプレゼンテーションを処理します。 API を使用すると、ヘッドレス CMS はコンテンツが作成されるとすぐに配信され、どのデバイスでも見栄えが良くなります。Web トラフィックの 59.4% はモバイル から来ています。したがって、多くの開発者がモバイル デバイスの制限を考慮した Web サイトを作成し始めていることは驚くべきことではありません。
人々はデスクトップよりもスマートフォンやタブレットを好み、統計がそれを示しています。 2022 年までに、すべての Web サイト訪問の58% 以上がモバイル デバイスからのものとなり、この数はさらに増加すると予想されます。
モバイル ファーストにおいて、2023 年に人気が高まるもう 1 つの用語は AMP です。 Google のオープンソース Accelerated Mobile Pages (AMP) プログラムは、モバイル ユーザー向けのウェブサイトのパフォーマンスの向上に特化しています。 2016年、Googleはブログ投稿でこの動きを「アニメーション、ビデオ、グラフィックスなどのリッチコンテンツをスマート広告で高速化し、即座に読み込めるようにする」方法であると説明した。 「軽量」AMP は、簡素化されたバージョンの HTML と軽量の CSS を使用します。 開発者が留意しなければならない最近のレスポンシブ Web 開発トレンドには、コンピューターで使用される従来の水平画面ではなく垂直方向に焦点を当てる必要性、ブラウザーが Web サイトを再スケールするのに役立つメタ ビューポート タグの必要性、CSS などがあります。クエリを実行してデバイスの機能に基づいてコンテンツを変更し、Flexbox などのメソッドを使用して簡単にサイズ変更可能なレイアウトを作成しますJamstack は、動的に生成されたコンテンツが、静的ホスティングや CDN などから静的に配信される Web サイトに表示されるアーキテクチャです。 (Content Delivery Network) は HTML を提供します。 JAM は、Web ページのコンポーネントである JavaScript、API、およびマークアップの頭字語を表します。
これら 3 つの要素を組み合わせることで、開発者はよりシンプルで高速かつ安価なエコシステムを実現できます。さらに、Jamstack ベースの Web サイトはデータベースやサーバーの保護が必要ないため、より安全です。スケーラブルでもあります。 Web サイトがバイラルになると、コンテンツ配信ネットワーク (CDN) が変化します。
Jamstack は、ユーザーが高速で安全なアプリケーションを作成できるようにする Web 開発ソリューション スタックです。 Netlify によって作成された Jamstack は、JAM をはるかに超えています。現在では、多くのライブラリとメソッドを使用して Web サイトを作成するための広範なアーキテクチャ アプローチを指します。
Jamstackコミュニティ調査によると、Jamstack 開発者の 47% がエッジ動的サイトで作業していることがわかりました。さらに、これらのプラットフォームは何百万ものユーザーを魅了します。
Jamstack を最大限に活用している最も顕著な例は、ルイ ヴィトン、ヴィクトリア ベッカム ビューティーなどのサイトです。
しかし、Jamstack エンジニアはこれらの問題を解決するために懸命に取り組んでいます。すべての機能を備えた Jamstack は、2023 年もトレンディであり続ける準備ができています。
GraphQL は、2015 年に Facebook によってリリースされたクエリ言語です。 JS アプリケーションを強化するために使用できます。
このデータ管理ツールは、バックエンドとフロントエンドからデータをクエリするための柔軟な構文を提供します。現在、GitHub、Pinterest、Coursera、Shopify などの多くの人気企業で使用されています。
現在、データ管理を利用できるさまざまな人気のある JavaScript フレームワークやライブラリがあります。さらに、すべてのインターネット使用量の大部分はモバイル デバイスからのものであるため、効率的なデータの読み込みが必須となっています。
GraphQL が作成された理由は、Facebook がアプリケーション内のデータ呼び出しのパフォーマンスを向上させる必要があったためです。 GraphQL はそれを非常にうまくやってくれます。
2023 年の最も重要な JavaScript トレンドの 1 つとして、この言語がもたらす利点について説明します。
これらすべての利点により、GraphQL は 2023 年の最も重要な JavaScript トレンドの 1 つになる可能性があります。
WebAssembly は Rust をサポートしていますが、C、C、C#、Go; COBOL## もサポートしています。 # のようなものは WebAssembly に書き込むことができます。」と Gardner 氏は言います。「したがって、真のサンドボックス環境はクライアント ブラウザーにとって最適であり、WebAssembly にとっても最適です。クロスプラットフォームで、起動が非常に速く、小型でプラットフォームに依存しません。したがって、来年にかけてフロントエンドにおける WebAssembly の全体的な成長が見られるでしょう。
WebAssembly は、迅速に実行および起動する必要がある高パフォーマンスのアプリケーションがある場合に実際に使用され始めます。Vercel は、フロントエンドで WebAssembly を使用してソーシャル メディア カードを生成しました。 WebAssembly は、JavaScript に比べてこれらの画像をより高速に生成できるソリューションです。
何ができるでしょうか?JavaScript と WebAssemblyRust から WebAssembly へは、コミュニティ間に多くの重複があり、多くの人が Rust と WebAssembly の両方に興味を持っているため、最も成熟したパスの 1 つです。さらに、WebAssembly は JavaScript と混合できるため、これは必ずしもどちらか一方の状況ではありません。
#Web 開発における新しいトレンド?
W3C WebAssembly
ワーキング グループとコミュニティ グループを通じて Web 標準として開発されており、現在、すべての主要なブラウザ ベンダーがこのテクノロジーをサポートしています。WebAssembly
AI 主導の開発
しかし、それだけではありません。OpenAI の ChatGPT は、プログラミング タスクも処理する、より一般的な言語モデルです。 ChatGPT では自由形式の質問をすることができますが、コーディング タスクを実行することもできます。多くの開発者は、StackOverflow の代替として ChatGPT を使用していることに気づきました。多くの場合、ChatGPT は検索エンジンの代替として使用すると、(常に完璧であるとは限りませんが) 有用な回答を提供します。後者は (関連コンテンツの開発だけでなく) 多くの SEO スパムに対処する必要があるため、現在 ChatGPT が実行可能な代替手段とみなされています。
ただし、ここで重要なのは「現時点では」です。俯瞰的に見ると、AI によって作成されたコンテンツは、World Wide Web にも損害を与える可能性があります (そして損害を与えることになるでしょう)。手動で作成された SEO コンテンツは以前からすでに問題になっていましたが、ChatGPT を使用してより自動生成された SEO コンテンツを生成することを妨げるものはありません。 ChatGPT は最終的に独自に生成されたコンテンツをトレーニングするのでしょうか?
忘れたくない注目すべき言及がいくつかありますが、リストされているトレンドには含まれていません: TauriJavaScript によって実装された実装の Electron の代替として/ CSS/HTML デスクトップ アプリ、Playwright、Cypress の E2E 代替としてテスト、Warp および Fig は次世代端末として、CSS コンテナ クエリこれに応じて、CSS メディア クエリに代わるスタイル設計の代替手段、そして最後に、JavaScript を使用せずにインタラクティブなユーザー インターフェイスを作成するためのリッチ HTML として htmx を提供します。ここでは簡単な概要だけを紹介しましたので、ぜひご自身で確認してください。
とにかく、Web 開発エコシステムの現状について概要を説明できれば幸いです。この記事を気に入っていただけましたら、下記からお気軽にニュースレターを購読してください。今年はこれらのテクノロジーのいくつかについてさらに詳しく書く予定です。そのため、これらのテクノロジーのいずれかに取り組んでいる場合は、私に連絡してください。協力できるかもしれません。
人工知能は日々賢くなっており、この機能の向上により、チャットボットとの対話はクライアントや顧客にとって楽しい、興味深い体験になっています。 AI を活用したチャットボットは、データを収集し、顧客とのやり取りから学習することでビジネスにも役立ちます。年中無休の問題解決機能も備えているため、企業はサポート マネージャーを雇用するコストを節約できます。 (これは、ほとんどのチャットボットを置き換えるという意味ではありません。サポート チームがより複雑な問題に対処できるようになるというだけです。)
チャットボットには 2 つのタイプがあります。テキストベースおよび音声対応。名前が示すように、テキストベースのチャットボットは、テキスト メッセージを通じてユーザーと対話するチャットボットです。彼らは顧客のニーズを理解し、ソリューションを提供し、フィードバックを収集し、顧客の関与を維持することができます。ただし、入力する必要があるため、音声を使用するよりも時間と労力がかかります。そのため、音声対応ヘルプの人気が高まっています。
音声対応のアシスタンスというと、おそらく Siri や Alexa を思い浮かべるでしょう。アメリカ人は、モバイル デバイス、タブレット、ラップトップ、スマートウォッチ、または自動車でほぼ毎日使用しています。これらのチャットボットは音声入出力を使用して通信できます。ただし、企業は音声検索と認識、音声合成、自然言語処理 (NLP) を使用する音声アプリケーション ソリューションやサービスも採用しています。なぜ?音声対応チャットボットが企業にもたらすメリットの一部を次に示します。
音声対応チャットボットは、パーソナライズされたブランド エクスペリエンスを作成します。
彼らは人間らしい方法で顧客とコミュニケーションをとるため、会社は顧客と感情的な絆を築くことができます。人間の言語を理解することは複雑かつ継続的なプロセスであり、チャットボットは言語を理解するだけでなく、聞き上手である必要があります。人工知能はチャットボットを良い聞き手になるように「訓練」することができます。
彼らは、さまざまな難易度のさまざまなタスクを処理します。
チャットボットの詳細については、さまざまなタイプと チャットボットを最初から構築する方法に関するこの 記事をお読みください。
Web 開発のほぼすべての側面について説明しましたが、UI UX も忘れてはいけません。この分野で最も人気のあるトレンドの 1 つはダーク モードです。 Apple や Android を含む多くのテクノロジー大手は自社製品にダーク モードを統合しており、ダーク モードはスマートフォン ユーザーの間で急速に人気を集めています。ダーク モードでは、特に暗い環境での目の疲れを軽減するために、暗い背景に明るいテキストが使用されます。
多くの Web およびアプリ ユーザーは、目に優しいと考えて、少なくとも夜間はダーク モードでデバイスを閲覧したり使用したりすることを好みます。 Android と iOS の最新バージョンでは、ボタンをタップするだけでダーク モードと「ライト」モードを切り替えることができるダーク モードが提供されています。また、夕方の特定の時間に自動的にダークモードをオンにし、朝になると再びオフになる「ナイトモード」も提供しています。さらに、すべての主要なソーシャル アプリを含む多くの主要な Web サイトやアプリがダーク モード スキンを提供するようになりました。
ユーザーがモバイル デバイスのダーク モードを特に好むもう 1 つの理由は、バッテリーの消費を抑えることができるからです。
さらに、一部の Web アプリではこのモードがオプションになっており、Web ユーザーはデバイス画面、メニュー、またはアプリ設定の切り替えアイコンを使用してライト モードとダーク モードを切り替えることができます。それでも、今後何年も人気は続くでしょう。
Facebook、Twitter、Instagram、Google、Reddit はすでにダーク モードを採用しており、Polar ユーザーの 95% は日中でもダーク モードを好みます。なぜ?ダーク モードには次のような重要な利点があります:
専門的に設計および実装されたダイナミック UI は、実際のユーザーの注意を引くことができます。ビジュアル的なアピール。これは、一連のアニメーション要素は、テキスト、説明、その他の静的な情報よりも簡単かつ迅速に表示できるためです。
Motion UI はデジタル製品のシーケンス、遷移、次のステップ、またはアクションを伝達し、ナビゲーションを容易にします。また、ユーザーの注意を Web ページ全体に向けるため、Web ページ上の階層領域にもユーザーの注意を向けます。
専門的に設計および実装された場合、このテクノロジーの結果は、ユーザーの注意を真に引き付ける視覚的な魅力を提供できます。さらに、動的な UI はデジタル製品のシーケンス、次のステップ、遷移、またはアクションを伝達するのに役立ち、ナビゲーションが容易になります。その過程で、Web ページ上の階層の正確な領域にユーザーの注意を向けます。一連のアニメーション要素を表示することは、テキスト、説明、その他の静的な情報を読むよりも簡単かつ迅速です。
スポーツ UI のその他の使用例には、
AR、VR、MR の世界市場は、2024 年までに 3,000 億ドルに達すると予想されています 。これらの技術的進歩は私たちの日常生活に浸透しています。Instagram や Snapchat で見かけるあらゆるフィルターや楽しいマスクを思い出してください。これらは拡張現実 (AR) のおかげで可能になります。
AR の用途はソーシャル プラットフォームのカメラ フィルターに限定されません。電子商取引、建設、製造、旅行、美容業界はすべて、顧客エクスペリエンスを向上させ、消費者とのつながりを促進する可能性のあるこれらのイノベーションから恩恵を受けることができます。製品やサービスとつながります。
IKEA を例に挙げると、縮尺どおりのソファの 3D モデルを自分の空間に配置できます。お気に入りの靴を仮想的に履くことができるアプリ、Wanna Kicks を使用して、仮想的にお気に入りの靴を履くこともできます。これらはモバイル アプリの例ですが、このテクノロジーは Web サイトでも使用できます。
Web サイトが高度になればなるほど、ユーザーの帯域幅が速くなり、Web サイトの読み込みが遅いとイライラするようになります。人々は高速なエクスペリエンスを期待しており、読み込みに時間がかかりすぎる Web サイトはすぐに放棄されます。調査によると、人々はウェブサイトがわずか 2 秒で読み込まれると期待しており、3 秒待った後にサイトから離れ始めることがわかっています。 Google は数年前にこのことに気づき、ランキング機能の 1 つとしてページ速度を使用し始め、特にモバイル検索エンジンで読み込みの遅い Web ページにペナルティを与えました。
2023 年に近づくにつれて、Web 開発者がページ速度を最適化するために使用している主な方法には、画像の圧縮、HTML、CSS、JavaScript コードの圧縮、コンテンツ配信ネットワークの使用などがあります。
視差スクロールはますます人気が高まっています。ここで、誰かがページをスクロールすると、Web ページの一部の背景コンテンツ (通常は画像) がさまざまな速度で前景に移動します。
残念ながら、この効果は通常モバイル画面では機能しないため、モバイルファースト開発とは多少矛盾します。ただし、開発者は Web サイトの CSS でメディア クエリを使用して、モバイル ユーザーに対する効果をオフにすることができます。
Z 世代は、情報を検索するために Siri や Alexa などの音声アシスタントを使用することを特に好みます。 2022 年 10 月の We Are Social Report で報告された最新の GWI データによると、16 ~ 64 歳のインターネット ユーザーの 22.5% が毎週音声アシスタントを使用しています。これには、おそらく年上の兄弟や両親よりも多くのユーザーを使用しているアルファ世代さえ含まれていません。興味深いことに、この年齢層の男性の 17.0%、女性の 16.3% が音声検索に切り替えており、入力したくないのは若者だけではありません。 Siri と Alexa はほぼすべての Web サイトで機能しますが、Web 開発者は音声検索を考慮してサイトを最適化し、さらに使いやすくしています。そうすることで、聴覚障害や視覚障害を持つ人々がウェブサイトにアクセスしやすくなります。
音声検索には、ユーザーとビジネス オーナーの両方にメリットがある:
時間を節約できます。ガラス テクスチャはガラス フォームとも呼ばれ、Web デザインに深みと質感を加えます。ぼかし効果と透明度を組み合わせると、ピクセルがわずかに不透明な曇りガラスの効果を帯びます。 Glassmorphism は、あなたがガラスを見ていると他人を騙そうとするものではありません。代わりに、それはただその感覚を呼び起こすだけです。
Apple は 2020 年からデザインにガラス テクスチャを使用しており、最近では Windows 11 にも採用されました。インタラクティブな要素 (ボタン、ナビゲーション オプション、スライダー、その他の UI 要素など) がガラスのようなぼかしに対して鮮明な線で目立つため、特に人気があります。
JAMstackJAMstack は、静的 Web ページを構築するための独自の概念です。コンテンツ生成用のバックエンド ソリューションを実装する代わりに、API を使用します。その結果、開発者の観点から見ると、Web サイトがより速く、管理しやすくなります。
JAMstack 定義: JavaScript 用
詳細:
Jamstack.org または なんと Jamstack とは何ですか? 参照データ統計 Web サイト: 2022.stateofjs.com/en-US/libra… 出典: statista.com React はフロントエンド領域を支配し続けています。このフレームワークは、大規模なアプリケーションの長期にわたるパフォーマンスを保証する独自の仮想 DOM によって際立っています。同様に、コンポーネントベースの構造は、チーム間での開発の実行が容易であることを意味します。 React の学習曲線は比較的緩やかですが、ツールのアクセシビリティによりプロセスは管理しやすくなります。つまり、create-react-appアプリケーションのボイラープレートの構築プロセスを自動化します。次に、ブラウザからアクセスできるデバッグ エクスペリエンスを提供する React DevTools があります。 React が広く採用されているおかげで、フロントエンド開発者は多くのオープンソース プロジェクトに触れることができます。たとえば、構築 十数個の React 用の完全な設計システムを構築しました。これにより、開発プロセスにかかる時間が大幅に節約されます。 2022 年は、新しいメソッドと概念を提供する React 18 リリースによって特徴づけられます。 最も重要なことの 1 つは、同時実行メカニズムを実装することです。 React は、自動バッチ処理や変換の概念などの新機能も提供します。新しいクライアントおよびサーバー レンダリング API などを提供します。 私たちのチームは、React のステータスを熱心に監視しています。 2023 年は React 開発者にとって素晴らしい年になるでしょう。より効率的にしたい場合は、この記事で React 開発のベスト プラクティスとツールを入手してください。 Angular は、SPA - シングル ページ アプリケーションの構築にかなりの柔軟性を提供します。他の有名なフロントエンド フレームワークと同様に、Angular はコンポーネント ベースの開発ワークフローを実装します。また、コンポーネントの動的な性質を管理するためにテンプレート システムが追加されました。 結局のところ、Angular はすべてのプラットフォーム向けのアプリケーションを同時に構築でき、またそのために使用されているということです。コードは、Web アプリケーション、モバイル プロジェクト、ネイティブ デスクトップ アプリケーションでの実装に再利用できます。パフォーマンスに関しては、SSR と Web Workers によって 最適化されています。 Angular を始めるのは簡単ですか?完全ではありません。実際、調査データを見ると、フレームワークに対する満足度も大幅に低下しています。主な理由は、学習曲線と個人的な好みです。 Vue は、真に最新の Web 開発にとって堅実な選択肢であり続けます。この進歩的なフレームワークは最近 Vue 3 バージョン をリリースしました。そして、新機能と改善のおかげで、最新のスタックを構築するための頼りになるフレームワークとしての地位を確立することを目指しています。 新しいバージョンには、待望の実装がいくつか含まれています。 Vite を使用した新しいビルド ツールチェーンが含まれています。 Pinia による状態管理の改善。また、完全に刷新されたドキュメントには、開始に役立つ多くのチュートリアルが含まれています。 人気に関して言えば、Vue は柔軟性に優れています。このフレームワークは厳密なルーチンを強制するものではなく、何を構築するかをユーザーが決定できるようにします。 たとえば、最も基本的な HTML テンプレートなど、他の開発スタックで再利用できる Web コンポーネント を構築できます。 さらに、Vue は、CSR、DevTools、TypeScript のサポート、テスト ツールなどのネイティブ ツールのおかげで、強力な SPA プロジェクトを処理するためによく使用されます。 開発者にとって、プロジェクトに Vue.js と React のどちらを選択するかが難しい場合があります。 Codica の開発者は両方のフレームワークを使用します。 カスタム ソフトウェア開発中に発生するさまざまなタスクにそれらを適用します。 パフォーマンスの向上 大規模サポート TypeScript の統合 新しい仮想 DOM およびコンポジション API は、最も重要な JavaScript トレンドの 1 つである TypeScript と互換性があります。 Vue 3 は、バンドルされた型宣言を提供する TypeScript を使用して構築されています。 階層化モジュール JavaScript フレームワークのトレンドに従って、Vue Core では分離されたモジュールのコーパスへのアーキテクチャの移行が見られました。その結果、フレームワークは保守性を向上させ、実行時のサイズを最大 50% 削減するツリーシェイキングを導入します。 UI コンポーネント ライブラリの構築 新しいメソッド「カスタム要素の定義」により、Vue コンポーネント API を使用してカスタム ソリューションを構築できます。この機能を使用すると、開発者は、使用するフレームワークと互換性のある、Vue を利用した UI コンポーネントのライブラリを作成できます。 結果として、Vue は依然として JavaScript フレームワークの人気において重要な位置を占めています。さらに、Web アプリケーションを作成する簡単かつ柔軟な方法を開発者に提供し続けます。 最新の機能強化について詳しくは、Vue ブログ をご覧ください。 HTTP アーカイブ レポート によると、2015 年の Web ページのサイズの中央値は1,280 KB は、2022 年までに 2,000 KB に増加しました。巨大な Web ページは大量のネットワーク帯域幅を占有するため、ページの読み込み時間が長くなります。ネットワーク リソースが未開発の一部の地域では、この影響がさらに大きくなるでしょう。この傾向を改善するために Svelte が登場しました。 Svelte は、開発者が最小限のコードで最も軽量で応答性の高いアプリケーションを作成し、実行時のパフォーマンスのオーバーヘッドを最小限に抑えられるように設計されています。原則として、Svelte は React や Vue とは少し異なります: 応答性の高い更新を実装するために仮想 DOM テクノロジに依存しません。代わりに、カスタム文法ルールを直接使用して応答性の高いデータ分析、バインディング、および応答性の高い手続き型コードの実装を実装します。ほとんどのシナリオで、最終的にコンパイルされた製品のサイズはネイティブ実装と同等であり、パフォーマンスは Vue や React に劣りません。 最も人気のある Web フレームワーク 」に関する調査で 1 位にランクされ、2022 年の 調査 でも 1 位にランクされました。リストの 2 番目にユーザーは次のとおりです。正のフィードバック比率に基づいたこのフレームワークに非常に満足しています。 github スターの成長率は、Svelte が開発者コミュニティで大きな発展の可能性を秘めた Web フレームワークであることを示しています。 このフレームワークは最近かなり採用されており、 もその作成者である Rich Harris に投資しています。基本的に、Svelte は他のコンポーネント駆動型フレームワークと同様に動作します。 React のようなフレームワークとの主な違いは、Svelte はブラウザーへの完全な配信を必要としないことです。代わりに、Svelte アプリケーションをコンパイルする必要があります。これにより、コンポーネントが事前に作成された JavaScript ファイルにバンドルされます。 他のフレームワークは を使用して更新をレンダリングしますが、Svelte は 事前に割り当てられた DOM ノード を使用してアプリケーションをコンパイルします。 Josh Collinsworth が実証しているように、 このアプローチには永続的なパフォーマンス上の利点があります。最後に、Svelte はネイティブ HTML コードとの互換性が高く、厳密な構造を課しません。 これは、迅速なフロントエンド開発に最適です。以下に例を示します。 Svelte は、コンポーネントベースのアーキテクチャに依存するフロントエンド フレームワークです。このフレームワークの最初のバージョンは JavaScript で作成され、2016 年にリリースされました。ただし、2019 年にリリースされた 3 番目のバージョンでは TypeScript が使用されています。 Svelte は間違いなく 2023 年の人気のある JavaScript トレンドの 1 つになるでしょう。 TypeScript バージョンがリリースされて以来、このフレームワークは開発者コミュニティから多くの関心を集めてきました。 Svelte は、ほとんどのプログラマーを満足させる最高のフレームワークの 1 つです。 #Svelte は、開発者が強力な Web アプリケーションを作成するのに役立つ軽量のフレームワークです。 React と Vue は、実行時にアプリケーションを Vanilla JS (他のフレームワークやライブラリなしで JS を使用できるフレームワーク) コードに変換します。 代わりに、Svelte はビルド時にそれを実行します。 Svelte はコンパイラーとして機能し、抽象化レイヤーなしで Web アプリケーションをブラウザーで実行できるようにします。 Svelte が特別である理由と、2023 年に無視できない JavaScript トレンドの 1 つについて説明しましょう。 組み込みのリアクティブ性: メタフレームワークは常に重要なものでした。そしてこの場合、Preact は React の軽量な代替となることを目指しています。過去に React を使用したことがある場合は、Preact をマスターするのは簡単です。実際、2 つのフレームワーク間でコンポーネントを簡単に使用できます。 最初に注目すべき点はパッケージ サイズです。Preact の場合は圧縮後 4 kb、React の場合は圧縮後 38 kb です。同様に、イベント システムは を介して処理されるため、バニラ JavaScript を使用してイベントを処理できます。 詳細なケーススタディをお探しの場合は、 をチェックすることをお勧めします。この出版物では、可能な限りの利点と、保守性と移行の安定性の観点からの長期的な利点を測定しています。 Ember には長い歴史があり、上記のすべてのフレームワークよりも前から存在しています。もちろん、Ember.js の使用は長年にわたって大幅に減少する可能性があります。ただし、MVC パターンを使用した効率的なアプリケーション開発にとっては依然として有力な候補です。また、このフレームワークは Web 開発者の間で人気がありますが、デスクトップ アプリケーションやモバイル アプリケーションに対しても非常に柔軟です。 さらに重要なのは、Ember はまだ活発に開発中であるということです。 フロントエンドのトレンドに対応するための新機能が追加されました。 Ember を際立たせるもう 1 つの点は、統合された下位互換性です。フレームワークに関する限り、Ember は、フレームワーク自体への重大な変更によってコードが破損しないようにするという優れた仕事をします。 Lit (以前の lit-HTML および LitElement) は、Google が管理する Web コンポーネント フレームワークです。 Lit は、Wordle のテクノロジー スタックで使用される フレームワークです。人気の単語当てゲームには毎日何百万人もの訪問者がいます。要約すると、Lit は、単純なインターフェイスと複雑なインターフェイスの両方を備えたプログレッシブ Web アプリケーションを構築するために最も一般的に使用されます。 いつでも、Web コンポーネントを直接使用できます。このアプローチは、パフォーマンスをさらに増大させないコンポーネントを作成するのに役立ちます。 Lit の実行時のフットプリントは最小限です。簡単に言えば、React のようなフレームワークは JavaScript に依存しているのに対し、Lit は標準化された Web コンポーネントを実装しているだけです。 Alpine.js は、UI の動作をカスタマイズするための JavaScript フロントエンド フレームワークです。また、Alpine は Vue や Angular に似ていますが、リソース使用要件ははるかに低くなります。著者 Caleb Porzio は、これを 「jQuery と React の間の脆弱性を解決する」 と呼んでいます。 Alpine は、オーバーヘッドを一切かけずにデザインにインタラクティブ性を追加したい場合に最適です。たとえば、事前に構築されたアプリ設計があり、インタラクティブなメニュー ドロップダウンを追加したい場合です。基本的なインタラクティブ機能に React を使用するのはやりすぎです。 Alpine をサーバーサイド Web フレームワークを最適化する方法として考えてください。実際、著者自身も、Alpine は Laravel や Django などのフレームワークから多くのインスピレーションを得ていると強調しています。同様に、Jekyll、Hugo などの静的サイト ジェネレーターに jQuery スタイルの機能を追加するための完璧な軽量ソリューションです。 SolidJS は 2019 年から活発に開発されています。ただし、フレームワークは 2021 年 6 月 にアップグレードされました。それ以来、かなりのファンを魅了しています。現在、Solid には GitHub 上に 14,000 を超えるスターがあり、約 3 か月ごとにメジャー アップデートが行われています。 このフレームワークは宣言型であり、仮想 DOM を使用しません。対照的に、Solid はコンポーネントを実際の DOM にコンパイルするという点で Svelte に似ています。したがって、更新ステータスは、それを使用するコードに固有です。 最後に、SolidJS は React から多大な影響を受けています。そして、多くの点で、多くの類似点があります。 JSX、フック API に加え、Web コンポーネントや SSR などの機能のサポートが含まれます。興味深いことに、それは非常に高速でもあります。 ベンチマーク テストでは、Solid が Svelte、Elm だけでなく、Vue や Redux などのフレームワークよりも優れたパフォーマンスを発揮できることが示されています。 ついに、少なくとも今年は刺激策が用意されました。 Basecamp によって開発されている最小限の JS フレームワーク。最初に気づくのは、アルパインとの類似点です。言い換えれば、Stimulus は jQuery の控えめな代替手段になろうとしています。 このフレームワークは、ページ構造の一部としてすでに使用している HTML を強化する場合に最適です。 Stimulus を使用すると、JavaScript データ コントローラーを追加して HTML 要素を最適化できます。これらは、フォームの送信やボタンの外観などを強化するために使用できるインタラクティブで動的な機能です。 Angular はかつて最高のものでしたが、その結果は開発者をがっかりさせました。したがって、Vue、React、Angular が開発者の関心を失いつつあるのも不思議ではありません。 また、より小型だがより洗練された代替品の人気も高まっています。実際、今年以来、フロントエンド開発者のエコシステムに影響を与えたプロジェクトが無数にありました。とはいえ、Bun は、事実上の JS ランタイムとして Fresh と競合するように設計されています。スピードとシンプルさを重視しており、これらのツールが来年のレポートのトップになると私は完全に期待しています。 。 詳細
フロントエンド フレームワーク
React
Angular
Angular は依然としてかなりの使用率を保っていますが、このフレームワークへの関心は過去最低レベルにあります。おそらく熱心なファンがいるのは、Angular が TypeScript に基づいているからではないでしょうか?もちろん冗談です。
Vue
ref の実装では、読み取り速度が 260%、書き込み速度が 50% 向上します。
Vue 3.2 はどのようにしてこのような驚くべき結果を達成したのでしょうか? Vue 3.0 でリリースされたテンプレート コンパイラは、静的コンテンツを迅速にレンダリングし、テンプレートの動的ノードをフラット化できます。現在はいくつかの改良が施されています。たとえば、通常の要素 VNode を 200% 高速に作成できます。 最も強力な JavaScript トレンドの 1 つである Vue 3.2 は、開発者に次のオプションを提供します。プロジェクトにとって、コンパイラを通じてパフォーマンスの最適化と型バインディングを実現した方が良いでしょうか?それともレンダリングを手動で監視する必要がありますか?
Svelte
// Example.svelte
<script>
export let name = 'Svelte';
export let textColor = '#000';
function reset() {
name = 'Svelte';
textColor = '#000';
}
</script>
<h1 style="color: {textColor}" on:dblclick={reset}>Hello, {name}!</h1>
<style>
h1 {
margin: auto;
font-family: Georgia, system-ui;
font-size: 3rem;
font-weight: regular;
text-align: none;
}
</style>
React
Preact
Alpine
今年のトレンドから導き出される結論が 1 つあるとすれば、それは開発者が物事を簡素化しようとしているということです。これは、Lit や Solid のようなフレームワークで非常に明白です。 React には優れたエコシステムがありますが、単純な SPA および PWA アプリケーションを構築するのに必ずしも必要なわけではありません。私も、この傾向自体は非常に顕著であると思っております。
ライブラリ