フロントエンド開発のトレンドは常に進化しており、長期にわたって人気があり続けるトレンドもあります。この記事では、2023 年に注目されるフロントエンド開発トレンドのいくつかを要約し、皆さんと共有します~

最高の時代もあれば、最悪の時代もあり、そんな時代でした知恵の時代、愚かさの時代、信仰の時代、疑いの時代、光の季節、暗闇の季節、希望の春、冬の冬絶望し、私たちは皆天国に向かってまっすぐに向かっていたのです。 —— ディケンズの『二都物語』

新年、装いも新たに!過去 3 年間はどの業界にとっても憂鬱な状況で、HS、GL、CY... は核酸を製造しているか、核酸の製造に向けて進んでいます。幸いなことに、疫病の霧は徐々に消え、一筋の光が見えてきました〜しかし、私たちはますます不確実性に直面しています。この不確実性に抵抗する唯一の方法は、継続的に視野を広げ、スキルを向上させることです。新年の初めは、不確実性の波に迷わないよう、フロントエンドの新しいトレンドに注目し、常に新鮮な気持ちを持ち続けてください。

不確実性

経済的圧力により効率が重要なテーマとなり、生産性ツールの開発を加速することに重点が置かれることになることが予測されます。

Rome や Turbopack などのツールの迅速な開発が期待されており、これは開発者のエクスペリエンス (バンドル速度、CI##) に大きな影響を与えます。 #Astro や Aleph.js## などの React との互換性を維持しながら、JavaScript 配信および/またはスケーラブルなアーキテクチャ (サイロ) への新しいアプローチによる時間など# フレームワークはさらに注目を集めるでしょう。私たちは、非

JavaScript

(rust、go) で書かれたフロントエンドツールの新時代の誕生を目撃してきました。移行コストを正当化する準備ができていない企業はまだたくさんありますが、あえて移行する企業は、(文字通り) 10 倍のビルド速度とエンジニアの幸福度の大幅な向上のメリットを享受できます。

開発でできること

エンジニアは常に自分の価値を高め、スキルセットがT字型になることが理想です。

これは、特定の方向に深く取り組むだけでなく、幅広いスキルも持つことを意味します。フロントエンドテクノロジーを習得したい人は、ネットワーキング、

DevOps

、自動化、テスト、プログラミング概念、セキュリティ、SEO、ユーザーエクスペリエンスデザイン、ソフトウェアアーキテクチャ、パフォーマンスを理解する必要があると彼は述べました。最適化、資産最適化に関する知識、分析など美学に焦点を当て、構成と動きの概念を理解し、少なくとも色の基本を知っていることは非常に役立ちますが、Web タイポグラフィとタイポグラフィの原則についての十分な知識は必須です。

2022 年のハイライト

React 18

2022

は React 18 のリリース年

これは、2020 年 10 月以来最後のメジャーバージョンアップデートです。 React チームは React での並行性サポートの研究と開発を何年にもわたって行ってきたため、これは重要なマイルストーンであり、React コアの基盤であるレンダリングモデルの更新におけるもう 1 つの大きな前進です。 React 18 では、自動バッチ処理、

startTransition

などの新しい API、Suspense のサポートなど、すぐに使えるいくつかの改善点を確認してください。戻る？【＃＃＃ポータル＃＃＃】＃＃＃

JavaScript の進化

2015 年 6 月の ECMAScript 2015 (または ES6) のリリースにより、JavaScript 言語がそれに加わりました。の黄金時代。クラスやモジュールなどの待望の機能を多数提供し、 async/await や rest/spread 演算子などの他の重要な機能を追加した後の定期的な年次更新。

今ではかなり成熟した状態にありますが、言語はまだ年々着実に発展しています。 ECMAScript 2022 年のハイライトは、パブリック、プライベート、静的なクラスメンバー、トップレベルの await、および Object.hasOwn です。

CSS の進化

JS が成熟してもなお進化しているとすれば、CSS はこれまで以上に急速に進化しています。 CSS3 は HTML5 とともに大成功を収めました。CSS3 は単一の仕様としてよく語られますが、CSS レベル 3 では言語が「モジュール」と呼ばれるいくつかの独立したドキュメントに分割されました。現在、最新の CSS は単に CSS と呼ばれ、レベルは以前のバージョンと機能を区別するためにのみ使用されます。

CSS3 が革命だとしたら、別の革命が目の前にあります。より多くのビューポートユニット、ネイティブネスティング、コンテナクエリ...

Web 標準とブラウザ

ブラウザが追いつけない場合、言語の進化は無意味になります。幸いなことに、標準化の取り組みを受けて、主要なブラウザベンダーも標準化に準拠するために懸命に取り組んできました。現在、主要なブラウザはすべてエバーグリーンブラウザです。つまり、バックグラウンドで自動的にアップグレードされ、常に最新バージョンが実行されます。

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 の問題点と利点について検討しました。

2023 年のトレンド

TypeScript は急速な成長を続けています

TypeScript はプログラミング言語です。 2012 年に Microsoft によってリリースされた JavaScript のスーパーセット。これを作成するアイデアは、JS がオブジェクトの種類を制限しないという事実から生まれました。このプログラミング言語の名前が示すように、JS にはないオプションの型をサポートしています。 TypeScript コードの編成を容易にするために列挙も追加されました。

Microsoft のソリューションが市場にある唯一のソリューションではありません。ただし、GitHub のステータスを見ると、TypeScript は前年比でしっかりと 4 位に位置しています。これは今でもここで最も一般的に使用されているプログラミング言語の 1 つです。

TypeScript 走在 JavaScript 趋势的顶端

出典: Octoverse Status | GitHub

TypeScript は、JavaScript 構文とセマンティクスを採用しています。 JavaScript 開発者が切望する追加機能がいくつか提供されます。この言語により、開発者の生産性が向上し、増大するコードベースの維持が容易になります。

最も強力な JavaScript トレンドの 1 つである TypeScript の主な利点を確認してみましょう。

TypeScript の利点

始めるのが簡単: Javascript に精通している人向け、この言語に切り替えるのはそれほど難しいことではありません。
広く採用されている: TypeScript は、トップの Javascript ライブラリとフレームワークによってサポートされています。さらに、読みやすく標準ベースの Javascript をコンパイルします。
オプションの静的型付け : TypeScript 構造型または「ダック」型付けに基づきます。この言語を使用すると、既存の型を組み合わせて複合型を作成できます。これには、ユニオンまたはジェネリックを使用できます。さらに、この言語はインターフェイスをサポートします。
早期エラー検出: TypeScript 予期しない動作を強調表示することで、プログラムエラーの数を減らすことができます。これは、Javascript 自体のように、実行中ではなくコンパイル時に発生します。これが、TypeScript がより高品質のコードを生成する方法です。
大規模ソリューションのサポート: Javascript は、現代の Web に存在する大規模で複雑なシステムの作成を目的としたものではありません。これを行うために、TypeScript は、インターフェイス、ジェネリック、モジュールなどのオブジェクト指向機能を借用します。

Stack Overflow Developer Survey によると、TypeScript が 2022 年に最も愛されているプログラミング言語のトップ 5 の 1 つである理由は次のとおりです。 JS の傾向は、このテクノロジーの人気が 2023 年も引き続き高まることを示しています。

Stack Overflow 2022 年最受欢迎的语言

#したがって、この言語の広範な受け入れは、最近の JavaScript の最も影響力のあるトレンドの 1 つです。ただし、欠点もあります。 TypeScript コードは、ブラウザで実行する前に、通常の JavaScript コードにコンパイルする必要があります。小規模なプロジェクトに取り組んでいる場合、この遅延は重大になる可能性があります。したがって、このような場合でも JavaScript の方がより適切に機能します。

TypeScript によるエンドツーエンドのタイプセーフティ

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 などのフルスタックアプリケーションに対して、これらのタイプのセキュリティソリューションをより多く使用する方向に向かっていることは間違いありません。アプリケーションのエッジでタイプセーフティを提供します。

JavaScript ランタイム

すべては、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 など) を持っています。

