
ブラウザが提供する<red>Web Storage API</red>を使えば、ローカルストレージにデータを保存し、画面をリロードした後もデータを再利用できます。

身近なところでは、Amazon で閲覧履歴をローカルストレージに保存し商品の推薦などに用いており、その様子は<blue>devtools の Application タブ</blue>で確認できます。

<red>window.localStorage</red>は永続的にデータを保持します。

<red>window.sessionStorage</red>はページを閉じてセッションを終了するまでデータを保持します。

この２つは使い方は同じなので、以下では localStorage でサンプルを記載します。

（なお、この window は JavaScript のグローバルオブジェクトというもので、実装する際は省略可能です。）

### localStorage からデータを保存する

ローカルストレージにデータを保存するには、<code>localStorage.setItem('キー','値')</code>を使います。

ここで JavaScript のオブジェクトはローカルストレージにそのまま保存できないので、<code>JSON.stringify</code>を使って文字列に変換する必要があります。

```javascript
// localStorageにデータを保存
localStorage.setItem('a', 'apple');

// localStorageにオブジェクトを保存
localStorage.setItem('a', JSON.stringify(SomeObject));
```

### localStrage からデータを取得する

データを取得するには、<code>localStorage.getItem('キー')</code>を使います。

ここでもオブジェクトを取得する場合は、<red>JSON.parse</red>を使って文字列をオブジェクトに復元する必要があります。

```javascript
// localStorageから指定したキーのデータを取得
const apple = localStorage.getItem('a');

// localStorageから指定したキーのオブジェクトを取得
const SomeObject = JSON.parse(localStorage.getItem('a'));
```

#### データの取得と保存の処理を関数にする

データの取得と保存の処理を頻繁に行う場合は、関数にしておくと良いです。

```javascript
// ローカルストレージにデータを書き込む
const saveJSON = (key, data) => localStorage.setItem(key, JSON.stringify(data));
// ローカルストレージからデータを取得する
const loadJSON = (key) => key && JSON.parse(localStorage.getItem(key));
```

### localStorage からデータを削除する

データの削除には、<code>remove</code>または<code>clear</code>を使用します。

```javascript
// localStorageから指定したキーのデータを削除
localStorage.remove('a');

// localStorageから全てのデータを削除
localStorage.clear();
```

### localStorage が保存する全てのデータを取得する

これには固有のメソッドが存在しないので、実装する必要があります。

