k69blog
Cover Image for フロントエンド初心者でもOK！Next.jsでブログサーバを動かしてみる
フロントエンド初心者でもOK！Next.jsでブログサーバを動かしてみる

1. 概要

みなさんは、マークダウンでブログ記事がかけたら良いと思ったことがありませんか？

「WordPressでもマークダウン記述でブログ記事をかけるよ！」という思うかもしれません。
確かにWordPressはプラグインが豊富で、便利な機能も数多くありとても便利です。

しかし、たくさんの人が使っているありきたりフォーマットではなく、オリジナルで自分の好きなようにカスタマイズできる俺のブログサーバが作ってみたいという「あなた！」にうってつけの記事です。

今回の記事では、フロントエンド初心者が、フレームワーク（next.js）のサンプル（blog-starter-typescript）を動かす手順を丁寧に解説します。

サンプル（blog-starter-typescript）を動かしてみて、自分好みのデザイン（色やフォント）にカスタマイズします。

自分の好きなようにとにかくやってみることで、フロントエンドに関連することを学んでいきましょう。

キーワード：#next.js #tailwindcss #markdown #type-script #node.js #yarn についてイメージを学ぶことができます。

2. 前提条件

※ 前提条件の環境は下のURLを参考にしてください

https://k69blog.com/posts/setup-dev-env

3. 目的

今回の記事では、

  1. 「next.jsの開発環境」について学ぶ。
  2. 「next.jsのサンプル（ブログ スターター）」を動かし、雰囲気をつかむ。
  3. 「next.jsのサンプル（ブログ スターター）」をカスタマイズし、next.js や tailwindcss の雰囲気をつかむ。

の流れで、フロントエンドに関連することを学ぶことを目的としています。

4. 目次

5. 内容

Visual Studio Code + gitbash を使ってNext.jsのサンプルをさっそく動かしてみましょう！

Visual Studio Code + gitbash の環境構築がまだの方はこちらを参考にしてみてください。

5.1. Next.jsのサンプルを動かす

next.jsを動かす環境で、早速サンプルを動かしてみます。
blog-starter-typescriptサンプルは（blog-starter-typescript）」を使用します。

https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript

  1. blog-starter-typescriptをセットアップする
    任意のディレクトリにblog-starter-typescriptをセットアップします。
    ここではホームディレクトリ（~）直下にgitフォルダを作成します。

Visual Studio Code の ターミナル（gitbash）で下記コマンドを実行します。

セットアップ
 mkdir -p ~/git
 cd ~/git
 yarn create next-app --example blog-starter-typescript blog-starter-typescript-app

インターネット回線の状況によりますが、ダウンロードに数分かかる場合があります

