
# 演奏動画

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/XqmPRZKJP1M"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

# 基本情報

- 曲名: メロス万歳
- 作曲: Y. Tamura
- 編成: バグパイプ、シタール、パーカッション
- 演奏時間: 1 分 55 秒

# 楽曲の解説

メロスシリーズ第二弾。エスニック風のオリジナル曲です。

最後の大団円をイメージして作っています。


オリジナル曲『メロス万歳』の紹介記事です。

【オリジナル曲紹介】メロス万歳


# 演奏動画

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/I-SBuqE3NbE"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

# 基本情報

- 曲名: Deep Blue Fantasy
- 作曲: Y. Tamura
- 編成: ピアノ
- 演奏時間: 3 分 55 秒
- 難易度: 中級者向け

# 楽曲の解説

オリジナルのピアノ曲です。
深海の世界の冒険をイメージした曲です。
先の見えない暗闇を進むワクワク感を表現しています。

夜中にウィスキーをちびちびやるときの BGM としてもおすすめです。

# 楽譜の販売はこちら

Piascore で楽譜を販売しています。

<LinkCard
  href="https://store.piascore.com/scores/176147"
  title="【楽譜】Deep Blue Fantasy / オリジナル曲 / Y・Tamura (ピアノソロ / 中級)  - Piascore 楽譜ストア"
  description="オリジナルのピアノ曲です。深海の世界の冒険をイメージした曲です。先の見えない暗闇を進むワクワク感を表現しています。"
  image="https://store.piascore.com/scores/ogp?score_id=176147"
/>


オリジナルのピアノ曲『Deep Blue Fantasy』の紹介記事です。

【オリジナル曲紹介】Deep Blue Fantasy


# 演奏動画

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/JiVLeixP5-Q"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

# 基本情報

- 曲名: オーボエと弦楽三重奏のためのソナタ「静かなる湖」
- 作曲: Y. Tamura
- 編成: オーボエ、ヴァイオリン、ヴィオラ、チェロ
- 演奏時間: 3 分 30 秒
- 難易度: 初～中級者向け

# 楽曲の解説

ソナタ形式のオリジナル曲です。
紅葉の河口湖の情景をイメージして作曲しました。

ゆったりしたいときにおすすめです。

# 演奏のコツ

もともとオーボエ、ヴァイオリン、チェロの編成を想定していたため、ヴィオラの音域がやや高いかもしれません。
その分おいしいカウンターメロディがありますのでご容赦ください。

# 楽譜の販売はこちら

Piascore で楽譜を販売しています。

<LinkCard
  href="https://store.piascore.com/scores/175434"
  title="【楽譜】オーボエと弦楽三重奏のためのソナタ「静かなる湖」 / オリジナル曲 / Y・Tamura (アンサンブル木管 / 初級)  - Piascore 楽譜ストア"
  description="ソナタ形式のオリジナル曲です。編成はオーボエ、ヴァイオリン、ヴィオラ、チェロ。紅葉の河口湖の情景をイメージして作曲しました。ゆったりしたいときにおすすめです。"
  image="https://store.piascore.com/scores/ogp?score_id=175434"
/>


オリジナル曲『オーボエと弦楽三重奏のためのソナタ「静かなる湖」』の紹介記事です。

【オリジナル曲紹介】オーボエと弦楽三重奏のためのソナタ「静かなる湖」


# 演奏動画

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/zHfFwakOMxg"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

# 基本情報

- 曲名: 道 - Theme of Meros
- 作曲: Y. Tamura
- 編成: パンフルート、コーラス、コントラバス、シタール、カリンバ、パーカッション
- 演奏時間: 2 分 20 秒

# 楽曲の解説

エスニック風のオリジナル曲です。

この曲は「ドリアンスケール」というちょっと変わった音階で作られています。
クラシック音楽の時代の前のヨーロッパ各地の伝統音楽ではこの音階が使われたらしいです。
（今でもエスニック感の演出でゲーム音楽に採用されたりします）

<LinkCard
  href="https://wellen.jp/skill/dorian-scale/"
  title="ドリアンスケールの特徴とは？初心者でも簡単な導き方とまとめ表 | wellen"
  description="ドリアンスケールはポピュラーな楽曲でも使われるほど、使用頻度が高いスケールです。本記事では、ドリアンスケールの特徴や導き方を紹介します。この記事を読んで、ドリアンスケールをマスターしましょう！"
  image="https://wellen.jp/media/wp-content/uploads/2021/07/A.jpg"