参考：[JavaScript: localStorage のすべてのキーを列挙する](https://blog.sarabande.jp/post/73643047325)

#### for文を使う方法

for文を使う素直な方法です。

```javascript

const Object_list = [];

for (let i = 0; i < localStorage.length; i++) {
  // キーを取得
  const key = localStorage.key(i);
  // 値を取得
  const value = localStorage.getItem(key);
  // ループ外に作った配列に追加して保存
  Object_list.push({ key, value });
}
```


#### Object.keysを使う方法

こちらは少しテクニカルなオブジェクトのキーを取得できる<code>Object.key()</code>を使う方法です。

実行速度ではこちらの方が早いそうですが、どちらでも良いと思います。参考までに。

```javascript

const Object_list = [];

Object.keys(localStorage).forEach( key => {
    Object_list.push({key,localStorage.getItem(key)})
})

```

JavaScriptでLocalSorage(Web Storage API)の使い方

LocalStorageにデータを保存する

## データベーススペシャリストを受験してみた

令和３年１０月１０日にデータベーススペシャリストを受験してきました。

春に情報処理安全確保支援士に合格していたので、午前１は免除となり午前２からの参加。

データベースを特に実務で使っているわけではなく、単に苦手意識がある分野を勉強するための動機付けとしての受験です。


自己採点した結果はこんな感じ。

- 午前１：免除
- 午前２：19/25 ほぼ過去問。
- 午後１：問１(DB設計）ほぼ埋めたが時間がかかり過ぎた 問３(SQL)　時間がほぼ残っておらず半分も終わらず詰み。
- 午後２：問２(DB設計) ６割くらい。時間足りなすぎる。。


ということで全体的に時間が足りません。手を動かすべき時間に迷ってしまうところが多かった。過去問を解いて練習する量が全然足りてなかったです。

ただDBほぼ初心者のレベルから始めてかなり理解が進んだので受験して良かった。来年には通りたいな。

勉強に使った本は下記の３冊。特にSQLアンチパターンはめちゃ良かったです。(読み終わってはいませんが)

<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202110140008395565?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2f86dd35ea1521f07501b93000996ae9%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2f86dd35ea1521f07501b93000996ae9%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/798/167/770/20010009784798167770_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202110140008395565?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2f86dd35ea1521f07501b93000996ae9%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2f86dd35ea1521f07501b93000996ae9%2F" target="_blank" rel="nofollow" >うかる！データベーススペシャリスト 情報処理技術者試験学習書 ２０２１年版 /翔泳社/ＩＴのプロ４６</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;opacity: .50;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)";-khtml-opacity: .50;-moz-opacity: .50;"><div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202110140008395565?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2f86dd35ea1521f07501b93000996ae9%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2f86dd35ea1521f07501b93000996ae9%2F" target="_blank" rel="nofollow" >楽天市場でチェック</a></div><div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://www.amazon.co.jp/gp/search?keywords=%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%80%80%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AA%E3%82%B9%E3%83%88&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=blogtukki-22" target="_blank" rel="nofollow" >Amazonでチェック</a></div></div></div><div class="booklink-footer" style="clear: left"></div></div>


<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202110140008529937?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F09409f8c130f9ecc3f7db4b20623a797%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F09409f8c130f9ecc3f7db4b20623a797%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/865/751/840/20010009784865751840_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202110140008529937?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F09409f8c130f9ecc3f7db4b20623a797%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F09409f8c130f9ecc3f7db4b20623a797%2F" target="_blank" rel="nofollow" >データベーススペシャリスト「専門知識＋午後問題」の重点対策 情報処理技術者試験対策書 ２０２０ /アイテック/山本森樹</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;opacity: .50;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)";-khtml-opacity: .50;-moz-opacity: .50;"><div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202110140008529937?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F09409f8c130f9ecc3f7db4b20623a797%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F09409f8c130f9ecc3f7db4b20623a797%2F" target="_blank" rel="nofollow" >楽天市場でチェック</a></div><div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://www.amazon.co.jp/gp/search?keywords=%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%80%80%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AA%E3%82%B9%E3%83%88&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=blogtukki-22" target="_blank" rel="nofollow" >Amazonでチェック</a></div></div></div><div class="booklink-footer" style="clear: left"></div></div>


<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_20211014000743716?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F155d07bf69f979c71f1b91bcb99d241a%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F155d07bf69f979c71f1b91bcb99d241a%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/873/115/894/20010009784873115894_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_20211014000743716?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F155d07bf69f979c71f1b91bcb99d241a%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F155d07bf69f979c71f1b91bcb99d241a%2F" target="_blank" rel="nofollow" >ＳＱＬアンチパタ-ン   /オライリ-・ジャパン/ビル・カ-ウィン</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;opacity: .50;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)";-khtml-opacity: .50;-moz-opacity: .50;"><div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_20211014000743716?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F155d07bf69f979c71f1b91bcb99d241a%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F155d07bf69f979c71f1b91bcb99d241a%2F" target="_blank" rel="nofollow" >楽天市場でチェック</a></div><div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://www.amazon.co.jp/gp/search?keywords=sql%E3%82%A2%E3%83%B3%E3%83%81%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=blogtukki-22" target="_blank" rel="nofollow" >Amazonでチェック</a></div></div></div><div class="booklink-footer" style="clear: left"></div></div>


DBスペシャリストは次また１年後なので、次のIPAの春試験はネットワークスペシャリストを受ける予定。

データベーススペシャリストを受けた感想

データベーススペシャリストを受けてきた話


## Twitterクローンを作ろう！

誰もが使ったことがある（はずの）Twitterのクローンアプリを作成して、Vue.jsの理解をより深めていきます。

TwitterのようなSNSはほどほどに複雑ですが、手を出せないほど難しいわけではありません。なので実力アップには最適だと思います。

最初はシンプルに１人のユーザーが独り言を呟くアプリという設定で作っていきます。


### FormからAppにツイートのデータをオブジェクトとして渡す

App以外にFormとTweetsというコンポーネントを作り、Formで入力フォームからツイートを入力させます。

「ツイートする」ボタンを押すと、clickイベントにより<code>$emit</code>を動作させて、親コンポーネントのAppにツイートのデータを渡します。

ここで、ツイートのデータを<blue>TweetObj</blue>というオブジェクトに設定しました。こうすることで、<red>後からユーザーのデータを追加したいなどの修正に対応しやすくなります。</red>

TweetObjは最終的にバックエンド側でデータベースに接続することを念頭に主キーとなる<blue>tweet_id</blue>と
ツイートの本文である<blue>tweet_body</blue>を持たせました。

このほかにBootStrapが、public/index.htmlで読み込んであります。

#### App.vue

```html
<template>
  <div class="wrapper">
    <h2 class="text-success">Twitter-Vue3</h2>
    <div class="content">
      <Form v-on:tweet-event="tweetAction" />
      <Tweet />
    </div>
  </div>
</template>

<script>
import Form from "./components/Form.vue";
import Tweet from "./components/Tweet.vue";

export default {
  name: "App",
  components: {
    Form,
    Tweets,
  },
  methods: {
    tweetAction(TweetObj){
      console.log(TweetObj)
    }
  }
};
</script>
<style>
.wrapper {
  width: 60%;
  margin: 20px auto;
}
.content {
  margin: 20px auto;
  width: 100%;
}
</style>

```


#### Form.vue

```html
<template>
  <div class="form form-group">
    <textarea
      name="form"
      id=""
      class="form-control"
      cols="60"
      rows="5"
      placeholder="いまなにしてる？"
			v-model="TweetObj.tweet_body"
    ></textarea>
		<br/>
    <button class="text-white bg-success" v-on:click="doTweet">ツイートする</button>
  </div>
</template>

<script>
export default {
	name:"Form",
	data(){
		return{
			TweetObj:{
				tweet_id:0,
				tweet_body:''
			},
		}
	},
	methods: {
		doTweet(){
			this.TweetObj.tweet_id += 1
			this.$emit('tweet-event',this.TweetObj)
		},
	},
}
</script>

```

![twittervue1](/images/2021年/10月/twittervue1.png)


### AppからTweetツイートのデータをオブジェクトの配列として渡す

Appコンポーネントに<blue>AllTweet</blue>という配列を作りました。<code>Array.of()</code>によって初回に表示するダミーデータを持った配列です。

Formコンポーネントから受け取る<blue>TweetObj</blue>をこの配列に<code>push()</code>メソッドによって追加していきます。

また、この配列を<code>v-for</code>を使って分解し、子のTweetコンポーネントに渡していきます。

TweetコンポーネントではBootStrapを使って、idを上に本文を下に表示させています。

ただし、この実装では画像の通りバグがあります。


#### App.vue

```html
<template>
  <div class="wrapper">
    <h2 class="text-success">Twitter-Vue3</h2>
    <div class="content">
      <Form v-on:tweet-event="tweetAction" />
      <div style="margin-top:20px">
        <Tweet
          v-for="Tweet in AllTweet"
          v-bind:TweetObj="Tweet"
          v-bind:key="Tweet.tweet_id"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Form from "./components/Form.vue";
import Tweet from "./components/Tweet.vue";

export default {
  name: "App",
  components: {
    Form,
    Tweet,
  },
  data() {
    return {
      AllTweet: Array.of({
        tweet_id: 0,
        tweet_body: "はじめてのツイート",
      }),
    };
  },
  methods: {
    tweetAction(TweetObj) {
      this.AllTweet.push(TweetObj);
    },
  },
};
</script>

// 略
```


#### Tweets.vue

```html
<template>
  <div class="card">
    <div class="card-header">
      {{ TweetObj.tweet_id }}
    </div>
    <div class="card-body">
      <div class="card-text">{{ TweetObj.tweet_body }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tweet",
  props: {
    TweetObj: Object,
  },
};
</script>

```

![twittervue2](/images/2021年/10月/twittervue2.png)


### オブジェクトの参照渡しを値渡しに変更する

画像の通り、新しい呟きを追加するとこれまでのデータも最新のものに置き換わってしまいます。

これはFormコンポーネントで親にオブジェクトをそのまま渡しているのが原因です。

これは<red>オブジェクトの参照渡し</red>という現象です。詳細は省きます。

オブジェクトを値渡しにするために、<code>assign()</code>というメソッドを使うようにFormコンポーネントを修正します。


#### Form.vue

```javascript

// 略

	methods: {
		doTweet(){
			this.TweetObj.tweet_id += 1
      // 値渡しするために、新しいオブジェクトを定義する
			const tweet = Object.assign({},this.TweetObj)
			this.$emit('tweet-event',tweet)
		},
	},

```

![twittervue3](/images/2021年/10月/twittervue3.png)

続きます。

ユーザーが一人の場合の作り方

Vue3でTwitterクローンを作る　その１


最近Hooks以降に対応したReact本の刊行ラッシュで３〜４冊のReact本が出ています。流行りなのかな？

この記事は安定のオライリーから出版されたReactハンズオンラーニングを読み終わり、理解不足だった箇所のメモです。

<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202109281123592525?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F682d962ce902b483e088fa7ccedea27d%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F682d962ce902b483e088fa7ccedea27d%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/873/119/380/20010009784873119380_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202109281123592525?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F682d962ce902b483e088fa7ccedea27d%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F682d962ce902b483e088fa7ccedea27d%2F" target="_blank" rel="nofollow" >Ｒｅａｃｔハンズオンラーニング Ｗｅｂアプリケーション開発のベストプラクティス  第２版/オライリ-・ジャパン/アレックス・バンクス</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;opacity: .50;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)";-khtml-opacity: .50;-moz-opacity: .50;"><div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202109281123592525?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F682d962ce902b483e088fa7ccedea27d%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F682d962ce902b483e088fa7ccedea27d%2F" target="_blank" rel="nofollow" >楽天市場でチェック</a></div><div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://www.amazon.co.jp/gp/search?keywords=React%20%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=blogtukki-22" target="_blank" rel="nofollow" >Amazonでチェック</a></div></div></div><div class="booklink-footer" style="clear: left"></div></div>

### デストラクチャリング（P21）
デストラクチャリングはオブジェクトを変数に代入したり引数として受け取る際に、必要なプロパティのみ取り出すことができる機能。

定義する変数名とオブジェクトのkeyの名前が一致することが条件。

```javascript
const sandwich = {
  bread  =  "dutch cruch",
  meat   =  "tuna",
  cheese =  "swiss",
  topping = ["lettuce","tomato","mustard"]
};

const { bread, cheese } = sandwich;

console.log(meat,cheese); // tuna swiss

```

これを関数定義に利用できる。

```javascript
const showMeat = ({ meat }) => {
  console.log(`${meat} SandWich ! `);
}

// sandwichオブジェクトからmeatプロパティが取り出され、当てはめられる。
showMeat(sandwich)
```

これ正直よく分からないで使ってたな・・・・


### mapの第一引数を空にし、同じ内容のコンポーネントを複製する。 （P109）

<code>map</code> とか <code>filter</code> の第二引数を取るとインデックスとして使えるってやつの応用。

任意の数の空(undefined)の配列を生成し、それを利用して同じ内容のコンポーネントを複製できる。

この本のサンプルは、レーティングを表す星のマークを引数に応じて複製している。

```javascript
const StarRating = ({ totalStarts = 5}) => {
   [...Array(totalStars)].map((_,i) => <Star key={i} />)
}
```

### useEffect内での非同期処理の書き方(P159)

```javascript
useEffect(() => {
  const fn = async () => {
    await SomePromise();
  };
  fn();
});
```

この書き方が周りくどいと思っていたのですが、即時関数で書けば良いらしい

```javascript
useEffect(() => {
    (async () => {
      await SomePromises();
    })();
  }
})
```

### コンポーネントのパフォーマンス改善 memo関数(P165)

memo関数はReatの関数コンポーネントをメモ化するためのトップレベル関数です。

関数コンポーネントのうち副作用がない純粋関数（同じ引数で呼ばれた場合、常に同じ結果を返す）をメモ化することで、パフォーマンスが改善します。

下記の例ではCatコンポーネントをmemo化してPureCatコンポーネントを作成しています。

PureCatコンポーネントは、初回描画時に描画された後は、名前を追加した際に既存のコンポーネントは再描画されず、新たに追加されたコンポーネントのみが描画されます。

```javascript

function App(){
  const [cats, setCats] = useState(["Biscuit","Jungle","Outlaw"]);
  return (
    <>
    {cats.map((name,i) => (

      //memo関数でmemo化されたPureCatコンポーネントを使う
      // <Cat key={i} name={name}>
      <PureCat key={i} name={name}>
    ))}
    <button onClick={() => setCats([...cats, prompt("Name a cat")])}>
     Add a Cat
     </button>
  )
}
```

```javascript


import React, { useState, memo } from 'react';

const Cat = ({ name }) => {
  console.log(`rendering ${name}`);
  return <p>{name}</p>
}

const PureCat = memo(cat)
```

### memo関数とuseMemoフックの使い分け

そのままですが、<red>memo関数</red>は<blue>コンポーネント</blue>をメモ化する際に利用できる関数です。

それに対して、<red>useMemoフック</red>は<blue>値</blue>をキャッシュしてメモ化するフックになります。

ここら辺の内容はもう少ししっかり勉強したい。

参考：[React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする](https://qiita.com/soarflat/items/b9d3d17b8ab1f5dbfed2)

Reactの基礎部分で抜けていたところのメモ

Reactハンズオンラーニング　メモ① １〜７章


### 親コンポーネントで勝敗判定を行うための配列を用意し、更新する。

子コンポーネントから必要な情報を貰えたので、残りは親コンポーネントで勝敗判定をします。

やることは JavaScript で勝敗判定をするときとほぼ同じです。

まず、○× の情報を保存する 0 で埋まった配列<blue>states</blue>を作ります。

<code>Array(9).fill(0)</code> は [0,0,0,0,0,0,0,0,0] と同じ意味です。

さらに<blue>doCountUp</blue>内で、states を更新するようにします。

#### App.vue

```javascript
// 略

import Masu from './components/Masu.vue';

export default {
  name: 'App',
  data() {
    return {
      count: 0,
      states: Array(9).fill(0),
      message: '',
    };
  },
  methods: {
    doCountUp(clickNumber, masu) {
      this.count += 1;
      // clickNumberは1~9までなので、１減らして配列に当てはめる
      this.states[clickNumber - 1] = masu;
    },
  },
};
```

### 勝敗判定のための配列を作る

勝敗を判定するために縦横斜めの 3+3+2 の８パターンの配列が必要です。

現在の<code>states</code>を受け取って、8 パターンの配列を返すメソッド<code>makeArrays</code>を作ります。

<code>array.filter()</code> は、<red>条件判定が true のものを抽出して新しい配列を返す</red>メソッドです。<br/>
filter の第二引数は、その要素の配列内でのインデックス（順番）を返します。

<code>array.slice()</code>は、<red>指定したインデックスの範囲を抽出して新しい配列を返す</red>メソッドです。

#### App.vue

```javascript

//略

methods: {
  makeArrays(array){
    // 縦の配列
    const columnA = array.filter((n,index) => index % 3 === 0)
    const columnB = array.filter((n,index) => index % 3 === 1)
    const columnC = array.filter((n,index) => index % 3 === 2)

    // 横の配列
    const rowA = array.slice(0,3)
    const rowB = array.slice(3,6)
    const rowC = array.slice(6,9)

    // 斜めの配列
    const diagonalA = [array[0],array[4],array[8]]
    const diagonalB = [array[2],array[4],array[6]]

    // 8個の配列を持った配列として返す
    return [columnA,columnB,columnC,rowA,rowB,rowC,diagonalA,diagonalB]
  },
  doCountUp(clickNumber, masu) {
    this.count += 1;
    // clickNumberは1~9までなので、１減らして配列に当てはめる
    this.states[clickNumber - 1] = masu;

    const checkArrays = this.makeArrays(this.states)

  },
},

```

### 勝敗判定をするメソッドを作り適用させる。

勝敗を判定するために縦横斜めの 3+3+2 の８パターンの配列が必要です。

<code>data()</code> 内に変数<blue>message</blue> を作り、それを <code>template</code>内で表示させます。

勝敗の判定を行うメソッド<blue>checkWin()</blue>では、勝負がついたら<blue>message</blue>を変更させます。

<code>array.every()</code> は、<red>配列内の条件判定が全て true なら true を返す</red> メソッドです。

<code>map()</code>は、<red>引数に指定したコールバック関数を各配列に作用させることができる</red>メソッドです。


#### App.vue

```javascript
<template>
  <div>
    <div class="board">
      <Masu
        v-bind:count="count"
        v-for="n of 9"
        v-bind:key="n"
        v-bind:number="n"
        v-on:count-event="doCountUp"
      />
    </div>
    <p class="message">{{ message }}</p>
  </div>
</template>

<script>
import Masu from "./components/Masu.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
      states : Array(9).fill(0),
      message: "",
    };
  },
  components: {
    Masu,
  },

  methods: {
    makeArrays(array){
      // 略
    },

    checkWin(array){
      if(array.every(n=>n === "◯")){
        this.message = "Aの勝ち！"
      } else if (array.every(n=>n === "×")){
        this.message = "Bの勝ち！"
      }
    },
    doCountUp(clickNumber, masu) {
      this.count += 1;
      // clickNumberは1~9までなので、１減らして配列に当てはめる
      this.states[clickNumber - 1] = masu;

      const checkArrays = this.makeArrays(this.states)
      checkArrays.map((array)=>this.checkWin(array))
    },
  },
};

</script>

```


・勝敗判定がついたらゲームをストップする

・引き分けを判定する

などの機能が未完ですが、○×ゲームの基本的な機能はこれで実現することができました。



Vue3で○×ゲームを作る③


### 子から親にクリックイベントが発火したことを伝える

親コンポーネントで管理しているcount変数を増加させるタイミングは、子コンポーネントでクリックイベントが発火したときです。

子コンポーネント内でクリックイベントに<code>v-on</code>で紐付いている<blue>doAction</blue>内で<code>$emit</code>を使い、\
親で管理するcountを増加させるイベントである<blue>doCountUp</blue>を実行してもらいます。

$emitについて教科書では説明不足なので補足すると、<br/>
<red>this.$emit(親に登録したイベント名,(必要なら)親に渡す引数１,引数２,・・・)</red> <br/>
という形で使用します。

ついでに、一度クリックした箇所は選ばせないようにし、三項演算子を使って○×の判定を簡潔にします。

#### components/Masu.vue

```javascript
<template>
  <div class="masu" v-on:click="doAction">
    {{ masu }}
  </div>
</template>


<script>
export default {
  name: "Masu",
  data() {
    return {
      masu: "",
    };
  },
  props: {
    count: Number,
  },
  methods: {
    doAction() {
      if(this.masu === "" ){
        this.masu = this.count % 2 === 0 ? "◯" : "×"
        this.$emit('count-event')
      }
    },
  },
};
</script>
```

今回は引数は付けずに親のイベント<blue>count-event</blue>のみを動作させるものとしました。<br/>
親側ではこれを<code>v-on</code>で<blue>doCountUp</blue>と紐付かせています。


#### App.vue

```javascript
<template>
    <div class="board">
      <Masu
        v-bind:count="count"
        v-for="n of 9"
        v-bind:key="n"
        v-on:count-event="doCountUp"
      />
    </div>

</template>

<script>
import Masu from "./components/Masu.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    Masu,
  },
  methods: {
    doCountUp() {
      this.count += 1;
    },
  },
};
</script>
```

###  子のどのコンポーネントがクリックされたのかの情報を持たせる
子のコンポーネントを9個作るときに、<code>v-for</code>を利用しました。その際に<code>key属性</code>を設定しています。\
公式：[key 属性 | Vue.js](https://v3.ja.vuejs.org/guide/migration/key-attribute.html)

key属性はvueのシステム側のアルゴリズムで必須とされる属性で、コンポーネントを並べる順番などに利用されています。\
vue.js-devtoolで覗くと、for文で作った子のコンポーネントにkey属性が付いているのが分かります。

![vue-dev-tool](/images/2021年/9月/vue-key.png)

このkeyに渡した<blue>"n"</blue>を<code>props</code>として子のコンポーネントに渡してあげることで、
各コンポーネントで自身の番号を扱えそうです。


#### App.vue

```javascript
<template>
    <div class="board">
      <Masu
        v-bind:count="count"
        v-for="n of 9"
        v-bind:key="n"
        v-bind:number="n"
        v-on:count-event="doCountUp"
      />
    </div>

</template>

// 略

```

#### components/Masu.vue

```javascript
// 略

<script>
export default {
  name: "Masu",
  data() {
    return {
      masu: "",
    };
  },
  props: {
    count: Number,
    number: Number,
  },
  methods: {
    doAction() {
      console.log(this.number)
      if(this.masu === "" ){
        this.masu = this.count % 2 === 0 ? "◯" : "×"
        this.$emit('count-event')
      }
    },
  },
};
</script>
```

### クリックされた子の番号と○×の情報を親に送る


#### components/Masu.vue

<code>$emit</code>を使い、親のコンポーネントにクリックされたコンポーネント自身の番号とその時の○×の情報を送ってもらいます。

```javascript
// 略

  methods: {
    doAction() {
      console.log(this.number)
      if(this.masu === "" ){
        this.masu = this.count % 2 === 0 ? "◯" : "×"
        // 親のコンポーネントにnumberとmasuの二つの要素を送っている
        this.$emit('count-event',this.number ,this.masu,)
      }
    },
  },
};

```

親でこの情報を受け取ります。


#### App.vue

```javascript
// 略

    // 子のコンポーネントから受け取った二つのデータ（引数は名前ではなく順序で対応する）
    // numberとすると名前が被るので、clickNumberとした
    doCountUp(clickNumber, masu) {
      this.count += 1;
      console.log(this.clickNumber);
      console.log(this.masu);
    },

// 略

```

続きます

 $emitで親コンポーネントにデータを送る方法について

Vue3で○×ゲームを作る②


### v-forでmasuコンポーネントを繰り返し利用する

まずはcomponentsフォルダにMasuコンポーネントを作り、styleだけ定義しました。<br/>
そのMasuコンポーネントをApp.vueから読み込み、<code>v-for</code>を使い、必要なマス目の数だけ作成します。


#### App.vue

```javascript

<template>
    <div class="board">
      <Masu
        v-for="n of 9"
        v-bind:key="n"
      />
    </div>
</template>

<script>
import Masu from "./components/Masu.vue";

export default {
  name: "App",
  components: {
    Masu,
  },
};
</script>

<style>
.board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 450px;
}
</style>

```

#### components/Masu.vue

```javascript
<template>
  <div class="masu">
  </div>
</template>

<script>
export default {
  name: "Masu",
};
</script>

<style>
.masu {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  text-align: center;
  font-size: 80px;
  color: red;
}
</style>
```

### クリックイベントに反応して○を表示させる

子コンポーネントのMasu.vueにクリックイベントに配置し、クリックしたら○が表示されるようにします。

#### Masu.vue

```javascript
<template>
  <div class="masu" v-on:click="doAction">
    {{ masu }}
  </div>
</template>

<script>
export default {
  name: "Masu",
  data() {
    return {
      masu: "",
    };
  },
  methods: {
    doAction() {
        this.masu = "◯"
    },
  },
};
</script>

```


### 何回目のクリックであるかの情報を、子コンポーネントに伝える

アプリ全体でマスを何回クリックしたのかをカウントします。

<red>このデータはどのコンポーネントに持たせるべきか</red>が、Vue.jsを使うときに考えるべき大事なポイントです。

クリックした回数という情報は親であるAppコンポーネントに持たせてcountとしました。

このcountを子供のMasuコンポーネントにpropsで伝えます。

#### App.vue

```javascript
<template>
    <div class="board">
      <Masu
        v-bind:count="count"
        v-for="n of 9"
        v-bind:key="n"
      />
    </div>
</template>

<script>
import Masu from "./components/Masu.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    Masu,
  },
};
</script>
```

#### components/Masu.vue

```javascript
<template>
  <div class="masu" v-on:click="doAction">
    {{ masu }}
  </div>
</template>

<script>
export default {
  name: "Masu",
  data() {
    return {
      masu: "",
    };
  },
  props: {
    count: Number,
  },
  methods: {
    doAction() {
      if(this.count % 2 === 0 ){
        this.masu = "◯" ;
      } else {
        this.masu = "×";
      }
    },
  },
};
</script>
```


続きます


Vue3で○×ゲームを作る①


解説は後日追記

### App.vue
```javascript

<template>
  <Que que="日本で２番目に高い山は？" />
  <Ans ans="富士山" />
  <Ans ans="北岳" />
  <Ans ans="立山" />
  <Ans ans="剱岳" />
</template>

<script>
import Que from "./components/Que.vue";
import Ans from "./components/Ans.vue";

export default {
  name: "App",
  components: {
    Que,
    Ans,
  },
};
</script>
```

### Que.vue
```javascript
<template>
    <div>{{ que }}</div>
</template>

<script>
export default {
    name: "Question",
    props: {
        que:String
    },
}
</script>

```

### Ans.vue
```javascript
<template>
    <div ref="ans" v-on:click="doAction">{{ans}}</div>
</template>

<script>
export default {
    name: "Ans",
    props:{
        ans:String
    },
    // data(){

    // },
    methods: {
        doAction(){
            if (this.ans === "北岳"){
            this.$refs.ans.innerHTML = "正解";
            }
        }
    },
}
</script>


Vue.jsでクイズゲームを作る


## CommonJSとESModules

JavaScriptのサーバーサイドでの実行環境であるNode.jsは<code>CommmonJS</code>と呼ばれるモジュールシステムを利用しています。

Node.js上でTypeScriptを用いて開発を行おうとするとき、TypeScriptはCommonjsではなくブラウザで動くJavaScriptで使われている
<code>ESModules</code>を使用する必要があります。

Node.jsではv8からESModulesを使用できるようになっていますが、TypeScriptを使わないのであれば現状はCommonJSを使用するのが無難だと思います。


### package.jsonの設定

まずESModulesを扱う場合は、package.jsonの"type"属性 を"module"に設定します。
CommonJSを使う場合は"commonjs"です。

```javascript
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
 "type": "module", <- 

(以下略)
 ```
## CommonJSの特有の機能をESModulesで使う

CommonJSでよく使われるメソッドのうち、ESModulesでは仕様上使えないものがあります。<br>
その対応として、Node.jsではこれらを使うためのAPIを提供しています。


#### require
```javascript
import module from "module";
const require = module.createRequire(import.meta.url);

```

#### __filename と __dirname
```javascript
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
```

## ESModuleのファイルをインポートする
Node.js上のTypeScriptのファイルでTypeScriptのファイルを呼び出すとき、
import文では拡張子の **.ts** を省略して表記します。

```javascript
// app.ts で foo.tsを呼び出す
import {foo} from './foo'
```

しかし、Node.js上ではこれが上手くいかない。

```terminal
Error: Cannot find module '/***/foo' imported from /***/app.ts
(略)
```

TypeScriptコンパイラはimport文については拡張子の補完を行わず出力（ビルド）するが、
(Node.js上の)ESModulesは拡張子の補完機能がないため、該当ファイルを発見することができないのが原因だそうです。<br>
（突っ込んだ理屈についての解説が下記リンクにあるが完全には理解できなかったorz）

対策としては、拡張子に **.js** を付けて呼び出すとうまく動作します。
( ここで **.ts** を付けるとTypeScriptコンパイラに怒られる。)

```javascript
// app.ts で foo.tsを呼び出す
import {foo} from './foo.js'
```

TypeScriptのファイルを.jsを付けて呼び出すという不思議な記述になってしまったが、これが現状ではベターな解決方法のようです。


### 結論
Node.js上でTypeScriptはまだちょっとしんどい箇所が多いので、現時点ではCommonJSモジュールでJavaScriptで書くか、静的型付けがしたいなら他の言語で書いたほうが楽そうな気がします。


参考<br>
[Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発](https://blog.cybozu.io/entry/2020/10/06/170000#mjs-%E3%81%A8-cjs)<br>
[Node.js 13.2.0 で--experimental-modulesが外れたのでESMを試す](https://qiita.com/hagevvashi/items/8b4a7d3061bddd3b340e)


Node.jsでTypeScriptを使ったときに困った点など。

Node.jsでESModulesを利用する


Reactの勉強を兼ねてWeb版Twitterのクローンアプリを作成しました。個人的な夏休みの宿題。<br/>
その引っかかったところのメモです。

Next.jsを使う方が簡単に作れると思いますがコンパクトに作りたかったので、生のReact（Create React App）を使います。<br/>
サーバー側は何でも良かったのですが、TypeScriptの勉強も兼ねてExpressです。

## 利用した技術
#### フロントエンド
- React
- React Hook Form
- axios
- Tailwind CSS
- Material UI
- Atomic Design

もう少し力が付いたらwebpackとBabelを直接触っていきたい。
  
#### バックエンド
- Node.js
- Express
- nodemon
- MySQL
- sequelize

### 共通
- TypeScript
- ESLint
- Prettier
- SSE(Server Sent Event)
- 


### SOP(Same Origin Polycy)に対応するため、react-scriptのプロキシ機能を使用し、expressのポートに合わせる
SOPは、同一オリジンでないサイトからjavascriptを読み込むことを防ぐための仕組み


### react-scriptのプロキシを使用するとSSE(Server Sent Event)のレスポンスを受け取れない
tweetの更新にSSEを使うと、最新ツイートをリアルタイムで更新してくれて良いなと思ったので使ってみたら反応がない。

他のクライアントが更新した内容について、SSEの通信は成立していてイベントが返ってきているのにそのデータが反映されていない。
参考[Reactのプロキシを通すとSSE (Server-sent events)のレスポンスを受け取れない](https://qiita.com/takkkun/items/f87caaf78d98efbf4963)


### 感想
バックエンド側もTypeScriptで書くためにESModulesでNode.jsを使っていたが、つらみが多くて便利性をあまり感じなかった・・・

ESModulesとCommonJSの互換がもう少し発展するまで、無理して触る必要がない気がする。

バックエンド側で静的型付け使いたいなら、素直にJavaかKotolinかGoとかで良いんじゃないかな？ 

僕は面白そうなのでRustを勉強します。

フロントエンド側では学びが多かった。TypeScriptにコンパイルして頂くために丁寧に型を定義していく過程で、
受け渡しするデータの形をしっかり設計できたと思う。



React+Express(Node.js)+TypeScriptでWeb版Twitterのクローンアプリを作った雑感


## JavaScriptで2Dグラフィックを生成する


参考：[Canvas チュートリアル - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial)


### canvasのエリアを設定し、長方形を描く。

HTMLで２Dグラフィックを生成するには、canvas要素が必要です。<br/>
HTML側で容姿したcanvasに対して、JavaScriptでグラフィックを描くことになります。

まず簡単な動作として長方形を描いてみます。

#### canvas.html
```html
<!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">
    <title>Canvas</title>
    <style>
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
</body>
<script src="canvas.js"></script>
</html>

```

#### canvas.js
```javascript
const canvas = document.getElementById("canvas")

const drawCanvas = () => {

    const ctx = canvas.getContext('2d');
    ctx.fillRect(100,100,100,100);
}

drawCanvas()

```
drawCanvas関数は内部で<code>fillRectメソッド</code>を呼び出しています。<br/>
fillRectメソッドはcanvas内の左上を原点とした時のx,y座標と長方形の幅、高さを引数にとり、長方形を描画してくれます。

![canvas1](/images/2021年/7月/canvas1.png)

(長方形ですがブログの設定で画像の縦横比が正しく出てませんorz)


## 矩形（くけい）を描く関数

長方形や正方形などをまとめて矩形と呼びます。<br/>
canvas上で矩形を描く関数は下記の３種類です。

- ・fillRect(x, y, width, height)・・・塗りつぶされた矩形を描く。
- ・strokeRect(x, y, width, height)・・・矩形の輪郭を描く。
- ・clearRect(x, y, width, height)・・・指定された領域を消去し、完全な透明にする。

```javascript
const canvas = document.getElementById("canvas")

const drawCanvas = () => {

    const ctx = canvas.getContext('2d');
    
    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
}

drawCanvas()

```

![canvas2](/images/2021年/7月/canvas2.png)

### clickイベントに反応させる

```javascript
const canvas = document.getElementById("canvas")

const drawCanvas = (x, y) => {

    const ctx = canvas.getContext('2d');
    ctx.fillRect(x, y, 100, 100);
    ctx.clearRect(x+20, y+20, 60, 60);
    ctx.strokeRect(x+25, y+25, 50, 50);
}

canvas.addEventListener("click", (evt) => {
    let x = evt.clientX;
    let y = evt.clientY;

    drawCanvas(x, y)
})
```

![canvas3](/images/2021年/7月/canvas3.png)

クリックするとマウスの位置と矩形が描画される位置が微妙にズレているのがわかります。<br/>
これはcanvas自体にデフォルトでマージンが掛かっているためです。

このズレを専用のメソッド<code>canvas.offsetLeft,offsetTop</code>で補正しましょう。

```javascript
    (略)
    let x = evt.clientX - canvas.offsetLeft;
    let y = evt.clientY - canvas.offsetTop;
```

### 丸を描く
矩形以外の図形は全て<red>パス</red>という方法で描きます。<br/>
Adobe Illustratorなどでよく使われる図形の描き方です。

ひとまず丸を描いてみます。
- ・beginPath()・・・新しいパスを作成する。
- ・arc(x, y, radius, startAngle, endAngle, anticlockwise)・・・(x, y) を中心の位置、radius を半径、startAngle を開始角度、endAngle を終了角度、anticlockwise を方向 (デフォルトは時計回り) とする円弧のパスを描く。
- ・fill()・・・パスの内部を塗りつぶして描く。


```javascript
const canvas = document.getElementById("canvas")

const drawCanvas = (x, y) => {

    const ctx = canvas.getContext('2d');

    // パスを開始する
    ctx.beginPath();
    // 円のパスを設定する
    ctx.arc(x, y, 50, 0, Math.PI * 2, true);
    // パスを塗りつぶして描く
    ctx.fill();
}

canvas.addEventListener("click", (evt) => {
    let x = evt.clientX;
    let y = evt.clientY;

    drawCanvas(x, y)
})
```

![canvas4](/images/2021年/7月/canvas4.png)

### スマイルのグラフィックを描く

丸を組み合わせてスマイルの絵を描いてみます。

- ・moveTo()・・・次のパスの開始の座標を移動する。(ペンを移動する)
- ・lineTo()・・・直線でパスを描く。
- ・stroke()・・・パスの輪郭を描く。

```javascript
const canvas = document.getElementById("canvas")

const drawCanvas = (x, y) => {

    const ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.arc(x, y, 50, 0, Math.PI * 2, true); // 外の円

    ctx.moveTo(x+30, y);
    ctx.arc(x, y, 30, 0, Math.PI, false);  // 半円で口 (時計回り)
    ctx.lineTo(x+30,y)　// 口の上の横線

    ctx.moveTo(x-10, y-15);
    ctx.arc(x-15, y-15, 5, 0, Math.PI * 2, true);  // 左目

    ctx.moveTo(x+20, y-15);
    ctx.arc(x+15, y-15, 5, 0, Math.PI * 2, true);  // 右目

    ctx.stroke();
}

canvas.addEventListener("click", (evt) => {
    let x = evt.clientX;
    let y = evt.clientY;

    drawCanvas(x, y)
})
```

![canvas5](/images/2021年/7月/canvas5.png)

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4873119227&linkId=70e51d79bcd70d5aa03ca0c65b7dffb1"></iframe>

JavaScriptとCanvasで2Dグラフィックを生成する その1


## ビンゴ条件の判定

ビンゴの成立を判定するためには、縦・横・斜めの５＋５＋２＝１２通りの組み合わせについて、判定を行う必要があります。

これはcheckList配列から素直に１２個の配列を作成し、それぞれの配列に対してビンゴが成立しているか確認しましょう。

条件判定は<code>clickイベントが発生する度に</code>行う必要があります。<br/>
makeMasu関数の中のイベント要素の中に入れても良いですが、コードが複雑になるので、条件判定専用のイベント要素を作成するのがおすすめかなと思います。

### 横方向(Row)の判定

横方向の判定を行う配列を素直に作るとこんな感じです。

```javascript

checkList = []

const makeMasu = (i) => {
    const masu = document.createElement("div");

    // コマの番号を５で割った余りからどの列かを出す
    const col = i % 5;
    const randomNumber = Math.floor(Math.random() * 15 + col * 15 + 1);
    // randomNumber = col

    checkList.push(randomNumber);
    masu.textContent = randomNumber;

    masu.addEventListener("click", (evt) => {
        evt.target.textContent = "◯";
        checkList[i] = "◯"
    })
    document.querySelector(".bingocard").appendChild(masu);
}

for (let i = 0; i < 25; i++) {
    makeMasu(i);
}

// ここから条件判定
// 読みにくくなるので分割した

document.body.addEventListener("click", () => {
    checkRow0 = [checkList[0], checkList[1], checkList[2], checkList[3], checkList[4]]
    console.log(checkRow0)
})

```

ここで、<code>slice</code>メソッドを使ってみましょう。<br/>
<code>slice</code>は指定した範囲の配列から新しい配列を作成してくれます。<br/>

下記のコードから、問題なく動作していることがわかります。

```javascript

// ここから条件判定
// 読みにくくなるので分割した

document.body.addEventListener("click", () => {
    checkRow0 = [checkList[0], checkList[1], checkList[2], checkList[3], checkList[4]]
    console.log(checkRow0)
    checkRow1 = checkList.slice(5, 10)
    console.log(checkRow1)
})
```

![ビンゴ9](/images/2021年/7月/bingo9.png)


### 縦方向(Column)の判定

横方向の判定も素直に書く方法の他に、<code>filter</code>メソッドを使う方法があります。
<code>filter</code>は普段は第一引数しか取りませんが、第二引数を設定すると、その引数には配列の要素の位置の数が格納されます。こんな仕様知らなかった・・。


```javascript
document.body.addEventListener("click", () => {
    // 横方向
    checkRow0 = checkList.slice(0,5);
    checkRow1 = checkList.slice(5, 10);
    checkRow2 = checkList.slice(10, 15);
    checkRow3 = checkList.slice(15, 20);
    checkRow4 = checkList.slice(20,25);

    // 縦方向
    checkCol0 = [checkList[0], checkList[5], checkList[10], checkList[15], checkList[20]]
    // 確認
    console.log(checkCol0)
    checkCol1 = bingoBoard.flat().filter((n,i) => i % 5 === 1);
    console.log(checkCol1)
})

```

### ビンゴの判定

```javascript

// ここから条件判定

const checkArray = (array) => {
    const result = array.every(n => n === "◯")
    return result;
}

document.body.addEventListener("click", () => {
    checkRow0 = checkList.slice(0,5);
    checkRow1 = checkList.slice(5, 10);
    checkRow2 = checkList.slice(10, 15);
    checkRow3 = checkList.slice(15, 20);
    checkRow4 = checkList.slice(20,25);

    checkCol0 = checkList.filter((n,i) => i % 5 === 0);
    checkCol1 = checkList.filter((n,i) => i % 5 === 1);
    checkCol2 = checkList.filter((n,i) => i % 5 === 2);
    checkCol3 = checkList.filter((n,i) => i % 5 === 3);
    checkCol4 = checkList.filter((n,i) => i % 5 === 4);

    checkNaname1 = [checkList[0], checkList[6], checkList[12], checkList[18], checkList[24]];
    checkNaname2 = [checkList[4], checkList[8], checkList[12], checkList[16], checkList[20]];


}

```

ビンゴゲームの作り方②　ビンゴ成立の判定

JavaScriptでビンゴゲーム② ビンゴ成立の判定


## ビンゴゲーム

今回はビンゴゲームをJavaScriptで実装してみます。

少し考えることは多くなりますが、基本は

- ・必要な機能（ロジック）を可能な限り分解してシンプルに考えること。
- ・シンプルにした機能を実装し動作確認（テスト）をすること。
- ・それを一つずつ積み上げること。

が中心です。

難しい！書けない！となっているときは、一度に複数のことをドカンと実装しようとしているかもしれません。一つずつ少しずつコツコツと実装しましょう。

参考：[コピペするプログラマに足りないもの 〜 プログラミング脳の鍛え方](https://kuranuki.sonicgarden.jp/2017/02/programming-brain.html)


### ビンゴゲームに必要な要素

ビンゴゲームのうち、各参加者に配られるビンゴカードに必要な要素を考えます。
1. カードが配られたら（画面がロードされたら）、１〜９９までのランダムな数字が25個表示される。
2. ビンゴゲームの進行に合わせて数字をチェックしていく。今回は外部で指定された数字をクリックしていくことにする。
3. ゲームの進行に合わせてカードをチェックし、ビンゴを判定して表示する。

### １. 1〜９９までのランダムな数字を25個表示する

まずは見た目の部分であるビンゴカードを実装します。<br/>
流れとしてはこんな感じ


- a.マス目を25個作成する。
- b.各マス目のtextContentにランダムな数値を代入する。

まず１を実装します。数値は適当に１で良いでしょう。

#### HTML
```html
<!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">
    <title>Document</title>
    <style>
        .bingocard {
            display: grid;
            /* gridは5列になるように設定する */
            grid-template-columns: repeat(5,1fr);
            width: 500px;
            margin: 20px;
        }
        .bingocard div {
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 90px;
            border: 1px solid black;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="bingocard">
    </div>
</body>
<script src="./bingo.js"></script>
</html>
```

#### a.マス目を25個作成する。

ファイル名を"bingo.js"として、htmlから読み込んでいます。

makeMasuは<code>document.createElement("div")</code>でdiv要素を作ります。<br/>
その次に<code>masu.textContent</code>で文字要素を追加します。<br/>
最後に、<code>document.querySelector(".bingocard")</code>でdiv要素を追加する先の親要素を指定し、<code>.appendChild()</code>で作成したdiv要素を追加しました。

以上の内容をforループによって25個作成しました。

この *bingocard* クラスにはcssで横が5列になるようにgrid-template-columnsを指定しています。

```javascript
const makeMasu = () => {
    const masu = document.createElement("div");
    masu.textContent = 1
    document.querySelector(".bingocard").appendChild(masu)
}

for (let i = 0; i < 25; i++) {
    makeMasu();
}
```

![ビンゴ１](/images/2021年/7月/bingo1.png)


#### b.各マス目のtextContentにランダムな数値を代入する。


次に2である数値にランダムな値を入れます。<br/>

<code>Math.random()</code> は0~1までの数値をランダムに生成する。
これを100倍することで、0~100までの数値（少数を含む）をランダムに生成することができます。

<code>Math.floor()</code>は少数を切り捨て処理によって整数にすることができます。

この２つを組み合わせることで、０〜１００までの整数をランダムに生成しています。


```javascript
const makeMasu = () => {
    const masu = document.createElement("div");
    masu.textContent = Math.floor(Math.random()*100)
    document.querySelector(".bingocard").appendChild(masu)
}

for (let i = 0; i < 25; i++) {
    makeMasu();
}
```

![ビンゴ2](/images/2021年/7月/bingo2.png)


## ２.ビンゴゲームの進行に合わせて数字をチェックしていく。

次に、ビンゴゲームを進行させていく上で必要な機能を実装します。

a.各マス目にclickイベントを追加する。
b.クリックしてゲームが進行していく状況を配列で表現する。

#### a.各マス目にclickイベントを追加する。

追加するdiv要素にclickイベントを追加します。<br/>
<code>addEventListener("click",(evt)=>{})</code>では<red>イベントオブジェクト</red>をevtと名付けた引数に格納しています。<br/>
イベントオブジェクトには発生したイベントの情報が格納されており、ここでは<code>evt.target</code>でclickイベントを発生させた要素を指定しました。

```javascript
const makeMasu = () => {
    const masu = document.createElement("div");
    masu.textContent = Math.floor(Math.random()*100)
    masu.addEventListener("click",(evt)=>{
        evt.target.textContent = "◯";
    })
    document.querySelector(".bingocard").appendChild(masu)
}

for (let i = 0; i < 25; i++) {
    makeMasu();
}
```

![ビンゴ3](/images/2021年/7月/bingo3.png)


#### b.クリックしてゲームが進行していく状況を配列で表現する。

盤面の数字を配列に覚えさせます。

randomNumber定数に生成したランダムな値を覚えさせます。<br/>
コードの頭で生成した空のcheckList配列に生成したランダムな値を<code>push</code>メソッドで追加していきます。<br/>
randomNumberはtextContentの設定にも利用します。


なお、checkList配列は1次元で作る場合と２次元とする場合と２パターン考えられます。<br/>
この記事では１次元で作成してみます。


```javascript
checkList = [];

const makeMasu = () => {
    const masu = document.createElement("div");

    const randomNumber = Math.floor(Math.random()*100);
    checkList.push(randomNumber);
    masu.textContent =randomNumber;

    masu.addEventListener("click",(evt)=>{
        evt.target.textContent = "◯";
    })
    document.querySelector(".bingocard").appendChild(masu);
}

for (let i = 0; i < 25; i++) {
    makeMasu();
}
```

![ビンゴ4](/images/2021年/7月/bingo4.png)


次に、clickイベントが発生したときにchecklist配列を変更するようにします。<br/>
イベント内の<red>コールバック関数</red>にcheckListを変更する処理を書くことで、クリックで配列が変更されるようになります。<br/>

コールバック関数内でcheckListの要素を指定するには、checkListのどの要素かを指定してやる必要があります。<br/>
forループのイテレーターiを引数として受け取り、マスをクリックしたときに対応している配列の要素を変更できるようにしました。

```javascript
checkList = [];

const makeMasu = (i) => {
    const masu = document.createElement("div");

    const randomNumber = Math.floor(Math.random()*100);
    checkList.push(randomNumber);
    masu.textContent =randomNumber;

    masu.addEventListener("click",(evt)=>{
        evt.target.textContent = "◯";
        checkList[i] = "◯"
        // 期待通りにcheckListが動いているか確認
        console.log(checkList)
    })
    document.querySelector(".bingocard").appendChild(masu);
}

for (let i = 0; i < 25; i++) {
    makeMasu(i);
}
```

![ビンゴ5](/images/2021年/7月/bingo5.png)


#### （別解）
<code>new Array(25).fill(0)</code>で長さ２５の配列を生成して、そこにランダムな値を追加していっても良いと思います。

```javascript
checkList = new Array(25).fill(0)

const makeMasu = (i) => {
    const masu = document.createElement("div");

    const randomNumber = Math.floor(Math.random()*100);
    checkList[i] = randomNumber;
    masu.textContent =randomNumber;

    // (以下略)
}
```

### 数字の置き方を実際の仕様に合わせる

bingoゲームの数字は１列目は1~15,2列目は16~30,3列目は31~45,4列目は46~60,5列目は61~75となっています。

この仕様を反映させましょう。

列（縦方向）ごとに乱数の生成の仕方を調整したいですが、ビンゴカードの値が入っている配列は行（横方向）に並んでおり、そのままでは扱いにくいです。

列方向で要素を取り出す方法を考えると、各コマの番号を５で割った余りを使うことを思いつきました。

各コマの番号（iの値）はこんな感じです。

![ビンゴ6](/images/2021年/7月/bingo6.png)

5で割った余りを出すとこうなります。

![ビンゴ7](/images/2021年/7月/bingo7.png)

```javascript
checkList = []

const makeMasu = (i) => {
    const masu = document.createElement("div");

    // コマの番号を５で割った余りからどの列かを出す
    const col = i % 5;
    const randomNumber = Math.floor(Math.random() * 15 + col * 15 + 1);

    checkList.push(randomNumber);
    masu.textContent = randomNumber;

    masu.addEventListener("click", (evt) => {
        evt.target.textContent = "◯";
        checkList[i] = "◯"
        // 期待通りにcheckListが動いているか確認
        console.log(checkList)
    })
    document.querySelector(".bingocard").appendChild(masu);
}

for (let i = 0; i < 25; i++) {
    makeMasu(i);
}
```

![ビンゴ8](/images/2021年/7月/bingo8.png)


JavaScriptでビンゴゲーム① ビンゴカードの作成


## オセロ

オセロを作る過程を記事にしようと思って書いてたら思いの外難解だったので。とりあえず先に完成版を載せます。
(検索上位にくる〇〇アカデミーの記事とかよりはいい感じに書けた気がする。)

盤面を作りクリックすると間に挟まれたものが裏返るアルゴリズムを書くまでで２時間。<br/>
修正を繰り返しながら、クリック可能箇所を管理して置く石がないときのパスの処理を書いて仕上げるまでに２時間かかりました。
（クリック可能箇所の管理でバグの沼にハマった）

ポイントとしては、
1. 各マスにidを振ったこと。
2. クリックしたらまず状態を管理する配列だけを変更するようにしたこと。
3. その後に毎回配列を参照して全体を描き直す処理にしたこと。
4. 各要素の関数はなるべく小さくし、一つの関数には一つのことだけをさせること。長くなった関数は分割すること。
5. なるべく再帰処理を使いコードの長さを短くしたこと。

特にこの４は <red>関数の抽出</red>というリファクタリングのテクニックです。


#### html
```html
<!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">
    <title>Document</title>
    <style>
        #board {
            display: grid;
            grid-template-columns: repeat(8,1fr);
            width: 800px;
        }
        #board div {
            height: 100px;
            width: 100px;
            border: 1px solid black;
            background-color: green;
        }
        #board .black{
            color: black;
            font-size: 60px;
            text-align: center;
            line-height: 100px;
            
        }
        #board .white{
            color: white;
            font-size: 60px;
            text-align: center;
            line-height: 100px;
        }
        #board .clickable{
            background-color: aquamarine;
            opacity: 0.5;
        }

    </style>
</head>
<body>
    <div id="board"></div>
</body>
<script src="./othello.js"></script>
</html>
```

#### javascript
```javascript

let count = 0;

// 黒石を置く
const setBlack = (i, j) => {
    const element = document.getElementById(`${i}${j}`);
    element.setAttribute("class", "black");
    element.textContent = "●";
}

// 白石を置く
const setWhite = (i, j) => {
    const element = document.getElementById(`${i}${j}`);
    element.setAttribute("class", "white");
    element.textContent = "●";
}

// 石を置くことが可能なマスであることを表す
const setClickable = (i, j) => {
    const element = document.getElementById(`${i}${j}`);
    element.setAttribute("class", "clickable");
}

//  ターン交代時に、前ターンのsetClickableを削除する
const removeClickable = (i, j) => {
    const element = document.getElementById(`${i}${j}`);
    element.removeAttribute("class");
}

// クリックできることをbooleanで表す(クリック可能場所以外を触らせない)
const hasClickable = (i, j) => {
    const element = document.getElementById(`${i}${j}`);
    return element.getAttribute("class") === "clickable";
}

// マスの配置
const setSquare = (i, j) => {
    const square = document.createElement("div");
    // 各マスのid要素に行と列の番号を振る
    square.setAttribute("id", `${i}${j}`)
    square.addEventListener("click", () => {
        if (hasClickable(i, j)) {
            if (count % 2 === 0) {
                squareArrays[i][j] = 1;
            } else {
                squareArrays[i][j] = -1;
            }
            count++;
        }
    })
    document.querySelector("#board").appendChild(square)
}

// 1~8の盤と角を表すために0行・列と９行・列を作る（アルゴリズムの番兵）
// 10*10の二次元配列を初期化する
const squareArrays = Array.from(new Array(10), () => new Array(10).fill(0))

for (let i = 1; i < 9; i++) {
    for (let j = 1; j < 9; j++) {
        setSquare(i, j);
    }
}

// 盤面の初期化
squareArrays[4][4] = 1
squareArrays[5][5] = 1
squareArrays[4][5] = -1
squareArrays[5][4] = -1

setBlack(4, 4);
setBlack(5, 5);
setWhite(4, 5);
setWhite(5, 4);

// squareArraysから盤面を再現する
const makeBoard = () => {
    for (let i = 1; i < 9; i++) {
        for (let j = 1; j < 9; j++) {
            // clickableクラスを毎回削除する
            removeClickable(i, j);

            switch (squareArrays[i][j]) {
                case 0: break;
                case 1: setBlack(i, j);
                    break;
                case -1: setWhite(i, j);
                    break;
                default: console.log("squareArraysに想定外の数値が入っている");
            }
        }
    }
}

const isSetArrays = Array.from(new Array(10), () => new Array(10).fill(0))

// 挟まったマスを裏返す処理
const reverse = (x, y, dx, dy, countSquare, square) => {
    squareArrays[x][y] = square;
    // 間に挟んだマスの数だけ再帰処理
    if (countSquare > 0) {
        countSquare--;
        reverse(x - dx, y - dy, dx, dy, countSquare, square);
    }
}

// checkAll関数をクリック可能場所を示すときと実際にクリックした時で使い回すための変数
let clicked = false

const checkSquare = (x, y, dx, dy) => {

    const thisSquare = squareArrays[x][y]
    const thisX = x;
    const thisY = y;

    let countSquare = 0;

    const checkNext = (x, y, dx, dy) => {

        // 最初は隣のマス
        const nextSquare = squareArrays[x + dx][y + dy]
        // クリックしたマスとnextSquare(最初は隣のマス)を比較
        switch (nextSquare) {
            // nextSquareが空欄だった場合
            case 0:
                break;
            // nextSquareが同じ色だった場合
            case thisSquare:
                // 間にマスが一つ以上ある場合
                if (countSquare > 0) {
                    // 裏返しの処理
                    // 実施にクリックしたとき
                    if (clicked === true) {
                        reverse(x, y, dx, dy, countSquare, thisSquare);
                    } else {
                        setClickable(thisX, thisY);
                    }
                };
                break;

            // nextSquareが異なる色だった場合
            case -(thisSquare):
                // クリックしたマスと
                if (nextSquare !== thisSquare) {
                    // 間に入るマスを数える
                    countSquare++;
                    // 再帰呼び出し　nextSquareが一つズレる
                    checkNext(x + dx, y + dy, dx, dy);
                }
                break;

            default: console.log("nextSquareに想定外の数値が入っている");
        }
    }
    checkNext(x, y, dx, dy);

}

// 全ての方向でチェックする
const checkAll = (x, y) => {
    checkSquare(x, y, 1, 0)
    checkSquare(x, y, -1, 0)
    checkSquare(x, y, 0, 1)
    checkSquare(x, y, 0, -1)
    checkSquare(x, y, 1, 1)
    checkSquare(x, y, 1, -1)
    checkSquare(x, y, -1, -1)
    checkSquare(x, y, -1, 1)
}

// 指定したマスに石が置けるかをチェック
const checkClickable = (x, y) => {
    // checkAll()を流用するために、空白のマスにそのターンの色の石を仮に置く
    if (squareArrays[x][y] === 0) {
        clicked = false
        squareArrays[x][y] = count % 2 === 0 ? 1 : -1
        checkAll(x, y)
        // 仮に置いた石を取り除く
        squareArrays[x][y] = 0
    }
}
// 全てのマスで石が置けるかをチェックする
const checkClickableAll = () => {
    for (let i = 1; i < 9; i++) {
        for (let j = 1; j < 9; j++) {
            checkClickable(i, j)
        }
    }
}

// 開始ターンのチェック
checkClickableAll()

const check = document.getElementById("board").addEventListener("click", (e) => {
    const x = parseInt(e.target.getAttribute("id")[0]);
    const y = parseInt(e.target.getAttribute("id")[1]);

    const blackNum = document.body.querySelectorAll(".black").length;
    const whiteNum = document.body.querySelectorAll(".white").length;

    if (hasClickable(x, y)) {
        // 実際にクリックした時のチェック
        clicked = true

        checkAll(x, y);
        makeBoard(x, y);
        console.log(`黒:${blackNum},白:${whiteNum}`)

        // 毎ターンの置けるかのチェック
        checkClickableAll()
    }

    const clickableNum = document.body.querySelectorAll(".clickable").length;
    console.log(`置けるマス：${clickableNum}個`)

    if (clickableNum === 0) {
        alert("置けるマスがありません。")
        count++;
        // パスした時のチェック
        checkClickableAll()
        // 手番が変わっても置けるマスがない場合
        if (clickableNum === 0) {
            if (blackNum > whiteNum) {
                alert("黒の勝ち！")
            } else if (blackNum < whiteNum) {
                alert("白の勝ち!")
            } else {
                alert("引き分け！")
            }
        }
    }
})
```

JavaScriptでオセロを作る(完成版）


## オセロのルール（ロジック）を詳細に定義する

オセロのルール部分を実装していきます。<br/>
最初に要件として定義したルールは「石を置いたときに、自分の石が異なる色の石を挟んでいたら裏返す。」でした。

このルールをより詳細に定義すると、

1. 石を置き、これをAとする。Aの上下左右斜めを調べて、Aの色と異なる色の石がないかを調べる。
2. 異なる色の石があれば、それをBとする。Bの隣の石の色を調べる。
3. Bの隣に何もない（または盤の端）なら終了する。（裏返すものがないときは、Aは無効になる）
4. Bの隣の石をCとする。CがAと同じ色であればBをAと同じ色に変更する。
5. CがBと同じ色であれば、Cの隣の石を確認する。
6. Cの隣に何もないなら終了する。
7. Cの隣の石をDとする。DがAと同じ色であればBとCを同じ色に変更する。
8. DがB,Cと同じ色であれば、Dの隣の石を確認する。（以下略）
   
## 現在の盤の石の色を管理する。（１次元の場合）

上記で定義したルールを実際に実装しようとするなら、現在の盤の石の色を管理する仕組みが必要です。<br/>
そのために盤の状態を管理させる配列を実装します。

話を難解にしないために、８×１マスの１次元の場合で考えます。



#### JavaScript

```javascript
let count = 0;

// クリックイベントに反応して石を書くマスの要素を作る
const setSquare = () => {
    const square = document.createElement("div");
    square.addEventListener("click", () => {
        if (count % 2 === 0) {
            square.setAttribute("class", "black");
            square.textContent = "●";
        } else {
            square.setAttribute("class", "white");
            square.textContent = "◯";
        }
        count++;
    })
    document.getElementById("board").appendChild(square)
}

// setSquareを64回繰り返して盤を作る
for (let i = 0; i < 64; i++) {
    setSquare();
}
```


## リファクタリングを行う

見た目は実装できたので次のゲームのルールについてのコードを書く前に、今回書いたコードを見直し、改善点がないか検討します。<br/>
(この作業を **リファクタリング** といいます。)

オセロのルールを考えると、 **「石を黒にする・白にする」という処理は頻繁に出てきそう** です。<br/>
この部分を関数として抽出したいと思います。<br/>

#### JavaScript よく使う処理を関数として抽出する
```javascript
let count = 0;

const setBlack = (element) => {
    element.setAttribute("class", "black");
    element.textContent = "●";
}

const setWhite = (element) => {
    element.setAttribute("class", "white");
    element.textContent = "●";
}

const setSquare = () => {
    const square = document.createElement("div");
    square.addEventListener("click", () => {
        if (count % 2 === 0) {
            setBlack(square);
        } else {
            setWhite(square);
        }
        count++;
    })
    document.getElementById("board").appendChild(square)
}

for (let i = 0; i < 64 i++) {
    setSquare();
}
```


JavaScriptでオセロを作る② ゲームのルールを１次元で実装する


## オセロ

プログラミング能力を向上させるためには実際に使ってみることが欠かせません。<br/>
今回はオセロをJavaScriptで実装してみます。

オセロに必要な要素としては、
1. 盤面をクリックして黒または白の石が交互に置けること。（見た目）
2. 石を置いたときに、自分の石が異なる色の石を挟んでいたら裏返す。（ゲームのルール・ロジック）

の２つが要件が考えられますので、これを分けて実装していきます。

## ゲーム盤の作成

まずは見た目の部分であるゲーム盤を実装していきましょう。<br/>

マスの仕様としては、クリックするたびに黒のcss属性または白のcss属性を適用し石を置くことを表現します。

今が黒のターンか白のターンかは *count* 変数を定義し管理します。

HTMLとJavaScriptは別ファイルにまとめ、HTMLからJavaScriptを読み込むようにします。<br/>
なお、JavaScriptの関数宣言は全てアロー関数で記述します。

#### HTML
```html
<!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">
    <title>Document</title>
    <style>
        #board {
            display: grid;
            grid-template-columns: repeat(8,1fr);
            width: 800px;
        }
        #board div {
            height: 100px;
            width: 100px;
            border: 1px solid black;
            background-color: green;
        }
        #board .black{
            color: black;
            font-size: 60px;
            text-align: center;
            line-height: 100px;
        }
        #board .white{
            color: white;
            font-size: 60px;
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <div id="board"></div>
</body>
<script src="./othello.js"></script>
</html>
```
#### JavaScript

```javascript
let count = 0;

