1年が経ち、過(guò)去12か月間、Web Tools Weekly Newsletter Archivesをレビューして、2021年に読者が見(jiàn)つけた最も興味深いフロントエンドツールを探していることを再び光栄に思います。したがって、2022年をキックオフするために、60の最も人気のあるツールのリストをまとめました。今日からフロントエンドプロジェクトで使用できる少なくとも1つまたは2つのツールがここにあると思います。
いくつかのフロントエンドツールは非常に実用的ですが、好奇心のために他のツールはリストに載っている可能性があります（クリックのみの數(shù)で判斷します）。私の年次リストを作成するツールの多くは比較的新しいため、これは來(lái)年にどのフロントエンドツールが人気があるかを示す良い兆候だと思います。
上から下に數(shù)えてください！
＃＃＃ 目次
-60。オープンな小道具
- NextUi
- dopefolio
- ヴィズー
- 10015ツール
- スノーブ
- 尾
- Maplibre
- SVGレポ
- アニメーション化された背景
- pico.css
- フォントのコーディング
- ui-neumorphism
- 美しいCSSボタン
- シェーパー
- 威信
- html.cafe
- charts.css
- ボタンジェネレーター
- Doodadパターンジェネレーター
- カブーム
- Skuawk
- Glassmorphism CSSジェネレーター
- カリア
- adminjs
- パンケーキ
- モザイクライト
- ICONDUCK
- Luxa CSS
- キラキラ
- コンポーネントAI
- Unicode矢印
- タイプスケールクランプジェネレーター
- Animxyz
- フロントエンドツールキット
- colorspalettes.earth
- カットされていない
- 低い
- JavaScriptブースター
- レイアウトパターン
- ベースラインの背景リムーバー
- Theatre.js
- transition.css
- コンポーネントギャラリー
- party.js
- ヘッドレスUI
- ターボ
- tidy.js
- テールキット
- テールワインドコンポーネント
- ピカデイ
- HTMLボイラープレート
- 旋回
- riju
- devui
- 花粉
- 代替品
- uisual
- Supabase UI
- CSSレイアウトジェネレーター
- 2021年のお?dú)荬巳毪辘违榨恁螗去ē螗丧末`ルは何ですか？
### 60。小道具を開(kāi)く
Open Propsは、CSSカスタムプロパティで構(gòu)成される手作りのデザイントークンのセットを提供します。この特別なCSS機(jī)能により、そのようなツールはますます一般的になることがわかります。 Animations.css、borders.css、fonts.css、zindex.cssなどのカスタム屬性の小規(guī)模で便利なコレクションを紹介することができます。または、メインのOpen Propsファイルを使用してすべてを一度に取得することができます。
これは間違いなく注意するためのフロントエンドツールであり、利用可能なトークンライブラリの構(gòu)築を支援したい場(chǎng)合は、優(yōu)れた貢獻(xiàn)目標(biāo)でもあります。
59。NEXTUI
人気のあるCSS-in-JSソリューションステッチを使用するモダンなReactライブラリで、すぐにブランドに関連付けられていないログインページまたはその他のコンテンツをすばやく構(gòu)築するのに役立つデフォルトのカラーパレットとともに、すぐに使用できるライトおよびダークUIコンポーネントを含むモダンなReactライブラリ。
現(xiàn)在、開(kāi)発のアルファフェーズとしてリストされているため、來(lái)年に注意を払う価値のあるもう1つのツールです。
58。DOPEFOLIO
開(kāi)発者のポートフォリオを簡(jiǎn)単に作成する方法を探している場(chǎng)合、DopeFolioはSEO用に最適化され、燈臺(tái)のスコアが高くなる迅速なソリューションです。
ライブデモでは、それがどのように見(jiàn)えるか（応答性など）を知らせ、カラーセレクターコンポーネントが含まれているため、獨(dú)自の好みのテンプレートをリアルタイムでテストできます。
57。Vizzu
これは、今年のフロントエンドツールリストのユニークなツールです。 Vizzuは、アニメーション化されたデータストーリーと視覚化を作成するためのオープンソースのJavaScriptライブラリです。おそらく、その人気は、今日の醫(yī)療データを作成して埋め込む必要性によるものです。
このライブラリを使用すると、靜的データチャート、アニメーションチャート、データストーリーを簡(jiǎn)単に構(gòu)築できます。アニメーション化されたチャートやデータストーリーのライブ例を表示できます。これには、カメオキャラクターがテレビシリーズの友人全體で最も多くのラインを持っていることを示しています。
56。10015ツール
このようなフロントエンドツールを毎年見(jiàn)つけているようです。 10015ツールは、単一のツールではなく、一連のフロントエンドツールです。テキストツール、畫(huà)像ツール、CSSツール、コーディングツール（ミニファイアーなど）、カラーツール、ソーシャルメディアツール、その他の雑多なカテゴリの下にあるツールが含まれています。
これは間違いなく、私が見(jiàn)たより包括的なオールインワンソリューションの1つなので、いつでも使用できる便利なフロントエンドツールをいくつか見(jiàn)つけることができます。
55。Snoweb
アイコンセットは常に人気があり、毎年少なくとも12個(gè)の新しいアイコンセットに出くわします。このアイコンセットには、最適化されたSVGアイコンが含まれています。その多くは、それらの上にホバリングするときにアニメーションが組み込まれています（エンベロープアイコンの開(kāi)閉など）。
多くのアイコンサイトと同様に、キーワードまたはフィルターでカテゴリごとに検索できます。そのうちの1つは、Twitter、Facebook、Vimeo、YouTube、Snapchatなどのアイコンを含むブランドカテゴリです。
54。テール
これは、Tailwindがより人気になるにつれて、これが過(guò)去數(shù)年間でトレンドを作るための最初のTailwindベースのツールです。このフロントエンドツールは、Tailwind CSSを使用したプロジェクト用のドラッグアンドドロップページビルダーです。
15のカテゴリのそれぞれに2つの無(wú)料の「ブロック」が含まれているため、ここには毎月ロックを解除するために支払うことができる無(wú)料のものがたくさんあります。
53。Maplibre
このオープンソースマップギャラリーは3月に発売され、年間を通じて人気が高まっています。 JavaScriptライブラリと、iOSおよびAndroidアプリケーションにマップを表示するためのSDKが含まれています。
Webベースのフロントエンドツールの可能性を理解したい場(chǎng)合、ドキュメントにはJavaScriptを使用する多くの例が含まれています。
52。SVGレポ
SVG Repoは、完全に番號(hào)に基づいてリストに載っています。これは、300,000を超える無(wú)料の最適化されたSVGベースのグラフィックスとアイコンのライブラリであり、そのほとんどは商用使用が許可されています。
選択した各アイコンは、どのライセンスに屬するかを教えてくれます。キーワードで検索して、お?dú)荬巳毪辘违ⅴぅ偿螭颉副４妗工筏?、後で使用できます（ログインは不要）?/p>
51。アニメーション化された背景
このツールは今年トップ60にありますが、それらの中で最も実用的なフロントエンドツールではないかもしれません。最初に言ったように、純粋な好奇心からクリックされたものがあります。さまざまなCodepenデモンストレーションからのアニメーションバックグラウンドライブラリです。
ライブラリは、背景を事前に録音したビデオとして表示するため有用であるため、すべてのデモの読み込みやブラウザタブがクラッシュすることを心配する必要はありません。これらのツールは、通常、多くのJavaScriptとCSSを使用するため、慎重に（もしあれば）使用します。
50。pico.css
これは、今日の人気のあるCSSフレームワークとは異なります。これは、本格的なフレームワークというよりも、スタートアップCSSファイル（リセットなど）のようなもので、少し尾のあるツールに似ています。
PICO.CSSは、タグに多くのクラスを追加することなく、すべてのネイティブHTML要素（こちらでプレビューできます）にエレガントなデフォルトスタイルを提供します。ファイル全體がGZIPの10kbよりも小さいです。
49。コーディングフォント
フォントのエンコードは最近エキサイティングな新しいトレンドであるように思われ、CSS-Tricksはこれを利用してこの小さなインタラクティブな情報(bào)アプリケーションを作成します。
左側(cè)のフォントを選択して、サンプルコード、フォント情報(bào)（ハイフン、イタリックなど）、コスト（ほとんど無(wú)料）、およびHTML、CSS、またはJavaScriptサンプルコードを表示するオプションを表示します。
48。ui-neumorphism
このReactライブラリは、數(shù)年前に時(shí)代遅れのように思われる古いシミュレーション傾向に基づいています。この傾向は戻ってきますか？おそらくそうではありません。実際、昨年初めてこのReact Libraryを共有しましたが、約2年間存在していました。
ライブラリには多數(shù)の異なるコンポーネントが含まれており、そのすべてが「新しいシミュレーション」外観を?qū)g現(xiàn)します。興味深いことに、おそらく多くのプロジェクトには適していません。
47。美しいCSSボタン
ほぼすべてのアプリまたはウェブサイトにはボタンが必要なため、このようなコレクションは常に人気があります。これらのボタンの多くは、他の場(chǎng)所で見(jiàn)るものとは異なります。
多くのボタンには興味深いホバーエフェクトが含まれており、ページ上の1つのボタンのHTMLとCSSを簡(jiǎn)単にコピーして貼り付けることができます。
46。シェイパー
このインタラクティブツールを使用すると、ページ上のさまざまなUI設(shè)定をリアルタイムで調(diào)整して、さまざまなページ要素を構(gòu)築できます。コンテンツを好みに合わせて調(diào)整したら、CSSカスタムプロパティを使用するコードを取得できます。
デモビューと「仕様」ビュー（コードやその他の便利な情報(bào)）を切り替えることができます。このツールは、タイポグラフィと殘りのUIスタイルに焦點(diǎn)を當(dāng)てています。これは、レイアウトを正しく見(jiàn)せるための重要な部分です。
45。プレステージ
これは、ブラウザのテキストベースのHTTPクライアントです。これは、郵便配達(dá)員のようなものですが、インターフェイスはありません。これにより、要求をプレーンテキストで定義することができます。これは、GISTとして保存することを選択できます。孤立したCookie管理が含まれており、明るいモードと暗いモードの両方があります。
著者が説明しているように、「私は作業(yè)するときにこのようなアプリケーションが必要だからです。
44。html.cafe
これはおそらくリスト全體で最も簡(jiǎn)単なツールです。 html.cafeは多かれ少なかれ謙虛なコードペンであり、より良い用語(yǔ)がありません。人々がこの種のことに興味を持っているとは思わない。それにもかかわらず、それはリアルタイムプレビュー機(jī)能を備えた非常にシンプルなHTMLエディターです。
Codepenのような個(gè)別のCSSやJavaScriptウィンドウはありませんが、簡(jiǎn)単に実行できます