Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 3】

ブログ作成についてまとめました。

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 3】

Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 1】

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 1】

Next.js+Tailwind CSSの環境でGoogleフォントを設定してみました。

## はじめに
フォントってけっこう気になりません？私はとても気になります。ちょうど作成中のプロジェクトでデフォルトのフォントがあまり気に入らなかったのでGoogleフォントから好みのフォントを適用してみました。

## Googleフォント（Google Fonts）とは
Google社が提供するWeb上で利用できる無料（商用利用可）のフォントサービスです。[Wikipedia](https://en.wikipedia.org/wiki/Google_Fonts)によると、2010にサービスが開始され、2023年6月時点では1,527種類のフォントが提供されているようです。

## 利用方法
基本的には、1.使用したいフォントの選択、2.フォントの調整、3.プロジェクトへの反映の3ステップで利用できるので簡単です。
### 使用したいフォントの選択（1/3）
* まず[Googleフォント](https://fonts.google.com/)にアクセスして好きなフォントを選択しましょう。
* 今回は"Roboto"というフォントを選んでみます。選んだポイントは、、、何となくです。

### フォントの調整（2/3）
* 続いて選択したフォントを調整します。ここではフォントの重み（font-weight）、大きさ（font-size）、イタリックorNotの調整をします。
* 今回は"Light 300"というものを使ってみましょうかね。下画像の小さい赤枠のSelect Light 300 +ボタンを押すと（現在選択済みなので`Remove~`と出てしまっていいますが）、画面右側の`Selected family`に、大きい赤枠の通り選択中のフォントが表示されます。※もし右側の`Selected Family`のモーダルが出てこない場合は、画面右上の四角形3つと十字のアイコンを選択すれば出てきます。この中の情報をNext.jsプロジェクト側で設定します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/googlefonts-nextjs-tailwindcss1_qvw2h4" />

 
### Next.jsプロジェクトへの反映（3/3）
#### pages/_app.jsの作成
* Googleフォントで選んだフォントをプロジェクト全体で利用するためには、まず`pages`ディレクトリ内に新しく`_app.js`というファイルを作成します。Next.jsの[documentation](https://nextjs.org/docs/basic-features/font-optimization#usage)内にもフォント追加ための同ファイル作成方法の記載があります。
<script src="https://gitlab.com/-/snippets/2567483.js"></script>
1. (l.1)Googleフォントで探し出した、使用したいフォントをインポートします。
2. (l.4)フォントの重みを決めます。今回は`font-weight`を300に指定します。
3. (l.5)フォントの変数を決めます。こちらは次に設定する`tailwind.config.js`から参照するために設定が必要な項目になります。

#### tailwind.config.jsへの追記
* 続いて`tailwind.config.js`を修正していきます。
<script src="https://gitlab.com/-/snippets/2567484.js"></script>
1. (l.8~l.11)`extend`内に`fontFamily`を用意し、その中で`pages/_app.js`で設定したフォントの変数を設定します。これでGoogleフォントを使うための設定は完了しました。

あとは下のようにクラス内に記述するだけで設定したフォントを適用できます。
```
<div className="font-roboto">こんにちは地元</div>;

```

## 注意
最後にこんなこと書くのもですが、2022年ドイツ、ミュンヘンの地裁でGoogleフォントがGDPR違反であるという判決を受けました。[The Hacker News](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)によると、ユーザーのIPアドレスが許可なくGoogleに送信されているからという理由のようです。GDPRというのは四方八方から横槍入れてくれますよね〜。司法だけに。

## まとめ・参考
絶対に日本国内からしかアクセスできない情報であれば現状問題はないと思いますが、GDPR絡みのこともあるので、ローカルでホストする方法を模索する必要もありそうです。
* [Next.js - Font Optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts)
* [Wikipedia - Google Fonts](https://en.wikipedia.org/wiki/Google_Fonts)
* [The Hacker News - German Court Rules Websites Embedding Google Fonts Violates GDPR](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)

Googleフォントの使い方（Next.js + Tailwind CSS）

Markdownの書き方と良い点悪い点についてまとめました。

## はじめに
MarkdownはQiitaやTumblr等様々なメディアにおいて標準的な記述スタイルとして使われていますが、慣れれば使いやすい一方使わないとすぐ忘れてしまうのが玉に瑕。というわけでチートシート的なものを作りましてん。

## What is Markdown?
### そもそも
[Wikipedia](https://ja.wikipedia.org/wiki/Markdown)によると、HTMLをはじめとしたマークアップ言語を簡素化したもので、誰でも簡単にウェブ上で文章を書けるようにした記法ということで覚えておけば大丈夫かと思います。文章を書く際に、いちいち<>で括るの面倒ですものね。

## Pros & Cons
ここで、良い点・悪い点をまとめてみます。このセクションは飛ばしてもらっても全く問題ありません。
### Pros
1. HTMLタグ使用可能：
 * Markdown記法をしっかりと覚えていなくても、一応HTMLが使えます。~一番目に書く事ではない。~

2. 記述スピードの高速化：
 * HTMLタグは基本<>で括ります。あれかなり面倒ですよね。Markdownであれば普段からキーボード操作で使用する()や*等の記号を使って文章を作成するため、比較的直感的にかつ高速に記述することができます。

3. スタイルを引き継がない：
 * 他サイトからコピー&ペーストをしても、スタイルが引き継がれないので、楽にコピー＆ペーストができ文章作成の効率化につながります。

### Cons
1. タイポが増える場合がある：
 * 若干個人的意見が混じりますが、Markdown記法では記号を頻繁に使用しますが、HTMLと違ってタグを使用しない分、タイポに気づくのに時間がかかりがちです。ブラウザの「検証」で確認すればMarkdownもHTMLに変換されるのでタイポに早く気づけると思います。

2. 全てのHTMLタグをMarkdownに置き換えられるわけではない：
 * Prosの1つ目の裏返しですが、覚えたは良いが全要素を置き換えられるわけではないので、HTMLとMarkdownが混在してしまいかえって使いづらいと感じることもあるかもしれませんね。

## Markdownの代表的なもの（対応表）
お待たせしましたチートシートです。
下表のものはよく使うので覚えておくと楽だと思います。ちなみにこのチートシート自体もMarkdownで記述しています。
| 項目 | HTML | Markdown |
| :-- | :-- | :-- |
| 見出し | &lt;h1&gt;見出し1&lt;/h1&gt; &lt;h2&gt;見出し2&lt;/h2&gt; &lt;h3&gt;見出し3&lt;/h3&gt; &lt;h4&gt;見出し4&lt;/h4&gt; &lt;h5&gt;見出し5&lt;/h5&gt; &lt;h6&gt;見出し6&lt;/h6&gt; | # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 |
| 太文字 | &lt;strong&gt;太文字&lt;/strong&gt; | \** 太文字 ** |
| イタリック | &lt;em&gt;イタリック&lt;/em&gt; | \*イタリック* |
| 太文字+イタリック | &lt;strong&gt;&lt;em&gt;太文字イタリック&lt;/em&gt;&lt;/strong&gt; | \** \*太文字イタリック*** |
| 引用 | &lt;blockquote&gt;引用&lt;/blockquote&gt; | \> 引用 |
| 打ち消し・取り消し | &lt;del&gt;打ち消し・取り消し&lt;/del&gt; &lt;s&gt;打ち消し・取り消し&lt;/s&gt; | \~打ち消し・取り消し~ |
| エスケープ | &lt;要素&gt;文字列&lt;/要素&gt; | ＼要素 |
| コード | &lt;code&gt;console.log(2022)&lt;/code&gt; | \`console.log(2022)` |
| 順序のあるリスト | &lt;ol&gt; &lt;li&gt; ひ &lt;/li&gt; &lt;li&gt; ふ&lt;/li&gt; &lt;li&gt; み&lt;/li&gt; &lt;li&gt; ん&lt;/li&gt; &lt;/ol &gt; | 1. ひ 2. ふ 3. み 4. ん |
| 順序のないリスト | &lt;ul&gt; &lt;li&gt; ひ &lt;/li&gt; &lt;li&gt; ふ&lt;/li&gt; &lt;li&gt; み&lt;/li&gt; &lt;li&gt; ん&lt;/li&gt; &lt;/ul &gt; | \* ひ \* ふ \* み \* ん |
| リンク | &lt;a href="http://www.yahoo.co.jp/"&gt;Yahoo&lt;/a&gt; | \[Yahoo](http://www.yahoo.co.jp/) |
| 下線、水平線 | &lt;hr&gt; | \--- \___ \*** |

## まとめ・参考
他にもまだまだMarkdown形式で表現できるものはありますが、詳しくは以下ガイド参考にしてみてください。

### 参考
* [Wikipedia - Markdown](https://ja.wikipedia.org/wiki/Markdown)
* [Markdown Guide](https://www.markdownguide.org/about/)