// クリックイベントに反応して石を書くマスの要素を作る

const setSquare = () => {
    const square = document.createElement("div");
    square.addEventListener("click", () => {
        if (count % 2 === 0) {
            square.setAttribute("class", "black");
            square.textContent = "●";
        } else {
            square.setAttribute("class", "white");
            square.textContent = "◯";
        }
        count++;
    })
    document.getElementById("board").appendChild(square)
}

// setSquareを64回繰り返して盤を作る
for (let i = 0; i < 64 i++) {
    setSquare();
}
```


## リファクタリングを行う

見た目は実装できたので次のゲームのルールについてのコードを書く前に、今回書いたコードを見直し、改善点がないか検討します。<br/>
(この作業を **リファクタリング** といいます。)

オセロのルールを考えると、 **「石を黒にする・白にする」という処理は頻繁に出てきそう** です。<br/>
この部分を関数として抽出したいと思います。<br/>

#### JavaScript よく使う処理を関数として抽出する
```javascript
let count = 0;

const setBlack = (element) => {
    element.setAttribute("class", "black");
    element.textContent = "●";
}

const setWhite = (element) => {
    element.setAttribute("class", "white");
    element.textContent = "●";
}

const setSquare = () => {
    const square = document.createElement("div");
    square.addEventListener("click", () => {
        if (count % 2 === 0) {
            setBlack(square);
        } else {
            setWhite(square);
        }
        count++;
    })
    document.getElementById("board").appendChild(square)
}

