Laravel 8 のtailwindcssにGoogle fontsを入れてみた。

##筆者の立ち位置
+ php & Laravelの初学者
+ 現場での開発経験なし
+ 独学で地域活性化支援のアプリ制作を行うため、Laravelを学んでいる

##今回のやりたいこと
Laravel 8（Jetstream適用済み）の[tailwindcss](https://tailwindcss.com/)で[Google Fonts](https://fonts.google.com/)を使いたい。

https://tailwindcss.com/

https://fonts.google.com/

##きっかけ
明朝体で文章を書きたかったのですが、認証で使用する『Jetstream』でtailwindcssを使用しており、このCSSではデフォルトfont-familyに日本語対応のフォントが見当たらず。。。
追加しなくちゃなぁ、ということであれこれ調べました。

##今回の環境
Macのローカル環境

+ macOS Big Sur(バージョン 11.2.3)
+ MacBook Pro (Retina, 13-inch, Late 2013)

##事前準備

+ すでにLaravel 8が利用できる環境になっていること
+ パッケージ管理ツールであるnpmが使えること

まだの場合は後述の[参考](#参考)を参照のこと。

##導入
今回は２種類の導入方法について触れておきます。正直、どっちでもいい気がしますが、実際にLaravelで開発をされている方はどちらなのか、興味津々です。

1. [リンクタグによる導入](#リンクタグによる導入)
+ [importによる導入](#importによる導入)

###リンクタグによる導入
bladeファイルのヘッダに<link>タグを挿入し、styleを設定する方法。
index.blade.phpのコメントアウト業に説明書きを付与しております。
Qiitaの仕様なのか、拡張子.blade.phpだと色が変わらないのでちょっと寂しい。
厳密に言えば、.bladeは拡張子じゃないけれど。

```index.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Google fontsで使いたいフォントを選択し、linkタグをコピー＆ペーストする。 -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">

  <!-- スタイルを設定する -->
  <style>
    p {
      font-family: 'Noto Serif JP';
    }
  </style>

  <title>Document</title>
</head>
<body>
  <p>pタグ全般にfont-family: 'Noto Serif JP'が適用されるよ！</p>
</body>
</html>
```
style部分をtemplete化すると、もうちょっと導入しやすいのかも。tailwindcssのお得感はなくなってしまうところがちょっと残念。

###importによる導入

tailwindcssで使用しているapp.cssファイルに組み込んで使用する方法。

####開発側のapp.cssにimportデータを記載する。
WebApp
├ resources
　├ css
　　└ app.css

```app.css
// 今回新たにGoogle fontsで取得したimportのurlをコピー＆ペースト
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

// app.cssにデフォルトでimportされている項目
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

####tailwind.config.jsファイルにfont-familyを宣言する。

```tailwind.config.js

(中略)
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
// theme - extend - fontfamily 配下に 『Notoserif』とクラス名をつけて宣言しました。
                Notoserif: ['Noto Serif JP'],
            },
        },
    },

```

####本番側のapp.cssに反映させる
開発環境のresources/css/app.cssに追記した内容を本番環境のpublic/css/app.cssへ反映させる。
WebApp
├ public
　├ css
　　└ app.css
このファイルは直接いじらず、パッケージ管理で使用するnpmを使用して開発環境で設定した行を反映させる処理を行う。

```terminal
% npm install && npm run dev
```
####blade.phpで<link>タグを挿入し、css/app.cssを呼び出す。
VS Codeなどで新たにblade.phpを作成してhtml:5を展開した場合、リンクタグによるapp.cssの宣言が入っていないので、忘れずに書くこと。laravelでpublicフォルダ内のファイルを呼び出すときはasset()を使うのがおすすめ。

```index.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 本番環境のapp.cssを呼び出す -->
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">

  <title>Document</title>
</head>
<body>

<!-- tailwind.config.jsで宣言したクラスを、適用したいタグに付与する。 -->
  <p class="Notoserif">クラス名”Notoserif”のpタグに対してfont-family: 'Noto Serif JP'が適用されるよ！</p>

</body>
</html>
```

以上で、Google Fontsが使えるようになります。（いや、なったはず？！）
同じ操作をしてうまく行かなかった方、ぜひ情報交換したいです。

\#駆け出しエンジニアと繋がりたい

##参考

###事前準備
####composerのインストール

https://getcomposer.org/

####laravelのインストール
via composerの項目を参照（Docker使わないから）

https://laravel.com/docs/8.x#installation-via-composer

####テストアプリケーションの作成

```terminal
% laravel new WebApp
```

"WebApp"の部分は、お好きな名前をつけましょう。

####初期設定
+ .envの更新
+ config/app.phpの更新
+ sqliteファイルの作成
+ 動作確認

今回はローカル環境でのテストなのでDB_CONNECTION=sqliteに設定。
configフォルダ内のapp.phpには時刻設定（日本人ならtimezoneとlocaleを修正）。
databaseフォルダ内に新たなファイルdatabase.sqliteを作成。
この時点でmigrateしておくと、親切。

```terminal
% php artisan migrate
```

あとは適宜、良きに計らってくんなまし。

#### ~~tailwindcss~~ Jetstreamの導入
そもそも認証機能を使いたくてJetstreamを入れたら、tailwindcss使ってたというのが今回のネタにたどり着いた原因でもあるので、tailwindcss単体の導入と言うよりは、認証機能の追加ということでJetstreamの導入について触れておきます。

```terminal
% php artisan jetstream:install livewire --teams
% php artisan migrate
% npm install && npm run dev
```