Tailwind CSSの設定と実装方法 – JITも解説

↓応援クリックよろしくお願いします↓ Tailwind CSSはCSSを非常に効率よく書くためのライブラリーで、とくにモバイルとPCのレスポンシブなデザインを作るときに威力を発揮します。カラーパレット、ボックスシャドーなどの所定のテーマも備えますが、Tailwind JITを使えば完全なカスタムも可能なので、bootstrapのようなCSSを書かないライブラリーとはアプローチが根本的に異なります。 […]

Flexboxでヘッダーを実装する方法

↓応援クリックよろしくお願いします↓ 本稿ではCSSのflexboxを使って、Webサイトのヘッダーを構成する方法を4通りご紹介します。多くのヘッダーは左右にアイテムを配置した構成をしており、本稿でもヘッダーの各メニューを中央に寄せるのではなく、左右に並べる方法をご紹介します。 margin-left: auto 親要素にdisplay:flexを適用すると、デフォルト設定では子要素は行方向(fl […]

Next.jsの特徴 – Reactとの比較

↓応援クリックよろしくお願いします↓ Next.jsとはVercel社が作ったReactのフレームワークです。単体のReactより機能が拡張されています。Reactの特徴は全て引き継がれ、コードの書き方もReactそのものですので、Reactユーザーであれば難なく使うことができます。本稿ではNext.jsの概要について書きたいと思います。 Next.jsの特徴 ReactにはないNext.jsの代 […]

React + Firestore【入門から実装まで】

↓応援クリックよろしくお願いします↓ 本稿ではfirestoreの概要、NoSQLデータベースの構造、firestoreの初期設定、Reactの初期設定、書き込み、react-firebase-hooks(useCollection、useDocument)を使った読み込み方法(実装方法)まで丁寧に解説しています。 Firestoreとは Firestoreとはfirebase(Google Cl […]

ReactでMaterial-UI Iconを使う【入門編】

↓応援クリックよろしくお願いします↓ 本稿では、Material-UI アイコンの使い方をご紹介します。Material-UIはReactのライブラリーでは、アイコンから、ボックス、メニューなどの様々なコンポーネントを揃えています。Material-UI Iconは細かな調整が効き、記述の仕方もReactのコンポーネントそのものなので、Reactのユーザーにとっては非常に使いやすいライブラリーです […]

React – Styled Componentsの使い方【CSS-in-JS】

↓応援クリックよろしくお願いします↓ Styled Componentsは、Reactのコンポーネントの内部でCSSを記述する方法(ライブラリー)です。JavaScriptでCSSを書きます(CSS-in-JS)。Reactのコンポーネント設計ととても相性がいいので採用する企業も多く、公式ホームページによれば、Google、GitHub、Spotify、tinder、airbnb、redditなど […]

Reactで複数のページを作る方法

↓応援クリックよろしくお願いします↓ Reactは、SPA(Single Page Application)に最適化されていますが、Reactでも “React Router”ライブラリーを使うことで、下記のようなApp.jsの内部に複数のページ(path)を持つWebサイトを作ることができます。 react-router-domのインストール npmコマンドを使ってrea […]

Reactでのユーザー認証【react-firebase-hooksで実装】

↓応援クリックよろしくお願いします↓ ReactでFirebaseを使ったユーザー認証(Authetication)をするためには、UseEffectとonAuthStateChangedを使ってサインイン(ログイン)機能を実装し、Reduxを使いユーザーのログイン状況(State)を管理する方法が一般的ですが、コードは非常に長く複雑になります。react-firebase-hooksというカスタ […]

Reactでのaxiosの使い方【外部APIの取得方法】

↓応援クリックよろしくお願いします↓ 本稿ではaxiosというフロントエンドとAPI間の通信ライブラリーについてご紹介したいと思います。AxiosはReactのクラスコンポーネントでも動くのですが、この記事では、Reactの関数コンポーネント内でaxiosを使用する方法をご紹介しています。 さてaxiosですが、githubのaxiosのページでは、ブラウザとnode.jsのためのプロミスベースの […]