コマンド実行例
実行例
  $ mkdir -p ~/git
  $ cd ~/git
  $ yarn create next-app --example blog-starter-typescript blog-starter-typescript-app
  yarn create v1.22.17
  [1/4] Resolving packages...
  [2/4] Fetching packages...
  [3/4] Linking dependencies...
  [4/4] Building fresh packages...
  success Installed "create-next-app@12.0.10" with binaries:
        - create-next-app
  [##] 2/2Creating a new Next.js app in C:\Users\hoge\git\blog-starter-typescript-app.

  Downloading files for example blog-starter-typescript. This might take a moment.

  Installing packages. This might take a couple of minutes.

  yarn install v1.22.17
  info No lockfile found.
  [1/4] Resolving packages...
  [2/4] Fetching packages...
  [3/4] Linking dependencies...
  [4/4] Building fresh packages...
  success Saved lockfile.
  Done in 21.58s.

  Initialized a git repository.

  Success! Created blog-starter-typescript-app at C:\Users\hoge\git\blog-starter-typescript-app
  Inside that directory, you can run several commands:

    yarn dev
      Starts the development server.

    yarn build
      Builds the app for production.

    yarn start
      Runs the built app in production mode.

  We suggest that you begin by typing:

    cd blog-starter-typescript-app
    yarn dev

  Done in 26.19s.
  1. blog-starter-typescriptを起動する
    ターミナル（gitbash）で下記コマンドを実行します。
サンプルを起動
cd ~/git/blog-starter-typescript-app
yarn dev
コマンド実行例
実行例
$ yarn dev
yarn run v1.22.17
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.

The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

        - incremental was set to true

event - compiled client and server successfully in 1450 ms (127 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 75 ms (128 modules)
wait  - compiling /posts/[slug] (client and server)...
event - compiled client and server successfully in 560 ms (443 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 181 ms (454 modules)

下記ダイアログが表示された場合は、アクセスを許可するボタンを押下してください。
Google Trends

  1. サンプルの画面を表示する
    http://localhost:3000 にアクセスし、下記の場面が表示されればOKです。

サンプル画面

5.2. blog-starter-typescriptサンプルをカスタマイズする

ブログサーバが動いたところで自分のサンプルブログを書いたのち、カスタマイズして楽しみながら、next.js や tailwindcss の雰囲気を味わってみましょう。

5.2.1. 自分のサンプルブログを書いてみる

このブログサーバ（blog-starter-typescript-app）では、Markdownを使ってブログを書くことができます。

markdown（マークダウン）とは、文章の書き方です。 https://commonmark.org/help/

はじめから用意されているブログサンプル~/git/blog-starter-typescript-app/_posts/hello-world.mdをさっそくカスタマイズしてみましょう。

今回解説した変更を実施すると画面が下記のようにカスタマイズされます。

5.3.2.1. 変更前

タイトルと本文が同じ色合いなのでタイトルが目立たないです。
変更前サンプル画面

5.3.2.2. 変更後

タイトルに背景色をつけることでタイトルが目立ちます。
変更後サンプル画面

.md（マークダウンファイルの記事）は_postsフォルダ配下に格納します

ターミナルでyarn dev を実行し、http://localhost:3000 で画面を見ながら作業します。

title:を自己紹介ホームページにするなど、自由に編集してみましょう。

hello-world.md編集例
hello-world.md
---
title: 'スズコウの自己紹介ページ'
excerpt: '何事にも好奇心をもって楽しむことをモットーにしています。最近はプログラミング言語に興味があり勉強しているところです。'
coverImage: '/assets/blog/hello-world/cover.jpg'
date: '2022-09-12T21:29:10.000Z'
author:
  name: スズコウ
  picture: '/assets/blog/authors/my-photo.png'
ogImage:
  url: '/assets/blog/hello-world/cover.jpg'
---

## Personal Information
- 名前:鈴木 幸之助 (架空の人物)
- ニックネーム:suzukou

### コメント
何事にも好奇心をもって楽しむことをモットーにしています。   
最近はプログラミング言語に興味があり勉強しているところです。

### パーソナル情報
![my-photo](/assets/blog/hello-world/my-photo.png)
- 誕生日: 1989.2.10
- 性別: 男
- 趣味: 音楽、スノボ、バイク、キャンプ
- 特技: ダンス、ビートボックス

### 仕事
- 今の仕事: 広告代理店
- できること: 広報、営業、プロモーション企画、プログラミング（これから）
- 職歴: IT業界の営業（約2年）、広告代理店営業（約8ヶ月）
追加・編集したファイルの格納場所 (★部分参照)
ディレクトリ構造抜粋
~/git/blog-starter-typescript-app
  ├─.next
  │  ├─cache
  │  ├─server
  │  └─static
  ├─@types
  ├─components
  ├─lib
  ├─node_modules
  │  ├─.bin
  │  ├─@babel
  ├─pages
  │  └─posts
  ├─public
  │  ├─assets
  |  |  └─blog
  |  |      ├─authors
  |  |      │      jj.jpeg
  |  |      │      joe.jpeg
  |  |      │      tim.jpeg
  |  |      │      my-photo.png   ★追加
  |  |      ├─dynamic-routing
  |  |      │      cover.jpg
  |  |      ├─hello-world
  |  |      │      cover.jpg
  |  |      │      my-photo.png   ★追加
  |  |      └─preview
  |  |              cover.jpg
  │  └─favicon
  ├─styles
  ├─types
  └─_posts
      dynamic-routing.md
      hello-world.md        ★編集
      preview.md

このように編集内容が画面に表示されればOKです。

自己紹介サンプル画面

5.2.2. 自分のサンプルブログをカスタマイズ

自分のサンプルブログができたところで、色のカスタマイズをしてみましょう。
このサンプルブログは tailwindcss が使用されています。

CSSの設定は、~/git/blog-starter-typescript-app\components\markdown-styles.module.cssに tailwindcss の書式で記載されているので、このファイルを変更してみましょう。

markdown-styles.module.css 修正箇所
markdown-styles.module.css
.markdown {
  @apply text-lg leading-relaxed;
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote {
  @apply my-6;
}

.markdown h2 {
  @apply text-3xl mt-12 mb-4 leading-snug bg-orange-300;  ★ 修正
}

.markdown h3 {
  @apply text-2xl mt-8 mb-4 leading-snug bg-orange-100; ★ 修正
}

背景色以外にも、文字サイズ、文字色、パッディングなどさまざまなCSSコンポーネントがあります。
最初はここを参考にしてどのようなことができるか見てみましょう。

tailwindcssは、比較的新しいCSSフレームワークです。そしてCSSはWebページの見た目・デザインを表現するためのスタイルシート言語です。基本となるのでHTMLと合わせてどのようなものか抑えておきましょう。

HTMLのタグ<h2>と<h3>にオレンジ色の背景色を付けました。
画面のどの部分（どのHTMLタグ）を修正するべきか確認するには、ブラウザのデベロッパーツールを使用すると確認しやすいので、かんたんな使い方を見てみます。

5.3.2.3. デベロッパーツール

フロンドエンドを開発する上で避けて通れないツールです。
このツールを使って不具合の原因を追求（デバッグ）をします。

5.3.2.3.1. 起動方法

Chromeの場合、デベロッパーツールは F12ボタンで起動できます。
※ Chrome画面に赤枠の画面が表示されます
デベロッパツール

5.3.2.3.2. 変更したいHTMLタグを特定する

画像右上にあるアイコンを選択し、変更したい場所にマウスカーソルを合わせると、ポップアップで<h3>などのHTMLタグが表示されます。
デベロッパツール

5.2.3. フォントのカスタマイズ

今度はフォントの内容をカスタマイズします。デザインより違いがわかりやすいフォント（HGP行書体）にします。まずは変更イメージから。

5.3.3.1. 変更前

デフォルトらしいフォントです。可もなく不可もなしというところでしょうか。
変更前フォント

5.3.3.2. 変更後

変化をつけて行書体にします。オリジナリティはありますが、好みは分かれるところでしょうか。
変更後フォント

5.3.3.3. カスタマイズ方法

下のURLを参考にしてフォントを変更します。

https://tailwindcss.jp/docs/theme#referencing-the-default-theme

5.3.3.3.1. 修正前
tailwind.config.js
module.exports = {
  content: ['./components/**/*.tsx', './pages/**/*.tsx'],
  theme: {
    extend: {},
  },
  plugins: [],
}
5.3.3.3.2. 修正後
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: ['./components/**/*.tsx', './pages/**/*.tsx'],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'HGP行書体',   ★ 好きなフォントを指定
          defaultTheme.fontFamily.sans,
        ]
      }
    }
  },
  plugins: [],
}

フォントは Windows 10 にあるフォントから選びます。

Windows 10 にあるフォントの種類を確認する方法はこちら。
  1. フォントの種類は Windowsキー ＋ s で 検索ボックス を開く
  2. 検索ボックス に "font" と入力し、フォント設定を開く
    変更後フォント
  3. 好きなフォントを選んで設定する
    変更後フォント

6. まとめ

フレームワーク（next.js）のサンプル（blog-starter-typescript）を動かし、サンプル（blog-starter-typescript）をカスタマイズできたでしょうか。

本記事では一部の色やフォントをカスタマイズしましたが、みなさんが納得できるデザイン には程遠く、この記事では情報が不足しています。

しかし、試行錯誤しながらとにかくやってみることで、フロントエンド関連の知識を身につける事ができます。

筆者自身もフロントエンドは素人ですが、このブログサーバ育てていきますので、みなさまと一緒に学んでいくことができれば幸いです。

本記事を読んでいただきありがとうございまいた。
少しでもみなさまのお役に立てばうれしいです。

© 2022 k69

本サイトを通じて、たくさんの人がプログラミングに興味を持ち、 これがキッカケでモノづくりの楽しさに触れることができれば幸せです！

リンク運用者情報プライバシーポリシー