OmniAICreator/Qiita-1.07M huggingface dataset:
間食でのタンパク質の含有量をパッとLINEが教えてくれて、食生活が変わりスッとダイエットできるアプリの開発過程

あるいはこんばんは

初心者がTeachable Machine（Googleが無償提供している画像／音声認識モデルツール）
を使用して、良く食べる食品のタンパク質含有量と良いタイミングを通知するLINEを形成したく、
使用テストの過程でコードペンで使用してみる試行錯誤と失敗過程を紹介します。

食品の画像機械学習でカロリー等の栄養素を返すLINE Botは存在しますし、
バーコードから栄養素を返すものも存在しますので、
摂取するのに良いタイミングを返すLINE Botを目標にしました。



尚本記事は試行錯誤の錯誤中なので後日修正アップデート予定です。
しくじり過程をご照覧ください。

## １．Teachable Machine
手元にあったアイスとプロテインをAI画像学習にかけて判別できるようにします。
![スクリーンショット 2023-07-20 231235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/6b0d055f-ac99-6adb-d9c2-5c70b0c0c32b.png)


## ２．Node REDを試用して
![スクリーンショット 2023-07-12 194541.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/daac6df3-68e2-4077-a5ae-46922de09ab0.png)
画像は見れるものの肝心のTeachable Machineのノードでエラーをおこしつつ、
![スクリーンショット 2023-07-20 213602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/16fe2798-01fe-d944-c9f2-5139260ac06d.png)

## ３．CodePenに浮気をしました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Googleが無償で提供している画像／音声認識モデルを作ることができるツールTeachable Machineをコードペンで使用してみる途中<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/TeachableMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachableMachine</a> <a href="https://twitter.com/hashtag/CodePenChallenge?src=hash&amp;ref_src=twsrc%5Etfw">#CodePenChallenge</a> <a href="https://t.co/GNPtqsbHbj">pic.twitter.com/GNPtqsbHbj</a></p>&mdash; 佐藤　PEH0209 (@ah540627) <a href="https://twitter.com/ah540627/status/1682025804035940355?ref_src=twsrc%5Etfw">July 20, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## ４．着地点想定のLINE通知を設定してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/1c8f6a0e-585c-a427-637a-5e37ecf8c3bf.png)
なにかクルクルして反応しませんが、Webhooksさんが少し違うようです。

## そんな時は再起動！　ワッショイ！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">メイクと通知用LINEは繋がった <a href="https://t.co/s3FSOD7yjD">pic.twitter.com/s3FSOD7yjD</a></p>&mdash; 佐藤　PEH0209 (@ah540627) <a href="https://twitter.com/ah540627/status/1682035144524451843?ref_src=twsrc%5Etfw">July 20, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ほぼ同じ設定画面でつながりました。

　
　
## ５．反省点
（１）Node REDが完成しないままにCodePenに浮気し、二兎は得られませんでした。
　　　Node REDが先なのに心中はCodePenなので気になって仕方がなく
　　　ワッとなってやりました。今は反省しています。
（２）初心者なので色々な単語が知らない状態で、単語単語をWikiで調べたりしていたら
　　　楽しくなってしまい言葉の定義を追いかけて追い回してしまいました。
　　　クッとなってやりました。今は反省しています。
ボツ集
（３）画像機械学習において、弊社取締役の顔を知らない従業員がいるので、
　　　顔認証的にネットや社内報にある取締役の顔を機械学習しようと企みましたが、
　　　サンプル画像が大量には取得できないことを後に気づきボツにしました。
（４）家族の顔画像を機械学習させ、父と母の画像機械学習の後に娘がどちらに何％一致するか
　　　という企画を考えましたが、すでに世にでているアプリがあるのでボツにしました。
（５）食品画像からカロリーを算出するものを考えてみましたが、
　　　これも検索するとアプリで存在するのでボツにしました。
（６）食品バーコードから栄養素を算出するものも考えてみましたが、
　　　こちらも検索するとアプリで存在するのでボツにしました。
（５）（６）が世に出ているということはマーケットが存在するという裏付けですので、
　これらの進化系アプリを作りたいと企画を考えました。

企画面で試行錯誤に時間的リソースを費やしてしまいました。
IT化するのが難しそうだった課題（≒まだアプリとして世に出ていない）ものを考えすぎて、
やろうとしたことが検索すると世の中に出ているものばかりで企画面で頓挫することばかりでした。
【LINE API】 LIFF とは メリット、デメリット

## LIFFとは

> LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

https://developers.line.biz/ja/docs/liff/overview/

## メリット
#### １.LINEのユーザ情報を活用できる
=> LIFFを開いた際、初回のみ表示されるLINEログインの同意画面を許可するだけで、ユーザ情報を取得できるようになる。
（一からユーザ情報を管理する仕組みを作る必要が無くなるので、便利、工数削減）



#### ２. liff.sendMessages()という関数を使うと、 課金対象となるメッセージ通数にはカウントされずにLIFFアプリが開かれているトーク画面にメッセージを送信できる
=> 送信されたメッセージはユーザから見た時に自分が送信した位置（※トーク画面の右側）に表示されるので、幅いっぱいに広がる様なデザインにして送信すると、LIFF内から送信する通知として使える。

