React

Tailwind CSSの設定と実装方法 – v3.0準拠

Tailwind CSSはCSSを効率よく書くためのライブラリーで、とくにモバイルとPCのレスポンシブなデザインを作るときに威力を発揮します。2021年12月にリリースされたv3.0からは使い勝手も大きく向上しました。カラーパレット、ボックスシャドーなどの所定のテーマも備えつつ、大きさであればピクセル指定、色であればRGB又はHex指定で完全なカスタムも可能です。よってbootstrapのようなC […]

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

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

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などがStyled Components採 […]

Reactで複数のページを作る方法 – Router v6.0準拠

Reactは、SPA（Single Page Application）に最適化されていますが、Reactでも “React Router”ライブラリーを使うことで、下記のようなApp.jsの内部に複数のページ（path）を持つWebサイトを作ることができます。Routerは2021年の10月頃にver 6.0.0の正式版がリリースされ、それ以前のver 5とは大きく変わりま […]

React + Firebaseを使ったユーザー認証の実装方法

React又はNext.jsでFirebaseを使ったユーザー認証（Authentication）をするためには、認証の後に、UseEffectとonAuthStateChangedを使ってサインアップ（及びログイン）状態を管理する方法が考えられますが、コードはやや複雑になります。Firebaseとreact-firebase-hooksというカスタムフックを使うことで、ユーザーの状態管理をずっと […]

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

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

React入門 関数コンポーネントとは

今日はReactの関数コンポーネントについて解説いたします。初めてReactに触れる方でも読んで頂けるように、最低限のコードを引用しつつも概念的な話をメインにしております。 Reactはコンポーネントベース Reactの最大の特徴は、WebサイトあるいはWebアプリをコンポート（部品）に分けて作成できる点です。例えば下記の図のように、各コンポート1.2.3をそれぞれ別のJSファイルで作成した上、中 […]

ReactでWebサイト又はWebアプリを作成する方法（初動）

今日はJavaScriptのライブラリーとして人気の高いReactで、Webサイト・Webアプリを立ち上げるための初動について解説したいと思います。localhostにHello Worldと表示させることが目的です。 Reactのロードマップ 具体的な手順に入る前に、Reactの入門から中級辺りまでのロードマップをお示ししたいと思います。今日こちらの記事でご紹介するのは1のステップです。 npx […]

FirebaseでWebアプリをデプロイする方法

今日はGoogleが開発・運営するFirebase上で、Hostingという機能を使って、ReactのWebアプリ又はWebサイトをデプロイする方法をご紹介します。FirebaseはGoogle Cloud Platform（GCP）上で動く多機能なWebサーバ（大部分が無料）で、他にもリアルタイムデータベース（Could Firestore）、認証機能（Firebase Authenticati […]