for (let i = 0; i < 64 i++) {
    setSquare();
}
```


JavaScriptでオセロを作る① ゲーム盤の作成


## とりあえず fetch と async と await を使ってみる。

API とはサーバーから html や css、JavaScript を取得するのではなく、データのみを取得する方法です。<br/>
細かい話は置いといて、気象庁の API を叩いて天気予報のデータを取得してみます。<br/>
(実際は公式の API サービスというわけではなく、リクエストしたら JSON データが取得できる状態だそうです。)<br/>

JavaScript で API からデータを取得するには、<code>fetch</code>メソッドを利用します。

また、これに限らず外部サーバーからデータを取得する際は、JavaScript では **非同期処理** というものが使われます。
非同期処理を実現する方法がいくつか存在しますが、最新の<code>async/awiat</code> を使用して記載してみましょう。<br/>
読み方は「エィシンク/アウェイト」です。

```html
<!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" />
    <title>Document</title>
  </head>

  <body></body>
  <script>
    // API配信のURL
    // 130000は東京のエリアコード

    let url_Tokyo = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json"

    const getWeather = async (url) => {
        // 指定したurlのAPIからjsonデータを取得
        const response = await fetch(url)
        // jsonデータをオブジェクトに変換する
        return response.json()
    }

    const getData = async () => {
        data = await getWeather(url_Tokyo);
        console.log(data);
        console.log(data.publishingOffice);
        console.log(data.reportDatetime);
        console.log(data.targetArea);
        console.log(data.text);
        
    }

    getData()
  </script>