[Flex Message](https://developers.line.biz/ja/docs/messaging-api/message-types/#flex-messages)等も使える。

[公式ドキュメント liff.sendMessages()](https://developers.line.biz/ja/reference/liff/#send-messages)

#### ３. ボットリンク機能を使うことで、友達登録してもらいやすくなる
=> ボットリンクという機能で、紐づけたいLINE公式アカウントを設定し、LIFFアプリを開いた初回に表示されるLINEログインの同意画面と同時に友達追加のフローを挟むことができる。

[公式ドキュメント ボットリンク](https://developers.line.biz/ja/docs/line-login/link-a-bot/#page-title)

## デメリット

#### １．少しだけ学習コストがかかる
=> LINE Developperコンソール内でプロバイダーの作成、チャネルの作成などのやり方を覚える必要がある。
（公式ドキュメントにある[クイックスタート](https://developers.line.biz/ja/docs/liff/overview/#page-title)を進めればこちらの内容も含まれているため、特に問題なし）
javascriptのproxyを使って変数の値の変更を検知する。

## なにがやりたかったか

変数の値の変更を検知して処理を実行したかった。

> 例 : 変数Aに値が代入されたときに関数Bを実行する。

## 実現方法

javascriptのproxyを使えば、**変数の値がset/getされたときに行う処理を中継できる**

実際の動作を見た方が早いのでplaygroudのコードを添付します。

[playground](https://www.typescriptlang.org/play?#code/MYGwhgzhAEAqCmEAu0DeAoaXoAcCuARiAJbDQTFLwDCA9gCbwBca0AbmCHs+UgE7EAdgHNoAH2h5BjAGZD49aAF8A3JmzBag5HzzAktPgAoAlGnXZsSABbEIAOgpU6jaAF5og+AHdoABT5aAA8ATyMLS0jUdk5uFgByeOUAGgjI7Ax0rOwIeCQWGSl9Yi1oIyQwPmE8ljBBEOToAGt4EJYdIWFGji4eDpFxSWl4OS96M0zsqaxiGTKe7gm06anNbVoQeHsQWmEjeNykKj5AAwZACIZ4k2WV7CVrm+gKqryAbRaQgF13GN61B6y1hANlsdnsntUkG9Wh8rv90nw8ng+IJHrp4H84UpUnDoBCCkUkCUUeVKnjoHUGs1Wu1+J0ljjLIDgdtdvsIcdzpd7jcEUgkSjwa93h8Mf8sdzbvcTKLlOg7uhASgqMhvl5fAhkKY1EzNiywYgkI5KDQGFsFvAzAB6S24vIcs7oZWGpwmxj2c3feJOpLW8h2+CnB06kGsp1G5ym92xC3QX3sgPndBAA)

```ts
class Test {
    public siteCode: { value: string | undefined };
    constructor() {
        this.siteCode = new Proxy(
            { value: '' },
            {
                // siteCodeに値がsetされた時の処理を中継(proxy)
                set: function (target: any, key: string, value: string | undefined) {
                    if (value) {
                        console.log('setterだよ')
                    }
                    target[key] = value;
                    console.log(target[key])
                    return true;
                },
                // siteCodeの値がgetされた時の処理を中継(proxy)
                get: function (target: any, key: string) {
                    console.log('getterだよ')
                    return target[key];
                },
            }
        );
    }
}

const test = new Test();
console.log(test.siteCode.value) // getterだよ
test.siteCode.value = 'test' // setterだよ
console.log(test.siteCode.value) // getterだよ
```

## 公式

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Pythonのiteratorについて

### Pythonの`iterator`とは
* `iterator`とは、可算量のvalueからなるオブジェクトです。
* Pythonでは`iterator`は `iterator protcol`を実装したオブジェクトであり、 `__iter__()` と `__next__()`メソッドからなります。
* `List`, `Tuple`, `Dict`, `Set`などはいずれも`iterable`なコンテナであるため、`iter`, `next`メソッドを持ちます。(明示していないだけでメソッドを含む)

#### 例
```python3
class Line:
    __start: Point
    __end: Point
    __next: Point
    __direction: Direction
    ...
    def __iter__(self) -> Iterator[Point]:
        self.__next = self.__start
        return self

    def __next__(self) -> Point:
        if self.__next == self.__end:
            raise StopIteration
        current = self.__next
        self.__next = Point(
            self.__next.x + self.__direction.x, self.__next.y + self.__direction.y
        )
        return current

```

* 上記例のように、`iteration`を止めるには `StopIteration`を使用します。

### なぜ`iterator`を使うのか
ここでは、なぜ、どのようなケースであれば`List`などの`iterable`なobjectではなく, `iterator`を自分で定義するのか、を考えていきたいと思います。(考察のため、違う、他にもある、などのフィードバックは宝物として受け取ります。コメントいただけると幸いです。)

1. 対象objectが単純なvalueではない
上記の例のように対象objectが単純な`int`などではなく、`class`だが、`iterable`に操作したい場合、明示的に定義するのかと思います。
2. 対象となるobjectのサイズが呼び出されるタイミングでは決定していない
上記例ですと、`Point`は*tuple(int, int)* のため、`List`や`tuple`を組み合わせて表現することも可能に見えますが、実はこのコードでは他の制約によって(ここでは盤面のサイズ)`List`の長さが変わります。`List`を使って表現する場合は制約によって決定したサイズの`List`を渡す必要がありますが、上記コードでは`iterator`の終了条件を自分で決定できるため、より柔軟なコードを書くことが可能になります。
3. 見やすさ
`List`や`tuple`といったデータコンテナは、それ自体どのようなデータを含んでいるのか、なんのためのデータなのかが中身を見ないとわからないですが、`class`では何を扱っているのか、が一目でわかるという明確なメリットがあります。
Google Earth Engine でチャートを扱ってみる

## はじめに
Google Earth Engine (GEE) は、人工衛星などで取得した情報を地図上に描画することが可能です。それだけではなく、その情報を使ってチャートを作成することができます。

今回は、富士山の登山ルートの一つである吉田ルートの各チェックポイントの標高を使ったチャートを作成しました！

## Google Earth Engine でチャートを扱ってみる
### 吉田ルートについて
日本一標高が高く、世界文化遺産にも登録されている富士山は、7月になると登山シーズンをむかえます。登山ルートは、吉田ルート、須走ルート、御殿場ルート、富士宮ルートとあり、その中で最もメジャーなルートが吉田ルートです。

https://fujisan-climb.jp/trails/index.html

今回は、この吉田ルートの合目の標高をプロットしたチャートを作成します。

### チャートの作成工程

今回使った合目の位置については、コース案内をもとに Google Map から位置座標を取得しました。一部 Google Map でわからず取得できていないものもあります。また、富士山の登山は、五合目からスタートするので、五合目からの位置情報を取得しています。

https://www.fujisan-climb.jp/trails/yoshida/course.html

以下のコードは、GEEにある Example をもとに作成しています（Example > Charts > Elevation Plofile　で確認可能）。

```javascript
// 標高データを取得
var elevation = ee.Image('CGIAR/SRTM90_V4');

// 各合目の位置座標
var waypoints = [
  ee.Feature(ee.Geometry.Point([138.7326023464491, 35.394567945420114]), {'name': '五合目'}),
  ee.Feature(ee.Geometry.Point([138.74769414680398, 35.385406032847484]), {'name': '六合目'}),
  ee.Feature(ee.Geometry.Point([138.74448247745116, 35.37915928448756]), {'name': '七合目'}),
  ee.Feature(ee.Geometry.Point([138.74160647471373, 35.37427454495214]), {'name': '八合目'}),
  ee.Feature(ee.Geometry.Point([138.73895904407863, 35.369255412513894]), {'name': '本八合目'}),
  ee.Feature(ee.Geometry.Point([138.7374261003066, 35.36818286027351]), {'name': '八合五勺'}),
  ee.Feature(ee.Geometry.Point([138.73517600457265, 35.36703037398237]), {'name': '九合目'}),
  ee.Feature(ee.Geometry.Point([138.72742497837712, 35.360748404268215]), {'name': '山頂'}),
];

// 描画できる形に変換
var fcWaypoints = ee.FeatureCollection(waypoints);

// チャート
var chart = ui.Chart.image.byRegion({
  image: elevation,
  regions: fcWaypoints,
  scale: 100,
  xProperty: 'name'
});
chart.setOptions({
  title: '吉田ルートの各ポイントの標高',
  vAxis: {
    title: '標高（メートル）'
  },
  legend: 'none',
  lineWidth: 1,
  pointSize: 4
});

print(chart);
```

実際に描画したチャートがこちらです。結構綺麗なチャートが描画できます。

![ee-chart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581736/21828f66-60eb-169b-3424-f96d1c9f3925.png)

このように、チャートの各点上でホバーしてみると、詳細の標高が表示されます。

![スクリーンショット 2023-07-20 21.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581736/8a44d310-a2e9-5472-d836-441549d0c775.png)

各合目の標高を以下の表にまとめてみました。

| 合目 | 標高（メートル） |
|:-:|:-:|
| 五合目  |  2,316 |
| 六合目  | 2,404  |
| 七合目  | 2,701  |
| 八合目  | 3,079  |
| 本八合目  |  3,372 |
| 八合五勺  |  3,491 |
| 九合目  |  3,583 |
|  山頂 | 3,709  |

「あれ...？」と思われる方もいるかもしれませんが、山頂の標高がおかしいですね。
今回使用したデータは、SRTM Digital Elevation Data Version 4　というものを使っています。こちらのデータは、スペースシャトルで観測されたものであり、少し誤差があると思われます。スペースシャトルから観測して、誤差が 70 m ぐらいなのすごい気もします。

https://developers.google.com/earth-engine/datasets/catalog/CGIAR_SRTM90_V4

## さいごに
今回は、GEEを使ってチャートを作成してみました。テーマとしては、標高を扱うこと、7月であることから、富士山の登山コースの一つである、吉田ルートの合目を扱ってみましたが、他のことにも応用ができそうな感じでよかったです。
RubberDuckyScriptの仕組み

# はじめに

この記事ではRubberDuckyScriptという言語が、どうコンパイルされて実行されるのかを説明します。
きっかけはRubberDuckyUSBというBadUSBを買った時でした。
この言語で書かれた実行ファイルはどうやってBadUSBによって実行されるのだろうと疑問に思い
コンパイルされた実行ファイルの解析を始めました。
今回は現時点で分かっている点をまとめてみました。

# 実行ファイルのフォーマット

RubberDuckyScript言語用に開発された専用コンパイラーでコンパイルされた実行ファイルを解析してみると
中身はただのバイトコードでした。そして、１つの命令が２バイトにコンパイルされていました。
例えば、キー"s"を１回入力する命令だと```0x16 0x00```にコンパイルされます。

# キー入力命令

キー入力命令はキーボードの配列によって変わってきます。
これはキー配列によって記号キーなどの位置が変わるからだと思っています。
例えば、US配列のキー"@"の入力命令は```0x1f 0x02```ですが
JP配列のキー"s"の入力命令は```0x2f 0x00```になります。

## キー入力のバイトコード表

githubにRubberDuckyScriptがコンパイルに使うバイトコード表があるので、貼っておきます。
https://github.com/hak5/usbrubberducky-payloads/tree/master/languages

## キー入力命令のコンパイルの仕組み

キー入力のコンパイルは上記に上げたバイトコード表を基にバイトコードにコンパイルします。
ですが、単純にそのままコンパイルするのではありません。
対応表には３バイトのバイトコードがあると思いますが、これの１バイト目と３バイト目を入れ替えて
２バイトにします。
例えば```00,00,16```の場合は```0x16 0x00```になります。
２バイト目はコンパイルの時には無視します。

# 特殊な命令

RubberDuckyUSBには単純なキー入力以外にも色々な命令があります。
例えば、５秒間の遅延を入れることができます。
このような特殊命令は上記のバイトコード表には載ってなかったので、自分で実行ファイルを解析してみました。

## 遅延命令

遅延命令の場合も２バイトで１命令になります。
最初の１バイトが遅延命令を表していて、２バイト目がどのくらい遅延させるかを表しています。
このどのくらい遅延させるかという値はミリ秒で表現します。
１秒間の遅延命令だけを行う実行ファイルがこちらです。
![Screenshot_20230720_231338.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3510659/5bcd6225-d939-cef9-2ea2-5a4844593cbe.png)
１バイトなので255ミリまでしか表現できないので、255より長い時間遅延させるときは
いくつもの遅延命令を送ります。
よって１秒の遅延は写真のように255(0xff) + 255(0xff) + 255(0xff) + 235(0xeb)と４つの遅延命令が
書かれているのです。

# 考察

今まで見たきたとおり、実行ファイルはバイトコードで表現されます。
このバイトコードをRubberDuckyUSBが読み取り、命令通りにキー入力であったり特殊命令を
実行するのかなと思っています。
RubberDuckyUSBがこの実行ファイルをどう扱うのかはまだよく分からないので、これはただの考察に過ぎません。
何か知っている方がいたらコメントで教えていただけるとありがたいです。
CRSとEPSGの違い

## CRSとは

「座標参照系」のことです。

座標系は大まかに2つに分かれます。

- 地理座標系
- 投影座標系

### 地理座標系

- 赤道と本初子午線を基準にして、地球中心からの角度で位置を示す
- なので、緯度と経度で場所を示す

#### 深掘り

- 地理座標系は楕円体・ジオイド・データムによって定義される
	- 楕円体
		- 地球は自転によって若干横長
		- 半径は長いほう（赤道上）が6,378,137m、短い方が6,356,752m
	- 地球の真の形を「ジオイド」と呼ぶ
		- 要は、地球の表面のこと
			- というより、平均海面
		- が、重力によって変化するし、場所によっては平滑ではない
	- 単純形状の楕円体と、変化し続けるジオイドをどのようにマッピングさせたか、を「データム」という
		- 楕円体とジオイドの位置関係のことでもある
	- データムはいくつか種類がある
		- が一般的には全球に適しているのはWGS84（世界測地系1984）と呼ばれるもの
		- つまり、測地系≒データム

### 投影座標系（デカルト座標系）

- 地図にするなら、平面に投影させる必要がある
- が、地球は球体なので平面に投影させると必ず歪む
    - なので、何かの正確さを犠牲に、何かが等しい地図ができる
    - 形状・面積・距離・方向のどれか
- 原点・XY座標を設定する必要があり、数学的な変換が必要
- 位置はXY座標のmで示されることが多い

参考: https://pygis.io/docs/d_crs_what_is_it.html#d-crs-what-is-it

## EPSG

CRSは座標参照形であり、「地理座標系」と「投影座標系」がありますが、EPSGと混同しがちです。

EPSGは団体名であり、「European Petroleum Survey Group」の頭文字をとってEPSGと呼ばれていましたが、ここが管理しているパラメータ（CRS）をEPSGコードと呼ぶ
（現在はOGP Surveying and Positioningによって引き継がれているが、変わらずEPSGコードと呼ばれている）

以下参照
http://wiki.gis.com/wiki/index.php/European_Petroleum_Survey_Group

## まとめ

CRSとEPSGの違い

- CRS: 特定の座標参照システムを指し示す識別子
- EPSGコード: 特定のCRSを一意に識別するための標準化された方式
[React]hooksまとめ

## はじめに
Reactでは必須のhooksについてまとめていきます。

## 目次
今回まとめていくhooksは以下になります。
**・useState**
**・useEffect**
**・useCallback**
**・useMemo**


## 説明
ここから説明していきます。

### useState
こちらは値の状態を保持するhooksになります。コードで説明していきます。
以下は、カウントアップボタンが押されたと同時に、countの値を1ずつ更新していくコードになります。
```
// setCountは値(count)を更新する関数。
// useState(0)の0はcountの初期値になる。
const [count, setCount] = useState(0);

// ボタンを押されたときに更新関数を呼び出して、countの値を更新する。
const onClickCountUp = () => {
  setCount(count + 1);
}; 

// HTML↓
// 更新される値を画面に表示
<p className='mb-10'>{count}</p>
// ボタンが押されると、更新関数を呼び出す関数を呼び出す。
<button onClick={onClickCountUp}>カウントアップ</button>
```
ボタンが押されて、画面の数字が更新されるのは、
更新関数のsetCountが呼び出されるたびに、画面が再レンダリングされるためです。

### useEffect
これは、useEffect内に書いた処理の発火のタイミングを設定できるhooksになります。
サンプルコードは以下です。
```
<p className='mb-10'>{count}</p>
<button onClick={onClickCountUp}>カウントアップ</button>

useEffect(() => {
    console.log("hooks")
  }, [])

// No.1
const onClickCountUp = () => {
  setCount(count + 1);
}; 

// No.2
useEffect(() => {
    console.log("カウントアップ")
  }, [count])
```
useEffectでは、第二引数に設定した値が更新されたタイミングで、中の処理を実行します。

No.1では、第2引数で[]を指定しています。これは、画面が読み込まれた際に、中の処理を実行することになります。

No.2では、第2引数でcountを指定しています。なので、count変数が更新された際に、中の処理を実行することになります。

なので、


### useCallback
これは再レンダリング時に、関数も一緒に実行されないようにするhookです。
コンポーネント化したファイルなどに書いた関数に設定することが多いです。
以下がサンプルコードです。
```
const [counter, setCounter] = useState(0);

  const showCounter = useCallback(() => {
    alert('コールバック')
  }, [counter])

<Practice showCount={showCounter}/>
```
このようにshowCounterをuseCallbackで囲むと、この関数が再レンダリング時に呼ばれなくなります。
このように、無駄な処理を実行しないようにするためにuseCallbackを使用します。

### useMemo
useMemoはuseCallbackに似ています。
useCallbackは関数のメモ化に対し、useMemoは変数のメモ化をします。
サンプルコードです。
```
const [count1,setCount1] = useState(0);
  const [count2,setCount2] = useState(0);
  const countUp = (count1: number) => {
    count1 * 2
  };
  const baiCount = useMemo(() => countUp(count1), [count1]);
```
このように書くと、count2が更新された場合は、メモ化している中の処理は実行されないため、無駄な処理を減らすことができます。


## 最後に
書いていないhooksは追記していきます。

他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
ライトニングトーク登壇資料を秒で作るコツ

最近、嬉しいことに社内外の技術イベントでライトニングトーク等の登壇機会をいただけることが多く、毎週何かしらの勉強会で発表予定があるというスケジュールが恒常的になってきました。（本当にありがたい限りです）

必然的に常時「次のイベント登壇資料を作っている」状態が多いのですが、たくさんライトニングトーク（LT）資料を作っているうちに自分の「型」ができて効率化してきたので、ノウハウをみなさんにもご共有します。


# 最初からテーマを決めなくていい。ネタをリストアップする

まずは何を喋るか考えてLTタイトルを決める方も多いと思うのですが、私は勉強会のテーマを眺めながら「何を喋ろうかな〜」と思い浮かぶネタを雑にメモ帳に書き殴ります。（Apple標準のメモ帳アプリを使っています）

断片的だったり具体的なバラバラのネタでもいいので、一部分でも喋れそうな経験や知識のキーワードを箇条書きにしていき、出し切ったところで発表に何を入れるか考えます。

まとまった一つのネタを広げて時間枠いっぱい使えそうな場合、直接関係ないネタは削って別の機会に再利用すればいいですし、逆に一つ一つのネタは小粒だから複数まとめて一本のLTにしたい場合は、どういうストーリーで繋げるかを考えます。どうしても自然なストーリーで繋げるのが難しい場合は「xxxな事例3選」など、オムニバス風にまとめます。

これらをふまえてLTタイトルを仮決定します。


# まだパワポを開かないで！ プロットから作ると結果的に早い

ここでPowerPointやKeynoteを開いてスライドを作り始めてしまわず、引き続きメモ帳のままプロットを書いてしまうのが個人的にオススメです。

スライドを先に作ってしまうと、ビジュアルを加工する作業とストーリーを具体化する作業を同時進行することになるので、大枠の方向性を途中から修正しようとするとロスが発生してしまいますし、いざ作ってみたらスライド増えすぎた！という場合も削るのが勿体なくなるでしょう。

前項でLTタイトルを考えた箇条書きメモをそのまま利用し、プロットを作ります。ここで言うプロットとは話の流れを箇条書きのテキストで簡単に表現するものを指します。

LTタイトルを考えた箇条書きメモの延長で、LTに採用しないパーツを欄外によけて、採用するネタの箇条書きメモをどういう順番で喋るかストーリーを想像しながら並び替えます。そして並び替えた結果、粒感が揃うようにインデントして親子関係をつけていきます。抽象部分が不足していればサブタイトル的な要素を作ったり、具体部分が不足していれば流れに沿った具体例を追加で肉付けします。

![スクリーン ショット 2023-07-20 に 23.08.02 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/a7ff306c-66df-3f0c-0c6f-9b53f5007a40.png)

ここまで作ると、スライドがなくても簡単な発表練習イメトレぐらいはできるので、大きな手戻りなくザックリ時間調整なども可能になります。



# 最後にスライド化

プロットが出来たらあとは「作業」です。私はJTCのパワポDJ出身なので、お得意PowerPointを開いてスライド作成作業に入ります。プロットは「1行＝１スライド」ぐらいの粒度で資料化することが多く、プロットに書いたテキストをベースに表現を工夫してみたり、図表を貼って聞き手フレンドリーにしたりといったビジュアライズをしていきます。

このとき、聞き手を飽きさせないコツをいくつかご紹介します。

- 形式をきれいに統一しすぎると単調化します。例えばですが、「タイトル＋説明文」の似たようなスライドが数枚続くときは途中で「デカ文字のみ」のスライドを挟んで「静と動」のアンバランスを意図的に作るといいです。

- 個人的な好みですが、文字を増やすのが嫌いなので「基本は1行」でスライド内の文字を収めようと頑張ることが多いです。そうすると余白が空くので、解説イラストを作って貼るか挿絵を入れます。いずれの場合もいらすとや様は神です。（無償利用可能な条件がありますので、規約を確認のうえ利用しましょう）

https://www.irasutoya.com/


# 実際に作った登壇資料の例

こちらの資料も完全に上記の流れで作成したものですが、プロット作成（＆リサーチ）までで1〜2時間、スライド化でもう1〜2時間という感じで休日の午後半分使ってカフェで作っていました。（ちなみに同日、別件の登壇資料をもう一つ作っていました）

https://speakerdeck.com/minorun365/sheng-cheng-aizhou-hui-chi-rekiyatutiatuhumian-qiang-hui

登壇資料は各自の個性が出るのも面白い部分なので、あくまで私の例ということでご紹介させていただきました。みなさんの登壇資料作成テクもあればぜひ教えてください！
企業（組織）はメンバーがパブリックな技術記事を書くことを推奨してほしい

## 背景
Qiitaには [Organization](https://qiita.com/organizations/about)という機能があり、そのコンセプトは
> Qiita Organizationは組織のナレッジや
技術力をアピールするための機能です。

となっています。
が、組織として技術記事を書くことにはそれ~~以上に~~以外にもメリットがあると考えています。
この記事ではそのメリットについて記載します。

## 前提：わからないことを調べるプロセス
何かわからないことがあった場合、下記のようなプロセスを踏むことが多いのではないでしょうか。
```mermaid
graph TB
  Start([Start])--> A[/解決するまで\]
  A-->B[1.ググる]
  B-->C[2.社内ナレッジ参照]
  C-->D[3.わかる人を探す]
  D-->E[4.わかる人に聞く]
  E-->F[\繰り返す/]
  F-->End([End])
```
筆者の場合、 
* 社内ナレッジが存在しない
* わかる人を探すために、わかる人を知っている人を探すループが発生

というのも経験しています。

次項からは、組織のメンバーが技術記事を書くことで上記のプロセスがどう改善できるかを解説します。

## 組織のメンバーが技術記事を書くメリット

### ググったら見つかる
これは社内に閉じたナレッジ共有の手段に対してパブリックな場が有効である理由です。
4.のわかる人がナレッジを適切にアウトプットしておけば、2. ~ 4. を省略することができます。

また、筆者は過去にSES・派遣をメインにする会社に所属していましたが、常駐先からは自社のナレッジにアクセスできない。ということがほとんどでした。
そうすると「誰も見てくれない、環境が変わったら見れない」という理由でアウトプットのモチベーションが下がります。

その点、ググって見つかるプラットフォームであれば環境が変わっても参照することができるので、アウトプットのモチベーションを保つことができます。


### 2. わかる人（わかりそうな人）が誰かわかる
仮にわかる人のアウトプットが不十分だったり、知りたいことがピンポイントでわからなくても、周辺知識についてアウトプットしている人がわかれば直接相談することができます。それによって 2. ~ 3. を省略することができます。

昨今リモートワークが普及し、以前より3. 4. のハードルが上がっていると感じます。
このハードルを下げるために __誰が何を知っているかをわかりやすくする__ のに有効ではないでしょうか。

また、アウトプットに対するフィードバックも受けやすくなるので、アウトプットの品質向上にもつながります。

## 気を付ける点
### ガイドラインを設ける
組織で推奨している = 何を書いてもいい という発想にならないように一定ガイドラインを設けるべきです。
* 公開していい情報なのかの判断軸を設ける
    * 機密情報
    * 個人情報
    * など
* コードや画面キャプチャに気を付ける
    * プロダクトのソースコードを直接貼る
    * AWSのマネコンのキャプチャを貼る際に、本番環境のものを使う
    * など

### 利用するプラットフォームのガイドラインに従う
QiitaやZennは、記事の内容に対するガイドラインが存在します。パブリックなプラットフォームを使うからにはそのプラットフォームのガイドラインを守りましょう。
Swagger-PHP @OA\Items() is required when @OA\Schema() has type "array"の解決法

# はじめに
Laravel + Swagger/OpenAPI でAPIを開発する際に書くアノテーション（`@OA\`から始まるコメントみたいなの）に問題があり、Swaggerのドキュメントを出力する際にエラーが発生した。。。

```console
$ php artisan l5-swagger:generate

Regenerating docs default

   ErrorException 

  @OA\Items() is required when @OA\Schema() has type "array" in \App\Http\Controllers\Mobile\Version1\SearchController->getJobs() in /var/www/html/app/Http/Controllers/Mobile/Version1/SearchController.php on line 247

  at vendor/zircote/swagger-php/src/Loggers/DefaultLogger.php:31
     27▕         } else {
     28▕             $error_level = E_USER_WARNING;
     29▕         }
     30▕ 
  ➜  31▕         trigger_error($message, $error_level);
     32▕     }
     33▕ }
     34▕ 

      +35 vendor frames 
  36  artisan:37
      Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
```

GETメソッドでarrayのパラメーターを渡そうとしたのだが、その部分のアノテーションが原因であろうと推測。。:unamused:


# `@OA\Schema`の中に`@OA\Items`を入れると解決
👇はエラーが出るパターン


```php
    /**
     * @OA\Get(
     *     path="/mobile/v1/job/jobs",
     *     operationId="job-get-jobs",
     *     tags={"job"},
     *     summary="jobの一覧",
     *     description="jobの一覧を取得します",
     *     @OA\Parameter(
     *         name="category_id",
     *         in="query",
     *         example="[1, 2, 3]",
     *         description="カテゴリのIDの配列を指定してください。",
     *         required=true,
     *         @OA\Schema(type="array"),
     *     ),
     *     @OA\Response(
     *         response=200,
     *         description="成功",
     *         @OA\JsonContent(ref="#/components/schemas/MobileApiItemsResponse")
     *     )
     * )
     */
    public function getJobs(ApiTokenRequest $request)
    {
      // コントローラーの処理
    }
```

👇がOKなパターン


```php
    /**
     * @OA\Get(
     *     path="/mobile/v1/job/jobs",
     *     operationId="job-get-jobs",
     *     tags={"job"},
     *     summary="jobの一覧",
     *     description="jobの一覧を取得します",
     *     @OA\Parameter(
     *         name="category_id",
     *         in="query",
     *         example="[1, 2, 3]",
     *         description="カテゴリのIDの配列を指定してください。",
     *         required=true,
     *         @OA\Schema(
     *             type="array",
     *             @OA\Items(type="integer"),
     *         ),
     *     ),
     *     @OA\Response(
     *         response=200,
     *         description="成功",
     *         @OA\JsonContent(ref="#/components/schemas/MobileApiItemsResponse")
     *     )
     * )
     */
    public function getJobs(ApiTokenRequest $request)
    {
      // コントローラーの処理
    }
```

`@OA\Items(type="integer"),`のように、arrayの中身も型を指定しないといけないようです:relieved:

普通に処理は通るので、Swaggerのドキュメントを出力する際にエラーが発生すると困りますね〜・・・
Gitコマンド（push）操作エラーについて

# pushした際のエラー解消

### 今回のエラー内容・・・リモートリポジトリに直接画像ファイルをアップした事によるもの。
```
error: failed to push some refs to 'https://github●●'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```
という表示が、GitHubにpushした際に出た。

### 解決策
まずはhint通り、pullしましょう
```
  git pull origin main
```
でエラー出なかったら、pushする。<br>
***なお、mainの部分は、各々のブランチを指定する。***
pullして以下の


```
error: The following untracked working tree files would be overwritten by merge:
	images1/private.png
	images1/public.png
Please move or remove them before you merge.
```
というエラーが出れば、未追跡ファイルが作業ツリーに存在しているので、マージが中止されたことを示しています。<br>
未追跡ファイルを削除するか次のstashコマンドを使用して一時的に保存します。

```
  git stash push --include-untracked
```
あとは、git pushでリモートリポジトリにpush出来るはず！

ちなみにこれらのエラーが出た原因は、***GitHubに直接imagesファイルをドラッグ&ドロップでアップロードしていたことが原因***であった。
chatGPTにDBインデックスについて質問して、改善。

chatGPTに質問し、DBにインデックスを張って高速化したので備忘録。



---
## chatGPTの解答と、自分で考えたどのDBカラムへ適用するか
データベースでインデックスを使用することによって、クエリの実行速度を向上させることができます。以下に、インデックスを貼ると高速化する可能性のあるパターンのいくつかを示します。

1. ユーザーテーブルの検索: `users` テーブルに `email` カラムがある場合、このカラムにインデックスを作成することで、特定のメールアドレスでのユーザー検索が高速化されます。

→ novels.url, novels.title, osusumes.title, osusumes.page_view

2. 商品テーブルの絞り込み: `products` テーブルに `category` カラムがあり、特定のカテゴリの商品を頻繁に検索する場合、`category` カラムにインデックスを作成することで、検索速度が向上します。

→ osusume_novelsのosusume_id, novel_id

3. 日付範囲のクエリ: レコードの作成日時や更新日時を保持している場合、これらのカラムにインデックスを作成することで、特定の日付範囲のデータを効率的に検索できます。

→novels.last_update

4. テーブルの結合: 複数のテーブルを結合するクエリが頻繁に実行される場合、結合カラムにインデックスを作成することで、結合操作のパフォーマンスを向上させることができます。

→ novels.like, 

5. ユニーク制約の確認: 特定のカラムに一意性を持たせる必要がある場合、そのカラムにユニークインデックスを作成することで、重複のチェックを高速化できます。
→ osusumes.title, novels.url

6. フルテキスト検索: テキストデータを検索する場合、フルテキストインデックスを作成することで、キーワードやフレーズに基づいて高速な検索を実現できます。

7. ソートと並び替え: 特定のカラムでソートや並び替えを行うクエリが頻繁に実行される場合、ソートカラムにインデックスを作成することで、ソートのパフォーマンスを向上させることができます。

→novels.last_update, osusumes.page_view

8. NULL値の検索: NULL値を持つレコードを検索する場合、そのカラムにインデックスを作成することで、NULL値の検索を高速化できます。

9. 集計関数の利用: SUM、AVG、COUNTなどの集計関数を使用するクエリにおいて、集計対象のカラムにインデックスを作成することで、集計クエリのパフォーマンスを向上させることができます。

10. 外部キー制約: 外部キー制約を持つテーブルにおいて、参照されるカラムにインデックスを作成することで、関連データの整合性チェックや結合のパフォーマンスを向上させることができます。

→ osusume_novels.osusume_id, osusume_novels.novel_id, comments.novel_id

これらは一般的な例ですが、データベースの設計や使用するクエリによって最適なインデックスの作成方法が異なる場合があります。パフォーマンスを最大化するためには、具体的なデータベースシステムと使用するクエリの特性に基づいてインデックスを適切に設計することが重要です。
ChromeDriverManagerの115.0.5790アップデート失敗暫定対処方法

以下のエラーの対処方法

```
ValueError: There is no such driver by url https://chromedriver.storage.googleapis.com/LATEST_RELEASE_115.0.5790
```

issuesで修正されるまでの暫定対処方法がありました。

https://github.com/SergeyPirogov/webdriver_manager/issues/536


例えば以下のようにして
https://googlechromelabs.github.io/chrome-for-testing/#stable
から該当のバージョンを保存すれば動きます。

```py
options = webdriver.chrome.options.Options()
new_driver = r'C:\Users\k8uwall\PycharmProjects\sample\data\drivers\chromedriver\win32\115.0.5790.98'
service = ChromeService(executable_path=new_driver)
browser = webdriver.Chrome(service=service, options=options)
```
GitHub Actions の cache で save/restore が生えていた

# タイトルの通りです

- GitHub Actions の cache は使ってると思いますが，save / restore が使えるようになっていました．

## キャッシュを使う

- なんやかんやファイルを保持したい
    - 例えば，ビルドキャッシュとか，結果のキャッシュとか

## キャッシュは更新されない

- 普通に使ってたら更新されなかった．
    - そういえばそうでした．キャッシュ消して rerun するかなと思っていたんですが．
    - `actions/cache/save` / `actions/cache/restore` を見つけました．

## 使い方

- path / key 指定して save → path / key指定して restore するだけ
    - 試行錯誤してたときに便利．
    - key に `run_id` / `run_attempt` 辺りを使うとユニークにできそうではある
    - 

## Refs

- https://github.com/actions/cache
    - > New actions are available for granular control over caches - restore and save.
    - https://github.com/actions/cache/blob/main/restore/README.md
    - https://github.com/actions/cache/blob/main/save/README.md
- [GitHub Actionsのキャッシュをより細かく制御するactions/cache/restoreとactions/cache/save - ぽよメモ](https://poyo.hatenablog.jp/entry/2022/12/21/090000)
- [依存関係をキャッシュしてワークフローのスピードを上げる - GitHub Docs](https://docs.github.com/ja/actions/using-workflows/caching-dependencies-to-speed-up-workflows)
    - > 既存のキャッシュの内容を変更することはできません。 代わりに、新しいキーを使って新しいキャッシュを作成できます。

https://qiita.com/yuki0n0/items/d52e1fbbed08bc263101
a^(1/n)→1の証明

$a > 0 $ は、題意。
$a = 1$ であれば、$a^{\frac{1}{n}} = 1$
(1) まず、$a > 1$の場合を考える。
$n_0 \geq\ a$ なる $n_0 \in {\bf N}$ は、必ず存在し、$n \geq n_0$ かつ$n > 2$ ならば、
$1^{\frac{1}{n}} < a^{\frac{1}{n}} \leq n^{\frac{1}{n}}$
WP Offload Media の CNAME が見つからなかった件

<h4><b>AWS と WordPress の連携をする際、WP Offload Media Lite の設定で躓いた点

<h4><b>過程：

AWS のEC2立ち上げ
↓
MYSQL, Route53, PHP インストール・設定
↓
EC2 にWordPress 導入・確認
↓
S3バケット 構築
↓
WordPress に投稿した画像をS3バケットに保存するように設定
↓
AWS CloudFront を使用したい
↓
カスタムSSL証明書発行
↓
CloudFront に CNAME と カスタムSSL証明書 設定
↓
Route53 に CNAME追加
↓
WordPress に CNAME 設定　← ここでつまずく

<h4><b>やりたいこと:

WP Offload Media Lite の Custom Domain(CNAME) に CloudFront に設定した CNAME を設定したい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517045/a535c4b8-8626-7045-408c-ee399a7bc760.png)
↑こんな感じで項目があるらしい

実際は、バージョンが違うため画面が違うし項目もない・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517045/f6d7e887-62bc-8abf-ee1b-0cca1d72201d.png)


<h4><b>結果:

S3 ではなくて CloudFront に変更する必要があった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517045/60ce847a-afae-d021-712c-189c83b9631c.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517045/a431f49b-6ac9-46cf-12bb-2cf6253cc5bb.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517045/23920512-d8c7-f266-bff8-6cf6526e2622.png)
項目出てきた！！

後は CNAME を入力して保存したら、登録した画像が CloudFront から配信されるようになった。
ChatGPT  GPT-3.5vsGPT-4のスペック比較

⓪はじめに
==

OpenAIは7月6日、[GPT-4 APIを既存開発ユーザーへ一般公開した発表](https://openai.com/blog/gpt-4-api-general-availability )を行いました。
※今まで支払い歴がなく、これからAPI利用したい場合は完全一般公開の7月末まで待つ必要があります。

今更ながら改めてChatGPTの無料版（GPT-3.5）、有料版（GPT-4）で利用する際の違いをまとめました。
比較表をサッサと見たいという方は ["**こちら**"](#結論比較表)　

①そもそもGPT-3.5とは
==
**簡単に言うと、GPT-3にまるで人間と会話しているようなチャット機能を付け加えたモデルだ**
ChatGPTを無料利用する場合はこちらのモデル


>(補足)
　2022年3月15日、GPT-3とCodexのAPIに編集と挿入機能を持たせた。
　GPTシリーズ第3世代の最新版であり、GPT-3.5モデルはGPT-3.5 familyと称される。
>　これらは2021年9月までのデータを参照可能。


②ではGPT-4とは
==
**簡単に言うと、GPT-3.5をベースに改良した最新モデルだ**
ChatGPTを有料利用する場合はこちらのモデル

>(補足)
　2023年3月14日、GPTシリーズ第4世代として公開された最新版。（2023年7月時点）
　2021年9月までのデータを参照する点は変更なし。
>　これまでの訓練によって得られたパラメータ数から推定すると**GTP-3.5と比べて数百倍のスペックを持つAI**とも言われている。　

③【結論】比較表
====
性能面の違いは以下の通り。

|項目|GPT-3.5|GPT-4|
|:-:|:-:|:-:|
|**最大トークン**| 4,096 tokens | 8,192 tokens  |
|**入力形式**| テキスト  | テキスト、画像（手描き画像も可）  |
|**パラメータ数** (非公開値)| 1,750億  | 5,000億～100兆  |」
|**ChatGPT利用料**| 無料  | $20/月 |
|**API利用料**| $0.002/1k tokens  | $0.03/1k prompt、0.06/1k completion |
|**その他**| -  | ジョークやユーモアの理解も可能|

[代表的な資格試験](https://openai.com/research/gpt-4)による結果は以下の通り。

|試験|GPT-3.5|GPT-4|
|:-:|:-:|:-:|
|**米国の司法試験結果**|  下位10%の成績 | 上位10%の成績  |
|**日本の医師国家試験結果**| 不合格  | 5年分すべて合格  |
|**SAT（米国版 共通テスト）正答率**|  87.50% | 78.75%  |

#### ～参考サイト～
[The OpenAI API model list](https://platform.openai.com/docs/models/overview)
[GPT-4 Wiki](https://ja.wikipedia.org/wiki/GPT-4)
[GPT-3.5 Wiki](https://ja.wikipedia.org/wiki/GPT-3#GPT-3.5)
[GPT-3、GPT-3.5turbo、GPT-4の性能、料金、応用例を解説](https://www.ai-biz-blog.com/post/chatgpt-performance-fee-summary)
Reactプロジェクト始めよう

## とりあえず自己紹介:man_tone1:
　男　３４歳
　妻　娘３人
　元航空自衛官
　プログラミンスクールでJava、PHP、HTML、CSS、
　SQLを習得し、エンジニア転職
　現在は、主のJava使いのSE
（やっと基本設計以降経験したて）
　趣味：技術記事を読む、技術ブログを見る、
　　　　技術書を読む
　夢：フルスタックなテックリードなプロジェクトマネージャーになる
　初めてQiitaに投稿します。Reactを独学中なので、既にたくさん出ているReactの記事をなぞりながら自分なりのペースと粒度で投稿をしていきたいと思うのでお手柔らかに

## Reactとは！？
　ある日TwitterでReactの求人が出ているのを発見し、聞いたことあるけどなんだっけ？？と思い、Wik!で調べてみた。Reactは、Meta社（旧FaceBook社）とコミュニティ？によって開発されているユーザーインターフェース構築のためのJavaScriptライブラリらしい…　　　　　　　　　　　　　　　　　　　　　　　　　　他に難しいことがいっぱい書いていたが、いい感じに学習コストが安く、大規模システム開発やSPA（Single Page Application）ができるらいしい。　　　　　　　　　　　　　　　　　　　　　　　　　あとReact Hooksでコードやファイルの量が減るらしいから確かに良いかも！！

## Reactのアプリケーション作成
```
npx create-react-app my-app //my-appは作成したいプロジェクト名
```
## 作成したプロジェクトの起動
```
cd my-app
npm start
```
## プロジェクトの初期画面が起動
<img width="800px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605103/eaadd969-77b2-2dab-6212-ffe6dfc7b8f3.png">

## Initial投稿終了:airplane:
　初めて投稿終了:writing_hand:最近はInputがメインだったのでOutputの一環として少しづつ始めていこうと思っています。初級からとりあえず今年中には中級レベルのReact使いを目指していこうと思います。１年後見返したら恥ずかしい文章や構成かもしれないけど記事を通して成長を感じれると信じて終わりにします！！！
スマートな大人のマサカリ講座

## 概要

本記事ではエンジニアが技術的な質問やツッコミをする際に気を付けるべきポイントを記載します。発言の真意を曇らすことなく、相手や周囲の聴衆に悪い印象を与えないための言葉選びをしましょう。

なお、マサカリを受ける際の護身術はこちらの記事が参考になります。
- https://zenn.dev/terrierscript/articles/2018-04-25-masakari-yoke
## 背景

ITエンジニア界隈で使われる「マサカリを投げる」という表現があります。勉強会で登壇者に質問したり slack 上で討論をするときに、ストレートかつ辛辣なツッコミを入れることを指します。主に質問者の知見が回答者よりも豊富だったり、社会的地位が高い場合の比喩のようです。

このようなコミュニケーションは、場の雰囲気を乱しがちです。当事者のみならず聴衆までも萎縮させたり、「マウントをとろうとしている」「喧嘩売ってるのか？」といったネガティブな印象を与えたり、コミュニティにいづらくなりフェードアウト、というケースも少なからず。

私の肌感だと 9 割は発言者に他意はなく、真摯に向き合っているのです。しかしながら誤解を生まないよう出来るだけシンプルに、といった配慮が煮詰まった結果、攻撃的ととられかねない喧嘩腰のコミュニケーションが生まれます。

IT エンジニアと一口に言っても、育った環境やカルチャーは千差万別です。回りくどいと感じる慇懃無礼な態度も、相手に配慮した優しさかもしれませんし、チクチク嫌味たらしいと感じる言葉は、気づきを与えるためにあえて、かもしれません。知らんけど。

本記事ではこのようなコミュニケーションロスの発生を未然に防ぐためのポイントを記したいと思います。「こんなに真剣にフィードバックしてるのになぜか煙たがられちゃう、悲しい！」というツンデレ悪徳令嬢タイプのエンジニアの皆様、ご笑納ください。

## 心構え

### 1. マサカリはフィードバック

技術者としての成長を促す有益なものにしましょう。決してあなたのこだわりを押し付けるものではありません。
公衆の面前でメンツをつぶされたと感じる方もいます。喧嘩を売られた、と感じる方もいます。
そのように感じさせたら負けです。

### 2. 登壇者のプロファイルや LT の趣旨を考慮しよう

フィードバックは伝わってなんぼ。いくら正論であっても響かなくては意味がありません。
相手が受け止めて、咀嚼できるよう気遣いましょう。

### 3. リスペクトを忘れない

知見を発表する行為に対してまずはリスペクトを示しましょう。
誤った情報を世に発信することが許せないという方もいるでしょうが、悪意があるわけではないので、優しく指摘しましょう。

## 投げる

### 1. 名乗る＆名前を呼ぶ

初対面の人間が会話する際のプロトコルというものがあります。

### 2. 声のトーンは明るく

真剣に話してるつもりでも周りを怯えさせているかもしれません。敵意がないことを示しましょう。

### 3. スマイルスマイル

2. に同じ。

### 4. 自分が間違っているかも知れない、という気持ちを持つ

自分は間違わない！という方もいますが、完璧な人間は存在しないのです。そう、完璧なコードというものが存在しないのと同じでね。

### 5. 枕詞をつける

- 私の知識が古いかもしれませんが〜
- 諸説あるかもしれませんが〜
- 私の知見不足だと思うのですが〜
- 講師の方に意見申し上げるのは恐縮ですが〜
- ○○○さんらしくない仕事ですね
- 言葉を選ばずに申し上げると〜
- 失礼を承知で申し上げると〜

## アフターケア

### 1. 懇親会で話しかける

辛辣な言葉を投げてしまった、と思ったら懇親会で「先ほどは失礼しました」と言いましょう。

## まとめ

マサカリを投げる時に気をつけたいことを記載しました。

攻撃的なコミュニケーションは、自分が被弾するのを避けるという説もあります。
あなたは自衛しているつもりが、意図せず周りを傷つけているかもしれません。
特にテキストコミュニケーションでは、情報量が圧倒的に不足しているので、過剰な装飾をつけないと補完できません。
くどいと感じるかもしれませんが、あなたが思う以上に人は他人に怯えるものです。
気持ちの良い関係を維持するため、スマートな大人のマサカリの投げ方を身につけて、世の中をハッピーにしましょう。

## 最後に

私が所属する株式会社ゆめみはブランドプロミス「GROW with YUMEMI」を掲げ、自分の成長を社会に還元することを夢見ています。成長を促すツールとしてのフィードバックを大切にしています。以下のページで我々のフィードバックに関する考え方やガイドラインを公開しているので、興味がある方は一読ください。

https://notion.yumemi.co.jp/ojt/ver08
授業12: アプリケーションのテストとデバッグ

**授業12: アプリケーションのテストとデバッグ**

**授業時間:** 2時間30分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日は最終授業となります。これまで学んできたことを活かし、React Nativeアプリケーションのテストとデバッグについて学びます。

**0:10-0:50 - テストの重要性とJestの紹介**

まずは、ソフトウェアテストの重要性と、その基本的な概念について学びます。次に、JestというJavaScriptのテストフレームワークについて紹介します。Jestを使った基本的なテストの書き方と実行方法を学びます。

**0:50-1:00 - 休憩**

皆さん、10分間の休憩です。一息ついて、後半に備えてください。

**1:00-1:30 - テストの実装**

休憩後は、Jestを使用してReact Nativeのコンポーネントや関数のユニットテストを書く方法を学びます。テストの書き方、実行方法、結果の解釈方法など、具体的な例を通じて理解を深めます。

**1:30-2:00 - デバッグの基本とReact Native Debuggerの紹介**

デバッグについて学びます。デバッグの基本的な考え方と手順、そしてReact Native Debuggerの紹介と使用方法を学びます。

**2:00-2:20 - デバッグの実践**

React Native Debuggerを使用してアプリケーションのデバッグを行う方法を実際に学びます。エラーメッセージの読み方、ブレークポイントの設定方法、変数の値の確認方法などを学びます。

**2:20-2:30 - 授業のまとめ**

今日の授業で学んだテストとデバッグの基本についてまとめます。最後に、このカリキュラムを通じて学んだReact Nativeの基本を振り返り、今後の学習のためのアドバイスを提供します。

---

以上で、今日の授業とこのカリキュラム全体を終了します。皆さん、長い間お疲れ様でした。React Nativeの学習を進めていく上で、このカリキュラムが皆さんの助けになれば幸いです。それでは、皆さんのこれからの学習が成功することを祈って、さようなら。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業11: アニメーションとジェスチャ

**授業11: アニメーションとジェスチャ**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、React Nativeのアニメーションとジェスチャについて学びます。

**0:10-0:40 - アニメーションとジェスチャの基本**

まずは、アニメーションとジェスチャの基本的な概念と重要性について学びます。ユーザーエクスペリエンスを向上させるためのアニメーションの役割と、タッチジェスチャの基本を説明します。

**0:40-1:10 - Animatedライブラリの導入と使用**

次に、React NativeのAnimatedライブラリを使ってアニメーションを実装する方法について学びます。基本的なアニメーションタイプとそれらのアニメーションをコントロールする方法を実際のコードを書きながら説明します。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - ジェスチャの実装**

休憩後は、ジェスチャの実装について学びます。Animatedライブラリを使用してタッチジェスチャを認識し、それに応じてアニメーションを実行する方法を学びます。

**1:50-2:00 - 例題: ジェスチャに応じたアニメーション**

実際の例を通じて、ジェスチャに応じてアニメーションを動作させる方法を学びます。ユーザーのスワイプ操作に応じてアイテムを移動させるなど、具体的な例を通じて理解を深めます。

**2:00-2:10 - アニメーションとジェスチャのまとめ**

今日学んだアニメーションとジェスチャの基本について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回は、最終授業となりますので、これまで学んだ知識を統合し、実際のアプリケーションの開発について学びます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業10: データの永続化

**授業10: データの永続化**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、ローカルデータの保存と読み出しについて学びます。

**0:10-0:40 - データ永続化の基本**

まずは、データ永続化の基本的な概念について学びます。ユーザーデータの永続化の重要性と、そのための一般的な手法について説明します。

**0:40-1:10 - AsyncStorageの導入と使用**

次に、React Nativeに組み込まれたAsyncStorageを使ってデータを永続的に保存する方法について学びます。キーと値を使ってデータを保存、読み出し、削除する基本的な操作を実際のコードを書きながら説明します。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - 非同期操作とエラーハンドリング**

休憩後は、AsyncStorageの非同期操作とエラーハンドリングについて学びます。Promiseとasync/awaitを使った非同期処理の基本と、エラーハンドリングの重要性について説明します。

**1:50-2:00 - 例題: ユーザーデータの保存と読み出し**

実際の例を通じて、ユーザーデータの保存と読み出しを実装します。ユーザーがアプリケーションに入力したデータを保存し、アプリケーションが再起動した後もそのデータを利用する方法を学びます。

**2:00-2:10 - データ永続化のまとめ**

今日学んだデータ永続化の基本について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業9: ネットワーキング

**授業9: ネットワーキング**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、APIからデータをフェッチし、React Nativeアプリケーションで表示する方法について学びます。

**0:10-0:40 - ネットワーキングの基本**

まずは、ネットワーキングの基本概念について学びます。HTTPリクエスト、API、JSONなどの基本的な知識を理解します。

**0:40-1:10 - fetchを使ったデータ取得**

次に、fetchを使ってAPIからデータを取得する方法について学びます。具体的なコードを書きながら、非同期処理とエラーハンドリングについても説明します。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - axiosを使ったデータ取得**

休憩後は、別のネットワーキングライブラリであるaxiosを使ってデータを取得する方法について学びます。fetchとの違いや、axiosが提供する機能についても紹介します。

**1:50-2:00 - データの表示**

APIから取得したデータをアプリケーションで表示する方法について学びます。React Nativeのコンポーネントを使って、取得したデータを適切に表示する方法を学びます。

**2:00-2:10 - ネットワーキングのまとめ**

今日学んだネットワーキングの基本について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業8: ナビゲーション

**授業8: ナビゲーション**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、React Nativeでのページ間ナビゲーションについて学びます。

**0:10-0:40 - ナビゲーションの基本**

まずは、ナビゲーションの基本概念について学びます。スタックナビゲーション、タブナビゲーション、ドロワーナビゲーションなどの主要なナビゲーションパターンについて説明します。

**0:40-1:10 - React Navigationの導入**

次に、React Nativeでナビゲーションを実装するためのライブラリであるReact Navigationの導入方法について学びます。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - スタックナビゲーターの作成**

休憩後は、React Navigationを使用してスタックナビゲーションを実装する方法について学びます。具体的なコードを書きながら、スタックナビゲーターの作成と使用方法について説明します。

**1:50-2:00 - その他のナビゲーター**

スタックナビゲーターの他にも、React Navigationはタブナビゲーションやドロワーナビゲーションなど、さまざまなナビゲーションパターンをサポートしています。それぞれの概要と基本的な使用方法について説明します。

**2:00-2:10 - ナビゲーションのまとめ**

今日学んだナビゲーションの基本について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業7: 状態管理とHooks

**授業7: 状態管理とHooks**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、Reactにおける状態管理と、React Hooksの使用方法について学びます。

**0:10-0:40 - 状態管理の基本**

まずは、Reactにおける状態管理の基本概念について学びます。状態とは何か、なぜ状態管理が必要なのかについて詳しく説明します。

**0:40-1:10 - useState Hook**

次に、最も基本的なHookであるuseStateについて学びます。useStateを使うことで、関数コンポーネント内で状態を持つことができます。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - useEffect Hook**

休憩後は、副作用を扱うためのHookであるuseEffectについて学びます。useEffectを使用して、副作用を持つコードを整理し、コンポーネントのライフサイクルに組み込む方法を学びます。

**1:50-2:00 - その他のHooks**

Reactは他にも様々なHooksを提供しています。useContext、useReducerなどの主要なHooksについて簡単に説明します。

**2:00-2:10 - 状態管理とHooksのまとめ**

今日学んだ状態管理とHooksの基本について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業6: ユーザーインタラクション

**授業6: ユーザーインタラクション**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、React Nativeを使用してユーザーとのインタラクションを実装する方法について学びます。

**0:10-0:40 - ボタンとタッチ操作**

まずは、ユーザーのタッチ操作に反応する基本的なUI要素であるボタンについて学びます。React Nativeで提供されているButtonコンポーネントの使用方法と、カスタムボタンの作成方法を見ていきます。

**0:40-1:10 - タッチ可能なコンポーネント**

次に、一般的なUIコンポーネントをタッチ可能にする方法について学びます。TouchableOpacityやTouchableHighlightなどのReact Nativeのタッチ可能なコンポーネントを使用します。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - スクロールビューとフラットリスト**

休憩後は、スクロール可能なビューやリストの作成方法について学びます。ScrollViewとFlatListの使用方法を見ていきます。

**1:50-2:00 - ユーザー入力の取り扱い**

最後に、ユーザーからの入力を取り扱うためのTextInputコンポーネントの使用方法を学びます。

**2:00-2:10 - ユーザーインタラクションのまとめ**

今日学んだユーザーインタラクションの実装方法について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業5: スタイリングとレイアウト

**授業5: スタイリングとレイアウト**

**授業時間:** 2時間１０分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、React Nativeにおけるスタイリングとレイアウトの基本について学びます。

**0:10-0:50 - スタイリングの基本**

まずはReact Nativeにおけるスタイリングの基本について学びます。スタイルシートの作成、スタイルの適用、スタイルの組み合わせ方法について詳しく見ていきましょう。

0**:50-1:00 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

1**:00-1:20 - カラーとフォント**

次に、カラーとフォントの指定方法について学びます。React Nativeが提供するカラーコードと、カスタムフォントの導入と使用方法を見ていきます。

**1:20-1:50 - レイアウトとFlexbox**

休憩後は、React Nativeにおけるレイアウトの基本について学びます。特に、コンポーネントの配置に非常に便利なFlexboxについて詳しく見ていきます。

**1:50-2:00 - スタイリングとレイアウトのトラブルシューティング**

スタイリングやレイアウトに関する一般的な問題とその解決策について見ていきます。

**2:00-2:10 - スタイリングとレイアウトのまとめ**

今日学んだスタイリングとレイアウトの基本について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業4: React Nativeコンポーネント

**授業4: React Nativeコンポーネント**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日の授業では、React Nativeで使用される主要なコンポーネントについて学んでいきます。

**0:10-0:40 - View コンポーネント**

まず始めに、基本的なコンポーネントである View について学びます。ViewはReact Nativeの中で最も基本的なコンポーネントで、他の多くのコンポーネントを包むためのコンテナとして機能します。

**0:40-1:10 - Text コンポーネント**

次に、Text コンポーネントについて学びます。Text コンポーネントは文字を表示するためのコンポーネントで、他のコンポーネントと組み合わせて使用されます。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - Image コンポーネント**

休憩後は、Image コンポーネントについて学んでいきます。Image コンポーネントは静的な画像や動的な画像を表示するためのコンポーネントで、様々なプロパティを持っています。

**1:50-2:00 - その他の主要なコンポーネント**

React Nativeは他にも様々なコンポーネントを提供しています。Button、ScrollView、TextInputなどのコンポーネントについて、簡単に触れていきます。

**2:00-2:10 - React Nativeコンポーネントのまとめ**

今日学んだReact Nativeのコンポーネントについて、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
QGISで雲がかかった「天国から視点」っぽい画像を作る

![QGISで「天国から視点」っぽい雲がかった画像を作る - 作例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/cbf480e3-0ee6-ab61-b8bf-60ebcf5dec64.png)


**Anita Graser & Gretchen N. Peterson "QGIS Map Design (2nd Ed.)"** という本にあった作法を参考に、ちょっと違うやり方で作りました（_p.65 “8. Genearating Cloudy Masks”_）:

https://locatepress.com/book/qmd2

https://www.amazon.co.jp/Qgis-Map-Design-Anita-Graser/dp/0998547743

この書籍は、以下の過去事例（by Dylan Moriarty）を参考にしたそうです。Coolです:

https://dylanmoriarty.github.io/blog/foggy-spaces.html

## 手順

### QGISで「衛星画像」を表示

こちらが参考になります↓

https://qiita.com/Yfuruchin/items/735f786a86380a7c24ac

今回は「地理院写真」を利用しました。

### たくさんの「点」をランダムにつくる

これが「雲」になります。

- メニュー → 「プロセシング」 → 「ベクタ作成」→「ランダム点群」
    - 作成範囲: `キャンバス領域を使用`
    - 点の数: `10000` （適宜調整）
    - 点距離感の最小距離: 0

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/b01a74ad-59d9-770f-3a60-2e16707cf869.png)

- いい感じのスタイルにする
    - グレーで透過
    - `#ededed`, 透過率20%


### 「雲のないところ」をつくる

- エリアのポリゴンを持ってくる
    - 今回は [国土数値情報 | 行政区域データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_0.html) `N03-20210101_01_GML.zip`（北海道） を利用した
- 雲がない場所を指定する
    - Layer: `N03-21_01_210101`
    - Polygons: `("N03_004" = '中央区') OR ("N03_004" = '厚別区')`

```shell
scale_exp(
	distance(
		$geometry,
		union(
			geometry(get_feature('N03-21_01_210101_geo', 'N03_004', '中央区')),
			geometry(get_feature('N03-21_01_210101_geo', 'N03_004', '厚別区'))
		)
	),
	16616000, 16666847,
	0, 500,
	0.5
)
```

参考: `scale_exp` 関数↓

https://docs.qgis.org/3.28/ja/docs/user_manual/expressions/functions_list.html#scale-exp

> 指数曲線を用いて、与えられた値を入力範囲から出力範囲に変換します。この関数は、指定された出力範囲へ値をイージングするために使用します。

> 構文 `scale_exp(value, domain_min, domain_max, range_min, range_max, exponent)`


↑の想定: 対象エリアから離れるにつれ円の半径を大きくする

#### ... うまくいかない

- `geometry()` → ジオメトリツールでポリゴンに「ジオメトリ属性を追加」しておく必要あった
  - `distance()` が、思ったような数字ではない
  - 「ポリゴンとポイントの距離」とは？

#### → 別案

- 「そのエリアなしのレイヤー」で「ランダムな点のレイヤー」を切り抜く（クリップ）
- 円のサイズを、 `rand(100, 500)` みたいにしてそれっぽくする
- ⇒ それなりにできたが、雲が切れるところで、「円」という感じに見える
- （書籍での方法だと、切れるところ=縁に近づくにつれ、半径が小さくなるので、より自然では）

![QGISで「天国から視点」っぽい雲がかった画像を作る - 作例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/cbf480e3-0ee6-ab61-b8bf-60ebcf5dec64.png)


## 参考: 書籍 ""QGIS Map Design" でのオリジナル

本のダウンロード可能なリソース:

https://locatepress.com/qgis3_map_design_resources/

「memory layer」なるものを使っているので、プラグインが必要:
    
https://plugins.qgis.org/plugins/MemoryLayerSaver/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/d15f41ee-28a2-bfaf-d3a0-c1e1cd8abed6.png)
授業3: React Nativeの環境設定

**授業3: React Nativeの環境設定**

**授業時間:** 2時間１０分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日はReact Nativeの開発環境のセットアップと新しいプロジェクトの作成方法について学んでいきます。

**0:10-0:40 - Node.jsとnpmのインストール**

まず、React Native開発に必要なツール、Node.jsとパッケージマネージャーのnpmをインストールします。これらのツールはReact Nativeのプロジェクトを管理し、依存関係を解決するために必要です。

**0:40-1:10 - React Native CLIのインストール**

次に、React Nativeのコマンドラインツール（CLI）をインストールします。これは新しいプロジェクトを作成したり、既存のプロジェクトを実行したりするために使用されます。

**1:10-1:20 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:20-1:50 - React Nativeプロジェクトの作成**

休憩後は、新しいReact Nativeプロジェクトの作成に進みます。CLIを使用してプロジェクトを作成し、ディレクトリ構造と主要なファイルを説明します。

**1:50-2:00 - エミュレーターのセットアップ**

次に、開発中のアプリをテストするためのエミュレーターのセットアップ方法を学びます。Android StudioやXcodeを使用して、iOSやAndroidのエミュレーターをセットアップし、実行します。

**2:00-2:10 - 環境設定のまとめ**

今日学んだReact Nativeの環境設定について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業2: Reactの基礎

**授業2: Reactの基礎**

**授業時間:** 2時間10分 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日は前回に引き続き、JavaScriptの一部として非常に重要なライブラリであるReactの基礎について学んでいきます。Reactはユーザインターフェースを構築するためのライブラリで、特にシングルページアプリケーションの開発によく使用されます。

**0:10-0:30 - Reactの基本概念**

まずはReactの主要な概念であるコンポーネント、プロパティ（props）、ステート（state）について学んでいきます。これらの概念を理解することで、Reactの「コンポーネントベース」の開発スタイルを把握できるようになります。

**0:30-0:50 - コンポーネント**

Reactでは、ユーザインターフェースはコンポーネントという再利用可能なパーツに分割されます。ここでは、関数コンポーネントとクラスコンポーネントの作成方法とそれぞれの特徴について詳しく見ていきます。

**0:50-1:00 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:00-1:20 - プロパティ（props）**

次に、Reactコンポーネントに情報を渡す方法として、プロパティ（props）について学びます。コンポーネント間でデータを渡す際の流れや、propsの使用方法を詳しく学んでいきます。

**1:20-1:40 - ステート（state）**

休憩後は、ステート（state）について学んでいきます。ステートはReactコンポーネント内で管理されるデータで、その変化によってコンポーネントの描画内容が変わります。このセッションでは、ステートの作成方法と更新方法、そしてステートの変化がReactの描画にどう影響するかを見ていきます。

**1:40-2:00 - Reactのライフサイクル**

最後に、Reactのライフサイクルについて学びます。Reactコンポーネントは複数の「ライフサイクルメソッド」を持ち、それぞれ特定のタイミングで実行されます。ここでは、主要なライフサイクルメソッドとそれぞれの役割について学んでいきます。

**2:00-2:10 - Reactの基礎のまとめ**

今日学んだReactの基礎について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。

---

以上で、今日の授業を終了します。次回も、引き続きReact Nativeを詳しく学んでいきます。それでは、今日はお疲れ様でした。

プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020
授業1: JavaScriptとReact Nativeの基礎

**授業1: JavaScriptとReact Nativeの基礎**

**授業時間:** 2時間 (休憩10分)

---

**0:00-0:10 - 授業の導入**

皆さん、こんにちは。今日はJavaScriptとReact Nativeの基礎について学んでいきます。JavaScriptは現代のウェブを形成する重要な要素であり、React NativeはそのJavaScriptを活用してモバイルアプリケーションを構築するフレームワークです。

**0:10-0:30 - JavaScriptの基礎**

まずはJavaScriptから始めましょう。JavaScriptはウェブブラウザ上で動作するプログラミング言語です。主にウェブページに動的な機能を追加するために使用されます。それでは、JavaScriptの基本的な概念、たとえば変数、データ型、関数、制御構造（if文、for文など）について学んでいきます。

**0:30-0:50 - JavaScriptのオブジェクトと関数**

JavaScriptでは、ほとんどすべてがオブジェクトとして扱われます。ここでは、オブジェクトとは何か、またJavaScriptでのオブジェクトの作成と利用方法を学んでいきます。さらに、関数についても詳しく見ていきます。関数は特定のタスクを実行するコードのまとまりで、何度でも再利用することができます。

**0:50-1:00 - 休憩**

少し休憩しましょう。10分間だけリラックスして、頭を休めましょう。

**1:00-1:10 - JavaScriptの非同期処理**

JavaScriptはシングルスレッドの言語であるため、非同期処理は重要な概念となります。Promiseとasync/awaitによる非同期処理について学んでいきます。

**1:10-1:30 - Reactの基礎**

休憩後はReactの基礎について学びます。ReactはJavaScriptのライブラリで、ユーザーインターフェースを構築するために使用されます。Reactの主要な概念であるコンポーネント、props（プロパティ）、ステートについて説明します。

**1:30-1:50 - React Nativeの基礎**

それでは、React Nativeについて学んでいきましょう。React NativeはReactの基本概念を利用してモバイルアプリケーションを開発するフレームワークです。React Nativeの特徴と利点、そしてモバイルアプリ開発にどのように活用するかについて学んでいきます。

**1:50-2:00 - JavaScriptとReact Nativeのまとめ**

今日学んだJavaScriptとReact Nativeの基礎について、改めて要点をまとめます。質問がある方は、この時間にどんどん質問してください。


プログラミングラボ
AI学習プログラミング
https://twitter.com/PLab2020