## インストール

```bash
yarn add remark-math rehype-katex
```

## 設定

```js
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import 'katex/dist/katex.min.css' 
```

```js
<ReactMarkdown
  ...
  rehypePlugins={[rehypeKatex]}
  remarkPlugins={[remarkMath]}
/>
```

## 書いてみる

```
$$
L = \frac{1}{2} \rho v^2 S C_L
$$
```

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

```
$
L = \frac{1}{2} \rho v^2 S C_L
$
```

$
L = \frac{1}{2} \rho v^2 S C_L
$

NOTE: `\rho`は、ギリシャ文字

```
$$
E = mc^2
$$
```

$$
E = mc^2
$$

## 参考
- [Use remark and rehype plugins (math)](https://github.com/remarkjs/react-markdown#use-remark-and-rehype-plugins-math)

React

ReactMarkdown で数式書けるようにしたよ

WEB技術

## インストール

```sh
yarn add nextjs-basic-auth
```

## 設定

```lib/basicAuth.js
import initializeBasicAuth from 'nextjs-basic-auth'

const users = [
  { user: 'user', password: 'Password@1' }
]

export default initializeBasicAuth({ users })
```

```_app.js
import basicAuthCheck from '@/lib/basicAuth'

...省略

MyApp.getInitialProps = async (appContext) => {
  const { req, res } = appContext.ctx
  if (req && res && process.env.ENABLE_BASIC_AUTH) {
    await basicAuthCheck(req, res)
  }

  const appProps = await App.getInitialProps(appContext)
  return { ...appProps }
}

export default MyApp
```

## envの設定

```next.config.js
module.exports = {
  env: {
    ENABLE_BASIC_AUTH: process.env.ENABLE_BASIC_AUTH,
  },
}
```

```.env.local
ENABLE_BASIC_AUTH=true
```

Vercel

Next.js で Basic認証

## ユーザー設定

```bash
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
```

## alias設定

```bash
# system
git config --system alias.co checkout
git config --system alias.br branch
git config --system alias.ci commit
git config --system alias.st status
# global
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status
# local
git config --local alias.co checkout
git config --local alias.br branch
git config --local alias.ci commit
git config --local alias.st status
```

## config確認

```bash
# local
cat {repo}/.git/config
# global
/Users/user/.gitconfig
# system
cat /usr/local/etc/gitconfig
```

### .gitconfigが無い場合

```bash
rm ~/.gitconfig
touch ~/.gitconfig
```

## リモートリポジトリの確認

```bash
git remote -v
git remote add origin {url}
```

## ローカルの直前コミットを戻す

```bash
git reset --soft HEAD^
```

合わせて、ステージを戻す

```bash
git reset
```

## リモートの直前コミットを戻す

```bash
git reset --hard HEAD^
```

```bash
git push origin +master
git push origin +develop
```

上記は履歴が残らないので、履歴を残したい場合は、`revert`を使いましょう。

## マージ済ブランチの削除

```bash
git branch -D `git branch --merged | grep -v \* | xargs`
```

## 特定のコミットを打ち消す

ログを調べて、コミットのハッシュを特定する。

```bash
git log
tig
```

```bash
git revert {ハッシュ値}
```

## ブランチ名の変更

```bash
git branch -m <古いブランチ名> <新しいブランチ名>
git push origin :<古いブランチ名> # ついでに削除
```

## unstagedファイルを削除

```bash
git clean
git clean -f # 強制
git clean -df # ディレクトリも含める
```

## 特定のファイルを特定のコミットに戻す

```bash
git checkout [コミット番号] [ファイルパス]
```

## GitHub SSH接続

- SSHキーを作成し、`~/.ssh/config`に記載、GitHubにSSH公開鍵を設定する。

## GitHub でパスワードを変更した後
```bash
git config --global user.name <username>
git pull # なんでも良い
```

を実行し、パスワードを聞かれるので、入力する。

## Personal Access Token設定後のMac設定

```bash
 $ git credential-osxkeychain erase ⏎
 host=github.com  ⏎
 protocol=https   ⏎
 ⏎
 ⏎
```

```bash
git fetch
```

[How do you reset the stored credentials in 'git credential-osxkeychain'?
](https://stackoverflow.com/questions/11067818/how-do-you-reset-the-stored-credentials-in-git-credential-osxkeychain)

## credential-osxkeychainの設定

```bash
git credential-osxkeychain
```

認証アシスタントがインストールされていない場合は、以下の内容が表示されます。

```bash
git: 'credential-osxkeychain' is not a git command. See 'git --help'.
```

この時点で、認証アシスタントを正しいパスにダウンロードすることができます。

```bash
curl -s -O http://github-media-downloads.s3.amazonaws.com/osx/git-credential-osxkeychain
chmod u+x git-credential-osxkeychain
mv git-credential-osxkeychain /usr/local/bin
```

インストール後、オープン認証アシスタントの設定を行います。

```bash
git config --global credential.helper osxkeychain
```

[GitHub for Mac error: git: 'credential-osxkeychain' is not a git command](https://stackoverflow.com/questions/13661354/github-for-mac-error-git-credential-osxkeychain-is-not-a-git-command/55060030)

## Rebase
```sh
git rebase [つなぐ元にするブランチ名]
git rebase origin/[つなぐ元にするブランチ名]
# コンフリクト解消
git rebase --continue
```

## 元ブランチの確認

```sh
git show-branch
```

## git blame
行ごとに差分を見る

```
git blame <paths>
```

## 大文字と小文字のファイル検知

```
$ git config -l --local | grep core.ignorecase
core.ignorecase=true
これをfalseにしてあげたらOK.

$ git config core.ignorecase false
```

Gitの使い方まとめ

## 参考
- [Python Playground](https://www.programming-hero.com/code-playground/python/index.html)

## 配列

```py
list = ['A', 'B', 'C']
print(list[0]) # 'A'
```

## dict

```py
d = {'k1': 1, 'k2': 2, 'k3': 3}
print(d) # {'k1': 1, 'k2': 2, 'k3': 3}
print(d['k1']) # 1
```

## 型出力

```py
docs = websites_ref.stream()
print(type(docs)) # <class 'generator'>
```

NOTE: イテレータとジェネレータが存在する。

## 条件式 or

```py
og_description = "A"
description = "B"
answer = og_description or description or ""
print(answer) # "A"

og_description = ""
description = "B"
answer = og_description or description
print(answer) # "B"

og_description = None
description = "B"
answer = og_description or description
print(answer) # "B"

og_description = None
description = None
answer = og_description or description
print(answer) # None

og_description = None
description = None
answer = og_description or description or ""
print(answer) # ""
```

## 条件式 not

```py
if not is_existed:
```

## 三項演算子

```py
a = {True時の処理} if {条件式} else {False時の処理}
```

## URL取得

```py
from urllib.parse import urlparse
parsed_url = urlparse("https://nishimura.club/")
article_id = hash_text(parsed_url.geturl()) 
```

## import

```py
from urllib.request import urlopen
from urllib.parse import urlparse
```

- https://docs.python.org/ja/3/howto/urllib2.html

Python

Python の基本構文

## 要件
- Dokcerを使用して、Scrapy環境を作ること。
- 指定したURLから、記事(コンテンツ)を取得できること。
- robots.txtからsitemap.xmlを取得する
- 相手サーバの負荷の考慮や法律を守ること。
- サーバにデプロイして、定期実行すること。
- 収集したデータは、クレンジングし、FireStoreに保存すること。

## 概要
### Spider
クロール対象のサイトへのリクエスト、レスポンスのパース処理を記述します
どのようにサイトを辿って、ページの内容をどうパースするかのロジックが Spider に書かれます

### Items
クロール対象のデータから抽出したいデータ構造を記述するモデルのようなものです
目的に応じて自由な構造を定義できます
Items は Spider で生成され Pipeline に渡されます

### Pipeline
Spider より渡された Items に対する処理を記述します
DB への保存、ファイル出力など目的に応じて自由に処理を記述できます

## ログ確認
```
import logging
logging.error("Some error")
```

## 最初にやったほうが良いこと
- [Scrapyチュートリアル](https://doc-ja-scrapy.readthedocs.io/ja/latest/intro/tutorial.html)

```
scrapy startproject tutorial
```

- 新しいScrapyプロジェクトの作成
- スパイダー(spider) を作成してサイトをクロールし、データを抽出します。
- コマンドラインを使用してスクレイピングされたデータをエクスポートする。
- **再帰的にリンクをたどるようにスパイダーを変更する。**
- スパイダー引数の使用

## 処理の順番
- 1.ドメインの`robots.txt`を見つける
- 2.`robots.txt`から`sitemap.xml`を見つける
- 3.`sitemap.xml`から各コンテンツページに行く
- 4.コンテンツページの`metatag`を取得する
- 5.`metatag`をクレンジングし、　itemsに変換する
- 6.itemsをpipelineに渡し、FireStoreに保存する(Websiteがない場合は、Websiteも登録する)

## Spiderの実行
Pythonファイルの実行または、CLIの実行どちらからでも実行できる。

```sh
scrapy crawl {SPIDER_NAME} # 実行
scrapy crawl {SPIDER_NAME} -o results/example.csv # 実行 & csv出力
```

## Scrapyの中でBeautifulSoupを使う
- [Leveraging Beautifulsoup within Scrapy](https://stackoverflow.com/questions/48086330/leveraging-beautifulsoup-within-scrapy)

```python
from bs4 import BeautifulSoup

class WebsiteSpider(scrapy.Spider):
    def parse(self, response):
        # BeautifulSoupを使う
        soup = BeautifulSoup(response.body, "lxml") 
        ...
```

## Metaタグの取得
```python
print(response.xpath("//meta").extract())
```

```python
def parse(self, response):
    soup = BeautifulSoup(response.body, "lxml") 

    # MetaTagの取得
    # Normal
    description = soup.find("meta",  { "name": "description" })
    title = soup.find("title").string # タグの中身を取る
    url = response.url
    print("description: %s" % (description['content']))
    print("title: %s" % (title))
    print("url: %s" % (url))

    # OGP
    og_description = soup.find("meta",  { "property": "og:description" })
    og_title = soup.find("meta",  { "property": "og:title" })
    og_url = soup.find("meta",  { "property": "og:url" })
    og_image_url = soup.find('meta', { 'property': 'og:image' })
    print("og_description: %s" % (og_description['content']))
    print("og_title: %s" % (og_title['content']))
    print("og_url: %s" % (og_url['content']))
    print("og_image_url: %s" % (og_image_url['content']))
```

## エラー
```
ERROR: Spider error processing
```

どこかnullだったりで落ちている。

## Itemsの出力
```spider.py
article = ArticleItem()
article['description'] = description
article['title'] = title
article['url'] = url
article['image_url'] = og_image_url
print("article: %s" % (article))
yield article
```

```pipeline.py
class ArticlePipeline(object):
    file = None

    def process_item(self, item, spider):
        print(item)
        return item
```

NOTE1: 定義したfield以外を代入すると、エラーになります。(当たり前)

NOTE2: ちなみに、クロールが長かった場合、途中で終了しても、出力設定をしていた場合、出力される。

## FireStoreとの接続
- [FirebaseでCloud Firestoreをつかってみよう　その１　データの挿入](https://peaceandwhisky.hatenablog.com/entry/2017/12/31/045314)

```py
import scrapy
import firebase_admin
from firebase_admin import credentials, firestore
# import logging

# Hack: 下記環境変数を設定しないとエラーになる
import os
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = './serviceAccount.json'
# 値のバリデーションチェック

class ValidationPipeline(object):
    print('ValidationPipeline: Activate')

    def process_item(self, item: scrapy.Item, spider: scrapy.Spider):
        if item['title'] is None or item['title'] == '':
            raise scrapy.exceptions.DropItem('Missing value: title')

        if item['url'] is None or item['url'] == '':
            raise scrapy.exceptions.DropItem('Missing value: url')

        return item

class ArticlePipeline(object):
    file = None

    def __init__(self):
        cred = credentials.Certificate('./serviceAccount.json')
        firebase_admin.initialize_app(cred)

    def open_spider(self, spider: scrapy.Spider):
        print('ArticlePipeline.open_spider: Activate')

    def close_spider(self, spider: scrapy.Spider):
        print('ArticlePipeline.close_spider: Activate')

    def process_item(self, item: scrapy.Item, spider: scrapy.Spider):
        print(item['title'])
        db = firestore.Client()

        # NOTE: document() 指定なしだとランダムにIDが生成される
        doc_ref = db.collection(u'articles').document()
        doc_ref.set({
            u'description': item['description'],
            u'image_url': item['image_url'],
            u'title': item['title'],
            u'url': item['url'],
        })
        return item
```

## ValidationPipeline

- `None`: dictのkeyがない場合、終了
- `''`: 空文字の場合、終了

Pythonで、Noneは、nullと同じ使われた方をする

```pipelines.py
class ValidationPipeline(object):
    def process_item(self, item: scrapy.Item, spider: scrapy.Spider):
        if item['description'] is None:
            raise scrapy.exceptions.DropItem('Missing value: description')

        if item['title'] is None or item['title'] == '':
            raise scrapy.exceptions.DropItem('Missing value: title')

        if item['url'] is None or item['url'] == '':
            raise scrapy.exceptions.DropItem('Missing value: url')

        if item['image_url'] is None:
            raise scrapy.exceptions.DropItem('Missing value: image_url')

        return item
```

```settings.py
ITEM_PIPELINES = {
    'crawler.pipelines.ValidationPipeline': 100,
    'crawler.pipelines.ArticlePipeline': 300,
}
```

設定する数字で、実行順番の制御を行っているよう。

## 参考
- [Scrapy 1.2 ドキュメント](https://scrapy-ja.readthedocs.io/ja/latest/)
- [アーキテクチャの概要 - Scrapy](https://scrapy-ja.readthedocs.io/ja/latest/topics/architecture.html)
- [Scrapy Note](https://sugiaki1989.gitbook.io/scrapy-note/)
- [Python, Scrapyの使い方（Webクローリング、スクレイピング）](https://note.nkmk.me/python-scrapy-tutorial/)
- [10分で理解する Scrapy](https://qiita.com/Chanmoro/items/f4df85eb73b18d902739)
- [Logging in Scrapy](https://stackoverflow.com/questions/38413829/logging-in-scrapy)
- [BeautifulSoupを使って、ブログ記事の情報をいろいろ絞り込んでみた](https://dev.classmethod.jp/articles/filtering-blog-article-using-beautifulsoup/)
- [Scrapyでサイトマップからスクレイピング](https://imabari.hateblo.jp/entry/2018/12/01/155452)
- [Scrapyでけ日記をクローリングする (2. PipelineでPostgreSQLに保存する)](https://ohke.hateblo.jp/entry/2018/07/07/230000)

Scrapyを使用したクローラ開発概要

## ポイント
- Modelを定義しよう([GoogleCloudPlatform/python-docs-samples/blob/master/firestore/cloud-client/snippets.py](https://github.com/GoogleCloudPlatform/python-docs-samples/blob/master/firestore/cloud-client/snippets.py))
- Firebaseの設定ファイルを切り出そう

## Firebaseファイルの切り出し

```lib/firebase.py
import firebase_admin
from firebase_admin import credentials, firestore

# HACK: 下記環境変数を設定しないとエラーになる
import os
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = './serviceAccount.json'

cred = credentials.Certificate('./serviceAccount.json')
firebase_admin.initialize_app(cred)

db = firestore.Client()
```

```py
from lib.firebase import db
```

## FireStoreに存在チェックについて

SQLでいうところの、ユニーク制限についても気になるところ。また、できないのであれば頻繁にデータパッチを行うことになるので、まとめていきたい。

![FireStore Relation](//images.contentful.com/0jyj5pjwic68/3xF6fsGtXvoIRHz1tAQXxA/b843ff33abe28d7da63e0b7eb51e93fc/_____________________.svg)

### 存在チェック 基本形
```py
doc_ref = db.collection(u'articles').document(doc_id)
doc = doc_ref.get()

if doc.exists:
  logging.info(Found)
else:
  logging.info(Not Found)
```

### 存在チェック limit() etc

もっと良い方法がないか考え中

```py
websites_ref = db.collection(u'websites').where(u'url', u'==', website_url).limit(1)
website_docs = websites_ref.stream()

# HACK: Generator型のempty checkがあれば、そちらで条件式を書く
is_website = False
for website_doc in website_docs:
    if website_doc.exists:
        is_website = True
```

## 追加

```py
website_ref = db.collection(u'websites').document()
website_ref.set({
    u'url': website_url,
})

doc_ref = db.collection(u'articles').document()
doc_ref.set({
    u'website_id': website_ref,
})
```

## 参考
- [Cloud Firestore を使ってみる](https://firebase.google.com/docs/firestore/quickstart)
- [Cloud Firestore でデータを取得する](https://firebase.google.com/docs/firestore/query-data/get-data)
- [GoogleCloudPlatform/python-docs-samples/blob/master/firestore/cloud-client/snippets.py](https://github.com/GoogleCloudPlatform/python-docs-samples/blob/master/firestore/cloud-client/snippets.py)


PythonとFireStoreの接続

## 基本形
Pythonの標準ライブラリでURLを扱うクラスが用意されています。

```python
from urllib.parse import urlparse

parsed_url = urlparse('https://nishimura.club/article')
print(parsed_url)
# ParseResult(scheme='https', netloc='nishimura.club', path='/article', params='', query='', fragment='')
```

## ドメイン + プロトコル

```python
parsed_url = urlparse('https://nishimura.club/article')
url = "%s://%s" % (parsed_url.scheme, parsed_url.netloc)
print(url)
# https://nishimura.club
```

## 参考
- [urllib.parse --- URL を解析して構成要素にする](https://docs.python.org/ja/3/library/urllib.parse.html#module-urllib.parse)

Python で ドメインの取得(URL操作)

HTML要素は、複数のCSSルールで設定できます。

```html
<p id="proverb" class="message">
  何の為に生まれて、何をして生きるのか、答えられないなんてそんなのは嫌だ
</p>
```

<div class="html">
  <p id="proverb" class="message">
    何の為に生まれて、何をして生きるのか、答えられないなんてそんなのは嫌だ
  </p>
</div>

`タグ名`の使用

```css
p { color: blue; }
```

`.class`の使用

```css
.message { color: green; }
```

`#id`の使用

```css
#proverb { color: red; }
```

ブラウザは`<p> </p>`に1つの色しか設定できないため、CSSに優先順位を付けて選択します。

上記の例では、`#id` が最も優先されるため、パラグラフの色は赤になります。

# CSSルールの順序
同様のセレクターがCSSにある場合、最後に定義されたセレクターが優先されます。

```css
p { color: green; }
p { color: red; }
/* Paragraphs will be red */
```

# 100小節
CSSルールがどれほど「強力」であるかを理解する簡単な方法の1つは、セレクターの特異性を測定することです。

|指定方法|評価値|
|---|---|
|`#id`|100|
|`.class`|10|
|タグ|1|
|Inline Styles|1000|
|属性セレクタ(`p[title]`)|10|
|擬似要素(`p::before`)|1|
|ユニバーサルセレクタ(`*`)|0|
|!important|最上位。同列の場合、評価値計算|

- `#id` セレクターは100の価値があります
- `.class` セレクターは10の価値があります
- `tag` セレクターは1の価値があります
CSSルールが表示される順序に関係なく、「スコア」が最も高いセレクターが優先されます。

```html
#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}
<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>
```

# 競合を回避する方法
CSSを作成しているときに、同じプロパティが複数回適用される競合するルールを作成するのは簡単です。

それを回避するには：

- クラスのみを使用する: `#id`でstyleを設定しない。
- 単一のHTML要素に複数のクラスを適用することは避けてください。記述せず`<p class="big red important">、<p class="title">`より意味的に説明的なものにします。
- 次のようなインラインスタイルを使用しないでください`<div style="background: blue;">`
- !importantを使用しない。


CSSの優先順位

HTML は、主に 2 種類の要素があります。

## ブロック要素

- 段落 `<p>`
- リスト：箇条書き付き `<ul>` 順序付きリスト `<ol>`
- 見出し：第 1 レベル`<h1>`から第 6 レベルの見出し`<h6>`
- 記事 `<article>`
- セクション `<section>`
- 長い引用符 `<blockquote>`

## インライン要素

- リンク `<a>`
- 強調された言葉 `<em>`
- 重要な言葉 `<strong>`
- 短い引用符 `<q>`
- 略語 `<abbr>`

ブロック要素は、コンテンツを一貫性のあるブロックに分割することにより、ページの主要部分を構造化することを目的としています。

インライン要素は、テキストの一部を区別して、特定の機能や意味を与えることを目的としています。インライン要素は通常、1 つまたはいくつかの要素で構成されます。

```html
<p>Youtubeで<a href="https://www.youtube.com">HTMLチュートリアル</a>を見る</p>
```

# タグの開閉
すべてのブロック要素には、開始タグと終了タグがあります。

そのため、自己完結型要素はインライン要素になります。これは、構文で他の HTML 要素を含めることができないためです。

||開始タグと終了タグの有無|自己完結型|
|---|---|---|
|ブロック要素|`<p></p>` `<ul></ul>` `<ol></ol>`|×|
|インライン要素|`<a></a>` `<strong></strong>` `<em></em>` |`<input>` `<br>` `<img>`|

# 他の種類のHTML要素
ブロック/インライン要素にはいくつかの例外がありますが、最も頻繁に遭遇するものは次のとおりです。

- リスト項目 `<li>`
- テーブル `<table>`,`<tr>`,`<td>`

HTML

blockとinlineについて

Web サイトのほとんどは、テキストのコンテンツがほとんどです。

音楽や動画が人気になってきた今でも、それは変わりません。

## Paragraph
パラグラフ `<p>`は、デフォルトのブロックレベルの要素として機能し、素早く記述できるため、最も使用されている HTML 要素です。

```html
<p>
  「兵は国の大事にして、死生の地、存亡の地なり。察せざるべからず」
  戦争は国家の大事であって、国民の生死、国家の存亡がかかっている。よく考えねばならない
</p>
```

<div class="html">
  <p>
    「兵は国の大事にして、死生の地、存亡の地なり。察せざるべからず」
    戦争は国家の大事であって、国民の生死、国家の存亡がかかっている。よく考えねばならない
  </p>
</div>

## Lists
リストは 3 種類あります。

- `<ul>` 箇条書きリスト
- `<ol>` 順序付きリスト
- `<dl>` 定義リスト

HTML のリストは特定の構造を必要とします。

`<ul>` と `<ol>` は、リストの項目を表す `<li>` の直接の親でなければなりません。

したがって、`<li>` 要素は単独では使用できず、`<ul>` または `<ol>` の直接の子でなければなりません。

### 箇条書きリスト
最も一般的に使われているリストです。個々のアイテムを順不同に並べることを目的としたリストです。

```html
<p>学習リスト</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>ReactJS</li>
</ul>
```

リストの項目は、箇条書きで表示されます。

<div class="html">
  <p>学習リスト</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>ReactJS</li>
  </ul>
</div>

### 順序付きリスト
順序付きリストは、項目の順序が重要な場合に使用されます。

```html
<p>学習ステップ</p>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>ReactJS</li>
</ol>
```

順序付きリストは、ブラウザによって自動的に番号が付けられます。HTML の中に番号を入れる必要はありません。

<div class="html">
  <p>学習ステップ</p>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>ReactJS</li>
  </ol>
</div>

### 定義リスト

定義リストは、対になっている項目のためのリストです。定義リストは、`<dt>` 定義用語と `<dd>` 定義説明のペアを直接の子として含む必要があります。

```html
<dl>
  <dt>HTML</dt>
  <dd>マークアップ言語</dd>
  <dt>CSS</dt>
  <dd>HTMLを装飾する言語</dd>
  <dt>JavaScript</dt>
  <dd>HTML DOMの操作などを行う言語</dd>
  <dt>Facebook製のJSフレームワーク</dt>
  <dd></dd>
</dl>　
```

<div class="html">
  <dl>
    <dt>HTML</dt>
    <dd>マークアップ言語</dd>
    <dt>CSS</dt>
    <dd>HTMLを装飾する言語</dd>
    <dt>JavaScript</dt>
    <dd>HTML DOMの操作などを行う言語</dd>
    <dt>ReactJS</dt>
    <dd>Facebook製のJSフレームワーク</dd>
  </dl>
</div>

## Blockquotes
ブロッククォートは、引用を識別するために使用されます。

```html
<p>荀子は言います。</p>
<blockquote>終身の楽しみありて、一日の憂いなし</blockquote>
```

<div class="html">
  <p>荀子は言います。</p>
  <blockquote>終身の楽しみありて、一日の憂いなし</blockquote>
</div>

## Headings
見出しには`<h1>`から`<h6>`までの 6 段階があり、`<h1>`は最も重要な見出しです。


HTMLとテキストについて

## エラー

ContentfulとNext.jsで`next-sitemap`を使用し、`sitemap.xml` を生成していたら、

```
[FATAL] PCDATA invalid Char value 28 in (line: 37, column: 33)
```

というエラーが発生していた。

## 原因

`sitemap.xml`を生成する時に使用している`slug`というContentfulのエントリに`\b`(1文字分戻る)という文字列が入っており、そこでエラーになっていた。

Contentfulのダッシュボードからは目視で確認できず、コピーしてペーストすると確認できた。

## デバッグ

`sitemap.xml.js`を作り、落ちている箇所で`console.log()`出力し、確認した。

Contentful × Next.js [FATAL] PCDATA invalid Char value 28 in (line: 37, column: 33)

## Math

Mathは数学を司る標準組み込みオブジェクトです。
定数や関数が搭載されています。

## Math.abs()

絶対値(Absolute value)を返します。absはabsolute: 絶対の意味を持つ。

```js
Math.abs(-10)
// 10
Math.abs(10)
// 10
```

※絶対値: 原点0からの距離をあらわす値のこと。

## Math.sign()

引数に渡された数値の符号を返します。Number以外はNaNが返ります。
数値の符号を取得したい場合に使用します。ちなみにsignは符号の意味を持つ。

```js
Math.sign(100)
// 1
Math.sign(-999)
// -1
Math.sign(0)
// 0
```

Math.abs()とMath.sign()の組み合わせ
絶対値と符号を掛け合わせる。

```js
var exampleFunc = function (x) {
  return Math.abs(x) * Math.sign(x)
}
exampleFunc(-100)
// -100
```

## Math.pow()

累乗の計算を行う。Power(累乗)の略。

```js
Math.pow(base, exponent)
Math.pow(2, 31) // 2147483648
Math.pow(-2, 31) // -2147483648
```

※累乗の指数
※冪乗の定義は、自然数・整数という縛りがない

## Math.trunc()

引数として与えた数の小数部の桁を取り除くことによって整数部を返します。
ちなみにtruncは切り捨ての意味です。

```js
Math.trunc(42.195)
// 42
```

## Math.floor()

与えられた数値以下の最大の整数を返します。

```js
Math.floor(5.9)
// 5
Math.floor(-5.9)
// -6
```

## 10進数と16進数の変換

16進数への変換は、`Number.prototype.toString(16)`

```js
Number(2147483647).toString(16) // "7fffffff"
Number(-2147483648).toString(16) // "-80000000"
// ※-2147483647はMath.pow(2, 31) - 1
```

先頭に`0x`を付けると、16進数であることを示している。付けないと構文上エラーが発生する。

16進数から10進数への変換は、`Number.parseInt("16進数", 16)`または、グローバルの`parseInt("16進数", 16)`

```js
parseInt("7fffffff", 16) // 2147483647
parseInt("-80000000", 16) // -2147483648
```

## マメ

符号付き32ビット整数は -2の32乗から2の32乗-1で表現される。

JSの最大値: `Number.MAX_SAFE_INTEGER`(9007199254740991)
JSの最小値: `Number.MIN_SAFE_INTEGER`(-9007199254740991)

※Numberの静的プロパティ
※Mathは数学でNumberは数値を扱う

## 参考

- [Math](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)
- [Number](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number)

JavaScript

JavaScriptの組み込みオブジェクトMathを学ぶ

## はじめに

APIの呼び出しには、１分間に60回までなど制限があります。これを回避する為に、１回のAPI呼び出し毎に少し処理を止める実装を行いたいと思いました。

## コード

※jsonのデータをinsertしていたので、jsonをループさせています。

```js
async function exec() {
  for (let row of json) {
    insertRecord(row)
    await sleep(1100); // 1100ms眠らせる
  }
}

const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

exec() // 実行
```

JavaScriptでSleep処理の実装

Pythonで軽めにLinterを設定したい

## インストール
```
pip3 install flake8 autopep8
```

## VSCode設定

不要な設定もあるかも

```json
{
  "python.linting.enabled": true, // 文法チェックを行う
  "python.linting.pylintEnabled": false, // pylint は使わない
  "python.linting.pycodestyleEnabled": false,  // pep8 は使わない
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": [
    "--ignore=W293, W504, E501",
    "--max-line-length=160",
  ],
  "python.formatting.provider": "autopep8", // 自動整形に autopep8 を使う
  "python.formatting.autopep8Args": [ // autopep8 の設定
    "--ignore=E111, E114, E402, E501"
  ],
  "[python]": {
    "editor.formatOnSave": true, // 保存時に自動整形を行う
    "editor.formatOnPaste": false, // ペースト時に自動整形を行わない
    "editor.formatOnType": false, // 入力後に自動整形を行わない
  },
}
```

## 実行

```
flake8 # 対象ファイルの確認
autopep8 -i {ファイルディレクトリ} # 自動修正
```

Python の Linter 設定

## 基本形
```js
const arr = [1, 2, 3];

const asyncRes = await Promise.all(arr.map(async (i) => {
	await sleep(10);
	return i + 1;
}));

console.log(asyncRes);
// 2,3,4
```

- Array.map()を`Promise.all`で囲むことでイテレータ全体が返ってくるのを待ちます。

## FireStoreの例
この例では、Article一覧を取得し、Array.map関数の中で、Articleに紐づくWebsiteを取得しています。

```js
async function get(limit = 20) {
  const articlesRef = await db.collection('articles').limit(limit).get()
  const articles = await Promise.all(articlesRef.docs.map(async (articleRef) => {
    const article = articleRef.data()
    // Reference型なので、取得するには get() すれば良い
    const websiteRef = await article.website_id.get()
    const website = websiteRef.data()

    return {
      description: article.description,
      image_url: article.image_url,
      title: article.title,
      url: article.url,
      website: website
    }
  }))
  return articles
}
```

## 参考
- [How to use async functions with Array.map in Javascript](https://advancedweb.hu/how-to-use-async-functions-with-array-map-in-javascript/)