## iPadでノートとペン、参考書がひとまとまりに
iPadを購入して、資格試験（データベーススペシャリスト）に向けた勉強をiPadのみで行ってみました。

購入したのが6月、データベーススペシャリストの試験が10月なので、4ヶ月使ったことになります。

自分の中でも使い方がかなり固まってきたので、ご紹介していきたいと思います。

## 使っているデバイスの紹介
まずは使用しているiPad本体と周辺機器から紹介していきます。

### 11インチのiPad Pro(2020年版)
本体は[iPad Pro 2020年版](https://www.apple.com/jp/ipad-pro/)。
画面サイズは11インチ、容量は128GBです。

本体の大きさはB5サイズとほぼ同じぐらいですね。

iPad Proを選んだ理由は、Apple Pencilの第2世代が使えるから。

2020年10月現在、Apple Pencil第2世代はiPad Proのみに対応しています。

その他のiPadシリーズでも第1世代のApple Pencilなら使えます。

第1世代と第2世代の大きな違いは充電の仕方です。

第1世代はおしりのところが外れるようになっていて、ライトニング端子がついています。
ライトニング端子をiPad本体につなげて、充電をします。

一方、第2世代はiPad本体にマグネットでぱっとくっつける。これだけで充電ができます。

私はずぼらな性格なので、昔から電子機器のこまめな充電というものが苦手で……。

第2世代であれば、iPad本体の充電さえして、Apple Pencilは常に本体にくっつけておけば充電の心配はないな、と感じたわけです。

そして見事に大当たりでした。

4ヶ月使う中で、Apple Pencilの充電が足りずに困った！という事態は起きていません。

### Apple Pencil第2世代
iPad Proのところで大分語ってしまっていますが、そもそもiPadが使いたいというより、Apple Pencilが使いたかったというのが大きいです。

[Apple Pencil第2世代](https://www.apple.com/jp/shop/product/MU8F2J/A/apple-pencil%E7%AC%AC2%E4%B8%96%E4%BB%A3)

Java Silver合格までにやったことのまとめ記事でも書いているのですが、元々資格試験に向けた勉強を紙の問題集とペンでやっていて、持ち歩きがかなり重たかった……。

[Oracle認定Java Silver合格！合格のためにやったことまとめ](/study-for-java-silver/)

Apple Pencilで問題を解くところを電子化できれば、問題集を持ち歩く必要がなくなるなと思ったわけです。

元々参考書はKindle版で購入して、スマホで見ることが多かったので、「書く」というところが電子化できるというのが大きかった。

現状、一番ストレスなく使えそうなタブレットとペンの組み合わせがiPad ProとApple Pencilかなと思います。

### 本体カバー
本体カバーはマグネットでくっつくやつを使っています。

純正品ではなく、Amazonで売っている安いものです。

本体を保護するというよりは、Apple Pencilがはずれてどこかに行ってしまうというのを防止するために使っています。

<div class="cstmreba"><div class="kaerebalink-box"><div class="kaerebalink-image"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_202010250105255856?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/1001/0004/589/753/078/598/10010004589753078598_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info"><div class="kaerebalink-name"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_202010250105255856?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F" target="_blank" rel="nofollow" >ESR 11インチiPad Pro 第2世代/第1世代 用ケース Smart Folio ブラック ES18859</a><div class="kaerebalink-powered-date">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail"></div><div class="kaerebalink-link1"><div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_202010250105255856?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F" target="_blank" rel="nofollow" >楽天市場</a></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/gp/search?keywords=ESR%20iPad%20Pro%2011%20%E3%82%B1%E3%83%BC%E3%82%B9&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=sakelog-22" target="_blank" rel="nofollow" >Amazon</a></div></div></div><div class="booklink-footer"></div></div></div>

### ペーパーライクフィルム

画面にはペーパーライクフィルムを貼っています。

ペーパーライクフィルムとは表面がざらざらしている液晶フィルムのこと。Apple Pencilが引っかかることで、紙のような書き心地になります。

何もないとつるっとしすぎてペンが滑っていってしまうので、iPadをノートのように使うなら必須だと思います。

<div class="cstmreba"><div class="kaerebalink-box"><div class="kaerebalink-image"><a href="https://hb.afl.rakuten.co.jp/hgc/g00tm716.d5yy4646.g00tm716.d5yy5d6c/kaereba_main_202010250922365007?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Ftszshop%2F4919600864757%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Ftszshop%2Fi%2F10018308%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/tszshop/cabinet/r_1583407016/4919600864757.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info"><div class="kaerebalink-name"><a href="https://hb.afl.rakuten.co.jp/hgc/g00tm716.d5yy4646.g00tm716.d5yy5d6c/kaereba_main_202010250922365007?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Ftszshop%2F4919600864757%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Ftszshop%2Fi%2F10018308%2F" target="_blank" rel="nofollow" >「JPフィルター専門製造所」iPad Pro 12.9 2018-2020年モデル用 ペーパーライク フィルム 紙のような描き心地 反射低減 非光沢 アン</a><div class="kaerebalink-powered-date">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail"></div><div class="kaerebalink-link1"><div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/16f1452c.e6258d90.16f1452d.b13f27e1/kaereba_main_202010250922365007?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FJP%25E3%2583%2595%25E3%2582%25A3%25E3%2583%25AB%25E3%2582%25BF%25E3%2583%25BC%25E5%25B0%2582%25E9%2596%2580%25E8%25A3%25BD%25E9%2580%25A0%25E6%2589%2580%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt&m=http%3A%2F%2Fm.rakuten.co.jp%2F" target="_blank" rel="nofollow" >楽天市場</a></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/gp/search?keywords=JP%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E5%B0%82%E9%96%80%E8%A3%BD%E9%80%A0%E6%89%80&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=sakelog-22" target="_blank" rel="nofollow" >Amazon</a></div></div></div><div class="booklink-footer"></div></div></div>

## 使っているアプリの紹介

ここからは具体的に使っているアプリについてご紹介していきます。

### ノート編１：GoodNotes 5

<div class="appreach"><img src="https://is2-ssl.mzstatic.com/image/thumb/Purple114/v4/eb/d9/b0/ebd9b0b5-c457-d234-2612-21873fdf5418/source/512x512bb.jpg" alt="GoodNotes 5" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">GoodNotes 5</p><p class="appreach__info"><span class="appreach__developper">Time Base Technology Limited</span><span class="appreach__price">¥980</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/goodnotes-5/id1444383602?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a></div></div>

iPadではかなり有名な手書きノートアプリです。

これはそのまま、手書きのノートの代わりになります。

有名アプリなので、使い方説明の動画がたくさんYouTubeにアップされているのもうれしいところ。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/xIJHYI6VEGs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

手書きノートの代わりになるだけでなく、PDFを取り込んで、そのまま書き込みもできます。

この機能は過去問演習をする上でかなり役に立ちました。

私は主に過去問の問題PDFを取り込んで、解きながらメモを書き込んだり、解答用紙のPDFを取り込むのに使っていました。

### ノート編２：MapNote2

<div class="appreach"><img src="https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/1b/39/a4/1b39a48d-7b22-ef22-c6e2-1814d3f399b7/source/512x512bb.jpg" alt="MapNote2 - 無限に広がるアイデアノート -" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">MapNote2 - 無限に広がるアイデアノート -</p><p class="appreach__info"><span class="appreach__developper">Naoya Enokida</span><span class="appreach__price">¥610</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/mapnote2-%25E7%2584%25A1%25E9%2599%2590%25E3%2581%25AB%25E5%25BA%2583%25E3%2581%258C%25E3%2582%258B%25E3%2582%25A2%25E3%2582%25A4%25E3%2583%2587%25E3%2582%25A2%25E3%2583%258E%25E3%2583%25BC%25E3%2583%2588/id1488198559?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a></div></div>

このアプリを一言で表せば**大きな模造紙**です。

手書きができるアプリなのですが、自分が書いた範囲に応じてどんどん書ける範囲が無限に広がっていってくれます。

マインドマップを作るときに便利です。

iPadには他にもマインドマップ用のアプリがそろっているのですが、文字を打つ必要があるものが多いです。

ざっくりと知識を整理したいときにはやはり手書きの方が早いですね。

GoodNotes 5で細かい部分をまとめつつ、用語のつながりはMapNote2で整理するというように使っています。

### 参考書編１：Kindle

<div class="appreach"><img src="https://is1-ssl.mzstatic.com/image/thumb/Purple124/v4/1f/b1/e5/1fb1e520-3d70-6107-5e07-8352f4845d65/source/512x512bb.jpg" alt="Kindle" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">Kindle</p><p class="appreach__info"><span class="appreach__developper">AMZN Mobile LLC</span><span class="appreach__price">無料</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/kindle/id302584613?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a><a href="https://play.google.com/store/apps/details?id=com.amazon.kindle" rel="nofollow" class="appreach__gplink"><img src="https://nabettu.github.io/appreach/img/gplay_ja.png"></a></div></div>

参考書、問題集は基本的にKindle版を購入しています。

KindleではApple Pencilの手書き書き込みはまだできないので、それができるようになったら最高ですね。

Kindle版で何か書き込みしたいときは、スクリーンショットを取って、Good Notes5に取り込んでから書き込みをしています。

### 参考書編２：Documents by Readdle

<div class="appreach"><img src="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/3c/09/f5/3c09f530-ac27-b98b-4743-72c6b4855aea/source/512x512bb.jpg" alt="Documents by Readdle" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">Documents by Readdle</p><p class="appreach__info"><span class="appreach__developper">Readdle Inc.</span><span class="appreach__price">無料</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/documents-by-readdle/id364901807?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a><a href="https://play.google.com/store/apps/details?id=com.documents.byreaddle.filemanager_mediaplayer" rel="nofollow" class="appreach__gplink"><img src="https://nabettu.github.io/appreach/img/gplay_ja.png"></a></div></div>

PDFの資料はDocuments by Readdleで参照。

特に私が使っていた参考書、翔泳社の『情報処理教科書 データベーススペシャリスト』は大量の過去問解説を読者特典でPDF配布…という本なので、解説のビューアーとして大活躍でした。

2ページを1画面に表示する機能が付いているのが他にはなかなかないので使っています。

他にはGoogle Driveなど、各種クラウドストレージと連携できるのが嬉しいですね。

## 便利機能を使いこなす

iPadを使って勉強をする上で欠かせない便利機能を2つ紹介します。

### Split View

いわゆる画面分割です。この機能を使うことで、参考書とノートを横に並べて開くということが可能になります。

Split Viewの具体的なやり方は下記の動画がわかりやすいです。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/l4HJctDlCMQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

ただし、Split View対応アプリでないと2画面表示ができないので注意です。

上で紹介したアプリはすべてSplit View対応です。

### Apple Pencilで瞬時にスクリーンショット

スクリーンショットはApple Pencilを使うとかなり素早く行うことができます。

画面の端からApple Pencilをすべらせるだけです。

こちらも具体的なやり方は動画で紹介されています。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/aB3XqPx1siw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 文字入力はまだまだしにくい

ここまで紹介してきたiPadでの勉強法ですが、文字を打って整理するという部分はまだやりにくいかな、という印象です。

勿論、純正でもキーボードが出ているので、そういったものを使えばすらすら打ち込めると思います。

ただ、持ち運んで使いたい！　ということを考えると、キーボードをつけると重くなってしまうのがネックです。

最近のiPadOSアップデートで、手書きの文字を瞬時に変換してくれるScribbleという機能が搭載されたのですが、まだ日本語には対応していないです。

この機能が日本語対応になったら大分文字入力は楽できそうですね。

最初にあげたように、紙とペン、参考書の代わりと割り切ってしまえば、iPadとApple Pencilはかなり使えるツールだと思います。

この機会に、電子での勉強に切り替えてみるのはいかがでしょうか。

iPadを使っての勉強法がかなり固まってきたのでまとめます。iPadの購入を迷っている方、iPadをもっとうまく活用したいという方はぜひ参考にしてください。

iPadを使った勉強法まとめ【2020年10月最新版】

このブログの一番最初の投稿は2020/1/12。

[GatsbyJSでブログを作ってみた][1]が記念すべき最初の投稿です。

どんなブログでも一番最初の投稿って後から見返すと、こっ恥ずかしいですね。

気づいたらブログを始めて半年近く経っていました。

最初の頃から色々と変わったこともあるので、この機会にブログの構成について振り返ってみたいと思います。

## ブログの仕組み部分を初期と比べてみる

まずはこのブログがどうやって作られているのかです。

### 初期

![初期のブログ作成システム][2]

初期は[gatsby-source-filesystem][3]を使って、ローカルのmarkdownファイルを記事データとして読み込んでいました。

1. ローカルでソースコード、記事データの作り込み
2. ローカルで作り込んだものをGitHubにpush
3. GitHubにpushされるとNetlifyで自動的にbuild

の流れです。

思い返すと、かなりGatsbyJS公式のチュートリアルに沿った形でソースも記事の取得方法も設定していましたね。

[Gatsby.js Tutorials | GatsbyJS][4]

GatsbyJS? GraphQL? git?

……全部わからん！ 状態からスタートしたので、まぁこんなもんかな……。

今思い返すとこんな右も左も分からない状態からGatsbyJS×GitHubでブログを作ろうと思い立ったもんです……。

元々WordPressに嫌気が指していた時期なので、代わりになる技術を探していたんですよね。

静的サイトジェネレータがいいらしい！ → GatsbyJSが人気らしい！ という結構安直な理由でした。

### 現在

今の仕組みとしてはこんな感じです。

![現在のブログ作成システム][5]

今はHeadless CMSのContentfulを導入して記事の管理をしています。

1. ソースコードはローカルで作り込み
2. ソースコード修正をGitHubにpush
3. GitHubにpushされるとNetlifyで自動的にbuild
4. 記事はContentful上で作成
5. 作成が完了したらApp機能を使ってNetlifyのbuildを走らせる

の流れです。

Headless CMSを導入した理由は、記事が増えてくるにつれて、「あの記事書き直したいけどどこだっけなぁ……」となっていたため。

ファイル名=記事のURLなので、なんとなくファイル名から予測して、1個1個開いたり、自分のサイト見てファイル名見てきたり……とちょっと手間でした。

100記事とかいってしまうと移行も大変になるだろうし、早めに移行してしまおう！ということで移行してしまいました。

NetlifyCMS → microCMS → Contentfulの順に試してContentfulに決めました。

Contentfulに決めたのはMarkdown連携のしやすさです。

フィールドタイプをtext → Markdownに設定すると、[gatsby-transformer-remark][6]系のプラグインがそのまま使えるのが大きかった。

## ソースコードの構成について

このブログのソースコードに関わる部分を抜き出すとこんな感じになります。

実際のソースコードはGitHubにアップしていますので、そちらをご参照ください。

[ソースコード][7]

```text
├ src
│  ├ components
│  ├ img
│  ├ pages
│  ├ styles
│  │　├ css
│  │　└ scss
│  ├ templates
│  └ utils
│
├ gatsby-node.js
├ gatsby-node
│ └ index.tsx
│
├ codegen.yml
├ types
│ └ graphql-types.tsx
│
└ gatsby-config.js
```

それぞれをざっくり説明。

### src

| ファイル・フォルダ | 説明              |
| ----------------- | ----------------- |
| components        | 細かいパーツ       |
| img               | 素材として使う画像 |
| pages             | ページとして読み込むファイル。問い合わせページやタグ一覧など、Contentfulだけでは管理しきれないもの|
| styles            | スタイルシート。SCSSで開発して、CSSにコンパイル|
| templates         | ページ作成用のテンプレート |
| utils             | ユーティリティ     |

### gatsby-node

ts-nodeを使用してTypeScript化をしています。

実際のソースはgatsby-node内のindex.tsx内に記述。

gatsby-nodeのTypeScript化については、下記記事を参考にさせていただきました。

* [Gatsby.js を完全TypeScript化する - Qiita][8]
* [Gatsby + ContentfulをTypeScript化する - Qiita][9]

### GraphQL Code Generator

下記はGraphQL Code Generator周りです。

TypeScriptの型指定に使っています。

```text
├ codegen.yml
├ types
│ └ graphql-types.tsx
```

GraphQL Code Generatorについては紹介記事を書いているので、そちらを参考に。

[GraphQL Code Generatorのススメ！GatsbyJSのTypeScript化][10]

### gatsby-config

gatsby-config.jsは主にプラグインの設定用です。

今インストールしているプラグインを洗い出してみました。

| プラグイン | 説明 |
| --------- | ----- |
|[gatsby-plugin-react-helmet][11]|メタ情報作成用|
|[gatsby-plugin-sitemap][12]|Googleに送るsitemap作成用|
|[gatsby-plugin-google-tagmanager][13]|GoogleTagManager導入用|
|[gatsby-plugin-lodash][14]|ビルド時のlodashサイズ削減|
|[gatsby-plugin-typescript][15]|TypeScriptファイルを読み込めるようにする|
|[gatsby-plugin-offline][16]|PWA化|
|[gatsby-plugin-manifest][17]|gatsby-plugin-offlineと組み合わせて使う。manifestファイルの作成|
|[gatsby-source-filesystem][18]|ファイル読込|
|[gatsby-plugin-sharp][19]|gatsby-transformer-sharpと組み合わせて使う。画像最適化|
|[gatsby-transformer-sharp][20]|gatsby-plugin-sharpと組み合わせて使う|
|[gatsby-source-contentful][21]|Contentfulのコンテンツ取得|
|[gatsby-transformer-remark][22]|markdown変換|
|[gatsby-remark-autolink-headers][23]|見出し部分に自動でアンカーリンクをつける|
|[gatsby-remark-code-titles][24]|gatsby-remark-prismjsと組み合わせて使う。コードブロックに見出しをつける|
|[gatsby-remark-prismjs][25]|コードブロックのシンタックスハイライト|
|[gatsby-remark-custom-blocks][26]|markdown中に特定の記法でカスタムブロックを埋め込める|
|[gatsby-remark-external-links][27]|外部リンクを別画面で開く|
|[gatsby-plugin-catch-links][28]|markdown中の内部リンクをLinkタグに置き換える|
|[gatsby-plugin-prefetch-google-fonts][29]|Googleフォントの読込用|

今回はここまでです。

[1]: /first-gatsby/
[2]: //images.ctfassets.net/8fdt4k4c3spd/2DNFThyTKdOuukOGIdPXAP/719b6a0c6dedf78140bc6647649e742f/lookback-structure_01.png "lookback-structure 01"
[3]: https://www.gatsbyjs.org/packages/gatsby-source-filesystem
[4]: https://www.gatsbyjs.org/tutorial/
[5]: //images.ctfassets.net/8fdt4k4c3spd/1vFKDChK0E6cR4CTV5ZdZO/0fc42e19eb0a5bfeffe3b369d398c6f2/lookback-structure_02.png "lookback-structure 01"
[6]: https://www.gatsbyjs.org/packages/gatsby-transformer-remark/?=gatsby-transformer-remark
[7]: https://github.com/sakelog/sake_log_source
[8]: https://qiita.com/Takepepe/items/144209f860fbe4d5e9bb
[9]: https://qiita.com/akashixi/items/c3acb4bcc616bc40e0f2
[10]: /intoroduce_graphql_code_gen/
[11]: https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet
[12]: https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap
[13]: https://www.gatsbyjs.org/packages/gatsby-plugin-google-tagmanager
[14]: https://www.gatsbyjs.org/packages/gatsby-plugin-lodash
[15]: https://www.gatsbyjs.org/packages/gatsby-plugin-typescript
[16]: https://www.gatsbyjs.org/packages/gatsby-plugin-offline/
[17]: https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/
[18]: https://www.gatsbyjs.org/packages/gatsby-source-filesystem/
[19]: https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/
[20]: https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/
[21]: https://www.gatsbyjs.org/packages/gatsby-source-contentful/
[22]: https://www.gatsbyjs.org/packages/gatsby-transformer-remark/
[23]: https://www.gatsbyjs.org/packages/gatsby-remark-autolink-headers/
[24]: https://www.gatsbyjs.org/packages/gatsby-remark-code-titles/
[25]: https://www.gatsbyjs.org/packages/gatsby-remark-prismjs
[26]: https://www.gatsbyjs.org/packages/gatsby-remark-custom-blocks
[27]: https://www.gatsbyjs.org/packages/gatsby-remark-external-links
[28]: https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/
[29]: https://www.gatsbyjs.org/packages/gatsby-plugin-prefetch-google-fonts/

このブログを始めてから半年が経ちました。この機会にブログの構成について振り返ります。

ブログ開始から半年経ったので構成について振り返る

最近Gitでブランチを分けるということを覚えました。

masterブランチから枝分かれして開発を進められるので、ミスした場合も影響が抑えられ助かります。

ブランチを分けて開発する際に便利なブランチを表示・削除するコマンドについて、今回まとめました。

## ローカル編

### ブランチの一覧を表示する

```shell
git branch
```

### ブランチを削除する

```shell
git branch --delete <ブランチ名>
```

`-d`もしくは`--delete`オプションを使う。

## リモート編

### ブランチの一覧を表示する

```shell
git remote show <リモート名>
```

**2020/12/26追記**

リモート名は下記で確認可能。

```shell
git remote show
```

### ブランチを削除する

```shell
git push <リモート名> --delete <ブランチ名>
```

こちらも`-d`もしくは`--delete`オプションを使用。

### ブランチが消えない場合の対処法

**2020/12/26追記**

履歴をいじくっているとremote側のブランチ参照がうまくできなくなって消せない場合があります。

こんなメッセージが表示されるケースです。

```shell
error: src refspec <ブランチ名> does not match any
error: failed to push some refs to <リモートリポジトリ>
```

その場合はこっちのコマンドで削除可能

```shell
git push <リモート名> :<ブランチ名>
```

Gitでブランチを分けて開発するときに便利な、ブランチ一覧の表示・削除のコマンドをまとめました

Gitでブランチを表示・削除するコマンド

[[note | 2020.06.21追記]]
|config.ymlの誤りを修正しました

静的ジェネレータでサイトを作って維持していくと、その内、中身のコンテンツの管理が問題になると思います。

コンテンツ管理問題を解決するためにはCMSの導入という手段があります。

GatsbyJSの場合、startarで簡単に導入できる**Netlify CMS**が有名です。

ただ、Web検索しても出てくるのは、startarを使って導入する方法ばかり……。

そうじゃないんだよ！　私が知りたいのはサイトを作った**後からNetlify CMSを導入する方法なんだ！**

ということで、今回は実際に、startarを使わずにGatsbyJSにNetlify CMSを導入したので、その方法を解説していきます。

* 参考サイト：[Add to Your Site | Netlify CMS | Open-Source Content Management System](https://www.netlifycms.org/docs/add-to-your-site/)

[[note]]
| 今回はGitHub連携をしている前提での記事になります。
|
| 公式サイトでは他にもBitbucket・GitLabと連携する方法が記載されています。参考にしてください。

## Netlifyの認証機能を有効にする

実際にNetlify CMSの設定に必要なファイルを作っていく前に、Netlify側で認証機能を有効にしましょう。

[[note]]
|ここでの作業はNetlify Identity widgetを使って認証する場合に必要です。
|
|Githubだけでログインできればいい！　という方は、ここは飛ばして、[config.ymlの作成方法](#configymlの作成方法)の[backendの指定](#backendの指定)のところを参考にしてください。

Netlifyにログインします。

### Git Gatewayを有効にする

NetlifyのSettings ＞ Identity ＞ Git Gatewayで、**Enable Git Gateway**をクリック。

![NetlifyでGit Gatewayの有効化](//images.ctfassets.net/8fdt4k4c3spd/57QNFxfLM1RisRkcY0vjfk/10e60d74324a68b72b386c22df0db7db/gatsbyjs_netlifycms_01.png "gatsbyjs_netlifycms_01")

### 招待した人しかログイン出来ないようにする

**Registration Settings**のEdit settingsから、**Invite only**を選択しましょう。

![招待した人しか管理画面にログインできないようにする](//images.ctfassets.net/8fdt4k4c3spd/2rwbJEPhF9fEY0Z2837j8/7732e2ee54d6540e4cb6008810a924a2/gatsbyjs_netlifycms_02.png "gatsbyjs netlifycms 02")

**Netlify Identity widget**を埋め込みます。

Netlifyで、認証制にしたいサイトを選択 ＞ Settings ＞ Build & Deploy ＞Snippet Injectionから**Add Snippet**

下記コードを`</head>`の前に挿入します。

```html
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
```

![headタグ内にNetlify Identity Widgetのスニペットを追加する](//images.ctfassets.net/8fdt4k4c3spd/6O9mFUJvk7pM7QuaPcZjkO/1c3a5c987f380b28cf01228f79c95fcd/gatsbyjs_netlifycms_03.png "gatsbyjs netlifycms 03")

### CMSにログインするユーザーを招待する

Netlifyで、認証制にしたいサイトを選択 ＞ Identityから**Invite users**

招待したいユーザーのメールアドレスを入力してSend

メールが届くので、**Accept the Invite**をクリック

![届いたメールから招待を受ける](//images.ctfassets.net/8fdt4k4c3spd/4FPGLAoHiUW2WOxh0KRkpl/9c11fbe8b43dabc846c0304fd9ced340/gatsbyjs_netlifycms_04.png "gatsbyjs netlifycms 04")

パスワードを入力してSign Up

![パスワードを入力してSign Up](//images.ctfassets.net/8fdt4k4c3spd/7mayrDIvll2ORgDOme2LOL/236858af93b90c9013db35306bb0ffc2/gatsbyjs_netlifycms_05.png "gatsbyjs netlifycms 05")

ログインできました！

![Netlifyログイン完了](//images.ctfassets.net/8fdt4k4c3spd/6ufNRmUHQnwBuMWxBu6uW4/8c2bd5324e810401e0ca36b85b363cf6/gatsbyjs_netlifycms_06.png "gatsbyjs netlifycms 06")

次は、Netlify CMSの設定に必要なファイルを作っていきましょう。

## /static の下に設定ファイルを作成する

GatsbyJSの場合は、**/static**フォルダの下に、Netlify CMS設定用のファイルを追加します。

```text
/static
 └ admin
 　 ├ index.html
 　 └ config.yml
```

/staticフォルダの下に**admin**フォルダ、その下に**index.html**と**config.yml**を作成します。

| ファイル名      | 説明                    |
| ---------- | --------------------- |
| index.html | 管理ページを表示するのに必要なファイル   |
| config.yml | 管理ページ内の設定をするのに必要なファイル |

## index.htmlの作成方法

index.htmlは公式サイト記載の内容をコピーして作ります。

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
```

## config.ymlの作成方法

### npmモジュールのインストール

config.ymlを作成する前に、GatsbyJSのリポジトリにNetlify CMSのnpmモジュールをインストールします。

```powershell
npm install netlify-cms --save-dev
```

もしくは

```powershell
yarn add netlify-cms --dev
```

このサイトの場合、config.ymlの中身はこんな感じになっています。

```yaml
backend:
  name: git-gateway
publish_mode: editorial_workflow
media_folder: 'content/post/img/upload'
public_folder: '/img/upload'
locale: 'ja'
collections:
  - name: 'post'
    label: 'Post'
    folder: 'content/post'
    create: true
    extension: 'md'
    slug: '{{fields.slug}}'
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - {
          label: 'Category',
          name: 'category',
          widget: 'relation',
          collection: 'categorylist',
          searchFields: ['name'],
          valueField: 'name',
        }
      - {
          label: 'Tags',
          name: 'tags',
          widget: 'list',
          allow_add: true,
          minimize_collapsed: true,
          summary: '{{fields.tag}}',
          field: { label: Tag, name: tag, widget: 'string' },
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
  - name: 'page'
    label: 'Page'
    folder: 'content/page'
    create: true
    extension: 'md'
    slug: '{{fields.slug}}'
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
  - name: 'categorylist'
    label: 'Category'
    identifier_field: name
    create: true
    extension: 'yml'
    folder: 'content/category'
    fields:
      - { label: 'Name', name: 'name', widget: 'string' }
      - { label: 'Description', name: 'description', widget: 'text', required: false}
```

順を追って説明していきます。

### backendの指定

```powershell
backend:
  name: git-gateway
```

backendを指定します。

指定方法によって、認証の仕方が変わってきます。

Netlify Identity widgetを使用する場合は、`name:git-gateway`を指定します。

GitHubでログインできれば良い場合は、下記のように指定します。

```yaml
backend:
name: github
repo: ユーザー名/レポジトリ名
```

### publish modeの指定(editorial_workflow)

```yaml
publish_mode: editorial_workflow
```

下書きを有効にするかの指定です。

**editorial_workflow**を指定すると、下の画像のように、かんばん方式で記事の状態を管理できます。

記事を公開できる状態になったら「準備完了」へステータスを移して公開しましょう。

![Netlify CMSのワークフロー画面 下書きの管理を行う](//images.ctfassets.net/8fdt4k4c3spd/1JyUuBIXMX0bJYB1t7E4T3/9aa5142a9051f4cff0bba7e63e9a524c/gatsbyjs_netlifycms_07.png "gatsbyjs netlifycms 07")

### 画像フォルダの指定

```yaml
media_folder: 'content/post/img/upload'
public_folder: '/img/upload'
```

画像フォルダの指定は、`media_folder`と`public_folder`で行います。

* media_folder：実際に画像を保管するフォルダを指定（プロジェクトのルートフォルダからの相対パス）
* public_folder：記事中で画像を取得するときの相対パス

### collectionの指定(コンテンツ管理の単位)

collectionで、コンテンツ管理の単位を指定します。

記事やページを分けて管理したい場合や、カテゴリー一覧を管理する場合に使えます。

```yaml
collections:
  - name: 'post'
    label: 'Post'
    folder: 'content/post'
    create: true
    extension: 'md'
    slug: '{{fields.slug}}'
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - {
          label: 'Category',
          name: 'category',
          widget: 'relation',
          collection: 'categorylist',
          searchFields: 'name',
          valueField: 'name',
        }
      - {
          label: 'Tags',
          name: 'tags',
          widget: 'list',
          allow_add: true,
          minimize_collapsed: true,
          summary: '{{fields.tag}}',
          field: { label: Tag, name: tag, widget: 'string' },
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
```

それぞれの項目の詳細は下記の通り。

| 項目        | 説明                                                                                             |
| --------- | ---------------------------------------------------------------------------------------------- |
| name      | collectionの名前。他のcollectionからrelationで紐付けるときにも使う                                                |
| label     | 管理画面に表示する名前                                                                                    |
| folder    | collectionのファイルを格納するフォルダを指定。例えば、postのfolderを`content/post`で指定すると、content/postフォルダの中身をpostとして扱う |
| create    | `true`にすると、管理画面上で新しいファイルが作成できる                                                                 |
| extension | ファイルの保存形式。`yaml`、`toml`、`json`、`md`、`markdown`、`html`が指定できる                                    |
| slug      | ファイル名の指定                                                                                       |
| fields    | collectionの各ファイル編集ページに持たせるフィールド。詳しくは後述                                                         |

詳しくは[Configuration Options | Netlify CMS | Open-Source Content Management System](https://www.netlifycms.org/docs/configuration-options/)を参照

### fieldsの指定

fields部分を抜き出すとこんな感じになっています。

```yaml
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - {
          label: 'Category',
          name: 'category',
          widget: 'relation',
          collection: 'categorylist',
          searchFields: 'name',
          valueField: 'name',
        }
      - {
          label: 'Tags',
          name: 'tags',
          widget: 'list',
          allow_add: true,
          minimize_collapsed: true,
          summary: '{{fields.tag}}',
          field: { label: Tag, name: tag, widget: 'string' },
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
```

基本的な項目は下記のとおりです。

| 項目       | 説明                                     |
| -------- | -------------------------------------- |
| label    | 管理画面上に表示するフィールド名                       |
| name     | フィールドの値を判別する名前。GraphQLで指定するfieldsと合わせる |
| widget   | フィールドの種類を指定する                          |
| required | `false`を指定すると、入力を任意にできる。               |

widgetによって、何を指定しなければいけないかが変わります。

詳しくは[Widgets | Netlify CMS | Open-Source Content Management System](https://www.netlifycms.org/docs/widgets/)を参照してください。

投稿のマークダウン部分を取得するには、下記の通り指定します。

```yaml
- { label: 'Body', name: 'body', widget: 'markdown' }
```

この指定をすると、今までの投稿内容も取得されます。

## 作成できたら開発環境で確認しよう

ファイルが作成できたら、開発環境で確認します。

adminフォルダ内のindex.htmlが**サイトURL/admin**になるので、`develop`ではなく、`build`と`serve`を使います。

```powershell
gatsby build
```

してから、

```powershell
gatsby serve -H 0.0.0.0
```

してください。

※`-H`以降はPC以外でローカルホストを表示させるためのオプションなので、なくても大丈夫です。

* 参考：[GatsbyJSのローカル環境をスマホやタブレットから確認する方法](./gatsbyjs-local-other-device)

**<http://localhost:9000/admin>**を開いて反映されていることを確認しましょう。

## pushして反映させる

開発環境でうまく表示ができていたら、ローカルリポジトリにpushして反映させます。

buildが完了したら、**サイトURL/admin**にアクセスして管理画面を確認しましょう。

GatsbyJSとNetlify   CMS。ネットでもよく見る組み合わせですが、意外とスターターを使わず後から追加する方法の説明って見当たらないですよね。今回、スターターを使わず後から手動でNetlifyCMSを導入したので、その方法を説明します。

GatsbyJSで作成したサイトに後からNetlify CMSを導入する方法

GatsbyJSでの開発はPCで進めていくことになると思います。

ローカル環境で確認するわけですが、スマホやタブレットからの表示気になりますよね。

都度本番環境にアップするのはちょっとこわい……。

今回はそんな悩みを解決する**GatsbyJSのローカル環境を開発しているPC以外から確認する方法**です。

## PCとつなぎたい端末を同じネットワークに接続する

ローカル環境のため、同じネットワークに繋がっていないと、見つけることができません。

Wi-Fiの同じSSIDに接続するなど、接続先のネットワークを揃えましょう。

## gatsby developのオプションを設定する

GatsbyJSのdevelopコマンドにオプションを追加します。

```powershell
gatsby develop -H 0.0.0.0
```

| オプション | 説明                                                         |
| ---------- | ------------------------------------------------------------ |
| -H         | ホストを指定するオプション。**0.0.0.0**はローカルホスト上の全てのアドレスを意味する。 |

`serve`でも同様のオプションが指定します。

## PCのIPアドレス確認

つぎに、PCのIPアドレスを確認します。

下記コマンドを実行

```powershell
ipconfig
```

出力された情報の**IPv4 アドレス**がPCのローカルIPアドレスです。

```powershell
イーサネット アダプター イーサネット:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter ローカル エリア接続* 1:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter ローカル エリア接続* 2:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .:
   IPv6 アドレス . . . . . . . . . . . .: hogehoge
   一時 IPv6 アドレス. . . . . . . . . .: hogehoge
   リンクローカル IPv6 アドレス. . . . .: hogehoge
   IPv4 アドレス . . . . . . . . . . . .: 100.64.1.xx
   サブネット マスク . . . . . . . . . .: 255.255.252.0
   デフォルト ゲートウェイ . . . . . . .: hogehoge
                                          100.64.1.1

イーサネット アダプター Bluetooth ネットワーク接続:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:
```

## つなぎたい端末から接続

スマホやタブレットなど、つなぎたい端末からブラウザを起動します。

PCのIPv4アドレスが100.64.1.xxだった場合、`http://localhost:8000`は次のように読み替えます。

```text
http://100.64.1.xx:8000
```

**PCのIPアドレス:ポート番号**です。

## つながらないときに確認したいこと

ここまでやってつながらない場合は、ファイアウォールの設定を確認してください。

* PCが同一ネットワークの他の端末から見つからない設定になっていないか
* セキュリティソフトでPCへの接続がはじかれていないか

特に、PCでIPアドレス指定でつながるのに、スマホやタブレットからつながらない場合はファイアウォールの設定による可能性が高いです。ご確認ください。


GatsbyJSで開発をしていると、スマホやタブレットから実機で表示を確認したい！となることありませんか？　解決方法を説明します。

GatsbyJSのローカル環境をスマホやタブレットから確認する方法

Sassという言葉をよく聞くようになったなぁと思います。

私もかなり使っているのですが、正直見様見真似で使ってきていました。

今後のために、一度整理する意味も込めて、Sass公式サイトの導入ページをまとめてみました。

* 公式サイト：[Sass: Syntactically Awesome Style Sheets](https://sass-lang.com/)
* 今回学習したページ：[Sass: Sass Basics](https://sass-lang.com/guide)

## Sassってこんなもの

Sassについて一言でまとめると、**記述が膨大になりがちなCSSの保守を楽にするための言語**です。

基本的にはSassファイルを直接読み込むのではなく、コンパイルしてCSSファイルに変換して読み込みます。

![Sassを使っての開発全体イメージ](//images.ctfassets.net/8fdt4k4c3spd/i11gd55AqdLfYsQkN1HBq/be35e2b6a89ffe06a56514a8f99cdd71/sass_basic_1.png "sass basic 1")

## 導入方法

Sassを導入するには下記のいずれかのコマンドを実行します。

```powershell:title=npm
npm install -g sass
```

```powershell:title=Chocolatey
choco install sass
```

```powershell:title=Homebrew
brew install sass / sass /sass
```

## SassからCSSへのコンパイル

下記のコマンドを実行すると作成済みのSassファイルをCSSにコンパイルできます。

```powershell
sass input.scss output.css
```

`--watch`フラグを使用すると、ファイルやディレクトリを監視して、ファイルが更新されたら自動でコンパイルし直します。

```powershell
sass --watch input.scss output.css
```

ディレクトリを監視する場合は、入力のディレクトリと出力のディレクトリを転んで区切ります。

```powershell
sass --watch app/sass:public/stylesheets
```

## 変数の定義

Sassでは変数を定義して、使い回すことができます。

変数を定義する場合は、変数名の先頭に`$`を書きます。

```scss:title=input.scss
$primary-color: #0f7dd6;

body {
    color: $primary-color;
}
```

このコードをCSSにコンパイルすると、次のように出力されます。

```css:title=output.css
body {
  color: #0f7dd6;
}
```

## タグのネスト

Sassではタグをネストすることができます。

```scss:title=input.scss
.btn-primary {
  background: #0f7dd6;
  color: #ffffff;
  border: none;
  
  &::focus {
      outline: none;
  }
```

このコードをCSSにコンパイルすると次の通り。

```css:title=output.css
.btn-primary {
  background: #0f7dd6;
  color: #ffffff;
  border: none;
}
.btn-primary::focus {
  outline: none;
}
.btn-primary:hover {
  background: #70b9f5;
  color: #ffffff;
}
```

親要素・子要素の記述や、セレクターを記述するときに便利です。

## パーツごとにソースコードを分割できる

`@use`を使って、分割したSassファイルを読み込むことができます。

※.scssであれば、CSSファイルも読み込めます。

```scss:title=\_base.scss
$primary-color: #0f7dd6;

body {
    color: $primary-color;
}
```

```scss:title=style.scss
@use 'base';

.inverse {
	background-color: base.$primary-color;
	color: #ffffff;
}
```

`as`で任意の名前空間をつけることも可能です。

```scss:title=\_var.scss
$primary-color: #0f7dd6;
```

```scss:title=style.scss
@use 'var' as v;
body {
	color: v.$primary-color;
}
```

`@forward`を使うと、読み込んだファイルの中の変数を他のファイルで読み込めるようになります。

```scss:title=\_var-color.scss
$primary-color: #0f7dd6;
```

```scss:title=\_var.scss
@forward 'var-color';
```

```scss:title=style.scss
@use 'var';

body {
	color: var.$primary-color;
}
```

### @importと@use、@forwardの違い

似た機能に@importがあります。違いを整理してみました。

* @import：ソースのコピペのようなイメージです。名前空間は指定せず、変数は使用するより前に読み込む必要があります。
* @use、@forward：名前空間を指定できます。読み込む先のファイルで必要な変数を読み込みます。

@importは近いうちに削除されることが決定しているようです。今からソースを作るのであれば、@use、@forwardを使うことをおすすめします。

## .scssと.sassの違い

Sassには拡張子が2種類あります。違いは**ソースコードの書き方のお作法**です。

* .scss：基本的にCSSと同じように記載できます。`{}`を記述します。
* .sass：インデントで記載します。`{}`は記述しません。

参考ページ：[Sass: Syntax](https://sass-lang.com/documentation/syntax)

## まだ理解できていないこと

学習用ページには`@mixin`と`@extend`についての説明もあったのですが、まだ私の理解力では追いつかず…でした。

とくに@extendは入れ子でソースを記述するのと何が違うの？？って感じです。

## まとめ

今までなんとなくで書いていたソースコードの意味や、.sassと.scssの違いが理解できてすっきりです。

全体の概要がなんとなく理解できたので、次はドキュメントを読み込んでさらに具体的な内容を理解します。


使えるとCSSを効率的に記述できるSass。公式サイトのマニュアルを元に基本をまとめてみました。

iPadを使った勉強法まとめ【2020年10月最新版】

技術

iPad

勉強

ブログ開始から半年経ったので構成について振り返る

技術

Gatsby

Gitでブランチを表示・削除するコマンド

技術

Git

GatsbyJSで作成したサイトに後からNetlify CMSを導入する方法

技術

Gatsby

NetlifyCMS

GatsbyJSのローカル環境をスマホやタブレットから確認する方法

技術

Gatsby

Sassの基本についてまとめてみた

技術

Sass

CSS