クモのようにコツコツと

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

React

【React】React RouterでSPAのルーティング設定(下層ページの404対策も)

Reactの続きです。以前作成したReact + CSS in JS + TypeScript環境にReact Routerを使ってルーティング設定をして複数ページを遷移できるSPAにします。helmetを使ってコンテンツだけでなくheadタグも動的に変更。さらに下層ページに直接アクセスすると404に…

【React】フックとRealtime DatabaseをFetch APIで連携(React + Firebase環境)

Reactの続きです。前回はフック(React Hooks)とjson-serverをFetch APIで連携しました。今回はフックとRealtime DatabaseをFetch APIで連携します。Create React App環境にFirebaseをインストールしてクラウド上のRealtime Databaseのデータを読み込めるよう…

【React】フックとjson-serverをFetch APIで連携(Reactライフサイクルの理解)

Reactの続きです。前回はフック(React Hooks)を事始めました。基本のフックuseState、useEffect、useContextを体験しました。今回はこのフックにFetch APIを使ってjson-serverのデータベースを連携してみました。最初、処理実行のタイミングがうまくいかず、…

【React】フック(React Hooks)事始め:useState、useEffect、useContext

Reactの状態管理シリーズの続きです。以前はステート、コンテクスト、Reduxなどいろいろやって来ましたが、フック(React Hooks)はまだやっていませんでした。コンテクストはクラスコンポーネントでしか使えませんでしたがフックは関数コンポーネントでも使え…

【React】ピュアなTypeScriptモジュールを追加してみる(Reactとメタ言語の比較-6)

Reactの続きです。前回はstyled-componentsのcss helperでスタイルを継承し、CSS設定を完成させました。今回はTypeScript編。以前メタ言語スターターキットで作ったTypeScriptのモジュールをReact環境に追加してみます。処理の対象はReactの仮想DOMです。そ…

【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】JSONデータをJSXに読み込んで表示する(Reactとメタ言語の比較-3)

Reactの続きです。前回はreact-helmetでheadタグの中身を動的に打ち替えました。今回はHTMLのテキスト部分を外部JSONデータからJSXに読み込みます。インラインのタグを認識するためにdangerouslySetInnerHTMLを、JSX内でループするためにmap()を使いました。…

【React】react-helmetでheadタグの中身を動的に打ち替える(Reactとメタ言語の比較-2)

Reactの続きです。前回は以前作成したメタ言語スターターキットの内容を移植してHTML部分をコンポーネント化しました。今回はheadタグを動的に打ち替えたく、react-helmetを使ってみます。それではいきましょう!

【React】HTMLコンポーネント化(Reactとメタ言語の比較-1)

Reactの続きです。前回はReact + TypeScript + CSS in JSの開発環境を作りました。今回から以前作ったメタ言語スターターキットの内容をReact環境に移植してみます。まずはHTMLのコンポーネント化から。それではいきましょう!

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

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

【React】React + TypeScriptの開発環境を作る(デプロイまで)

Reactの続きです。前回までReactのいろいろなCSS環境を試しました。今回からはReactとTypeScriptの開発環境を作ります。Create React AppでのTypeScript導入方法があったのでトライ。GitHub Pagesのデプロイまでできました。それではいきましょう!

【React】UIフレームワークMaterial UIでマテリアルデザインを事始める

Reactの続きです。前回はstyled-componentsでCSS in JSを事始めました。今回はUIフレームワークMaterial UIを事始めたいと思います。その名の通りGoogleが提唱するマテリアルデザインのスタイルを簡単に設定できるツールです。それではいきましょう!

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

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

【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る

Reactの続きです。前回はReactのいろいろなCSS設定方法を調べました。今回はその中の一つCSS Modulesを体験してみます。Create React AppにCSSとSass(SCSS)を読み込んで、ローカルスコープを作ります。それではいきましょう!

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

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

【React】Reduxを事始める(インストール〜ストア、レデューサー、プロバイダー設定)

