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 […]
社会人の英語勉強法
自己紹介 以前、 「Versant初めての受験の事前準備と直前対策」という記事を上げたところ反響がありましたので今回は英語の勉強法一般について纏めました。 私の英語スペックは次の通りです。 試験名 点数 受験時期 点数のTOEIC L&R換算 TOEIC L&R 925点 10年前 925点 TOEFL 84点 4年前 770点 Versant 63点 […]
Python及びWebエンジニアのためのVS Code拡張機能10選
2021年1月17日 Update（Pythonを追加） VSCodeの人気-ランキング 今日は私が日頃使っているVSCodeの拡張機能をご紹介したいと思いますが、その前に最近の開発環境（エディター）の動向について確認したいと思います。下記横棒グラフは、Stack Over Flowの2019年調査から引用した開発環境の人気ランキングです（Top10のみを抜粋）。2019年は約87,000人のディ […]