/>

この曲ではさらなるエスニック要素としてアフリカの各種打楽器とインドの弦楽器シタールを混ぜています。

曲名は太宰治の「走れメロス」からとっています。
古代ギリシャの広大な荒野をただひたすら走る様を思い浮かべてもらえたら幸いです。


オリジナル曲『道 - Theme of Meros』の紹介記事です。

【オリジナル曲紹介】道 - Theme of Meros


# 演奏動画

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/4db_ODE_KA0"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

# 基本情報

- 曲名: 大掃除のテーマ
- 作曲: Y. Tamura
- 編成: 尺八、琴、和太鼓
- 演奏時間: 2 分 20 秒

# 楽曲の解説

和風のオリジナル曲です。
年末大掃除のときに思いついて作曲しました。（← 掃除しろよ）

大掃除の作業用 BGM として聴いています。

アップテンポな焦燥感あふれる曲調で年末の忙しさを表現しています。
実際に演奏したら……琴奏者が腱鞘炎になりそうです。

意外と集中できるかも。


オリジナル曲『大掃除のテーマ』の紹介記事です。

【オリジナル曲紹介】大掃除のテーマ


# 演奏動画

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/GsregxfOyow"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

# 基本情報

- 曲名: You Are My New Dream
- 作曲: Y. Tamura
- 編成: ピアノ
- 演奏時間: 2 分 50 秒
- 難易度: 初～中級者向け

# 楽曲の解説

妻と当時付き合っていたときにプレゼントした曲です。

穏やかな日常を過ごす二人が出会いを経て、鮮やかなフィナーレへと進みます。

曲名は私の好きなディズニー映画『塔の上のラプンツェル』の劇中のセリフからとりました。

# 演奏のコツ

全体的にレガートしつつ、休符のタイミングを合わせると緩急つけて演奏できます。
三角フェルマータ以外にも、フレーズの頭などを適度に溜めて演奏するのもおすすめです。

# 楽譜の販売はこちら

Piascore で楽譜を販売しています。

<LinkCard
  href="https://store.piascore.com/scores/174838"
  title="【楽譜】You Are My New Dream / Y・Tamura (ピアノソロ / 初〜中級)  - Piascore 楽譜ストア"
  description="この曲は妻と付き合っていた頃に作曲してプレゼントしたオリジナルピアノ曲です。穏やかな日常を過ごす二人が出会いを経て、鮮やかなフィナーレへと進みます。曲名は私の好きなディズニー映画『塔の上のラプンツェル』の劇中のセリフからとりました。"
  image="https://store.piascore.com/scores/ogp?score_id=174838"
/>


オリジナルのピアノ曲『You Are My New Dream』の紹介記事です。

【オリジナル曲紹介】You Are My New Dream


久しぶりの投稿になります。

このたび、Zenn でブログサイトの開発手順を公開しました。
これを読むことで本ブログのような Next.js ベースのサイトを構築できるようになるかと思います。

# Zenn とは

Zenn とは、エンジニアが技術・開発についての知見をシェアする場所として使える情報共有コミュニティです。
本を制作して販売したり、投稿記事にバッジを贈ることで収益を得ることができるのが特徴です。
技術をしっかり学べることが多く、私もよくお世話になっています。

<LinkCard
  href="https://zenn.dev/"
  title="Zenn｜エンジニアのための情報共有コミュニティ"
  description="Zennはエンジニアが技術・開発についての知見をシェアする場所です。本の販売や、読者からのバッジの受付により対価を受け取ることができます。"
  image="https://zenn.dev/images/logo-only-dark.png"
/>

# リンク先はこちら

早速ですが、開発手順は以下のリンク先になります。

<LinkCard
  href="https://zenn.dev/yuta_extend/books/a23ce072bdf8b8"
  title="Next.js ではじめる本格ブログサイト開発（TypeScript 対応）"
  description="■概要
自分専用の商用ブログや Web サイトを作って情報発信したいと思ったことはありませんか？
本書では商用利用できるブログサイトを開発し、公開するまでの手順を解説します。
本書ではフロントエンド技術のうちの一つである Next.js を利用します。
Next.js を用い"
  image="https://res.cloudinary.com/zenn/image/upload/s--BBuya1HO--/g_center%2Ch_280%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci84NGY4MzczZmQ4LmpwZWc=%2Cw_200/v1627283836/default/og-base-book_yz4z02.jpg"