Reactの続きです。前回は「コンテクスト(Context)」を使ってコンポーネントに値を直接渡しました。今回はReactの拡張ツール「Redux」を使って値の状態管理を事始めてみます。それではいきましょう!

【React】コンテクスト(Context)でネストされたコンポーネントに値を渡す

Reactの続きです。前回はステートで条件分岐やループをやってみました。今回は、コンポーネントの階層(ネスト)を超えて共通の値を渡すのに便利な「コンテクスト(Context)」という機能を体験したく。それではいきましょう!

【React】ステートで制御構造(条件分岐、ループ)

Reactの続きです。前回はステートでsetState()、タイマー処理、イベント処理をやってみました。今回は三項演算子による条件分岐と、map()によるループをやってみます。それではいきましょう!

【React】Reactプロジェクトでステートを事始め(setState()、タイマー処理、イベント処理)

Reactの続きです。前回はReactプロジェクトでクラスコンポーネントを作成しました。今回はステートを事始ます。setState()による値の変更と、setInterbal()によるタイマー処理、onClick属性のイベント処理をやってみます。それではいきましょう!

【React】Reactプロジェクトでクラスコンポーネント作成、入れ子、ファイル分割まで

Reactの続きです。前回はReactプロジェクトのAppコンポーネントを打ち替えてみました。今回は複数のクラスコンポーネントを作って、入れ子関係にしたりファイル分割してエクスポート、インポートする構造を作ります。それではいきましょう!

【React】ReactプロジェクトのAppコンポーネントを書き換えてみる

Reactの続きです。前回はReactプロジェクトの作成と実行をしました。今回はファイルの中身を見てみて、ページに表示されているAppコンポーネント部分を書き換えてみます。それでは行きましょう!

【React】Create React Appのプロジェクトの作成と実行(エラー対処も)

Reactの続きです。前回はクラスコンポーネントの属性を設定して固有の値を設定しました。これまではCodePenで単一ページ内のコンテンツ作っていましたが、今回からはSPA(シングルページアプリケーション)を作るべく「Create React App」を使ってみます。そ…

【React】クラスコンポーネントで属性を設定する

Reactの続きです。前回はクラスを使ったコンポーネントを作りました。今回はこのクラスの中で属性やテキストを設定してみます。それによって汎用的な使い方ができるコンポーネントになります。それではいきましょう!

【React】クラスを使ったコンポーネントの書き方(React.Component、render()、super())

Reactの続きです。前回はコンポーネントでstyle属性や四則演算を設定しました。今回はクラスを使ってみます。Reactのコンポーネントでのクラスは、親クラスReact.Componentの継承、必須であるrender()メソッド、コンストラクタのsuper()、などの書き方があり…

【React】コンポーネントの属性値を読み込む(style、テキスト、四則演算)

Reactの続きです。前回はコンポーネントを事始めました。この時は一種類のテキストを読み込んで表示するのみでしたが、今回はstyle属性や四則演算の設定を追記して、コンポーネントのバリエーションを増やします。だんだんコンポーネントを使うメリットを感…

【React】コンポーネント事始め(一文字目は大文字!)

Reactの続きです。前回はイベント属性を使ってみました。今回からはコンポーネント編に入ります。いよいよJSフレームワークっぽい内容になってきましたね。それではいきましょう!

【React】イベント属性を使ってみた(onChangeとonClick)

Reactの続きです。前回はsetInterval()によるタイマー処理をやりました。今回はReactのイベント用の属性onChangeとonClickを使ってみます。それではいきましょう!

【React】JSXレンダリングとタイマー処理(setInterval())の関係を理解する

Reactの続きです。前回は色々なループの書き方をやってみました。今回は一つ前の投稿でも触れたタイマー処理を絡めて、JSXレンダリングとの関係を理解したく。それでは行きましょう!

【React】ループの書き方(for文エラー回避、配列、map())

Reactの続きです。前回は条件分岐のやってみました。今回はループ(繰り返し)です。条件分岐のif文と同様、JSXの中でfor文をそのまま書くとエラーになるので、その回避法とfor文以外の配列やmap()を使った書き方をやってみます。それでは行きましょう!