</html>
```

下記のような天気予報の概要が取得できます。現在は梅雨です。

![天気予報サンプル](/images/2021年/6月/tenkiyoho.png)

## 非同期処理について

JavaScrip は **シングルスレッド** でのみ実行される言語です。<br/>
スレッドとは１つの処理の流れのブロックみたいなものです。<br/>
Java では **マルチスレッド** といって、複数のコードを並列して実行する機能がサポートされています。<br/>
マルチスレッドの機能が利用できると、メインの処理を１つのスレッドで動かす裏で、サーバーから画像や動画などのデータをダウンロードするという時間のかかる処理を別のスレッドで行うことができます。<br/>
しかし JavaScript はマルチスレッドが利用できません。そのため、同時に１つの処理しかできないため **データをダウンロードする** ような時間のかかる処理が始まると、別の処理がストップしてしまいます。<br/>

この問題に対処する仕組みが **非同期処理** です。<br/>

ちなみに _addEventListener("click",function(){})_ で定義されるイベント処理は非同期処理の一種になります。<br/>

### Promise(ES2015~)

いろんな書籍ではここで **コールバック関数** や **コールバック地獄** の話が入るのですが、割愛します。<br/>

JavaScript の非同期処理は、その実行結果が **Promise オブジェクト** に含まれているという形で表現します。<br/>
ここで、データをダウンロードする非同期処理を考えます。データのダウンロードという処理は、問題なく成功する場合と通信エラーなどで失敗する場合があります。<br/>

Promise オブジェクトはこの成功したときの処理を **resolveメソッド** 、失敗したときの処理を **rejectメソッド** で定義し、こんな感じで Promise インスタンスを作成します。

```javascript
const promise = new Promise((resolve, reject) => {
  
  resolve(
      // 非同期処理として実行したい内容
  );

  reject(
      // 失敗したときに実行したい内容（エラーを表示など)
  );
  
});

