garammasala29 commented 2 weeks ago

Issue

~~でxxな機能を開発したい: new feature

何が問題なのか?/なぜ開発する必要があるのか (WHY)

~~でxxだから

具体的にどのようにIssueを解決していくのか

[ ] a
[ ] b
[ ] c

完了条件

c OR ~~

追加論点

導入後は #447

garammasala29 commented 1 day ago

UIフレームワークを使いたい候補

1人で開発なのでオーバースペックにならず、かつReact初心者で、できれば人気のあるフレームワーク希望といったところ日本語ドキュメントや参考記事が多いものを探す SEO観点でも検討、ひとまずbulmaをそのまま移行できるようなものだと嬉しい

garammasala29 commented 1 day ago

CSS-in-JSについてよくわかっていないので調べた

CSS-in-JSと単一ファイルコンポーネントは異なる概念ですが、共にフロントエンド開発でよく使われ、スタイルとロジックの統合を目指すものです。違いを具体的に見ていきましょう。

CSS-in-JS

定義: CSS-in-JSは、JavaScriptの中に直接CSSを記述する手法です。スタイルはJavaScriptコード内で定義され、JSの変数や関数を使って動的に変更することが可能です。

例: Styled ComponentsやEmotionが代表的なライブラリです。これらを使うと、Reactコンポーネントの中にスタイルを埋め込むことができます。

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
`;

const App = () => <Button primary>Primary Button</Button>;

特徴:スタイルとロジックが同じファイル内で管理できる。 JSのロジックを活用して動的スタイルを簡単に実装可能。スタイルがコンポーネントスコープ内に閉じられるため、スタイルの衝突を防げる。

単一ファイルコンポーネント (SFC: Single File Component)

定義: 単一ファイルコンポーネントは、Vue.jsなどでよく使われる形式で、1つのファイルにHTMLテンプレート、JavaScriptロジック、CSSスタイルを統合して記述できるコンポーネント形式です。1つのファイルでコンポーネント全体を完結させることができます。

例: Vue.jsの

atsushimemet / vook_web_v3

機能開発: React導入 #540