[技術選定]CSSフレームワーク

[aiueo49]

• [x] フレームワークの洗い出し
• [x] 各フレームワークのメリットを調べる
• [x] このアプリに向いてるフレームワークはどれか選定
• [x] フレームワークと選んだ理由を書く

[aiueo49]

参考サイト

CSSフレームワークのススメ - BULMAの導入と覚え書き CSS 2023

[aiueo49]

Tailwindが流行っている

[aiueo49]

ChakraはReactとの相性が良いらしい TailwindCSS と比べつつ Chakra UI に入門する

[aiueo49]

ReactにおけるCSSの利用はどうしたら？自分なりに結論出してみた

[aiueo49]

Reactにおけるスタイリング手法まとめ

[aiueo49]

TailwindCSSって何？なんで流行ってるの？

[aiueo49]

コンポーネント指向

[aiueo49]

なぜコンポーネントなのか? 最新のユーザー インターフェイスはかつてないほど複雑になっています。人々は、さまざまなデバイスにわたって提供される、魅力的でパーソナライズされたエクスペリエンスを期待しています。つまり、フロントエンドの開発者とデザイナーは、より多くのロジックを UI に埋め込む必要があります。 しかし、アプリケーションが成長するにつれて、UI は扱いにくくなります。大きな UI は脆く、デバッグに手間がかかり、出荷にも時間がかかります。これらをモジュール形式で分割すると、堅牢でありながら柔軟な UI を簡単に構築できるようになります。 コンポーネントは、アプリケーションのビジネス ロジックから状態を分離することで互換性を実現します。こうすることで、複雑な画面を単純なコンポーネントに分解できます。各コンポーネントには、明確に定義された API とモック化された固定の一連の状態があります。これにより、コンポーネントを分解して再構成して、さまざまな UI を構築できます。

[aiueo49]

コンポーネントとは何ですか? コンポーネントは、標準化された交換可能な UI の構成要素です。これらは UI 部分の外観と機能をカプセル化します。レゴブロックを思い浮かべてください。レゴは城から宇宙船まであらゆるものを作るために使用できます。コンポーネントを分解して、新しい機能を作成するために使用できます。

[aiueo49]

コンポーネント駆動ではない UI はどれですか? ページベース: Web サイトをページのコレクションとして扱う開発および設計プロセス。ページ間で共通の要素を再利用するための努力はあまり行われていません。 ページ用に設計されたツール: Wordpress や Drupal など、ドキュメントの表示に重点を置いたツール。Rails、Django、PHP などのバックエンド フレームワークは、UI の再利用を後付けとして扱い、コンポーネントの広範な再利用を妨げます。

だからバックエンド　＋　フロントエンド　みたいなハイブリットの技術選定をするのか〜

[aiueo49]

https://daisyui.com/

https://ui.shadcn.com/

[aiueo49]

コンポーネント思考は、ソフトウェア開発の進化とともに複数の要因から生まれました。以下に、コンポーネント思考が生まれる要因をいくつか挙げてみます：

1. オブジェクト指向プログラミング（OOP）： ソフトウェア開発の中でオブジェクト指向プログラミングが広く採用され、クラスやオブジェクトの概念が生まれました。これにより、機能やデータを独立した単位に分割しやすくなり、再利用性やメンテナビリティが向上しました。

2. モジュラーなアーキテクチャ： ソフトウェアのアーキテクチャがモノリシックからモジュラーな形態へと変わりました。モジュラーなアーキテクチャでは、機能やコードがモジュールと呼ばれる小さな単位に分割され、それぞれが独立して開発・テスト・メンテナンスされます。

3. コンポーネント志向のライブラリやフレームワークの登場： 特にウェブ開発において、コンポーネント志向のフレームワークやライブラリが登場しました。例えば、ReactやVue.jsなどが挙げられます。これらのツールは、UIを小さなコンポーネントに分割し、それを組み合わせてアプリケーションを構築する手法を奨励しました。

4. デザインの進化： デザインの分野でも、モジュール化やコンポーネント指向の考え方が広まりました。デザイナーがUIを小さな再利用可能な部品に分割し、それを組み合わせてデザインする手法が一般的になりました。

5. 柔軟性と効率性の追求： ソフトウェア開発者やデザイナーが、柔軟で効率的に開発・デザインできる手法を求めるようになりました。コンポーネント思考は、これらの要求に応える手段として注目されました。

これらの要因が組み合わさり、コンポーネント思考が生まれ、ソフトウェア開発やデザインの領域で広く受け入れられるようになりました。

[aiueo49]

もちろんです！コンポーネント思考が生まれた背景を中学生向けにシンプルに説明しますね。

昔は、大きなおもちゃを作るとき、全部を一緒くたに作っていました。でも、それがどんどん大変になってきたんです。

そこで、おもちゃの部品ごとに分けて考えるようになりました。例えば、おもちゃのロボットなら、頭、腕、足を別々に作って、最後に組み立てる感じです。