// 簡略化した書き方
const promiseResolve = Promise.resolve()
const promiseReject = Promise.reject()

```

サンプルで利用した<code>fetch()</code>メソッドは、データのダウンロードという処理をこの Promise オブジェクトを利用して表現しています。<br/>
fetch() メソッドは戻り値として指定した url からダウンロードするという処理を<code>resolve()</code>の中に持った Promise オブジェクトを返してくれます。<br/>

Promise が実装されて以降、データのダウンロードなどの処理を行うライブラリはほとんどが戻り値は Promise オブジェクトの形になっています。<br/>
ですので、最初の頃は _new Promise()_ といった処理を書く機会は少ないと思います。<br/>

### async/await(ES2017~)

<code>async/await</code> は基本的にはセットで使います。<br/>

**async** は関数定義を行うときに使用するキーワードです。_async_ をつけて定義した関数は戻り値として Promise インスタンスを返すようになります。

```javascript
async function doAsync() {
  return "値";
}

// アロー関数で書く
const doAsync = async () => {
  return "値";
}

// 同じ意味
function doAsync() {
  return Promise.resolve("値");
}

//これも同じ
function doAsync() {
  return new Promise((resolve, reject) => {
    resolve("値");
  });
}


```

**await** は _async_ で定義された関数内で利用できる式です。<br/>
右辺に Promise インスタンスを置きます。そのPromise インスタンスが成功または失敗するまで待機し、完了し次第式の処理を再開します。

```javascript
async function doAsync() => {
    // 非同期処理
}

async function asyncMain() => {
    // doAsync完了まで待つ
    // doAsyncが成功すれば、その結果をnumに代入
    // doAsyncが失敗すれば、エラーを発生させる
    const num = await doAsync();
    // 次の行はdoAsyncの非同期処理が完了されるまで実行されない
    console.log("この行は非同期処理の完了後に実行される");
}