/>

価格は 1,500 円となっていますが、肝となる next-mdx-remote によるブログ記事表示のところもしっかりと解説やサンプルコードを書きました。

Twitter でフォローや DM をいただければフィードバックも考えていますので、よろしくお願いします。

また、本の執筆は初めてなので、随時追記して充実させていければと思います。


Zenn でブログサイトの開発手順を公開しました。これを読むことで本ブログのような Next.js ベースのサイトを構築できます。

【Next.js】Zenn でブログサイトの開発手順を公開しました


# サイトマップとは

**サイトマップとは、検索エンジンに Web サイトにどのようなページが存在するか伝えるためのファイルのことです。**
大きいサイトの場合はサイトマップを用意しておくことで、検索エンジンが効率よくサイトを巡回する（＝検索結果の一覧にそのサイトを候補として出せるようになる）ことができます。

本ブログでも[サイトマップ](https://www.yuta-extend.com/sitemap.xml)を用意していますので参考にしてください。
本ブログのように小規模なサイトの場合はあまり SEO 効果は望めませんが、Next.js のサイトの場合は本記事の方法で一度設定しておけば自動更新できますので、**無いよりはまし** だと思ってとりあえず作成しておいて損はないと思います。

# next-sitemap をインストールする

Next.js でサイトマップを扱うには、 **next-sitemap** というプラグインを使うのが便利です。

<LinkCard
  href="https://www.npmjs.com/package/next-sitemap"
  title="next-sitemap"
  description="Sitemap generator for next.js. Latest version: 3.1.52, last published: 13 days ago. Start using next-sitemap in your project by running `npm i next-sitemap`. There are 23 other projects in the npm registry using next-sitemap."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

以下のコマンドで next-sitemap をインストールします。

```shell
> npm i next-sitemap
```

# next-sitemap の設定を記述する

## sitemap.config.js

まず、next-sitemap の設定ファイル `sitemap.config.js` を一番上のディレクトリに作成します。

```js:sitemap.config.js
module.exports = {
  siteUrl: "https://www.yuta-extend.com",
  generateRobotsTxt: true,
  generateIndexSitemap: false,
  sitemapSize: 7000,
  outDir: "./out",
};
```

詳しくは公式サイトで調べていただきたいですが、`siteUrl`にはドメイン名を指定し、他は任意で設定します。

`generateIndexSitemap`はデフォルト`true`のところを`false`にしました。
これはファイルを分割するかどうかを指定するもので、`false`にしておくと sitemap.xml を一つだけ出力します。
大きいサイトでは分割する必要があるとのことです。

## .eslintrc.json

次に、ESLint の設定を記述します。`.eslintrc.json`ファイルを以下のように追記します。

```json:.eslintrc.json
{
  "extends": "next/core-web-vitals",
  "ignorePatterns": ["*.config.js"]
}
```

これで設定ファイルのエラーが出なくなります。

## package.json

次に、`package.json`の`scripts`の部分を編集します。以下のように、`build`の際に next-sitemap が実行されるように記述すれば OK です。

```json:package.json
  ・・・
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export && next-sitemap --config sitemap.config.js",
    "start": "next start",
    "lint": "next lint"
  },
  ・・・
```

# ローカルでビルドしてみる

以下のコマンドで試しにビルドしてみます。`out`フォルダに`sitemap.xml`が出力されれば成功です。

```shell
> npm run build
```

# Cloudflare Pages 側も設定する

ネット上のサイトに`sitemap.xml`を出力するにはホスティングサービス側も設定が必要です。
**Cloudflare Pages** の場合は、 **「設定」タブ ⇒「ビルド&デプロイ」メニュー ⇒ ビルドの構成 ⇒ ビルドコマンド** の部分で設定できます。

```
next build && next export && next-sitemap --config sitemap.config.js
```

![build_command](/images/build_command.png)

# サイトマップを Google Search Console と Bing Webmaster Tools に登録する

仕上げに、 **作成したサイトマップを Google と Bing に登録しておきましょう。** サイトマップに異常がないかどうかも見てくれます。

以下のサービスにアカウントを作ることでサイトマップを登録できます。

<LinkCard
  href="https://search.google.com/search-console/about"
  title="Google Search Console"
  description="Search Console のツールやレポートを使うことで、サイトの検索トラフィックや掲載順位を測定できるほか、問題を修正し、Google 検索結果でのサイトの注目度を高めることができます"
  image="https://ssl.gstatic.com/search-console/scfe/search_console-128.png"
/>

<LinkCard
  href="https://www.bing.com/webmasters/about"
  title="Bing Webmaster Tools"
  description="Bing Web マスター ツールにログインまたはサインアップして、あなたのサイトの検索パフォーマンスを向上しましょう。無料のレポートやツール、リソースにアクセスできます。"
  image="https://www.bing.com/webmasters/Content/PWA/iOS/logo/bing-logo-152.png"
/>

# まとめ

今回は Next.js でサイトマップを自動生成して検索エンジンに登録させる方法を解説しました。
記事内で言ったとおり、これを設定したからといって必ず検索上位に出るというものではありませんが、
一度設定すれば自動更新してくれるものなので、やっておいて特に損はないです。


Next.jsでサイトマップを自動生成して検索エンジンに登録させる方法を解説します。

【Next.js】サイトマップを自動生成して検索エンジンに登録させる方法


# はじめに

私は将来、一作曲家としてオーケストラの曲を作曲したいと思っています。
ただ、今までやってきた西洋楽器はピアノくらいなものなので、
オーケストラの楽器については一から勉強する必要があります。

私の作曲の手段は基本的に打ち込みのみですが、
各楽器の特性を知っていないと無茶な音域や音型で作ってしまうことになります。
それは本意ではないので、きちんと楽器の特性を把握して効果的に作曲したいものです。
（もし叶うのならば実際に演奏してみたい）

なので、まずは各楽器の特徴や有名な曲をざっくり調べてまとめてみました。
まずは以下の曲などを聴いて楽器の特性を把握したいと思います。

# 木管楽器

## ピッコロ

ピッコロはフルートの長さを半分にして、1 オクターブ高い音が出るようにした楽器です。

オーケストラの楽器の中で最も高い音が出るのでハイトーンを担当します。
メインで使われるというよりは、フルート奏者が一時的に持ち替えて使われることが多いです。

高い音は耳に入りやすいのでこれを使うと目立ちます。

**＜ピッコロが活躍する有名曲＞**

- 交響曲第 5 番ハ短調『運命』第 4 楽章／ベートーヴェン
- 星条旗よ永遠なれ／スーザ
- 交響曲第 4 番第 3 楽章／チャイコフスキー

## フルート

フルートは倍音の少ない澄んだ音が特徴で、鳥の鳴き声のような音がする楽器です。
甘い優雅なメロディを担当します。

素早い運指も可能で、スピード感のある演奏もできます。

**＜フルートが活躍する有名曲＞**

- 牧神の午後への前奏曲／ドビュッシー
- 「アルルの女」より『メヌエット』／ビゼー
- ハンガリー田園幻想曲／ドップラー

## オーボエ

オーボエは木管楽器の一種で、繊細かつ息の長い、高い表現力が求められるメロディが得意な楽器です。

音域によって音色が異なり、低音域では暗く、中音域では哀愁があり感情豊か、
高音域では明るくキンキンした音色になると言われています。（得意なのは中音域です）

また、ロングトーンも得意で、フルートと比べて二倍三倍も長い音を出すことができるのも特徴です。

**＜オーボエが活躍する有名曲＞**

- 「白鳥の湖」より『情景』／チャイコフスキー
- オーボエ協奏曲ハ長調 K.314／モーツァルト
- オーボエ協奏曲ニ短調第 2 楽章／マルチェッロ

## クラリネット

クラリネットは木管楽器の一種で、広い音域を柔らかい音色でカバーするのが得意な楽器です。

また、ブルーノートの微妙な表現力が要求される演奏も得意で、ジャズに使われたりするのも特徴です。

作曲の際の注意点として、フラット系の楽曲は B 管、シャープ系は A 管のように別種のクラリネットが必要なため、
同一楽章内で持ち替える場合は十分な休符が必要です。

**＜クラリネットが活躍する有名曲＞**

- ラプソディ・イン・ブルー／ガーシュウィン
- クラリネット・ソナタ／ブラームス
- だったん人の踊り／ボロディン

## ファゴット

ファゴットは木管楽器の一種で、低音で支えたり、コミカルな雰囲気を作るのが得意な楽器です。
前者の用途としては音域が低音域に広く、木管のハーモニーに厚みを持たせることができます。
後者の用途としてはクセのあるちょっと不気味な音色がするため、それが効果的に使われることがあります。

**＜ファゴットが活躍する有名曲＞**

- 「ペール・ギュント」より『山の魔王の宮殿にて』／グリーグ
- 交響詩『魔法使いの弟子』／デュカス
- 春の祭典／ストラヴィンスキー

# 金管楽器

## トランペット

トランペットは金管楽器の一種で、メロディを担当することが多い楽器です。

金管楽器の中では最も高い音を出してはっきり音が聞こえるため、ファンファーレの主役として適しています。

とにかく目立つ花形楽器のため、トランペットソロから始まる曲も沢山あります。

**＜トランペットが活躍する有名曲＞**

- 「展覧会の絵」より『プロムナード』／ムソルグスキー（ラヴェル編）
- ツァラトゥストラはかく語りき／R.シュトラウス
- 交響曲第 5 番嬰ハ短調第 1 楽章／マーラー

## ホルン

ホルンは金管楽器の一種で、ハーモニーに厚みを持たせるのが得意な楽器です。

無理なく柔らかい音を重ねられるので、和音作りに重宝するそうです。
特に開放音（バルブを使わずに吹く音）によるドミナントの五度の和音は「ホルン五度」と呼ばれ、使われています。

哀愁のある音色を出すこともでき、その効果を狙ってソロで使われることもあります。

**＜ホルンが活躍する有名曲＞**

- 「惑星」より『木星』／ホルスト
- ホルン協奏曲第 1 番ニ長調 K.412／モーツァルト
- 亡き王女のためのパヴァーヌ／ラヴェル

## トロンボーン

トロンボーンは金管楽器の一種で、ハーモニーの中低音を担当することが多い楽器です。

また、管をスライドさせて音程を合わせる構造上、グリッサンドやポルタメントができる金管楽器としても使われます。

微妙な音程変化が求められるジャズでは重宝されるようです。

**＜トロンボーンが活躍する有名曲＞**

- 「ニーベルングの指環」より『ワルキューレの騎行』／ワーグナー
- 「レクイエム」より『トゥーバ・ミルム』／モーツァルト
- オリオン・マシーン／吉松隆

## チューバ

チューバは金管楽器の一種で、ハーモニーの低音を担当することが多い楽器です。

オーケストラにおいては必須楽器ではなく、どちらかというと吹奏楽で活躍する楽器です。

出せる音域は広いですが、得意な音域は中音域になります。

**＜チューバが活躍する有名曲＞**

- バス・チューバと管弦楽のための協奏曲／ウィリアムズ
- 幻想交響曲第 5 楽章／ベルリオーズ
- 交響曲第 1 番『巨人』第 3 楽章／マーラー

# 打楽器

## ティンパニ

ティンパニは打楽器の一種です。リズムをとるだけでなく、ペダルによって音程調節もできます。

他の打楽器にないパターンとして、他の楽器がリズミカルな演奏をしたときに追随して演奏するパターンがあり、
ティンパニの音でうまく全体の音楽をつなげることができます。

**＜ティンパニが活躍する有名曲＞**

- 交響曲第 9 番第 2 楽章／ベートーヴェン
- 交響曲第 5 番第 4 楽章／ショスタコーヴィチ
- 交響曲第 103 番『太鼓連打』／ハイドン

# 弦楽器

## ヴァイオリン

ヴァイオリンは弦楽器の一種で、オーケストラの主役を担当します。
オーケストラのコンサートマスターも通常第一ヴァイオリンの首席奏者が担当します。

弦楽器の中では一番高い音が出て、メロディを担当することが多いです。

表現が多彩で、いくつかの奏法が存在します。

**＜ヴァイオリンが活躍する有名曲＞**

- G 線上のアリア／バッハ（ウィルヘルミ編）
- 愛の挨拶／エルガー
- アイネ・クライネ・ナハトムジーク／モーツァルト

## ヴィオラ

ヴィオラは弦楽器の一種で、ヴァイオリンを一回り大きくしたような見た目をしています。

音域はヴァイオリンの 5 度下にあたり、
ヴァイオリンとチェロの間を取り持って弦楽パートのハーモニーに厚みを持たせる役割があります。

ヴァイオリンよりも人の声の音域に近いため、親しみやすい音色が期待できます。

**＜ヴィオラが活躍する有名曲＞**

- ヴィオラと管弦楽のためのロマンス／ブルッフ
- 無伴奏ヴィオラのためのソナタ／ヒンデミット
- ヴィオラ協奏曲／テレマン

## チェロ

チェロは弦楽器の一種で、ハーモニーの中低音やメロディを担当します。

ヴァイオリンやヴィオラよりも大分弦が長いため、その分響きもかなり豊かになります。

また、弓を使わずに弦を弾くピチカート奏法も得意です。

**＜チェロが活躍する有名曲＞**

- 「動物の謝肉祭」より『白鳥』／サン＝サーンス
- 「無伴奏チェロ組曲第 1 番」より『プレリュード』／バッハ
- チェロ協奏曲ロ短調／ドヴォルザーク

## コントラバス

コントラバスは弦楽器の一種で、ハーモニーの低音を担当します。

安心感かつ重厚感のある低音でオーケストラを支えることが多い反面、メロディを担当することはあまりありません。

チェロとオクターブのユニゾンを弾くと効果的と言われています。

**＜コントラバスが活躍する有名曲＞**

- 交響曲第 9 番第 4 楽章／ベートーヴェン
- コントラバス協奏曲嬰ヘ短調／クーセヴィツキー
- 「動物の謝肉祭」より『象』／サン＝サーンス

# まとめ

今回はオーケストラの各楽器について、特徴や有名な曲をまとめてみました。
具体的な音域や得意な表現についてはまだ全然触れられていませんが、追々調べていくことにします。


オーケストラの各楽器について、特徴や有名な曲をまとめてみました。

オーケストラの楽器の特徴と有名曲


# はじめに

本記事では、Next.js による開発をこれから始めたい方が最初にすべきことについて紹介します。
必要ソフトウェアのインストールし、 Hello World を表示し、作成したソースコードを GitHub で管理できる状態にするまでを目標にします。

# 環境構築

まず、開発環境の構築から行います。OS によって詳細手順が異なりますが、ここでは Windows の場合を紹介します。

## 1. Node.js をインストールする

Next.js は **Node.js** というシステムで動作します。これは簡単に言うと、普段 Google Chrome や Edge や Safari などの Web ブラウザ上で動いている JavaScript のプログラムをサーバー上で動かせるシステムです。**npm** という、各種 Web 開発関連の機能を動作させるシステムも付属していて、こちらも多用することになります。

以下のサイトからダウンロードし、インストールします。
（npm は Node.js をインストールする際に自動でインストールされます）

<LinkCard
  href="https://nodejs.org/ja/download/"
  title="ダウンロード | Node.js"
  description="Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine."
  image="https://nodejs.org/static/images/logo-hexagon-card.png"
/>

インストーラーを起動するといろいろとオプションを選択できますが、すべてデフォルトの設定で問題ありません。

## 2. Git をインストールする

**Git** というシステムもインストールします。
これは作成したコードの変更履歴を管理したりバックアップをとっておいてくれるシステムで、
後述する **GitHub** と組み合わせると、インターネット上にソースコードを置いて他の人と共有したり、
複数人でソースコードを編集したりすることができます。

Windows の場合は以下のサイトからダウンロードし、インストールします。

<LinkCard
  href="https://gitforwindows.org/"
  title="Git for Windows"
  description="We bring the awesome Git VCS to Windows"
  image="https://gitforwindows.org/img/gwindows_logo.png"
/>

## 3. Visual Studio Code をインストールする

続けて、Next.js のコーディングをするためのツールを導入します。
いくつか手段はありますが、Visual Studio Code（以下、VSCode） が特におすすめです。
非常に高速に動作し、様々なプログラミング言語の開発がこれ一つでできる上、Next.js 開発との相性も抜群です。

以下のサイトからダウンロードし、インストールします。

<LinkCard
  href="https://code.visualstudio.com"
  title="Visual Studio Code - Code Editing. Redefined"
  description="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows."
  image="https://code.visualstudio.com/opengraphimg/opengraph-home.png"
/>

## 4. VSCode の拡張機能をインストールし、初期設定する

次に、インストールした VSCode に拡張機能をインストールします。
標準機能だけでも使えなくはありませんが、<span className="marker">拡張機能を使うと開発効率が一気にアップします。</span>

今回は以下の 4 つをインストールします。
VSCode のショートカットキー[ctrl + shift + X]で拡張機能を開き、以下の機能をそれぞれ検索してインストールボタンを押すとインストールできます。

- Japanese Language Pack for Visual Studio Code
- ES7 React/Redux/GraphQL/React-N
- ESLint
- Prettier - Code formatter

上から順番に、VSCode の日本語化、コードのハイライト表示、コードのエラーチェック、コードの自動整形の機能になります。

なお、 **Prettier - Code formatter** のみインストールした後で手動の設定が必要になります。
VSCode の[ctrl + ,]で設定画面を開き、 Format On Save にチェックを入れ、 Default Formatter で Prettier -Code formatter を選択します。
これで設定完了です。

# Next.js のプロジェクトを新規作成する

VSCode の[ctrl + @]で ターミナル を開き、以下のコマンドを入力します。
最初のコマンドを実行するとプロジェクト名を聞かれるので、任意のプロジェクト名を入力しましょう。
以降は<span className="marker">作成したプロジェクトのフォルダが作業フォルダになります。</span>

```shell
> npx create-next-app --typescript
> cd (作成したプロジェクト名)
```

`--typescript`オプションについてですが、これをつけると TypeScript の形式でコードを作成してくれます。
（短縮形の`--ts`で書いても OK）

**TypeScript** とは、通常の JavaScript に加えてデータ型やクラスを書けるようにした言語です。
データ型が書けるようになったことで、変なデータが変数に入ることを防ぐことができます。

以降は TypeScript の形式（.tsx）でコードを書きますが、もし JavaScript の形式（.js）で書きたい場合は、
以下の TypeScript の Prayground で JavaScript に翻訳をかけてくれるので、これをご活用ください。

<LinkCard
  href="https://www.typescriptlang.org/play"
  title="TS Playground - An online editor for exploring TypeScript and JavaScript"
  description="The Playground lets you write TypeScript or JavaScript online in a safe and sharable way."
  image="https://www.typescriptlang.org/favicon-32x32.png"
/>

# Next.js の初期画面を表示してみる

ここまでできたら、Next.js の初期画面を表示してみましょう。
ターミナルで以下のコマンドを実行します。

```shell
> npm run dev
```

コマンドを実行すると、URL が表示されます（通常は [localhost:3000](http://localhost:3000)）。
その URL をクリックして Web ブラウザで以下のような画面が表示されれば成功です。
（この時点ではまだネットには公開されません）

![default-nextjs](/images/default-nextjs.png)

なお、このコマンドでブラウザに画面を表示している間はコードを編集すると自動で画面に反映されますが、
ターミナルが動きません。このモードは、[ctrl + c]で停止できます。

# Next.js の余計なファイルを削除して最小限の構成にする

初期画面が無事表示されましたので、次は最初に作成されたファイル群から以下の不要なものを削除していきます。

- `pages/api`
- `pages/api/hello.ts`
- `styles/Home.module.css`
- `public/vercel.svg`

次に、プロジェクトフォルダ直下に`src`フォルダを作成し、その中に`pages`フォルダと`styles`フォルダを移動させます。

また、`src/pages/index.tsx`を以下のように最小限の内容にしておきます。
`return();`で HTML タグを含むコードを返すと、それがそのまま HTML の文書としてページに表示されます。

```tsx:src/pages/index.tsx
import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <>
      <h2>hello world!!</h2>
    </>
  );
};

export default Home;
```

ここまでで一旦、先ほども使ったコマンドで Web サイトの内容を確認してみます。

```shell
> npm run dev
```

今度は以下のような画面が表示されるかと思います。

![hello-world](/images/hello-world.png)

なおここまでで、以下のようなフォルダ構造になったかと思います。

```
（プロジェクトフォルダ）
　├─ /.next
　├─ /node_modules
　├─ /public
　│　　└─ favicon.ico
　├─ /src
　│　　├─ /pages
　│　　│　　├─ _app.tsx
　│　　│　　└─ index.tsx
　│　　└─ /styles
　│　　　 　└─ globals.css
　├─ .eslintrc.json
　├─ .gitignore
　├─ next-env.d.ts
　├─ next.config.js
　├─ package-lock.json
　├─ package.json
　├─ README.md
　└─ tsconfig.json
```

ここで簡単に主要ファイルやフォルダの説明をしておきます。

`public`フォルダには、サイトで使う画像ファイルなどを格納できます。

サイト全体に関する共通設定は`_app.tsx`内に記述できます。
ただし、`<link>`タグなどの一部の設定は`_document.tsx`というファイルを作り、そこに記述する必要があります。

`pages`フォルダに tsx ファイルを追加すると、それがそのまま Web ページになります。
例えば`page.tsx`を作成すると`http://localhost:3000/page`のリンク先のページを作成できます。

# GitHub でソースコードを管理する

基本的な部分ができたところで、**GitHub** を使ってソースコードをネットに上げましょう。
GitHub とは先述した Git をネット上で使えるクラウドサービスで、 **リモートリポジトリ** という箱を作ってその中にソースコードの変更履歴をためていくことができます。
GitHub が一番有名ですが、後述する Cloudflare Pages では類似のシステムである GitLab も対応しているので、そちらを使っても構いません。

まずは以下のサイトで GitHub のアカウントを作成しましょう。

<LinkCard
  href="https://github.com"
  title="GitHub: Let’s build from here"
  description="GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat..."
  image="https://github.githubassets.com/images/modules/site/social-cards/campaign-social.png"
/>

次に、先ほど説明したリモートリポジトリを作成します。
このとき **public** を選択すれば、ネット上にソースコードが公開される公開リポジトリを、
**private** を選択すれば招待したユーザしか見れない非公開リポジトリを作成できます。

注意点として、<span className="marker">GitHub の公開リポジトリにファイルを上げた時点で、そのファイルは全世界から見れる状態になっています。パスワードや個人情報などを載せないように気をつけましょう。</span>
有料クラウドサービスのアカウントが流出して何千ドルも被害が出るようなケースもあります。
非公開リポジトリであってもそういった情報はむやみに載せないのが鉄則です。

リモートリポジトリが作成できたところで、VSCode で Git を動かして GitHub にソースコードを上げていきます。
初回は以下のとおりコマンドが多いですが、二回目以降は以下のとおりコマンドが少なく済みます。

```shell
# 初回
> git init
> git config user.name （GitHubのアカウントのユーザ名）
> git config user.email （GitHubのアカウントのメールアドレス）
> git remote add origin https://～（リモートリポジトリのURL）.git
> git branch -M master
> git add *
> git commit -m "first commit"
> git push origin master
```

```shell
# 次回以降コミット（保存）したい場合
> git add *
> git commit -m "（保存時のコメント）"
> git push origin master
```

これで GitHub にソースコードが上がりました。
GitHub にアクセスするとコードの内容を確認できます。

GitHub では多人数でソースコードを編集することもできます。
その場合はいろいろ作法がありますが、今回は個人開発なので割愛します。

# 作成したサイトをインターネットに公開するまでの流れ

私の場合は、GitHub に登録したソースコードを **Cloudflare Pages** に自動で転送するように設定しています。
また、**お名前ドットコム** でカスタムドメインを取得し、取得したドメインでサイトが表示されるように設定しています。
（お名前ドットコムは初年度無料ですが更新料が高めなので、更新日が近づいたら他のサービスを検討します）

<LinkCard
  href="https://pages.cloudflare.com/"
  title="Cloudflare Pages"
  description="Build your next application with Cloudflare Pages"
  image="https://blog.cloudflare.com/content/images/2020/12/twitter-shared-link-18.png"
/>

<LinkCard
  href="https://www.onamae.com/"
  title="ドメイン取得は最安値0円～｜ドメイン取るならお名前.com"
  description="お名前.comは国内最大級のドメイン公式登録サービスです。ドメイン登録実績2800万件を超えました。人気の.com .net .jpドメインを含め580種類以上のドメインを取り扱っています。ドメイン取得は早い者勝ちです。第三者に取得される前に、まずは検索を！新規登録と同時申込みでWhois情報公開代行が無料。"
  image="https://www.onamae.com/common/images/og.jpg"
/>

ここまでの設定でサイトをインターネット上に公開することができます。
（このあたりの流れについては別記事を作成する予定です）

# まとめ

本記事では、Next.js による開発をこれから始めたい方が最初にすべきことについて紹介しました。
必要ソフトウェアのインストールし、 Hello World を表示しました。
また、作成したソースコードを GitHub で管理できる状態にしました。

実際には、ここまでに作った土台の上に様々なコーディングをかけることで、ブログなどのサイトになるようにしていきます。
そのやり方については「Next.js」の検索ワードなどで調べながら少しずつ手を入れていただければと思います。

本ブログでも、様々なブログパーツの開発について紹介していきます。


Next.js の必要ソフトのインストール方法と開発環境構築について解説します。GitHubとも連携し、ソースコードを管理できる状態にします。