それと同じで、ウェブページやアプリも大きすぎて一度に全部作るのは難しい。だから、小さな部品に分けて考えようってのがコンポーネント思考なの。

1. 小さな部品： おもちゃのロボットが頭、腕、足に分かれるように、ウェブページやアプリも小さな「コンポーネント」と呼ばれる部品に分けて考えます。

2. 使いまわしやすい： 同じおもちゃのロボットの足を、別のおもちゃにも使いたい場合、コンポーネントなら同じボタンや画像を他の場所でも簡単に使いまわせるの。

3. 独立して考える： おもちゃのロボットの頭が変わっても、他の部分には影響がないよね？コンポーネントも同じで、一つの部分を変えても他の部分には影響を与えないように独立して考えるんだ。

4. 組み合わせて作る： おもちゃのロボットの部品を組み合わせて完成させるように、コンポーネントも組み合わせてウェブページやアプリを作るの。必要なところで使って、簡単に組み立てることができるんだよ。

だから、コンポーネント思考は大きなものを小さな部品に分けて考え、使いやすく、変更しやすい方法なんだよ。

[aiueo49]

「daisyui」は、Tailwind CSSフレームワーク向けのUIコンポーネントを提供するライブラリです。Tailwind CSSは、HTMLやCSSクラスを使用してデザインを行うことができる高度に柔軟で軽量なCSSフレームワークであり、daisyuiはこれに対してさまざまなUIコンポーネントを提供しています。

以下は、daisyuiの特徴や機能のいくつかです：

1. Tailwind CSSとの統合： daisyuiはTailwind CSSに統合されており、Tailwindのクラス構文や哲学とシームレスに連携しています。

2. UIコンポーネントの提供： daisyuiは、ボタンやフォーム要素、アラートなど、一般的なUIコンポーネントを提供しています。これにより、開発者はこれらのコンポーネントを利用して迅速かつ一貫性のあるUIを構築することができます。

3. デザインの柔軟性： Tailwind CSSと組み合わせることで、デザインの柔軟性が向上します。daisyuiは、これらのデザインのカスタマイズを容易にするためのユーティリティや設定も提供しています。

4. コミュニティサポート： daisyuiは、Tailwind CSSコミュニティによってサポートされており、GitHub上での活発な開発やコミュニケーションが行われています。

daisyuiを使用することで、Tailwind CSSの強力な機能を活かしながら、より効率的にモダンなUIを構築することができます。プロジェクトに組み込む前に、公式ドキュメントを確認して機能や使用法を理解することが重要です。

[aiueo49]

それぞれのCSSフレームワークには異なる特徴があり、選択にはプロジェクトの要件や開発者の好みも影響します。以下に代表的なCSSフレームワークであるBootstrap、Bulma、Tailwind CSSのメリットとデメリットを列挙します。その後、Discordbotを使って学習時間を記録し、Railsを使用したWebアプリケーションに適したCSSフレームワークを選定します。

Bootstrap:

メリット:

• 豊富なドキュメントとサンプルがあり、初心者でも使いやすい。
• 多くの機能やコンポーネントが含まれており、迅速にプロトタイプを構築できる。
• コミュニティが大きく、問題が発生した際にサポートを受けやすい。

デメリット:

• デフォルトのデザインが他のサイトでよく見られるため、個性化が難しいことがある。
• カスタマイズが少し難しいことがある。

Bulma:

メリット:

• シンプルで直感的なデザインが特徴で、カスタマイズが容易。
• モダンで軽量なCSSフレームワークであり、フレキシブルに利用できる。

デメリット:

• コンポーネントの種類が他のフレームワークに比べて少ない。
• ドキュメントの充実度が他のフレームワークに比べてやや劣る。

Tailwind CSS:

メリット:

• クラスベースのスタイリングであり、高い柔軟性とカスタマイズ性がある。
• コンポーネント指向のスタイリングが可能で、デザインの一貫性を保ちやすい。
• ドキュメントが充実しており、コミュニティが活発。

デメリット:

• クラスが多く、初学者には最初は覚えるのが難しいことがある。
• フレームワークのファイルサイズが他のフレームワークに比べて大きいことがある。

選定と理由:

Discordbotを使用して入退室時間の差から滞在時間を学習時間として記録し、Web上に表示するアプリケーションを開発する場合、以下の理由からTailwind CSSが適していると考えます。

1. 柔軟性とカスタマイズ性: Tailwind CSSはクラスベースのスタイリングを採用しており、柔軟性が高く、アプリケーションに特有のデザインを簡単に適用できます。

2. コンポーネント指向: 学習時間を記録するための様々な部品やコンポーネントを効果的に構築できます。コンポーネント指向のアプローチは、一貫性を保ちやすく、変更がしやすいです。

3. コミュニティとドキュメントの充実: Tailwind CSSには活発なコミュニティと豊富なドキュメントがあり、問題が発生した際に効果的なサポートを受けることができます。

このような理由から、Railsを使用したWebアプリケーションにおいて、Tailwind CSSが開発の効率性や柔軟性を提供できると考えられます。

[aiueo49]

