クモのようにコツコツと

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

CSS in JS

【React】アスペクト比ジェネレーターを作った(画像の縦横比率を計算するツール)

Reactアプリの続きです。前回までは「ジャンプ率ジェネレーター」をNext.jsで作り直していました。今回は「アスペクト比ジェネレーター」に取り組みます。以前こちらでまとめた主要なアスペクト比による画像サイズのCSS数値を調べられるツールにります。それ…

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

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

【React】Aboutページ作成、input(type="range")タグ配置(ジャンプ率ジェネレーター)

Reactジャンプ率ジェネレーターの続きです。前回は環境構築編でした。今回からは具体的な内容に入っていきます。まずotherページをaboutページに変更し、メインページにinputタグ(type = range)を配置しました。それではいきましょう!

【React】文字ジャンプ率ジェネレーターを作るシリーズ始動!(環境構築編)

Reactの続きです。前回はReact + TypeScript + CSS in JS環境のスターターキットを作りました。今回からこれを元にアプリ作りに入っていきます。最初に作りたいのは文字ジャンプ率ジェネレーター!今回は初回ということで、既存のGitHubリポジトリをクローン…

【React】React + TypeScript + CSS in JSスターターキットを作る(アプリ作る人に俺はなる!)

Reactの続きです。前回まで、メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現してきました。今回はこれをリファクタリングして、今後ReactでWebアプリを作るためのスターターキットを作りたい…

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

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

【React】React + TypeScript + CSS in JSの開発環境を作る(Gitエラー対処も)

Reactの続きです。前回はReact + TypeScriptの開発環境を作りました。今回はここにさらにCSS in JSも追加してみます。TypeScript環境でCSS in JSを動かすには「@typesパッケージ」が必要なこともわかりました。また、Git設定でいろいろなエラーに遭遇したの…

【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フレームワークを比較しま…