```

非同期処理は少し難解な箇所ですが、サーバからデータを取得するという頻繁に行う動作で必須ですのでぜひ理解してください。<br/>

参考<br/>
[気象庁の天気予報 JSON ファイルを WebAPI 的に利用したサンプルアプリ](https://anko.education/apps/weather_api)<br/>
[新しい気象庁サイトから JSON データが取得できる件](https://mindtech.jp/?p=1754)<br/>
[JavaScript Promise の本](https://azu.github.io/promises-book/)<br/>


非同期処理とAPIの叩き方について

【ハンズオンJavaScript】非同期処理で気象庁のAPIから天気予報データを取得する


## ESLintを導入したらめちゃくちゃ指摘された
この前勉強したESLintをこのブログにも導入したらアホみたいに大量に指摘されました。厳しい。<br/>
直すために同じようなNext.jsでブログを作ってる人のソースコードを見たりして片っ端から調べてたら3日かかりました。<br/>

直す過程で引っかかった箇所をメモしておきます。


## 非同期処理

非同期処理を行うには、その処理をPromiseオブジェクトで包んで生成する。<br/>
Promiseオブジェクトの生成には<code>new Promise</code>を使う方法と、
<code>Promise.resolve</code>を使う方法がある。

違いについてはこちら<br/>
[Qiita:new PromiseとPromise.resolveの違い](https://qiita.com/ueokande/items/807a6c9a64c3874a0f83)<br/>
内部でエラーが出ないのなら、シンタックス・シュガーのPromise.resolveを使っておけば良いかな？

ここでTypeScriptでは戻り値はPromiseオブジェクトなので、その型定義はPromiseオブジェクトであることを示し、<>内にPromiseで包まれているデータの型を記述する。

```javascript
// PostData[]の入ったPromiseオブジェクトを生成
export const getAllPostsData = (): Promise<PostData[]> => {
    // Get file names under /posts
    const allPostsData = fileNames.map(
        (fileName: string) => getPostDataByFileName(fileName)
    )

    // 日付順にソート
    return Promise.resolve(allPostsData.sort((a: PostData, b: PostData) => a.date < b.date ? 1 : -1));
}
```

## TypeScriptの型をasで変換する

下記のコードはMarkDownのファイル名からメタデータ(title,date,image)と本文(content)を生成するコード。<br/>
matterResultに定義された型であるGrayMatterFile<T>が{ data: {[key: string;]: string} content: string; } となっていた。<br/>

このまま使うとmatterResultから生成する(title,date,image)が{[key:string]: string}型になって嬉しくなかったので、
<code>as（型アサーション）</code>でdataType型に無理矢理変換した。<br/>
（あまり上手な方法ではない気がするが・・・）

```javascript
const getMatterFileContents = (id: string): GrayMatterFile<Input> => {
    // マークダウンファイルのフルパス
    const fullPath = path.join(postsDirectory, `${id}.md`)
    const fileContents = fs.readFileSync(fullPath, 'utf8')

    // use gray-matter to parse the post metadata section
    return matter(fileContents)
}

const getPostDataByFileName = (fileName: string): PostData => {
    const id = fileName.replace(/\.md$/, '')

    // matterResult: matter.GrayMatterFile<matter.Input>

    // type matter.GrayMatterFile<matter.Input>  = {
    //     data: { [key: string]: string; }
    //     content: string;
    // }
    const matterResult　= getMatterFileContents(id);

    type dataType = {
        title: string,
        date: Date,
        image: string,
    }
    const { data } = matterResult;
    const { title, date, image } = data as dataType;
    const { content } = matterResult;

    return {
        id,
        title,
        date,
        image,
        content
    };
};


```

このブログにESLintのチェックを導入して引っかかったところ

TypeScript+ESLintで引っ掛かった所



## useState

<code>useState</code>はstateを更新するHooks API

```javascript
const [count,setCount] = useState(0);
const increment = () => setCount((c)=>c+1);
const decrement = () => setCount((c)=>c-1);
```

Hooksの呼び出しはその関数コンポーネントの論理階層のトップレベルである必要があるので、条件文や繰り返し処理の中で呼び出すのは不可

```javascript
const Count: FC<{ max: number }> = ({ max }) => {
    const [count, setCount] = useState(0);

    if(count => max){
        // if文の中でuseState()は使わない！
        const [isExceeded, setIsExceeded] = useState(true);
        doSomething(...)
    }
}
```

## useEffect



## useCallback



## useRef



## Custom Hook


### useTimeout

```javascript
const useTimeout = (callback, delay)=>{
    
}