Chakra UIとTailwind CSSはそれぞれ異なるアプローチを持つツールであり、選択はプロジェクトの要件や開発者の好みに依存します。今回のDiscordbotを使用して学習時間を記録し、Railsを使用したWebアプリケーションを開発する場合に考慮すべき点を挙げてみましょう。

Chakra UI:

使いどころ:

• Reactを使用しているプロジェクトにおいて、Reactコンポーネント指向のアプローチが好まれる場合。
• カスタマイズ可能なテーマ機能を使用して、デザインを一元管理したい場合。
• エレガントなReactコンポーネントがプロジェクトに適している場合。

考慮すべき点:

• 学習コストが少し高いため、既存のReact開発者やChakra UIの経験者に適しています。
• プロジェクトにおいてChakra UIの提供するテーマやコンポーネントが適しているかを検討する必要があります。

Tailwind CSS:

使いどころ:

• スタイリングにおいてクラスベースのアプローチが好まれ、柔軟なカスタマイズが必要な場合。
• ドキュメントやコミュニティのサポートが豊富であり、学習コストを抑えながら柔軟なデザインが必要な場合。

考慮すべき点:

• テーマ機能が直接提供されていないため、デザイン一元管理がChakra UIよりも手動で行われる。
• クラスベースのスタイリングに慣れていない開発者にとっては初めは馴染みにくいことがあります。

選定と理由:

• Chakra UIを選ぶ理由: もしReactベースのプロジェクトで、コンポーネント指向のアプローチやテーマ機能がプロジェクトに適していると感じるなら、Chakra UIが適しています。また、学習コストを考慮しても、Reactの経験者やChakra UIの使用経験がある場合にも適しています。

• Tailwind CSSを選ぶ理由: もし柔軟でカスタマイズ性が高く、学習コストを抑えつつ迅速にデザインを構築したい場合、または既にTailwind CSSを使用経験がある場合には、Tailwind CSSが適しています。

最終的な選択はプロジェクトのニーズと開発者の経験によるものであり、どちらも優れたツールであるため、プロジェクトに最も適したものを選択すると良いでしょう。

[aiueo49]

Chakra UI

chakra.tsx <Button size='md' height='48px' width='200px' border='2px' borderColor='green.500'

Button

メリット CSSを記述しなくても良い よく利用されるパターン(モーダル, ボタン, メニュ等)などあらかじめ用意されているので、便利 スタイルもシンプル デメリット 書き方が独特で学習コストが高い 細かいカスタマイズができない ありきたりのデザインとなる

引用元

[aiueo49]

【React】daisyUIを触ってみた！かなり楽しいw

[aiueo49]

Tailwind CSSを採用する理由は、Discordbotを使用して入退室時間の差から滞在時間を学習時間として記録し、Web上に表示するアプリケーションを開発する際に以下の点が考慮されます。

1. 柔軟性とカスタマイズ性:

   • Tailwind CSSはクラスベースのスタイリングを提供し、シンプルなクラスを使用して柔軟でカスタマイズ可能なデザインを実現できます。滞在時間の表示や他のUI要素を簡単にスタイリングできるため、デザインの変更や適応がスムーズに行えます。

2. 効率的な開発:

   • Tailwind CSSは簡潔で直感的なクラス名を使用することで、開発者は素早くスタイリングを記述できます。これにより、迅速にUIを構築し、アプリケーションの開発を効率的に進めることができます。

3. コンポーネント指向のスタイリング:

   • Tailwind CSSはコンポーネント指向のスタイリングが可能で、個々のUI要素を独立してデザインできます。これは、異なる部分で同じスタイルを共有したり、コンポーネントを再利用したりする際に便利です。

4. 学習コストの低さ:

   • Tailwind CSSはクラス名を用いてスタイリングを行うため、他のCSSフレームワークよりも学習コストが低いとされています。簡潔なドキュメントが提供されており、すぐに始めることができます。

5. 一貫性の保持:

   • Tailwind CSSは一貫性を保つためのデザインシステムを簡単に構築できます。アプリケーション内で統一感のあるデザインを維持しやすく、ユーザーエクスペリエンスの向上に寄与します。

6. Tailwind CSSの人気とサポート:

   • Tailwind CSSは広く採用され、活発なコミュニティと豊富なドキュメントが存在します。問題が発生した場合や新しい機能を導入する際に、サポートを受けやすい環境が整っています。

これらの理由から、Discordbotを使用して学習時間を記録し、Railsを使用したWebアプリケーションにおいてTailwind CSSが適していると言えます。 Tailwind CSSは効率的で柔軟なスタイリングを提供し、開発プロセスをスムーズに進めるのに寄与します。

[aiueo49]

これじゃないとできない！というわけではないが、Tailwindを採用する。

理由はカスタマイズ性の高さ、流行、daisyuiを使ってみたいという個人的な興味

[aiueo49]

chakraも捨てがたい(Reactとの相性がそんなに良いのか確かめたい)けど、カスタマイズ性、流行りという面でTailwindが優った。