VercelにNext.jsアプリをデプロイする方法
Vercelは2015年にリリースされたNext.js及びReactに最適化されたホスティングサービスです。バックエンドとSSRを備えるNext.jsで作ったアプリをデプロイしようとすると、Herokuやfirebaseでは特別な設定を要し、正常に動かすのはやや手間です。場合によっては、まっさらなLinuxサーバを借りて設定をした方が早いかもしれません（なお、問題なく動きます）。VercelはNe […]
How to create a new repository on the GitHub
Create a new repo page on the GitHub Create a new GitHub repository by pressing the “New” button at the top right corner inside the “Repositories” tab. You can also jump to the […]
Recoilの仕組みと使い方
RecoilはReactのグローバルの状態管理ライブラリーで、Reduxとの比較では簡単で使いやすのが特徴です。FaceBook（Meta）が2020年に発表し、2022年1月にはRecoil 0.6がリリースされました。筆者同様2018年-2020年頃にReactを始めた方は、UseStateでは足りない場合はReduxを避けて通れなかった訳ですが、2022年以降にReactを学び始めた方は、関 […]
Windowsでのpython仮想環境：pyenv+venvの構築手順
Windowsにpythonの仮想環境を構築しようとするとき、WSLを導入すれば選択肢は広がりますが、WSLをなんらかの事情により導入できない場合は、pyenv-winによって仮想環境内のpythonのバージョンを指定し、venvにより仮想環境内のパッケージを独立に管理する方法が最も優れているように思います。次善の策はCondaを使う方法です（Condaを使う方法はこちらの私のQittaの投稿を参 […]
Postmanを使ったAPI設計
バックエンドAPIの開発においては、実装前にAPIの設計・仕様を決めます。Postmanは、バックエンドAPIに対するAPIクライアントとしての機能が大変優れているのみならず、APIの設計・仕様を決める工程においても威力を発揮します。具体的には、下記のPostmanの機能がAPIの設計で有用です。 ワークスペースを頂点としたフォルダの階層構造 左側に階層構造、右側に各リクエストが表示される開発環境 […]
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の設定と実装方法 – v3.0準拠
Tailwind CSSはCSSを効率よく書くためのライブラリーで、とくにモバイルとPCのレスポンシブなデザインを作るときに威力を発揮します。2021年12月にリリースされたv3.0からは使い勝手も大きく向上しました。カラーパレット、ボックスシャドーなどの所定のテーマも備えつつ、大きさであればピクセル指定、色であればRGB又はHex指定で完全なカスタムも可能です。よってbootstrapのようなC […]
Flexboxでヘッダーを実装する方法
本稿ではCSSのflexboxを使って、Webサイトのヘッダーを構成する方法を4通りご紹介します。多くのヘッダーは左右にアイテムを配置した構成をしており、本稿でもヘッダーの各メニューを中央に寄せるのではなく、左右に並べる方法をご紹介します。 margin-left: auto 親要素にdisplay:flexを適用すると、デフォルト設定では子要素は行方向（flex-direction: row）の […]
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）を使った読み込み方法（実装方法）まで丁寧に解説しています。書き込みはweb Version 8での記法と、2021年8月に正式リリースされたより新しいweb Version 9での […]