```

りあクト！２　React Hooksについて

【りあクト！2】React Hooks


## ◯×ゲームを作ろう

プログラミング能力を向上させるためには実際に使ってみることが欠かせません。<br/>
今回は初心者向けの課題としてピッタリと言われる◯×ゲーム（三目並べ）をJavaScriptで書いてみました。

```html
<!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">
    <title>Document</title>
    <style>
        .board {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            width: 450px;
        }

        .board div {
            height: 150px;
            width: 150px;
            border: 1px solid black;
            line-height: 150px;
        }

        .maru {
            color: red;
            font-size: 80px;
            text-align: center;
            
        }

        .batu {
            color: blue;
            font-size: 80px;
            text-align: center;
        }
        .win {
            height: 50px;
            width: 450px;
            margin-top:10px;
            padding: 10px;
            border: 1px solid black;
            font-size: x-large;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="board">
    </div>
</body>
<script>
    // 手数を数える
    let count = 0;
    // どのマスがクリックされたかを記録する配列
    const checkList = Array(9).fill(0);
    // 下記と同じ
    // const checkList = [0, 0, 0, 0, 0, 0, 0, 0, 0]

    // イベントの入った９個のマスを作成
    for (let i = 0; i < 9; i++) {
        const masu = document.createElement("div");

        masu.addEventListener("click", ()=> {
            // 同じ箇所はクリックさせない
            if (checkList[i] === 0) {
                // 手番の確認
                if (count % 2 === 0) {
                    masu.setAttribute("class", "maru");
                    masu.textContent = "◯"
                    checkList[i] = "◯"
                } else {
                    masu.setAttribute("class", "batu");
                    masu.textContent = "×"
                    checkList[i] = "×"
                }
                // 手数を進める
                count++;
            }
        })
        document.querySelector(".board").appendChild(masu);
    }

    // boardをクリックする度に勝敗の判定する
    document.querySelector(".board").addEventListener("click", function () {
        // チェック用の配列を作る
        // タテ
        columnA = [checkList[0],checkList[3],checkList[6]]
        columnB = [checkList[1],checkList[4],checkList[7]]
        columnC = [checkList[2],checkList[5],checkList[8]]
        // ヨコ
        rowA = [checkList[0],checkList[1],checkList[2]]
        rowB = [checkList[3],checkList[4],checkList[5]]
        rowC = [checkList[6],checkList[7],checkList[8]]
        // ナナメ
        diagonalA = [checkList[0],checkList[4],checkList[8]]
        diagonalB = [checkList[2],checkList[4],checkList[6]]

        // everyは配列の要素が全て同じ時にtrueを返す
        // everyがtrueを返したら、checkListを全て埋めてクリックできなくする。
        function checkWin(checkArray){
            if (checkArray.every(n=>n === "◯")){
                // checkListを全て埋める
                checkList.fill("1");
                // 勝敗を表示する
                const winA = document.createElement("div");
                winA.textContent = "Aの勝ち！";
                winA.setAttribute("class","win");
                document.body.appendChild(winA)

            } else if (checkArray.every(n=>n === "×")){
                // checkListを全て埋める
                checkList.fill("1");
                // 勝敗を表示する
                const winB = document.createElement("div");
                winB.textContent = "Bの勝ち！";
                winB.setAttribute("class","win");
                document.body.appendChild(winB)
            }
        }

        checkWin(columnA);
        checkWin(columnB);
        checkWin(columnC);
        checkWin(rowA);
        checkWin(rowB);
        checkWin(rowC);
        checkWin(diagonalA);
        checkWin(diagonalB);
    })

</script>

</html>
```

もっと簡潔に書ける気がする。<br/>

## 配列とevery()メソッドを使い、勝敗の条件判定を行う。
クリックしたら◯か×に変わるという機能は比較的簡単ですが、勝敗を判定する部分が少し難しいです。<br/>
素直にif文を使い条件分岐を書き込みまくるのも一つの手ですが、配列専用のメソッドである<code>every()</code> を使うと良いです。<br/>

```javascript
// 偶数の配列
evenNumber = [2,4,6,8,10];

const checkEven = evenNumber.every((n) => n%2 === 0)

console.log(checkEven) // true
```

上記の文で((n) => n%2)という部分は**アロー関数式**と呼びます。
配列から要素を順番に取り出してnという名前を仮に付け、そのnに対して式を評価しています。
**アロー**というのは **=>** のマークが矢印に見えるからだとか。


JavaScriptで◯×ゲーム（三目並べ）を作る

### パッケージを最新にしておく

TypeScriptの最新版をインストールする。

```terminal
$ yarn upgrade-interactive --latest
```

### eslintの初期設定
eslintの初期設定をする。
本にはない項目として「スタイルガイドを使用しますか？」というものがあるが、そこでairbnbを指定しても期待した動作をしていない気がする。

```terminal
$ yarn eslint --init
yarn run v1.22.5
$ /workspaces/React/hello-world/node_modules/.bin/eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.21.5 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes

Oops! Something went wrong! :(

ESLint: 7.20.0

ESLint couldn't find the config "airbnb" to extend from. Please check that the name of the config is correct.

The config "airbnb" was referenced from the config file in "".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

### 拡張ルールセットがプラグインをインストールする
```terminal
$ yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
$ typesync
$ yarn
```


### Airbnb JavaScript Style Guide に準拠するESLintの設定を導入する

結局こっちでスタイルガイドを入れる。

```terminal
yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks
```



りあクト！２　ESLintの設定について

【りあクト！2】ESLintの設定


## 学び方を学ぶこと
「LIMITLESS 超加速学習」の著者のジム・クウィックは人々の真の「脳力と能力」を引き出すことを専門とする脳トレーナー。<br/>
ミッションは「１つの脳も置き去りにしない」。カッコいい・・・！！<br/>

そんな本書のうち、PART4の「脳に最適な「学び方」を学ぶ」についてのメモです。<br/>
ちなみに学び方を学ぶことはメタ学習とも呼ばれます。

## 第11章 集中力を高める技法
### 1つのことだけに意識を向ける
- 集中力を鍛えること・・・集中力は鍛えれば鍛えるほど強くなる筋肉のようなものだ。
- 目の前のものに集中する・・・人と話す時は会話に集中する。書類を読むときは、ひたすら文字を追う。マルチタスクは厳禁。
- 散らかったものを片付けること・・・デスクのものを減らす。パソコン上も不要なアプリやタブは閉じる。
### 空白時間を設ける
- 頭を鎮める方法を見つける・・・日々接している情報は総じてあなたに多大なストレスを与えている。
- 不安の影響・・・不安で心が弱ると、正常な判断をしたり、問題解決のために行動したりするのが難しくなる。
- 空白時間を作ろう・・・空白時間は忙しさの合間の考える時間、戦略的に立ち止まる時間。
- 注意散漫による影響・・・注意散漫は実際に脳を変化させ、集中力に関わる前帯状皮質（ACC）を小さくしてしまう可能性がある。
### せわしない頭を鎮める方法
- 深呼吸をする・・・朝起きたら深呼吸しよう。自分の軸を取り戻したい時も深呼吸しよう。
- ストレスの原因に対処する・・・気になることを「先延ばし」すると、それは対処するまで心を圧迫し続ける。
- 「集中しなくていい時間」を組み込む・・・心配事や義務感のようなストレス源に対処する時間をスケジュールに組み入れる。


## 第12章 学習効果を最大化する７つの週間 
### 能力の４段階
- 無意識的無能・・・「知らないことを知らない」状態。
- 意識的無能　・・・「知っていてもできない」状態。
- 意識的有能　・・・「知っていて、する能力もあるが、頭で意識しているときにしかできない」状態。
- 無意識的有能・・・スキルをどう実践するか知っているし、習慣になっている。<br/>
  意識的有能から無意識的有能へ達するためには練習するしかない。<br/>
  この上に「真の熟達」という達人レベルの段階があるとすれば、そこに辿り着くにはスーパーヒーローのように勉強しよう。

### 7つの習慣
#### アクティブリコール（想起学習）を活用する
能動的に思い出す勉強。復習が完了した直後に、その範囲の内容を全て書き出すか声に出して言う。

####  時間を空けて復習する
一夜漬けは多くのデメリットを抱えている。見直しの間隔を空け、そのあいだに忘れた情報を重点的に復習すれば脳の力をフル活用できる。
#### 心の状態と姿勢に気を配る
ポジティブで充実した状態でいるほど、より良い成果を得られる。正しい姿勢で座っているときは、呼吸しやすく、脳や体に必要な酸素がスムーズに行きわたる。
#### 嗅覚を利用する
においを処理する嗅球は感情や記憶と関わりが深い扁桃体や海馬と繋がっているので、勉強に効果があるかもしれない。
#### 脳にいい音楽を聴く
「覚醒度・気分仮説」は、音楽と気分の相関、また気分と学習の相関を明らかにし、音楽を聴くことで学習能力を高められるとしている。
#### 脳全体で話を聞く
聞くことは学習に欠かせないが、聞くことが得意な人はあまりいない。<br/>
脳の処理能力に対して人間が話すスピードは遅いため、気を抜くと脳は話を聞きながら別のことを始めてしまう。<br/>
この問題の対策としてHEARのテクニックがある。
- Halt(中断する) ・・・話に関係のないことは全て頭から締め出し、相手の話に全身で耳を傾けよう。
- Empatht(共感する)・・・相手の立場に立って話を聞けば、漫然と聞いてみることよりも多くを学べる。
- Anticipate(期待する)・・・ワクワクしながら話を聞こう。感情が結び付けば、その人から学べることは長期記憶になる。
- Review(振り返る)・・・もう一度説明してもらったり、メモから内容を振りかえろう。それを自分の言葉に置き換えて、誰かに教えることを想像しよう。
  
#### 脳に最適なノートの取り方をする
多くの人は、効率の良いノートの取り方をしていない。やりがちなのは、ノートを書くのに気を取られて肝心の情報を聞き逃す、聞いたことを残らず書こうとする、あとで使えない形で書いてしまう、などである。<br/>
まずは、ノートを取る目的を理解しよう。目的がはっきりすれば、自分に必要な情報をそうでない情報の区別も付けやすくなる。<br/>
次になるべく自分の言葉で書くことも重要だ。話すスピードと同じ速さで書くことはできない。必要な内容を抜き出すことが重要だ。<br/>
また、誰かの言葉をそのまま書いたら、その情報を自分のものにできない。自分の言葉でノートを取れば、情報を咀嚼しだすのではるかに深く学習できる。<br/>
なにより、ノート力を上げる１番の秘訣は「真剣に聞くこと」だ。あなたは秘書としてそこにいるのではない。あとで使う情報を受け取るためにいるのだ。<br/>
情報を受け取ることと、それを記録することに少なくとも同程度の注意を払えなければ、真剣に聞けたとは言えない。<br/>
ノートの取り方でおすすめなのは、「キャプチャ・アンド・クリエイト」方式だ。紙の真ん中に線をひき、左半分でノートを取り、右半分で気づきを書き出す。

#### ノート力をさらに高めるコツ
- Think（考える）・・・ノートを取る前に、その時間から何を得たいか考えよう。考えることで、目的に沿った価値の高い情報を選り分けやすくなる。
- Identify（見極める）・・・示された情報によく耳を傾け、目的と照らし合わせて、最も重要な部分を見極めよう。全部を書こうとすると情報を咀嚼し切れないので、勉強が難しくなる。
- Prioritize（優先する）・・・書いたノートを見返しながら、最も自分のためになる情報を優先的に抜き出そう。
  

  

【読書メモ】LIMITLESS 超加速学習  リミットレス・メソッド編


## クイズゲームのデータセット
JavaScriptのクイズゲームの作成のために、クイズゲームのデータセットが欲しかったので探していると、
[AI王 〜クイズAI日本一決定戦〜](https://www.nlp.ecei.tohoku.ac.jp/projects/aio/)なんてサイトを発見。
クイズデータを学習させたAI同士で競わせるコンペだそうで。最近kaggleやってないな〜

大量のクイズデータを配布していたので拝借してみました。<br/>
こんな感じのデータがテスト用の軽いデータセットでも700kBくらい。

```json
    {
    "qid": "QA20CAPR-0004",
    "question": "『non・no』『週刊プレイボーイ』『週刊少年ジャンプ』といえば、発行している出版社はどこでしょう?",
    "answer_entity": "集英社",
    "answer_candidates": [
        "文藝春秋",
        "白泉社",
        "講談社",
        "宝島社",
        "扶桑社",
        "光文社",
        "集英社クリエイティブ",
        "双葉社",
        "幻冬舎",
        "リイド社",
        "集英社",
        "秋田書店",
        "潮出版社",
        "徳間書店",
        "小学館",
        "実業之日本社",
        "日本文芸社",
        "学研ホールディングス",
        "マガジンハウス",
        "祥伝社"
    ],
    "original_question": "『non・no』『週刊プレイボーイ』『週刊少年ジャンプ』といえば、発行している出版社はどこでしょう？"
}
```

１問ごとにJSONの形になっているけど、全体を[]で囲った上で各問題の間にコンマがないので、このままではjavascriptで読み込めない。<br/>
![クイズデータセットのJSONファイルのエラー](/images/2021年/6月/quizJSON.png)

Pythonならこの形のままで読み込めるのかな？（忘れた）

ついでにキーの数が多くて授業で使うには少し不便そう。

## 大量データをシェルプログラミングと正規表現で弄り倒す

プログラマの三大美徳とは「怠惰」「短期」「傲慢」です。<br/>
気合を入れれば各データの間にコンマを追加していらないキーを消すことは出来るけど、それは三大美徳に反するので楽をしようと思います。

### grepコマンドで文字列を検索する

shellで扱えるgrepコマンドでは指定ファイルの中から文字列を検索できます。<br/>
**<red>grep [オプション] 検索パターン 入力ファイル </red>** と入力します。<br/>
試しに同一ディレクトリにクイズのデータセットを保存したquiz.jsonファイルがある状態で、「original_question」が含まれている行を検索します。

```terminal
% grep original_question quiz.json

    "original_question": "明治時代に西洋から伝わった「テーブル・ターニング」に起源を持つ占いの一種で、50音表などを記入した紙を置き、参加者全員の人差し指をコインに置いて行うのは何でしょう？"
    "original_question": "『non・no』『週刊プレイボーイ』『週刊少年ジャンプ』といえば、発行している出版社はどこでしょう？"
    "original_question": "「パイプスライダー」や「そり立つ壁」などの関門がある、TBS系列で不定期に放送されている視聴者参加型のTV番組は何でしょう？"
    "original_question": "東京都内では最も古い歴史を持つ寺院でもある、入口にある「雷門」で有名な観光名所は何でしょう？"
    "original_question": "「鍋についたおこげ」という意味の言葉が語源であるとされる、日本ではマカロニを使ったものが一般的な西洋料理は何でしょう？"
    "original_question": "よくオムライスの中身としても使われる、細かく切った鶏肉やタマネギとごはんを炒め、トマトケチャップで味付けしたものを何というでしょう？"
    "original_question": "エペ・フルーレ・サーブルの3種目がある、細長い剣を持って1対1で闘うスポーツは何でしょう？"
    "original_question": "静岡県では酒粕を使った漬物としてもよく食べられる、握り寿司ではネタとシャリの間に挟まれる香辛料は何でしょう？"
    "original_question": "アメリカでは朝食の定番となっている、カリカリに焼いたイングリッシュマフィンに、ベーコンとポーチドエッグを乗せた料理は何でしょう？"

```

検索パターンには正規表現が利用できます。これは以前まとめたので省略。<br/>
オプションとして代表的なのは下記。
#### 検索パターンについて
- -i ・・・大文字と小文字を区別しない。
- -e ・・・後ろに検索パターンを追加して、OR検索として利用する。
- -v ・・・マッチ結果を反転させて表示する。

#### 出力書式について
- -n ・・・行番号を出力に含める。
- -H ・・・マッチしたファイルのファイル名を出力に含める。
- -o ・・・行全体ではなく検索パターンにマッチした箇所だけを出力する。


### sedコマンドで文字列を置換する

sedコマンドで文字列を置換することができます。<br/>
**<red>sed [オプション] スクリプト 入力ファイル </red>** と入力します。<br/>

スクリプトは「アドレス」と「コマンド」の組み合わせで構成されます。
### アドレスの指定方法
- 数字 ・・・指定した行番号の行
- /正規表現/ ・・・正規表現にマッチする行
- $ ・・・ 最終行
  
### コマンドの指定方法
- s ・・・文字列を置換する。 s/検索パターン/置換後文字列/フラグ
- 
#### フラグ
- /g・・・グローバルマッチ
- /i・・・大文字と小文字を区別しない

### sedのオプション
- -e・・・スクリプトを複数指定する
- -i・・・ファイルを編集して上書き保存する。すぐ後に文字列を指定すると元のファイルのバックアップが作成される。macではバックアップ必須。<br/>
参考：[Macの（BSD版）sed での上書き保存](https://qiita.com/catfist/items/1156ae0c7875f61417ee)



シェルプログラミングと正規表現について

【シェルプログラミング】grepとsedと正規表現

ハンズオンJavaScriptを進めていく上での補助記事その４です。


- やること：createElement,querySelector(),appendChild(), Object,
- やらないこと：アロー関数 など


## クイズゲームの作成 その4

### createElementとappendChild()で要素を追加する。

**document.createElement("作成するタグ")** で指定したhtml要素を作成することができます。
**document.querySelector("CSSセレクター")** で指定したCSSセレクタのうち一番最初に見つけたものを取得します。
これはdocument.getElementById()と同じような形で使えます。
**appendChild("html要素")** は指定したhtml要素を子要素に１つだけ追加することができます。

これらを使って新しい選択肢であるEをJavaScript側から作ることができます。

```html
<script>
    const li = document.createElement("li");
    li.textContent = "E"
    li.setAttribute("id", "E")
    document.querySelector("ul").appendChild(li)

    buttons = ["A", "B", "C", "D"];

    // 以下略
</script>
```

![クイズ4日目_1](/images/2021年/6月/quiz_4_1.png)

Google Developer ToolsのElementsタブで確認すると、id属性がEの要素が追加できています。
![クイズ4日目_2](/images/2021年/6月/quiz_4_2.png)

### 既存の要素をJavaScriptで置き換える
新しく選択肢Eを作れたということは、既存のA~DまでもJavaScriptで作ることができます。
前回使った配列とforループを使うだけです。

```html
<body>
    <div class="mondai">
        <p>問題文</p>
    </div>
    <ul>
        
    </ul>
</body>
<script>

    buttons = ["A", "B", "C", "D","E"];

    for (btn of buttons) {
        const li = document.createElement("li");
        li.textContent = btn
        li.setAttribute("id", btn)
        document.querySelector("ul").appendChild(li)
    }

    // 以下略

</script>
```

### オブジェクト型で選択肢の中身を管理する P81 2.13 オブジェクト
配列によって複数の要素を順番で管理してきましたが、オブジェクトは要素をまとめるもう一つの手段です。<br/>
オブジェクトは名前(key)と値(value)のペアで管理します。名前と値の間を：を用いて結びつけて表記します。<br/>

問題文を日本で２番目に高い山は？として、選択肢のデータを管理するオブジェクトを作るとこんな感じになります。

```html
<script>
    answerObject = {
        "A" : "北岳",
        "B" : "槍ヶ岳",
        "C" : "奥穂高岳",
        "D" : "剱岳",
        "E" : "立山"
    }
</script>
```

このオブジェクトのデータを利用する方法にはいくつかありますが、最も簡単な方法は[]で指定することです。<br/>
たとえば、answerObject["A"]と指定すると"北岳"が取得できます。<br/>


### オブジェクトから配列を生成する P151 4.6.2.3 プロパティ一覧
また、オブジェクトから配列を生成することができます。
名前(key)だけが入った配列を作るにはObject.keys(answerObject)
値(value)だけが入った配列を作るにはObject.values(answerObject)を


これらを利用して、回答の選択肢をA,B,C,D,Eから変更します。

```html
<body>
    <div class="mondai">
        <p>日本で２番目に高い山は？</p>
    </div>
    <ul>
        
    </ul>
</body>
<script>
    answerObject = {
        "A": "北岳",
        "B": "槍ヶ岳",
        "C": "奥穂高岳",
        "D": "剱岳",
        "E": "立山"
    }

    // A~Eの配列はオブジェクトから作る
    buttons = Object.keys(answerObject);

    for (btn of buttons) {
        const li = document.createElement("li");
        // textContent はオブジェクトから取得する
        li.textContent = answerObject[btn]
        li.setAttribute("id", btn)
        document.querySelector("ul").appendChild(li)
    }

    function removeAnswer(answer) {
        const answerElement = document.getElementById(answer);
        answerElement.removeAttribute("class");
         // textContent はオブジェクトから取得する
        answerElement.textContent = answerObject[answer];
    }

    function clickButton(clickButton) {
        document.getElementById(clickButton).addEventListener("click", function () {
            if (clickButton === "A") {
                this.setAttribute("class", "true");
                this.textContent = "正解";
            } else {
                this.setAttribute("class", "false");
                this.textContent = "不正解";
            }
            for (const button of buttons) {
                if (button !== clickButton) {
                    removeAnswer(button)

                }
            }
        })
    }

    for (const btn of buttons) {
        clickButton(btn)
    }
</script>
```

![クイズ4日目_3](/images/2021年/6月/quiz_4_3.png)

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4873119227&linkId=70e51d79bcd70d5aa03ca0c65b7dffb1"></iframe>

JavaScriptでクイズゲームを作る④