Setting up Styled Components in Next.js
In this article, I want to show you how to set up Styled Components in Next.js. Unlike the case in React, we cannot use Styled Components in Next.js by just installing it. Installing Styled Components […]
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のためのプロミスベースの […]