10 年後、Ryan Dahl

は Deno を Node の後継として発表し、ブラウザのような API を含む開発者にとってより安全で高速な環境を約束しました , TypeScript とすぐに使える標準ライブラリ。 Deno も V8 上で実行されますが、現在は多数の JavaScript ランタイムの 1 つにすぎません。

エッジ機能の競争領域では、多くのクラウドプロバイダーが、独自のインフラストラクチャ (Cloudflare など) に最適化された独自の

JavaScript ランタイム (Cloudflare ワーカーなど) を実装しています。そのため、Deno のビジネスモデルも、Deno Deploy と、Deno Fresh と呼ばれるインスタントエッジレンダリング SSR フレームワーク (元々は概念実証として) により、クラウドプロバイダーになりつつあります。 Bun (JavaScriptCore Engine 上で実行され、悪名高く Zig に実装されている) のようなクラウドプロバイダーに依存しないソリューションは、最近、最速の JavaScript ランタイムをめぐる競争でもう 1 つのホットなトピックになっています。

質問志向の人々は、ランタイムの違いによる JavaScript 環境の多くの断片化に (もう一度) 気づくでしょう。問題が発生すると、ブラウザではパッチだらけの

JavaScript サポートが何年も続くことになりますが、今回はサーバー上で、異なるクラウドプロバイダーにデプロイされているため、実行時にすべての JavaScript が同等にサポートされるわけではありません。その結果、すべての関係者 (Deno、Vercel、Cloudflare など) が WinterCG に参加し、JavaScript ランタイム間の API の相互運用性について協力することになりました。

ローコード

市場は、さまざまなシナリオに合わせてさまざまなローコードプラットフォームを構築するという新たなコンセンサスに達しました。しかし、私たちのスペースにはどのようなローコードプラットフォームが必要なのでしょうか?これが今年新たな問題となった。

中小企業にとっても問題はあり、開発者は「多忙な開発」に対応してローコードプラットフォームを開発しましたが、そのローコードプラットフォームは真の価値を反映していないようです。ビジネスマンにとって、これらのローコードプラットフォームの学習コストは高すぎます。

主な理由は、開発者が平均的なユーザーエクスペリエンスを考慮していないことかもしれません。しかし、実際の理由は、ビジネス担当者に適したエクスペリエンスをデザインできないことかもしれません。この問題は別の観点から見ると、金融テクノロジー企業では、Python に精通した金融エンジニアリングの人材を採用することを好みます。したがって、ローコード分野に目を向けると、これらの企業は何らかのテクノロジーに精通したデジタル人材を必要としている可能性があります。

推奨される 20 のオープンソースフロントエンドローコードプロジェクト

ビルドツール

React-land、create-react-app (CRA) が数年間主流でした。これは、初心者が React 設定でカスタム Webpack を構成することなく、すぐに使用できる React スタータープロジェクトを入手できたため、当時は小さな革命でした。しかし、ここ 1 年で、Webpack は急速に時代遅れになってきました。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

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 が完全に一致する可能性があると予想されます。新世代のツールの統合

Webpack は成熟しており、安定しており、フロントエンドパッケージングのゴールドスタンダードであり続けていますが、大規模なプロジェクトの場合は非常に遅くなる可能性があります。

今年、Vite のような Webpack の代替手段が成熟し、現実的な選択肢になるのを見てきました。また、Turbopack の登場も見られました。これは、Webpack の作成者が開発したものであり、すでに非常に高速な Vite と比較しても、他の何よりも何倍も高速であると主張しているため、非常に有望です。

Turbopack はまだアルファ版ですが、2023 年にはプロジェクトが成長を続け、実稼働準備が整った状態に達すると予想されます。 Vite のような他のオプションは、Webpack の重要な代替手段として今後も定着していくでしょう。

Vite と Turbopack については、それぞれ

1 月

と

11 月の記事で説明しました。サーバーサイドレンダリング (SSR) とページ速度の最適化

Google は現在、サーバーサイドレンダリング (SSR) を SEO、特にランキングでの重要なツールであると考えています。検索結果前かがみになったとき。したがって、Google で成功したいウェブサイトやアプリには必須の機能となっています。

サーバーサイドレンダリングは、Cookie の処理方法により、ネットワーク遅延の短縮やデータセキュリティなど、フロントエンド開発のパフォーマンスに大きなメリットをもたらします。

人々は高速なエクスペリエンスを期待し、読み込みに時間がかかりすぎるページはすぐに放棄します。サーバー側レンダリングにより、最新のシングルページアプリケーションがサーバーレンダリングアプリケーションと同じくらい高速でアクセスしやすくなり、同時に最初のページが読み込まれた後のアプリのようなエクスペリエンスが維持されます。

私たちは、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（クライアント上でオンデマンドで個人データを取得する）のどちらかを選択します。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

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 がどこにでも使用されます。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

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

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。プログレッシブ 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 アプリは、ネイティブアプリができることのほとんどを実行できます。

オフラインで動作できます。
彼らは、カメラやマイク、さらには GPS へのアクセスなどのハードウェア機能を使用できます。
所有者にとっては確実にインストールされ、訪問者にとっては迅速に読み込まれます。

それでは、プログレッシブ 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 は高速であり、不確実なネットワーク条件下でも即座に読み込み、信頼性が高く、滑らかなアニメーションと途切れのないスクロールでユーザーに迅速に応答します。インタラクションと魅力的な - デバイス上で自然なアプリのように感じられ、没入型のユーザーエクスペリエンスを実現します。

Web コンポーネント

JavaScript フレームワークが 5 年後にどれほど普及するかは誰にも予測できません。ただし、Web コンポーネントは、一般的なフレームワークや純粋な JavaScript でも広く使用できます。

これが、最新のアプリケーションのこれらの構成要素がフレームワークに依存しないと呼ばれる理由です。別の名前は、Agnostic Web コンポーネントです。これらは Web 開発を容易にし、アプリケーションの作成に必要な時間とコストを削減します。

しかし、この概念が他の JavaScript トレンドの中でこれほど人気がある理由は何でしょうか?また、それはどのように機能するのでしょうか?これは、次の仕様に基づいています。

Shadow DOM を使用すると、DOM サブツリーを Web 要素にカプセル化できます。
ES モジュール (モジュール使用の標準) は、JS モジュールを組み込んで他の JavaScript ドキュメントで再利用する方法を決定します。
HTML テンプレートは、実行時にインスタンス化することで、ページの読み込みに影響を与えないマークアップフラグメントを作成する方法を提供します。

