初めての JavaScript ライブラリを作成する過程は変革的なものであり、私の成長を助けてくれました。どうやってここに来たの？最初から始めましょう。

UnifyUI Blocks と Flexiwind Blocks のベータ版を完了した後、友人と私は、ドロップダウン、折りたたみ、タブなどのインタラクティブなコンポーネントを追加するという課題に直面しました。

UnifyUI と Flexiwind は異なるため、1 つは UnoCSS で動作し、もう 1 つは TailwindCSS で動作するため、最初はそれぞれに別個のスクリプトを作成しました。しかし、これは理想的とは言えない解決策であることがすぐに明らかになりました。

TailwindCSS 用に調整された専用の JavaScript プラグインとの対話を Preline がどのように処理するかを研究した結果、CSS フレームワークに依存しないソリューションの必要性がわかりました。

CSS フレームワークに依存しない理由

CSS フレームワークに依存しないライブラリの作成は、私たちにとって不可欠でした。なぜなら、Flexilla が あらゆる CSS フレームワーク または 純粋な CSS とシームレスに動作することを望んでいたからです。 UnoCSS、TailwindCSS、さらには Bootstrap を使用する開発者を含む多くの開発者は、制限なくコンポーネントを拡張できる柔軟性を備えている必要があります。

Flexilla を特定のフレームワークから独立させることで、さまざまなタイプのプロジェクトで機能する多用途ツールを提供できます。また、これは、柔軟性が重要である UnifyUI および Flexiwind ブロックで既に行った作業とも一致しています。

解決

Preline および Flowbite プラグインに触発されて、完全にオープンソースの Flexilla を作成することにしました。

Flexilla は、特定の CSS フレームワークに依存せずに、インタラクションを独立して管理するように設計されたスタンドアロン ライブラリです。 TailwindCSS、UnoCSS、またはその他の CSS テクノロジーとスムーズに統合できる柔軟性を提供します。

私たちの目標は、特定の CSS 環境に制限されない方法でコンポーネントを強化することでした。

課題

最初はどこから始めればよいのか分かりませんでした。 Preline をクローンして適応させるべきでしょうか?いいえ、それは私にとって役に立たなかったでしょう。私の目標はこのプロジェクトを通じて学ぶだったからです。

コード構成

最初、私のコードはめちゃくちゃで、読みにくく、理解するのが困難でした。

「パッケージ」フォルダーがありましたが、それは大惨事でした。このため、特定のパッケージを個別に公開することが困難になったので、解決策が必要でした。

解決

Lerna に関する記事を見つけたので、すぐに興味を引きました。数日間ドキュメントを読み、コードを再構築した後、私は誇りに思う組織を手に入れることができました。 Lerna のおかげで、更新を効率化し、モノ リポジトリで複数のパッケージを管理し、それらを個別に公開することができました。

ポッパーJS?

はい、次のジレンマに直面しました: PopperJS を使用すべきか否か?

それは大きな挑戦でしたが、その話は今後の記事に取っておきます。

バージョン管理

これは大きな障害でした。最初にライブラリとそのすべてのパッケージをバージョン 1.0.0 で公開しましたが、公開後にいくつかのパッケージに問題があることに気付きました。したがって、修正が行われるたびに、新しいバージョンのライブラリとそのパッケージを公開します。悪い考えだ！結局、友人が SEMVER に関する記事を読んでみてはどうかと勧めてくれました。すると、突然、バージョニングが意味をなすようになりました。ただし、私は少し遅れましたが、

このようにして、バージョン 2.x.x のライブラリを使用することになりました。その時点から、私はそれらの間違いを犯すのをやめました。 Lerna を使用すると、更新されていないパッケージのバージョンを変更することを心配する必要がなくなります。レルナがそれをやってくれます。

特徴

1. CSS フレームワークに依存しない

Flexilla は特定の CSS フレームワークに依存しないため、TailwindCSS、UnoCSS、さらには プレーン CSS と互換性があります。この柔軟性により、使用している CSS フレームワークに関係なく、プロジェクトに統合できます。

2. モジュラーコンポーネント

Flexilla は、ドロップダウン、タブ、折りたたみなどの モジュラー コンポーネントを提供します。これらのコンポーネントは軽量で、必要に応じて簡単に組み込めるように構築されているため、使用するものだけを追加すれば、パフォーマンスとバンドル サイズの向上に役立ちます。

3. シンプルな API

このライブラリには、最小限の構成を必要とする使いやすい APIが備わっています。以下は、ドロップダウン コンポーネントを設定する方法の簡単な例です:

   import { Dropdown } from '@flexilla/flexilla';
   Dropdown.init("#myDropdown");

この例は、わずか数行のコードでドロップダウンを素早く初期化し、あらゆるレベルの開発者にとってアクセスしやすいものにする方法を示しています。

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

ヘッドレス UI ライブラリからインスピレーションを得た Flexilla を使用すると、スタイルを完全に制御できるため、事前定義されたデザインやテーマに制限されません。これにより、カスタム スタイルのプロジェクトに簡単に統合でき、既存のスタイルと競合することがなくなります。

5. カスタマイズ可能なイベント

Flexilla コンポーネントには カスタマイズ可能なイベントが付属しています。たとえば、ユーザーのアクションに応答するアクションを追加したり、ドロップダウンを開いたときやタブの変更時など、特定の操作の動作をカスタマイズしたりできます。

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

const myAccordionEl = document.querySelector("#myAccordion")
const myAccordion = Accordion.init(myAccordionEl)
myAccordionEl.addEventListener("change-item",()=>{
   console.log("Accordion item changed")
})

図書館はいつ、どこで利用できますか?

JavaScript フレームワークを使用したくないが、アクセシビリティを考慮したインタラクティブなコンポーネントが必要なプロジェクトに取り組んでいる場合は、Flexilla を使用します。 (推奨: AstroJS、PHP および PHP フレームワーク、静的 Web サイト)
VueJS ではうまく動作しますが、お勧めしません。 ReactJS では、試してもダメです!

フレキシラの次は何でしょうか?

フレキシラは進化し続けます。さらにコンポーネントを追加し、既存のコンポーネントを改善し、ドキュメントを改良する予定です。既存のコンポーネントに加えて、通知やトーストなどの他の一般的なコンポーネントも導入する予定です。これにより、Flexilla はより幅広いインタラクティブなニーズをサポートできるようになります。

結論

私のニーズによれば、Flexilla はプロジェクトでインタラクティブなコンポーネントを作成するための貴重なツールであることが証明されています。
最初は怖いかもしれません。私の作品は誰も評価しないのではないか、何の役にも立たないのではないかと心配していました。しかし、挑戦しないことが最大の間違いであると断言します。今では、このライブラリを作成したことに後悔はありません。コードの編成、バージョン管理、npm パッケージの管理など、多くのことを学ぶことができました。躊躇せずにソリューションを世界と共有し、肯定的か否定的かを問わずフィードバックを受け入れてください。それはあなたの成長に役立ちます!

アイデア、提案、コードの改善がある場合は、ためらわずにリポジトリをフォークしたり、プル リクエストを送信したり、問題をオープンしたりしてください。私たちは力を合わせてライブラリを強化し、あらゆる場所の開発者にとって価値のあるリソースを作成できます。

その点では、気をつけて、忘れずに Flexilla をチェックして、ご意見をお聞かせください。