新しいReactのアプリケーションを立ち上げるとき、初めにやる作業はだいたい一緒なので、手順書的にまとめてみました。
想定する環境はこんな感じです。
- エディタ: Visual Studio Code
- 構成管理: Github
- ビルドシステム: create-next-app
- CSSフレームワーク: TailwindCSS
Githubの準備～VSCodeとの接続
- GitHubにログインし、リポジトリの「New」ボタンを押下する。
- リポジトリ名を入力し、「Create Repository」を押下する。
- Githubのリポジトリが完成！
- リポジトリのURLをコピーする
画面に表示されているhttps://github.com/～.gitというURL。
- Visual Studio Codeを開き、「Clone Git Repository」→画面上部の入力欄にコピーしたリポジトリURLを入力
- 作業ディレクトリを指定
- GitHubと接続が完了
まだ何もファイルが無いが、左メニューに「NEWREACTAPP」というプロジェクト名が表示されていて、接続できていることがわかる。
Reactアプリの準備
- Terminalを開き、コマンド入力
npx create-next-app
- パッケージをインストール
途中、「インストールしていいですか？」とか「プロジェクト名を決めてください」など言われるので、聞かれたことに答える。
- TypeScriptを使う
- ESLint（プログラムの文法チェックツール）を導入する
- Tailwind CSSを使う
- src/ディレクトリをつかう
- app/ディレクトリは使わない
- インポートエイリアスはデフォルトのまま
インストールが開始するので、終わるまで待つ。
- 起動して動作確認
ターミナルから、インストール先のディレクトリに移動し、サーバを起動。
cd newreactapp //インストール時に指定したプロジェクト名
yarn dev
https://localhost:3000/ にアクセスすると、テンプレートサイトが表示される。これで起動確認OK！
- GithubにCommit & Push
左メニューの「Source Control」を開くと、更新されたファイルが並んでいるので、コミット内容の説明を入力して、右上のチェックマークで確定。
- Githubを開いて、Pushされていることを確認
フォント設定
next/fontをつかって、Googleフォントを導入します。
ターミナルから、next/fontをインストール。サーバが起動している状態の場合は、「Ctrl+c」で修了してからコマンド入力。
npm install @next/font
_app.tsxでフォントを読み込み。今回は、BIZ UDPゴシックを使います。
フォントはここから探します。
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
+ import { BIZ_UDPGothic } from "next/font/google"
+ const udpgothic = BIZ_UDPGothic({
+ weight: ["400", "700"],
+ subsets: ["latin"],
+ display: "swap",
+ });
export default function App({ Component, pageProps }: AppProps) {
- return <Component {...pageProps} />
+ return (
+ <>
+ <style jsx global>{`
+ html {
+ font-family: ${udpgothic.style.fontFamily};
+ }
+ `}</style>
+ <Component {...pageProps} />
+ </>
+ )
}
index.tsxで、元々書いてあったフォント設定を削除。
import Image from 'next/image'
- import { Inter } from 'next/font/google'
- const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
- <main
- className={`flex min-h-screen flex-col items-center justify-between p-24`} ${inter.className}
- >
+ <main
+ className={`flex min-h-screen flex-col items-center justify-between p-24`}
+ >
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
…
Headタグの準備
Headタグをページごとに書いても良いのですが、titleタグやOGP設定を含めたHeadタグのテンプレートをコンポーネント化しておくと、同じコードを何度も書かなくて便利です。
pageディレクトリの中にmyHead.tsxというファイルを新しく作成します。この例文では、ページタイトル、OGPの説明文、OGPのURLをパラメータとして呼び出せるようにしています。
import Head from 'next/head'
interface MyHeadProps {
title: string,
description: string,
url: string,
}
export default function MyHead ({title, description, url}: MyHeadProps) {
return (
<>
<Head>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content="画像のURL" />
</Head>
</>
)
}
試しに、index.tsxのHeadタグを設定。ついでに、テンプレートサイトのUIは全部削除してスッキリさせる。すべてのページにMyHeadタグを設定すれば、ページごとにタイトルやOGPを出し分けられる。
import MyHead from './myHead'
export default function Home() {
return (
<>
<MyHead title="ページタイトル" description="ページ概要" url="https://studymeter.jp" />
<main
className={`flex min-h-screen flex-col items-center justify-between p-24`}
>
テストページ
</main>
</>
)
}
※ここで、_document.tsxの中にある<Head />を消してはいけない。これを消すと、headタグそのものが空っぽになり、MyHeadの設定が反映されない。
言語設定
ページ全体の言語設定を日本語にしておく。デフォルトの英語設定のままにしておくと、ブラウザの自動翻訳が勝手に動いて思わぬ不具合を生む。
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
- <Html lang="en">
+ <Html lang="ja">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Faviconの設定
面倒なので、正方形の画像をpngでつくり、ファイル名を「favicon.ico」に変え、publicフォルダ配下のfavicon.icoを上書きしている。
本来はFaviconGeneratorなどを使って正しい大きさのファイルをつくり、Headタグで指定するらしいが、上記の雑な方法でも困ったことはないので、たぶん大丈夫…
スタディメーター株式会社では、プログラミング未経験のスタッフが開発やデザインを勉強しながらプロダクト開発を行う活動に取り組んでいます。開発初心者に「あれを見てやってみて」と渡せるチュートリアル、「これ、なんだっけ？」と困ったときに役立つTipsを公開しています。
Discussion