最新の JavaScript トレンドに関して言えば、Web コンポーネントが最も人気があります。

しかし、これはなぜでしょうか? 2023 年の最も注目すべき JavaScript トレンドの 1 つとして、Web コンポーネントを実装するメリットを見てみましょう。

Web コンポーネントの利点

Web コンポーネントはプラットフォームに依存しない概念であり、使用されているすべての主要なブラウザで使用できます。 HTML、CSS、JavaScript のみに依存します。 Web コンポーネントは、トップクラスの JavaScript ライブラリとフレームワークによって十分にサポートされています。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

出典:
webcomponents.org

再利用性とカプセル化
Web コンポーネントは、ネイティブブラウザモデルの実装に依存します。これにより、コンポーネントを任意の JavaScript アプリケーションで再利用できるようになります。
モバイルの強化
現在、プログレッシブ Web アプリの勢いが増しています。したがって、PWA 開発は、モバイル顧客と効果的に関わりたい企業にとって必須のものになります。この場合、Web コンポーネントはパッケージサイズが小さく、実行時間が速いため、非常に役立ちます。

さらに、Codica の開発者は、優れたユーザーエクスペリエンスを備えた PWA の開発において豊富な経験を持っています。たとえば、私たちの最近のプロジェクトの 1 つは、フィットネストレーナーとそのクライアントの間のコミュニケーションを簡素化するために設計されたフィットネスアプリでした。 PWA のおかげで、クライアントとトレーナーは、インストールしなくても、どのデバイスからでもこのソリューションにアクセスできます。

Web 3D

5G テクノロジーの発展により、ビデオの読み込み速度が非常に速くなり、単純なリアルタイムレンダリングがビデオに直接置き換えられるようになります。複雑な場合は、サーバーレンダリングを使用して画像を Web ページに送信できます。送信が十分に速い限り、携帯電話のパフォーマンスは問題になりません。

Web 3D 研究開発コストの削減は、今後の重要な開発ルートとなるはずであり、技術的な敷居が下がるにつれて、より多くの関心のある人々が参加し、積極的な開発が促進されるでしょう。したがって、Web 3D はプラットフォーム化の方向に発展する可能性があり、シンプルで効率的なツールを提供することが Web 3D の競争力の中核となるでしょう。

WebRTC

WebRTC は、フロントエンドの情報伝達の新しい世界への扉を開くリアルタイム通信テクノロジーです。 -エンド開発者、情報の送信は依然として XMLHttpRequest に限定されています。全二重にアップグレードするときは、誰もが WebSocket を使用します。機能が制限されたフロントエンドにとって、WebRTC は間違いなくフロントエンドの技術的パスを広げました。

コンポーネントベースのアーキテクチャ

コンポーネントベースのアーキテクチャは、設計を論理要素または機能要素に分割します。これらの要素には、メソッド、プロパティ、イベントなどのよく知られたインターフェイスが含まれています。このアーキテクチャは、コンポーネントの再利用を強化することを目的としています。これらのコンポーネントは、機能をカプセル化する自己展開可能なバイナリユニットです。

最新の JS トレンドとフロントエンドの開発全体について言えば、Bit と呼ばれるオープンソースプラットフォームについて話さなければなりません。これは、あらゆるプロジェクトの Web コンポーネントを共有、保存、整理するための優れたツールです。これは、コードの再利用性と個別のコンポーネントでのコラボレーションの向上に役立ちます。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

コンポーネントベースのアーキテクチャの利点

導入が簡単
新しいバージョンがリリースされたときに、システム全体を置き換える必要はありません。特定のコンポーネントに関連するものはすべて、そのクラスで宣言されます。
コストの削減
サードパーティのコンポーネントを統合して、ソフトウェアのコストをさまざまなアプリケーションに分散できます。
開発が簡単
コンポーネントは、アプリケーションの他の部分に影響を与えないインターフェイスを使用します。重要なのは、アーキテクチャの 1 つの層 (ほとんどの場合、ビュー) には、ロジック、デザイン、およびアクセシビリティが含まれているということです。
新しい JavaScript テクノロジのテスト
新しいコンポーネントと既存のアプリケーションまたは要素との互換性をテストできます。

では、なぜ最近の JavaScript トレンドの 1 つであるコンポーネントベースのアプローチを実装する必要があるのでしょうか? [コンポーネント] を選択すると、チームが別のプロジェクトまたはオープンソースコミュニティ全体のために開発したコードの一部を使用できます。

マイクロフロントエンドアーキテクチャに向けて

バックエンドマイクロサービスからインスピレーションを得て、次のソリューションとしてマイクロフロントエンドアーキテクチャを構築しました。モノリシックなフロントエンド構造。これは、独立したアプリケーションと同様に、全体の構造を独立したコンポーネントに分解することです。別々のコンポーネントに取り組むことで、開発チームは単一のコードベースの個々のコンポーネントに同時に協力して、フロントエンド全体を開発できます。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

State of the Front End 2020 記録によると、開発者の 24.4% が、マイクロフロントエンドを使用した Web アプリケーション開発の恩恵を受けており、効率的なエラーのない開発が向上し、生産を迅速に進めることができます。顕著な例は、アプリケーションを拡張するためにマイクロフロントエンドアーキテクチャに移行した Agorapulse から取ることができます。自律的なチームがエンドツーエンドの機能アーキテクチャを担当することで、アプリケーションのマルチスレッド配信プロセスにより、より明確で高速かつ優れたユーザーエクスペリエンスが実現します。同じアーキテクチャを使用して UI/UX を拡張および改善している他の企業には、Spotify、IKEA、American Express、Starbucks、SoundCloud などがあります。

Monorepos

これまで、monorepos は主に大規模なアプリケーションに使用され、1 つのプロジェクトにバージョン管理されたリポジトリ内の小規模なプロジェクトが含まれていました。これらの小規模なプロジェクトはそれぞれ、単一のアプリケーション (SPA、MPA など) から再利用可能なパッケージ (機能、コンポーネント、サービスなど) まで、さまざまなものにすることができます。プロジェクトをマージする習慣は、共有コードベースとして知られていた 2000 年代初頭にまで遡ります。

しかし、現在、モノリポジトリは大規模なアプリケーションだけでなく、モノリポジトリから確実に恩恵を受けるであろう中小企業やオープンソースプロジェクトにも利用されています。たとえば、企業は、共有 UI コンポーネント、共有デザインシステム (再利用可能な共同デザインなど)、およびそれぞれのドメインの共通ユーティリティ機能を含む、さまざまなパッケージを 1 つのリポジトリに含めることができます。

これらのパッケージは、さまざまなアプリケーションにインポートできます。これらのすべての共有パッケージを使用する実際のアプリケーション (例: app.mywebsite.com クライアント側レンダリング)、ホーム/製品/ランディングページ (例: サーバーを備えた mywebsite.com)サイドレンダリングや静的サイト生成など）では、共有デザインシステムパッケージのみを使用する SEO と、共有 UI コンポーネントと共有デザインシステムパッケージを使用する技術ドキュメントページ (docs.mywebsite.com など) が考慮されます。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

