クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

styled-components

【React】ジャンプ率ジェネレーターをNext.jsで作り直した(Next.js + TypeScript + CSS in JS)

ジャンプ率ジェネレーターの続きです。以前、React環境でいったん完成しましたが、この時実現できなかったページごとのOGP設定を実現すべく、前回作成したNextスターターキットで再度作り直しました。これによってReact環境とNext環境ではCSS in JS(Styled-c…

【React】Nextスターターキットを作った-2. コンポーネント編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はNextスターターキットの全体設定編でした。今回はコンポーネントやモジュールの設定をまとめていきます。Reactアプリ作成でよく使う基本的な機能を組み入れました。それではいきましょう!

【React】Nextスターターキットを作った-1. 全体設定編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はCreate Next App + TypeScript + CSS in JS環境を作りました。今回は以前作ったReactスターターキットをNext.jsで作り直し、挫折していたOGP問題を解決しました!今回は全体にわたる環境設定編です。それではいきましょう!

【React】Create Next App + TypeScript + CSS in JS環境を作る

Next.jsの続きです。前回はNext.jsのリンク設定(Link)、共通コンポーネント化、headタグ設定(Head)を行いました。今回はNext.jsが用意しているパッケージCreate Next Appを使ってみます。さらにTypeScriptとCSS in JS(styled-components)もインストール…

【React】OtherページをAboutページに変更、ルーティング変更(Reactスターターキット)

Reactの続きです。前回はstyled-componentsにフックの値を設定し、動的にスタイルを変更しました。ジャンプ率ジェネレーターが完成しました!この時、otherページをaboutページに作り替えたのですが、aboutページについては今後も使いそうなので、Reactスタ…

【React】styled-componentsにフックの値を設定し、動的にスタイルを変更(ジャンプ率ジェネレーター完成!)

Reactジャンプ率ジェネレーターの続きです。前回は独自フックで関数を抽出し、全てのツマミが動いくようになりました。今回はこのツマミの値をstyled-componentsに埋め込んで、動的にCSSスタイルを変更させたく。それではいきましょう!

【React】styled-componentsのcss helperでスタイルを継承(Reactとメタ言語の比較-5)

Reactの続きです。前回はstyled-componentsのcreateGlobalStyleでbodyタグにCSS設定をしました。今回はcss helperでスタイルを継承します。前回一回リセットされたCSSスタイルは今回復活できました♪Sass(SCSS)との比較も行います。それではいきましょう!

【React】styled-componentsのcreateGlobalStyleでbodyタグにCSS設定(Reactとメタ言語の比較-4)

Reactの続きです。前回はJSONデータをJSXに読み込んで表示しました。今回からはCSS編に入っていきます!メタ言語スターターキットのSass(SCSS)の設定をCSS in JSに組み込んでいきます。今回はstyled-componentsのcreateGlobalStyleでbodyタグにCSSを設定しま…

【React】styled-componentsでCSS in JSを事始める

Reactの続きです。前回はCSS ModulesでCSSとSass(SCSS)のローカルスコープを作りました。今回はstyled-componentsでCSS in JSを事始めてみます。CSS Modulesと同様にランダムな文字列がclass名が振られる形ですが、CSSファイル読み込みではなくJSファイル内…

ReactのCSS設定方法について調べたこと(className属性、style属性、CSS Modules、CSS in JS、CSSフレームワーク)

Reactの続きです。前回はReduxの状態管理を行いました。今回からは、ReactでのCSS設定をいくつか試してみたく思います。初回はCSS設定方法について調べたことをまとめます。className属性、style属性、CSS Modules、CSS in JS、CSSフレームワークを比較しま…