Turborepo (Vercel によって買収) は、JavaScript/TypeScript でのモノリポジトリを再び宣伝しています。 Turborepo を使用すると、チームはモノリポジトリ内のすべてのアプリケーションとパッケージのビルドパイプラインを作成できます。注目すべき点: ローカルマシン上のパイプライン内、またはチーム全体のクラウド内でビルドをキャッシュします。 Turborepo は、npm/yarn/pnpm ワークスペース (依存関係管理) や changesets (バージョン管理) などの他の重要なモノリポジトリツールと組み合わせることで、このツールチェーンを今年注目すべき分野にしています。

Turborepo の競合他社は、

Nx、Rush、Lerna (しばらくメンテナンスされず、は後に Nx の会社に置き換えられました) Nrwl の取得 )。

ユーティリティ優先 CSS

開発者は好きか嫌いかのどちらかです。

Tailwind CSS はユーティリティ優先 CSS の代表的な存在です。開発者は、UI コードが冗長であることを嫌う一方で、その優れた DX を愛しています。開発者は、プロジェクト内で一度設定するだけで、事前定義された CSS を HTML ですぐに使用できます。

しかし、最近のサーバーサイドレンダリング (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、コンパイル済み)。サーバーレス

SSR や SSG などのレンダリングテクノロジは、パフォーマンス重視であり、ブラウザで提供されるように設計されているため、エッジサーバーレスのトレンドに非常に関連しています。シームレスなユーザーエクスペリエンス。基本的に、エッジサーバーレスへの関心は、より高速な Web サイトや Web アプリケーションをユーザーに提供したいという衝動によって促進されます。しかし、最初から始めましょう: サーバーレス (サーバーレス関数、サーバーレスコンピューティング (AWS Lambda など) またはクラウド関数 (Google/Firebase Cloud Functions など) とも呼ばれる) は、クラウドコンピューティングにおける大きなトレンドです。長年。サーバーレスとは、実行中の (リモート) サーバーがあることを意味しますが、開発者はサーバーとその関連タスク (オンデマンドでのインフラストラクチャのスケーリングなど) を管理する必要はありません。代わりに、個々の機能をサーバーレス機能として展開する必要があり、これはクラウドプロバイダーの責任となります。

サーバーレス機能により、アプリケーションサーバーを 1 つ (または少数) のデータセンターに展開する代わりに、世界中に数十のデータセンターを配置できるため、別の利点が得られます。したがって、理想的な世界では、サーバーレス機能はできる限りユーザーの近くで実行されることになります。これは、クライアントとサーバーの往復が最短になることを意味し、ユーザーエクスペリエンスが向上することを意味します。サーバーレス機能をできるだけユーザーの近くに展開することにより、エッジコンピューティングとエッジ機能という用語が生まれました。

多くのクラウドプロバイダー (Cloudflare と Cloudflare Workers、Vercel とそのエッジネットワーク、Deno と Deno Deploy など) がこの分野で競合しており、それぞれがエンドユーザーのベストインタラクション時間 (TTI) エクスペリエンスを最適化しています。。エッジ機能は、(エンドユーザーへの回線が短いため) SSG/SSR コンテンツをより速く提供できるだけでなく、その結果をユーザーの近くにキャッシュすることもできます。

しかし、パフォーマンスが重要なだけではなく、それが主な要因であっても、エッジコンピューティングには他の利点 (コストの削減など) も伴います。たとえば、通常、クライアントとサーバー (ここではエッジ機能) の間で送信されるすべてのデータをメインデータセンターで計算する必要はありません。 IoT では、エッジで簡単にフィルタリングできる、メインのデータセンターに送信される無関係なデータ (フレームごとに変化がないビデオ録画など) が大量にあります。結局のところ、エッジ機能は始まりにすぎません...

ユーザーエクスペリエンスを向上させる AR x VR

Statista は、2024 年までに AR、VR、MR の世界市場が 307 億米ドルから 307 億米ドルに成長すると予測しています。結局のところ、3,000億は私たちの生活に浸透しています。 Instagram や Snapchat で見かけるすべてのフィルターやかわいいマスクを思い出してください。拡張現実 (AR) がそれを可能にします。

製造、旅行、建設、美容業界のビジネスオーナーは、顧客エクスペリエンスを向上させ、製品やサービスとの感情的なつながりを生み出すのに役立つテクノロジーの恩恵を受けることができます。 IKEA を例に挙げると、このテクノロジーを使用すると、実際のスケールの 3D モデルを自分の空間に仮想的に配置できます。または、選択した靴を仮想的に履くことができる Wanna Kicks も可能です。これらはモバイルアプリですが、このテクノロジーは Web サイトに実装できます。

ヘッドレス CMS アーキテクチャ

Insight Partners ヘッドレス CMS ソフトウェア市場は 2020 年から 2027 年にかけて 22.6% の CAGR で成長すると予測しています成長率が増加します。オンラインアプリケーションのユーザーベースが増加するにつれて、企業はコンテンツ管理戦略をゆっくりと変革し、さまざまなプラットフォーム間で一貫性と統一性を提供するハイブリッドアプローチを採用しています。原則として、Headless CMS は、バックグラウンドで独立して実行され、Web サービス API を使用してコンテンツを複数のデバイスにプッシュする一元化されたコンテンツリポジトリです。このアプローチは、大規模なチームのメンテナンスと生産コストを削減しながら、スケーラビリティの機会を提供します。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

ヘッドレス CMS が提供する柔軟性とスケーラビリティにより、管理しやすい Web サイトを構築するための好ましい方法となっています。

従来の CMS は「ヘッドアップ」コンテンツ管理システムであり、コンテンツリポジトリまたは「ボディ」がプレゼンテーション層または「ヘッド」に接続されているのに対し、ヘッドレス CMS ではコンテンツを 1 つで保存および管理できます。配置して、任意のフロントエンドにデプロイします。これにより、オムニチャネル CMS が提供する API を通じて、コンテンツを任意のシステム、ソフトウェア、または Web サイトに統合できます。

コンテンツ配信に関しては、ヘッドレス CMS を使用すると簡単かつ迅速に実行できるため、コンテンツ作成者はコードに精通している必要がありません。

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

ヘッドレス CMS では、フロントエンドとバックエンドは独立した (分離された) システムです。1 つのシステムがコンテンツの作成と保存を処理し、もう 1 つのシステムがプレゼンテーションを処理します。 API を使用すると、ヘッドレス CMS はコンテンツが作成されるとすぐに配信され、どのデバイスでも見栄えが良くなります。

モバイルファースト開発は引き続き人気です

2022 年 8 月の時点で、

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

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

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 处于 JavaScript 趋势的顶端

Jamstack を最大限に活用している最も顕著な例は、ルイヴィトン、ヴィクトリアベッカムビューティーなどのサイトです。

Jamstack の利点

必要に応じてカスタマイズできるため、変更に必要なコードが少なくなります。
マークアップとアセットは CDN (コンテンツ配信ネットワーク) 経由で配信され、パフォーマンスが向上します。
プロジェクトがピークに達した場合、またはトラフィックの増加または拡大が予想される場合、CDN はプロジェクトの拡張をスムーズにすることもできます。
Jamstack を使用すると、開発者はマイクロサービスアプローチを使用して Web サイトを構築できます。したがって、アプリケーションの保守が容易になります。
Jamstack ページは高速で軽量です。これらの対策により、読み込み速度が基準の 1 つである Core Web Vitals でプロジェクトがより上位にランクされます。
サーバー側レンダリングモードは、ユーザーがページをリクエストしたときに、非常に動的な Web サイトのコンテンツを生成するのに役立ちます。
Jamstack Web サイトは機密情報とは直接関係ありません。したがって、ハッカーに対して脆弱ではありません。

Jamstack の欠点

これらのソリューションでは、天気予報フォームやユーザー認証などのサードパーティ API を使用できます。したがって、サードパーティ API の不具合による Web サイトのダウンを防ぐサポートコードがあることを確認してください。
Jamstack では多くの場合コーディングが必要です。完全にプラグインフレンドリーではありません。したがって、プロジェクトが CMS (コンテンツ管理システム) に接続されていない場合は、変更が必要になる場合があります。
変更を加えた後は、各ページを「作成」する必要があります。このプロセスは、ページ数が多い Web サイトの場合には不便です。

しかし、Jamstack エンジニアはこれらの問題を解決するために懸命に取り組んでいます。すべての機能を備えた Jamstack は、2023 年もトレンディであり続ける準備ができています。

GraphQL

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

GraphQL は、2015 年に Facebook によってリリースされたクエリ言語です。 JS アプリケーションを強化するために使用できます。

このデータ管理ツールは、バックエンドとフロントエンドからデータをクエリするための柔軟な構文を提供します。現在、GitHub、Pinterest、Coursera、Shopify などの多くの人気企業で使用されています。

現在、データ管理を利用できるさまざまな人気のある JavaScript フレームワークやライブラリがあります。さらに、すべてのインターネット使用量の大部分はモバイルデバイスからのものであるため、効率的なデータの読み込みが必須となっています。

GraphQL が作成された理由は、Facebook がアプリケーション内のデータ呼び出しのパフォーマンスを向上させる必要があったためです。 GraphQL はそれを非常にうまくやってくれます。

2023 年の最も重要な JavaScript トレンドの 1 つとして、この言語がもたらす利点について説明します。

GraphQL の利点

高速なデータ取得
この言語は、単一のエンドポイントでデータを収集します。したがって、プログラマは 1 回の API 呼び出しを実行するだけで、必要なデータを取得できます。
クエリ効率の向上
言語の名前は、サーバー上のデータを定義するためにグラフを使用することを示しています。このグラフベースのスキームにより、複数の API 呼び出しを介するのではなく、パッケージ内でデータを渡すことができます。
カスタムリクエスト
この言語は、各フィールドのパラメーターと、スカラーフィールドを含むネストされたオブジェクトをサポートします。この強い型のプロパティは、抽象化の原理から来ています。このようにして、複雑さを軽減し、重要な情報に焦点を当てます。

これらすべての利点により、GraphQL は 2023 年の最も重要な JavaScript トレンドの 1 つになる可能性があります。

WebAssembly とエッジ

WebAssembly は Rust をサポートしていますが、C、C、C#、Go; COBOL## もサポートしています。 # のようなものは WebAssembly に書き込むことができます。」と Gardner 氏は言います。「したがって、真のサンドボックス環境はクライアントブラウザーにとって最適であり、WebAssembly にとっても最適です。クロスプラットフォームで、起動が非常に速く、小型でプラットフォームに依存しません。したがって、来年にかけてフロントエンドにおける WebAssembly の全体的な成長が見られるでしょう。

WebAssembly は、迅速に実行および起動する必要がある高パフォーマンスのアプリケーションがある場合に実際に使用され始めます。

Vercel は、フロントエンドで WebAssembly を使用してソーシャルメディアカードを生成しました。 WebAssembly は、JavaScript に比べてこれらの画像をより高速に生成できるソリューションです。

何ができるでしょうか?

WebAssembly は JavaScript を置き換えるのではなく、JavaScript と連携して動作します。 WebAssembly が使用する (コンパイラとして機能する) 言語を知らない場合は、新しい言語である Rust を学ぶのが良いかもしれません。

別のルート:

JavaScript と WebAssembly
を組み合わせます。
Rust から WebAssembly へは、コミュニティ間に多くの重複があり、多くの人が Rust と WebAssembly の両方に興味を持っているため、最も成熟したパスの 1 つです。さらに、WebAssembly は JavaScript と混合できるため、これは必ずしもどちらか一方の状況ではありません。

#Web 開発における新しいトレンド?

Web 開発の最新トレンドは、最新の Web ブラウザーで実行される新しいタイプのコードである WebAssembly です。これは、他の言語 (C/C++、C#、Rust など) が Web サイト上で効率的に実行される方法を提供しますが、JavaScript を置き換えるのではなく、JavaScript と並行して動作します。 WebAssembly は、複数の言語で書かれたコードを Web 上でネイティブに近い速度で実行する方法を提供します。

これは、

W3C WebAssembly

ワーキンググループとコミュニティグループを通じて Web 標準として開発されており、現在、すべての主要なブラウザベンダーがこのテクノロジーをサポートしています。

WebAssembly

は、ゲーム、音楽ストリーミング、ビデオ編集、CAD アプリケーションなど、パフォーマンスを重視する用途に特に役立ちます。これは、Google Earth や共同マッピングおよび作図アプリケーション Figma などの Web サービス/アプリケーションですでに使用されています。

AI 主導の開発

人工知能は最終的に開発者の仕事を置き換えるのでしょうか?この質問に対する答えはまだありませんが、AI 主導の開発は 2022 年に現実になります。 GitHub Copilot

のリリースにより、開発者はお気に入りの IDE で AI プログラマーとペアリングできるようになりました。コードを書く (または、コードを作成しようとしている内容を説明するコメントを書く) のと同じくらい簡単で、GitHub Copilot が実装の詳細を自動的に完成させて、最適な理解を実現します。

しかし、それだけではありません。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 コンテンツが誰でもアクセス可能になり、読みやすくなります。
暗い場所でも目の疲れのリスクを軽減します。

ダイナミックユーザーインターフェイス (モーション UI)

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

専門的に設計および実装されたダイナミック UI は、実際のユーザーの注意を引くことができます。ビジュアル的なアピール。これは、一連のアニメーション要素は、テキスト、説明、その他の静的な情報よりも簡単かつ迅速に表示できるためです。

Motion UI はデジタル製品のシーケンス、遷移、次のステップ、またはアクションを伝達し、ナビゲーションを容易にします。また、ユーザーの注意を Web ページ全体に向けるため、Web ページ上の階層領域にもユーザーの注意を向けます。

専門的に設計および実装された場合、このテクノロジーの結果は、ユーザーの注意を真に引き付ける視覚的な魅力を提供できます。さらに、動的な UI はデジタル製品のシーケンス、次のステップ、遷移、またはアクションを伝達するのに役立ち、ナビゲーションが容易になります。その過程で、Web ページ上の階層の正確な領域にユーザーの注意を向けます。一連のアニメーション要素を表示することは、テキスト、説明、その他の静的な情報を読むよりも簡単かつ迅速です。

スポーツ UI のその他の使用例には、

ユーザーを歓迎しますが含まれます。 Nokia 携帯電話のロゴに両手が結合する象徴的なアニメーションを覚えていますか?このようなものをウェブサイトに組み込むことができます。
コンテンツを更新中。モーション要素を使用すると、ユーザーの関心を短期間維持し、Web サイトが情報を読み込んでいる、または処理していることをユーザーに知らせることができます。
興味深い要素は、ユーザーの注意を引きつけ、Web サイトを競合他社と差別化するのにも役立ちます。

拡張現実と仮想現実

AR、VR、MR の世界市場は、2024 年までに 3,000 億ドルに達すると予想されています。これらの技術的進歩は私たちの日常生活に浸透しています。Instagram や Snapchat で見かけるあらゆるフィルターや楽しいマスクを思い出してください。これらは拡張現実 (AR) のおかげで可能になります。

AR の用途はソーシャルプラットフォームのカメラフィルターに限定されません。電子商取引、建設、製造、旅行、美容業界はすべて、顧客エクスペリエンスを向上させ、消費者とのつながりを促進する可能性のあるこれらのイノベーションから恩恵を受けることができます。製品やサービスとつながります。

IKEA を例に挙げると、縮尺どおりのソファの 3D モデルを自分の空間に配置できます。お気に入りの靴を仮想的に履くことができるアプリ、Wanna Kicks を使用して、仮想的にお気に入りの靴を履くこともできます。これらはモバイルアプリの例ですが、このテクノロジーは Web サイトでも使用できます。

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 デザイナーは色のグラデーションを使用してさまざまな外観を試し、目を引く組み合わせを作成することがよくあります。カラーはデザインに楽しさ、創造性、個性をもたらします。

ガラステクスチャはガラスフォームとも呼ばれ、Web デザインに深みと質感を加えます。ぼかし効果と透明度を組み合わせると、ピクセルがわずかに不透明な曇りガラスの効果を帯びます。 Glassmorphism は、あなたがガラスを見ていると他人を騙そうとするものではありません。代わりに、それはただその感覚を呼び起こすだけです。

Apple は 2020 年からデザインにガラステクスチャを使用しており、最近では Windows 11 にも採用されました。インタラクティブな要素 (ボタン、ナビゲーションオプション、スライダー、その他の UI 要素など) がガラスのようなぼかしに対して鮮明な線で目立つため、特に人気があります。

JAMstack

JAMstack は、静的 Web ページを構築するための独自の概念です。コンテンツ生成用のバックエンドソリューションを実装する代わりに、API を使用します。その結果、開発者の観点から見ると、Web サイトがより速く、管理しやすくなります。

JAMstack 定義: JavaScript 用

- フロントエンド関数を作成するための言語。
は、サードパーティサービスからのコンテンツ (データ) を要求する API に使用されます。
はマークアップの略で、Web ページ上のコンテンツを構造化します。

詳細:

Jamstack.org

またはなんと Jamstack とは何ですか?

詳細

ブロックチェーンテクノロジー
プログレッシブ Web アプリ (PWA)
モノのインターネット (IoT)
Accelerated Mobile Pages (AMP)
音声検索の最適化
API 優先開発
AI 主導のチャットボット
通知プッシュ
コンテンツのパーソナライゼーション機械学習による
Motion UI
データセキュリティ
複数のエクスペリエンス
ネットワークセキュリティ
マイクロフロントエンド
仮想現実
サーバーレスアーキテクチャ(サーバーレス)
クラウドコンピューティング
シングルページアプリケーション (SPA)
JavaScript フレームワーク
自動テスト
レスポンシブ Web サイト
ダークモード
WebAssembly
ノーコード/ローコード開発
拡張現実
モバイルフレンドリー Web 開発
コア Web Vitality
WordPress 開発
...

フロントエンドフレームワーク

参照データ統計 Web サイト: 2022.stateofjs.com/en-US/libra…

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

React

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。出典: statista.com

React はフロントエンド領域を支配し続けています。このフレームワークは、大規模なアプリケーションの長期にわたるパフォーマンスを保証する独自の仮想 DOM によって際立っています。同様に、コンポーネントベースの構造は、チーム間での開発の実行が容易であることを意味します。

React の学習曲線は比較的緩やかですが、ツールのアクセシビリティによりプロセスは管理しやすくなります。つまり、create-react-appアプリケーションのボイラープレートの構築プロセスを自動化します。次に、ブラウザからアクセスできるデバッグエクスペリエンスを提供する React DevTools があります。

React が広く採用されているおかげで、フロントエンド開発者は多くのオープンソースプロジェクトに触れることができます。たとえば、構築十数個の React 用の完全な設計システムを構築しました。これにより、開発プロセスにかかる時間が大幅に節約されます。

2022 年は、新しいメソッドと概念を提供する React 18 リリースによって特徴づけられます。最も重要なことの 1 つは、同時実行メカニズムを実装することです。 React は、自動バッチ処理や変換の概念などの新機能も提供します。新しいクライアントおよびサーバーレンダリング API などを提供します。

続きを読む:React アプリ開発: UI、スタイリング、状態管理、テスト

私たちのチームは、React のステータスを熱心に監視しています。 2023 年は React 開発者にとって素晴らしい年になるでしょう。より効率的にしたい場合は、この記事で React 開発のベストプラクティスとツールを入手してください。

Angular

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

Angular は依然としてかなりの使用率を保っていますが、このフレームワークへの関心は過去最低レベルにあります。おそらく熱心なファンがいるのは、Angular が TypeScript に基づいているからではないでしょうか?もちろん冗談です。

Angular は、SPA - シングルページアプリケーションの構築にかなりの柔軟性を提供します。他の有名なフロントエンドフレームワークと同様に、Angular はコンポーネントベースの開発ワークフローを実装します。また、コンポーネントの動的な性質を管理するためにテンプレートシステムが追加されました。

結局のところ、Angular はすべてのプラットフォーム向けのアプリケーションを同時に構築でき、またそのために使用されているということです。コードは、Web アプリケーション、モバイルプロジェクト、ネイティブデスクトップアプリケーションでの実装に再利用できます。パフォーマンスに関しては、SSR と Web Workers によって最適化されています。

Angular を始めるのは簡単ですか?完全ではありません。実際、調査データを見ると、フレームワークに対する満足度も大幅に低下しています。主な理由は、学習曲線と個人的な好みです。

Vue

Vue は、真に最新の Web 開発にとって堅実な選択肢であり続けます。この進歩的なフレームワークは最近 Vue 3 バージョンをリリースしました。そして、新機能と改善のおかげで、最新のスタックを構築するための頼りになるフレームワークとしての地位を確立することを目指しています。

新しいバージョンには、待望の実装がいくつか含まれています。 Vite を使用した新しいビルドツールチェーンが含まれています。 Pinia による状態管理の改善。また、完全に刷新されたドキュメントには、開始に役立つ多くのチュートリアルが含まれています。

人気に関して言えば、Vue は柔軟性に優れています。このフレームワークは厳密なルーチンを強制するものではなく、何を構築するかをユーザーが決定できるようにします。

たとえば、最も基本的な HTML テンプレートなど、他の開発スタックで再利用できる Web コンポーネントを構築できます。さらに、Vue は、CSR、DevTools、TypeScript のサポート、テストツールなどのネイティブツールのおかげで、強力な SPA プロジェクトを処理するためによく使用されます。

開発者にとって、プロジェクトに Vue.js と React のどちらを選択するかが難しい場合があります。 Codica の開発者は両方のフレームワークを使用します。カスタムソフトウェア開発中に発生するさまざまなタスクにそれらを適用します。

Vue.js は、そのモジュール性、弾力性、進歩性で知られています。大規模なコミュニティと優れたドキュメントも利点を高めます。

2022 年に、Vue.js –

3.2.45 がリリースされました。現在、Vue.js はバージョン 3.3 をリリースしようとしています。アプリケーションのパフォーマンスが向上し、バンドルサイズが小さくなり、TypeScript サポートが強化されました。

2023 年の JS フレームワークのトレンドに影響を与える Vue の機能強化について詳しく学びましょう。

パフォーマンスの向上

以前の Vue バージョンである Vue 3.0 および Vue 3.2 と比較して、リアクティブシステムが大幅に改善されました。つまり、

依存関係の追跡速度が 40% 向上します。
メモリ使用量を最大で削減できます。 17%。

Vue 3.2 はどのようにしてこのような驚くべき結果を達成したのでしょうか? Vue 3.0 でリリースされたテンプレートコンパイラは、静的コンテンツを迅速にレンダリングし、テンプレートの動的ノードをフラット化できます。現在はいくつかの改良が施されています。たとえば、通常の要素 VNode を 200% 高速に作成できます。

最も強力な JavaScript トレンドの 1 つである Vue 3.2 は、開発者に次のオプションを提供します。プロジェクトにとって、コンパイラを通じてパフォーマンスの最適化と型バインディングを実現した方が良いでしょうか?それともレンダリングを手動で監視する必要がありますか?

大規模サポート

3 番目のリリース以前は、Vue は主に小規模プロジェクトに適していました。

しかし、Vue 3.0 に組み込まれている Comboposition API を使用すると、大規模なプロジェクトに必要なコードの整理と再利用が容易になります。不明なコンポーネントソース、名前空間の競合、パフォーマンスの遅れなどの問題を解決します。したがって、可読性と型チェックが向上し、2023 年の最新の JavaScript トレンドに沿ったものになります。

TypeScript の統合

新しい仮想 DOM およびコンポジション API は、最も重要な JavaScript トレンドの 1 つである TypeScript と互換性があります。 Vue 3 は、バンドルされた型宣言を提供する TypeScript を使用して構築されています。

階層化モジュール

JavaScript フレームワークのトレンドに従って、Vue Core では分離されたモジュールのコーパスへのアーキテクチャの移行が見られました。その結果、フレームワークは保守性を向上させ、実行時のサイズを最大 50% 削減するツリーシェイキングを導入します。

UI コンポーネントライブラリの構築

新しいメソッド「カスタム要素の定義」により、Vue コンポーネント API を使用してカスタムソリューションを構築できます。この機能を使用すると、開発者は、使用するフレームワークと互換性のある、Vue を利用した UI コンポーネントのライブラリを作成できます。

結果として、Vue は依然として JavaScript フレームワークの人気において重要な位置を占めています。さらに、Web アプリケーションを作成する簡単かつ柔軟な方法を開発者に提供し続けます。

最新の機能強化について詳しくは、Vue ブログをご覧ください。

Svelte

HTTP アーカイブレポートによると、2015 年の Web ページのサイズの中央値は1,280 KB は、2022 年までに 2,000 KB に増加しました。巨大な Web ページは大量のネットワーク帯域幅を占有するため、ページの読み込み時間が長くなります。ネットワークリソースが未開発の一部の地域では、この影響がさらに大きくなるでしょう。この傾向を改善するために Svelte が登場しました。 Svelte は、開発者が最小限のコードで最も軽量で応答性の高いアプリケーションを作成し、実行時のパフォーマンスのオーバーヘッドを最小限に抑えられるように設計されています。原則として、Svelte は React や Vue とは少し異なります: 応答性の高い更新を実装するために仮想 DOM テクノロジに依存しません。代わりに、カスタム文法ルールを直接使用して応答性の高いデータ分析、バインディング、および応答性の高い手続き型コードの実装を実装します。ほとんどのシナリオで、最終的にコンパイルされた製品のサイズはネイティブ実装と同等であり、パフォーマンスは Vue や React に劣りません。

Svelte は、2021 年の stackoverflow Web サイトの「

Vercel

もその作成者である Rich Harris に投資しています。基本的に、Svelte は他のコンポーネント駆動型フレームワークと同様に動作します。 React のようなフレームワークとの主な違いは、Svelte はブラウザーへの完全な配信を必要としないことです。代わりに、Svelte アプリケーションをコンパイルする必要があります。これにより、コンポーネントが事前に作成された JavaScript ファイルにバンドルされます。他のフレームワークは

仮想 DOM

を使用して更新をレンダリングしますが、Svelte は事前に割り当てられた DOM ノードを使用してアプリケーションをコンパイルします。 Josh Collinsworth が実証しているように、このアプローチには永続的なパフォーマンス上の利点があります。最後に、Svelte はネイティブ HTML コードとの互換性が高く、厳密な構造を課しません。

これは、迅速なフロントエンド開発に最適です。以下に例を示します。

// Example.svelte



Hello, {name}!

ログイン後にコピー

Svelte は、コンポーネントベースのアーキテクチャに依存するフロントエンドフレームワークです。このフレームワークの最初のバージョンは JavaScript で作成され、2016 年にリリースされました。ただし、2019 年にリリースされた 3 番目のバージョンでは TypeScript が使用されています。 Svelte は間違いなく 2023 年の人気のある JavaScript トレンドの 1 つになるでしょう。

TypeScript バージョンがリリースされて以来、このフレームワークは開発者コミュニティから多くの関心を集めてきました。 Svelte は、ほとんどのプログラマーを満足させる最高のフレームワークの 1 つです。

Svelte 走在 JavaScript 趋势的顶端 #Svelte は、開発者が強力な Web アプリケーションを作成するのに役立つ軽量のフレームワークです。 React と Vue は、実行時にアプリケーションを Vanilla JS (他のフレームワークやライブラリなしで JS を使用できるフレームワーク) コードに変換します。

代わりに、Svelte はビルド時にそれを実行します。 Svelte はコンパイラーとして機能し、抽象化レイヤーなしで Web アプリケーションをブラウザーで実行できるようにします。

Svelte が特別である理由と、2023 年に無視できない JavaScript トレンドの 1 つについて説明しましょう。

Svelte の利点

組み込みのリアクティブ性:

はリアクティブであると聞きました。しかし、Svelte は React の仮想 DOM (Document Object Model) の外側に別の反応性の源を発見しました。重要なのは、Svelte アプリケーション内のすべてのコンポーネントが状態を持つことができるということです。コンポーネントの状態が変更されると、DOM が更新されます。強化されたパフォーマンス: Svelte は優れた実行時パフォーマンスを示します。 JavaScript データの傾向からも、このフレームワークが中小規模のプロジェクトに特に適していることがわかります。
コンパクトな構文: Svelte の構文はシンプルで読みやすいです。さらに、Svelte アプリケーションには多くの定型文は必要ありません。
最新の傾向は、Svelte の使用が今後も拡大することを示しています。

Preact

メタフレームワークは常に重要なものでした。そしてこの場合、Preact は React の軽量な代替となることを目指しています。過去に React を使用したことがある場合は、Preact をマスターするのは簡単です。実際、2 つのフレームワーク間でコンポーネントを簡単に使用できます。

最初に注目すべき点はパッケージサイズです。Preact の場合は圧縮後 4 kb、React の場合は圧縮後 38 kb です。同様に、イベントシステムは

addEventListener

を介して処理されるため、バニラ JavaScript を使用してイベントを処理できます。詳細なケーススタディをお探しの場合は、

Etsy が React から Preact に移行した理由

をチェックすることをお勧めします。この出版物では、可能な限りの利点と、保守性と移行の安定性の観点からの長期的な利点を測定しています。

Ember

Ember には長い歴史があり、上記のすべてのフレームワークよりも前から存在しています。もちろん、Ember.js の使用は長年にわたって大幅に減少する可能性があります。ただし、MVC パターンを使用した効率的なアプリケーション開発にとっては依然として有力な候補です。また、このフレームワークは Web 開発者の間で人気がありますが、デスクトップアプリケーションやモバイルアプリケーションに対しても非常に柔軟です。

さらに重要なのは、Ember はまだ活発に開発中であるということです。

Ember 4.0 バージョン

フロントエンドのトレンドに対応するための新機能が追加されました。 Ember を際立たせるもう 1 つの点は、統合された下位互換性です。フレームワークに関する限り、Ember は、フレームワーク自体への重大な変更によってコードが破損しないようにするという優れた仕事をします。

点灯

Lit (以前の lit-HTML および LitElement) は、Google が管理する Web コンポーネントフレームワークです。 Lit は、Wordle のテクノロジースタックで使用されるフレームワークです。人気の単語当てゲームには毎日何百万人もの訪問者がいます。要約すると、Lit は、単純なインターフェイスと複雑なインターフェイスの両方を備えたプログレッシブ Web アプリケーションを構築するために最も一般的に使用されます。

いつでも、Web コンポーネントを直接使用できます。このアプローチは、パフォーマンスをさらに増大させないコンポーネントを作成するのに役立ちます。 Lit の実行時のフットプリントは最小限です。簡単に言えば、React のようなフレームワークは JavaScript に依存しているのに対し、Lit は標準化された Web コンポーネントを実装しているだけです。

Alpine

2023 年に注目されるフロントエンド開発トレンドの一部を学びましょう。

Alpine.js は、UI の動作をカスタマイズするための JavaScript フロントエンドフレームワークです。また、Alpine は Vue や Angular に似ていますが、リソース使用要件ははるかに低くなります。著者 Caleb Porzio は、これを 「jQuery と React の間の脆弱性を解決する」 と呼んでいます。

Alpine は、オーバーヘッドを一切かけずにデザインにインタラクティブ性を追加したい場合に最適です。たとえば、事前に構築されたアプリ設計があり、インタラクティブなメニュードロップダウンを追加したい場合です。基本的なインタラクティブ機能に React を使用するのはやりすぎです。

Alpine をサーバーサイド Web フレームワークを最適化する方法として考えてください。実際、著者自身も、Alpine は Laravel や Django などのフレームワークから多くのインスピレーションを得ていると強調しています。同様に、Jekyll、Hugo などの静的サイトジェネレーターに jQuery スタイルの機能を追加するための完璧な軽量ソリューションです。

Solid

SolidJS は 2019 年から活発に開発されています。ただし、フレームワークは 2021 年 6 月

に v1

にアップグレードされました。それ以来、かなりのファンを魅了しています。現在、Solid には GitHub 上に 14,000 を超えるスターがあり、約 3 か月ごとにメジャーアップデートが行われています。このフレームワークは宣言型であり、仮想 DOM を使用しません。対照的に、Solid はコンポーネントを実際の DOM にコンパイルするという点で Svelte に似ています。したがって、更新ステータスは、それを使用するコードに固有です。

最後に、SolidJS は React から多大な影響を受けています。そして、多くの点で、多くの類似点があります。 JSX、フック API に加え、Web コンポーネントや SSR などの機能のサポートが含まれます。興味深いことに、それは非常に高速でもあります。

Ryan Carniato による要約

ベンチマークテストでは、Solid が Svelte、Elm だけでなく、Vue や Redux などのフレームワークよりも優れたパフォーマンスを発揮できることが示されています。

刺激策

ついに、少なくとも今年は刺激策が用意されました。 Basecamp によって開発されている最小限の JS フレームワーク。最初に気づくのは、アルパインとの類似点です。言い換えれば、Stimulus は jQuery の控えめな代替手段になろうとしています。

このフレームワークは、ページ構造の一部としてすでに使用している HTML を強化する場合に最適です。 Stimulus を使用すると、JavaScript データコントローラーを追加して HTML 要素を最適化できます。これらは、フォームの送信やボタンの外観などを強化するために使用できるインタラクティブで動的な機能です。

概要

今年のトレンドから導き出される結論が 1 つあるとすれば、それは開発者が物事を簡素化しようとしているということです。これは、Lit や Solid のようなフレームワークで非常に明白です。 React には優れたエコシステムがありますが、単純な SPA および PWA アプリケーションを構築するのに必ずしも必要なわけではありません。私も、この傾向自体は非常に顕著であると思っております。

Angular はかつて最高のものでしたが、その結果は開発者をがっかりさせました。したがって、Vue、React、Angular が開発者の関心を失いつつあるのも不思議ではありません。

また、より小型だがより洗練された代替品の人気も高まっています。実際、今年以来、フロントエンド開発者のエコシステムに影響を与えたプロジェクトが無数にありました。とはいえ、Bun は、事実上の JS ランタイムとして Fresh と競合するように設計されています。スピードとシンプルさを重視しており、これらのツールが来年のレポートのトップになると私は完全に期待しています。。

ライブラリ

lit-element: プロジェクト間でコンポーネントを共有し、UI デザインシステムを開発するための高速かつ軽量のツールです。
date-fns: ブラウザーと Node.js 用の最新のユーティリティライブラリ。 Moment ライブラリよりも軽量です。
RxJS: 監視可能なシーケンスを使用して、機能的な非同期プログラムやイベントベースのプログラムを作成するのに最適です。
yup: TypeScript をサポートする検証用の表現力豊かな JavaScript スキーマビルダー。
agenda.js: MongoDB を利用した Node.js ジョブスケジューリングの低オーバーヘッドソリューション。
Bull: Node.js 用の高速で信頼性の高い Redis ベースのキュー。さらに、TypeScript で書かれた兄弟の BullMQ があります。
Jest: テストを構築、実行、構築するための、高速かつ安全で、十分に文書化されたライブラリです。
Commander.js、Ruby プログラミング言語 Commander ライブラリからインスピレーションを得た、Node.js で CLI を作成するためのライブラリです。 TypeScript のサポートが付属しています。