OmniAICreator/Qiita-1.07M huggingface dataset:
【エラー対応】Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Next.js と Prisma で`script.ts` を実行しようとした時に遭遇したエラーの解決記事


# 開発環境
```
$ sw_vers 
ProductName:            macOS
ProductVersion:         13.5.1
BuildVersion:           22G90

$ node -v
v19.2.0

$ npm -v
8.19.3

$ npx next -v
Next.js v13.4.19

$ npx prisma -v
prisma                  : 5.2.0
```


# 実行コード
```script.ts
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient()

async function main() {
  const dateWithUsers = await prisma.date.findMany({
    include: {
      users: true,
    },
  })
  console.log(JSON.stringify(dateWithUsers, null, 2))
  console.dir(dateWithUsers, { depth: null })
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.log(e)
    await prisma.$disconnect()
    process.exit(1)
  })
```

# エラー文

```
$ npx ts-node script.ts

(node:79287) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/xxx/git/maiamea/practice-next-prisma/script.ts:37
import { PrismaClient } from "@prisma/client";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module.m._compile (/Users/xxx/git/maiamea/practice-next-prisma/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/xxx/git/maiamea/practice-next-prisma/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Function.Module._load (node:internal/modules/cjs/loader:922:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:82:12)
    at phase4 (/Users/xxx/git/maiamea/practice-next-prisma/node_modules/ts-node/src/bin.ts:649:14)
```

# 原因
tsconfig.json の設定の影響によるもの

# 解決策
- `script.ts` の拡張子を `.mts` に変更することで回避する
- ts-nodeの実行オプションに `--esm` をつける
```
npx ts-node --esm script.mts
```
Python3: 乱数を発生させる

次の記事を参考にしました。
[random.randint()とnp.random.randint()の定義の違い](https://minus9d.hatenablog.com/entry/2022/02/28/222810)

## 定義

random.randint(a, b)
>a以上b以下の整数を1個選んで返します。

np.random.randint(a, b)
>a以上b未満の数を1個選んで返します。

## 上記を確認するプログラム

```py:random01.py
#! /usr/bin/python
# ---------------------------------------------------------------------
import numpy as np
import random

# ---------------------------------------------------------------------
def evaluate01():
    aa = random.randint(1, 7)
    bb = np.random.randint(1,7)
    return aa,bb
# ---------------------------------------------------------------------
for it in range(30):
    rvalue = evaluate01()
    print(rvalue)
# ---------------------------------------------------------------------
```

## 実行結果

```text
$ ./random01.py 
(1, 4)
(2, 3)
(2, 3)
(5, 2)
(6, 2)
(1, 5)
(1, 2)
(1, 4)
(7, 2)
(6, 5)
(6, 6)
(3, 1)
(5, 2)
(6, 6)
(4, 1)
(2, 5)
(1, 1)
(6, 1)
(6, 6)
(1, 1)
(1, 2)
(5, 2)
(6, 1)
(7, 2)
(6, 3)
(2, 3)
(6, 6)
(1, 2)
(2, 6)
(4, 1)
```

## 確認したバージョン

```text
$ python
Python 3.11.4 (main, Jun  9 2023, 07:59:55) [GCC 12.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import numpy
>>> numpy.__version__
'1.24.2'
```


```text
ほぼ未経験でもChatGPTを使えばプログラムを作れるのか⑪プログラミングほぼ未経験者の挑戦～：アルゴリズム⑩

![図①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/c1921476-041a-e897-5d04-1477d2a5e777.png)
図1：アルゴリズムの設計①図5再掲

今回は5.アルゴリズムの検証と改善から。

![図②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/63f9326f-4583-a12f-f527-279aee727cf9.png)
図2

えっ？

実際にプログラムを動作させる？

今？

作ってもいないのに？

![図③.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/bb086d04-80f1-c616-87d2-5f99706193cf.png)
図3

こんなに説明されても現段階でアルゴリズムの検証と改善が必要なのか分からない。

そしてできる自信がない。

![図④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/b53a3dcd-1a65-dce4-37e8-8fa11569c1e2.png)
図4
非常に重要なステップ・・・

無視したいけど、こんな風に言われると無視できない。

![図⑤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/02ac1d0a-025e-7766-3cf8-e61b705d32ca.png)
図5

何度も言うようだけど、これを今やる理由って・・・

本当に今やる必要ありますか？


![図⑥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/69fc7189-1ca3-7d27-7ce9-de7ec5845732.png)
図6

あ、今じゃなくてもいいっぽい。

では後でやるわ。

明日できることは今日やらないんだよ。

とりあえずアルゴリズムの検証と改善：保留

所用時間：30分

この勢いで最後のドキュメント化までやってしまおう。そうしよう。



![図⑦.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/5c4825ce-7498-b195-8184-3dcc8454bdcd.png)
![図⑦-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/2ba00f8b-e46d-3f26-b69e-8796bb23d246.png)
![図⑦-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/dcdacc19-6f25-e51e-fd1a-5d32ba3b55b1.png)
図7

概要に「スカウト数、既読数、応募数を表示できます」とあるけど、既読率と応募率も表示させられるようにしたいな。



![図⑧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/cc7747c9-f162-a155-4b82-8603e61746ba.png)
![図⑧-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/1e2e67f5-8347-c0ae-1b88-2f0f7ea0b046.png)
![図⑧-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/e99ee976-dd3f-06fe-657e-e127fe39efe0.png)
図8

なんか図7と若干違うような気が・・・

でもだいたいは一緒だからこれでいいな。

グラフの描画で提案のあるMatplotlibとSeabornってなんだ？


![図⑨.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/f53686d6-499a-4c3a-c17b-480725d18726.png)
図9

また出た、ライブラリ・・・

Pandasもライブラリだけど、また別のライブラリが必要なの？


![図⑩.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/d5d3847a-108e-1ac7-636a-f6bb47d572ea.png)
![図⑩-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/44b4c605-7316-5d70-e300-3132acc32417.png)
図10


Pandasじゃグラフは描画できないのか。

MatplotlibとSeabornはどちらを使えばいいのかな？

![図⑪.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/9ea5fb2a-9719-ebed-11ac-7114afdab708.png)
図11

特に高度なカスタマイズをする予定はないので、Matplotlibを使おう。

とりあえず、これでいい。

アルゴリズムのドキュメント化：完了

所用時間：40分

とうとう！アルゴリズムの設計が今回で全部完了！（何か抜けている気がする）

よかった！

おまけ

![図⑫.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/853a0bd6-6ca7-8c14-d66f-8523a04e5356.png)
図12

ほんといつも良い事を言ってくれるよね（涙）
【Flutter】Do not use BuildContexts across async gaps の対処法

# 背景
非同期処理を含むメソッド`onTap()`の中で画面のpush遷移を行おうとしたところコンパイラから忠告を受けた
```dart
onTap: () async {
  final user = await firebaseAuth.signInWithGoogle();
  if (user != null) {
      context.Navigator.of(this).push(somePage());// Do not use BuildContexts across async gaps
  } else {
    debugPrint('login failed');
  }
},
```

# 原因
非同期処理が走る`async`内で`Build Context`を使用すると、`context`に差分が生じて、元の`context`とは異なる`context`を参照する恐れがあるから。

今回の場合は、`context`が`Widget Tree`から削除されている可能性があるため警告が出た。

# 対処法
`context`が`Widget Tree`から削除されていないか`mouted property`で確認する
`HookWidget`を使用している場合は `useIsMouted()`からmountされているか否か確認する。
```dart
onTap: () async {
  final user = await firebaseAuth.signInWithGoogle();
  if (user != null) {
    if (context.mounted) {
      context.Navigator.of(this).push(somePage());// Do not use BuildContexts
    }
 across async gaps
  } else {
    debugPrint('login failed');
  }
},
```
ほぼ未経験でもChatGPTを使えばプログラムを作れるのか⑩プログラミングほぼ未経験者の挑戦～：アルゴリズム⑨

![図①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/8719a72c-0680-a8d3-517a-2d5d400c29a0.png)
図1：アルゴリズムの設計①図5再掲

今回は4.のアルゴリズムの設計から。



![図②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/a3ee2888-dcb2-6dd8-8095-64b77b30895c.png)
![図②-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/d7853700-ba96-f4de-6774-0f709a011ad1.png)
図2

エラー処理・・・？


![図③.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/1b54689b-884d-aed0-ba93-34a411baf08e.png)
![図③-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/7d7ccc62-fd68-f1d6-b020-d63ddb145c88.png)
図3

エラーが起こった時にどんなふうに表示させるか？ってことなのかな。

そしてエラー処理とは全然関係ないんだけど。

今ひらめいたというか、気が付いたんだけど・・・

このプログラム、全部の媒体を全期間で表示させるプログラムになっちゃってるような・・・

それは使いにくすぎるわ。



![図④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/718cbf91-4ac6-1a95-6906-8aabcbd73f3d.png)
![図④-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/34bfa723-a9ff-037e-3bbd-cef15b17b3fe.png)
![図④-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/8c7dafd1-8e66-1112-63e2-6d0c6d26cbda.png)
図4

期間はこれでいいっぽいな。

でも媒体は、いちいち媒体名を入力するのすごく手間じゃない？

どうにかできるのかな？

![図⑤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/6fd45e82-32a7-8b26-35fc-0b895b7bff3c.png)
![図⑤-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/500c5747-d05f-b828-cc5b-af1a45ea319a.png)
![図⑤-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/23e18804-cdab-cc8e-18bc-e2d4133290cd.png)
図5

出来そうな感じ。たぶんたぶん。

![図⑥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/4272a967-5a59-8950-c1fe-e05b89926905.png)
図6

あ、やっぱりアルゴリズムの設計に入れないといけないよね。



![図⑦.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/b5fef828-38e5-9298-b1d0-a81013e5a664.png)
![図⑦-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/4f815903-361a-69ca-280a-4e108f6372f4.png)
![図⑦-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/f2244f49-7f70-4b43-ac55-330bc74091ba.png)
図7

これで出来たっぽいかな？

あ、エラー処理がされてない？


![図⑧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/02d7228e-b8b0-5888-6bae-bd3e003aecf7.png)
![図⑧-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/eae1c8e1-f10d-5234-0e07-ac82d7d7066d.png)
図8

これで今度こそ完了かな？

![図⑨.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2500101/50a8a33f-ef6d-a4a4-efb4-32591a28d14d.png)
図9

ChatGPTも大丈夫って言っているし、完了ってことで。

4.アルゴリズムの設計：完了！

所用時間：1.5時間
AndroidからSORACOMのサービスにHTTPアクセス

# したいこと
**AndroidからHTTPアクセスをしたい**

~~たまにはHTTPアクセスも重要というわけではなく、~~
SORACOMのSIMを使った メタデータサービス や SORACOM Harvest など、
HTTPでないとアクセスできないサービスがあり、それをAndroidアプリから使うための方法です。

自宅のローカルサーバやなどWebサイトを構築して、ブラウザからHTTPアクセスする場合は
特に注意せずとも、URLを打ち込んで問題なくアクセスできます。

もちろん、ブラウザを使えばSORACOMのサービスへHTTPアクセスをすることも可能です。
（ブラウザからSORACOMのメタデータサービス用のURLにアクセスしたところ、問題なく情報が取得できます。）

しかし、アプリ内からアクセスしようとするとエラーになります。

### ハマったところ
Android + React Nativeでアプリを構築中、
デバッグも一通り終わり、最後にリリースビルドし、APKを作成しました。

そのAPKをAndroid13のスマートフォンにインストールして起動したところ、
エラーが発生したという流れです。

### 原因
Android 9以降の仕様で、HTTPアクセスが無効化されるようになりました。

# SORACOMのサービスにアプリ内から接続するには
## 前提
今回は、SORACOM メタデータサービスへの接続をできるようにするまでを記載します。
他のHarvestやFuncなどへも同じような方法で指定できます。

アプリのビューおよび動作自体はReact Nativeで構築していますが、
今回の設定はAndroid側でのものとなるので、ネイティブAndroidで構築されている方にも
参考にしていただけると思います。


## 参考にさせていただいたサイト
- https://backport.net/blog/2018/12/27/how_to_allow_http_on_android_9/


## 設定方法
1. （React Native向け）プロジェクト内のandroidディレクトリをAndroid Studioで開く

1. `(project root) > app > res > xml`に、network_security_config.xmlを作成する

1. 作成したXMLファイルに以下のように編集する
    ```xml:network_security_config.xml
    <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
        <domain-config cleartextTrafficPermitted="true">
            <domain includeSubdomains="true">metadata.soracom.io</domain>
        </domain-config>
    </network-security-config>
    ```
    こうすることでmetadata.soracom.io、つまりメタデータサービスへのHTTPアクセスが許可される。
    他にもアクセスしたいドメインを追加することで、その通信は許可されるようになる。

1. 設定を反映するために、AndroidManifest.xmlを開き、以下のように編集
    ```xml:AndroidMainifest.xml
    <application
      android:name=".MainApplication"

      android:networkSecurityConfig="@xml/network_security_config" 

      android:theme="@style/AppTheme">

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
      />
      </activity>
    </application>
    ```

1. リリースビルド

1. APKをスマホへインストール

# まとめ
このような設定でSORACOMへのHTTPアクセスができるようになりました。

最近の（だいぶ前からの）流れで、非セキュアな通信はそもそも許可しない、
必要なものだけしか許可しないというようなものになってきているみたいです。

# 10/17追記
この設定だと、WiFiデバッグをしたいときにうまくデバッグアプリの起動ができません！
SORACOM等へのHTTPアクセスを許可しつつ、WiFiデバッグもしたい場合は以下の記事を参考にしてください。

https://qiita.com/lunasky/items/6a6e35159a8daa34d611
大学2年からリモートメインだった新卒文系未経験エンジニアが、出社2.5ヶ月、在宅勤務2.5か月体験してみて思ったこと

※投稿内容は私個人の見解に基づくものであり、所属企業・部門見解を代表するものではありません。

## 結論
週1出社がちょうどいいな、と思った話

## リモート派になった経緯
2020年4月。前年に生きる人誰に言っても信じられないような社会の変化が起こった。

在宅ワークが浸透し、オフィスを廃止した企業もあった。


当時は大学2年生になったばかり。

大学の授業を受けるのは嫌いではなかったが、現地でないと受けられないような授業がない法学部の自分にとって、わざわざ大学まで通って授業を受ける意味が分かっていなかった（父親がコロナ禍前から在宅ワークをしていたのも大きい）。

「サークルあるし行くか...」くらいの気持ちで仕方なしに行っていた記憶がある。

そんな自分にとって、この社会の変化は願ってもないものだった。

授業はオンラインで受けられるし、通学という苦痛の往復時間は無くなった。

睡眠時間を伸ばして健康的な生活ができるようになった。

特に最初の2～3か月は、本気で「一生このまま続けばいいのに」なーんて思っていた。


## 就活と大学卒業
就活では当然のように在宅ワークが可能な企業・業種を受けた。

通勤なんてできっこないと思っていたからだ。

（当時は）結構早めの2年生の最後から始めたことが功を奏してか、3年生の12月には内々定を頂いて終了した。

ガクチカは幸い塾講師のバイトで教室リーダーをしていたので、それを最大限活用した。

4年生では前半で単位を取り終えたので、後半は大学へ行かず、好きなことをし続けていた。

友人と日本縦断したり、行ってみたかった土地へ旅行したり、バイトに全力で打ち込んで、バイト仲間と沢山遊んだ。すごく充実して楽しい日々だった。

そして3月。大学卒業を迎えた。

## 就職と初めての東京
3月の最終週に上京し、迎えた4月3日。内定式は対面。開催地である虎ノ門へ向かうため、新橋で乗り換えた銀座線ホームは地獄の様相であった。

階段まで並ぶ人々の列。衝撃で思わず撮影したのがこちら。

![img_9372_720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3515837/4c7ccdd5-01dc-8862-7487-4e35e35e2fde.jpeg)


これから毎日こんなのに乗るのか...

東京の朝ラッシュの混雑への驚きと同時に、非常に憂鬱だったのをはっきりと覚えている。

2022年、様々な会社が在宅勤務の廃止を表明し始めていた。
https://toyokeizai.net/articles/-/589390

しかし、当時担当頂いていたリクルーターさんからはこの会社は廃止予定がない旨聞いていたので安心していた。

但し、最初の研修は対面であるとも聞いていた。

「まぁ2か月ならいいか」

そう思っていたのだが。

新海誠の映画で見た、美しく輝き、活気に満ち溢れ、ネオンがそれぞれの人生を照らす「東京」という土地に憧れたクソガキは、こうして現実を見ることになるのだった。

## 勤務形態

入社式ののちは、入社前に聞いていた通りの勤務形態だった。研修の最初は対面。

後半に差し掛かると、出社と在宅が交互。

そして部門配属を経て、現在に至る。

結局、出社は2.5ヶ月、在宅勤務は2.5か月だった。

今後は自ら意識して出社しなければ、あの地獄の通勤電車を再び味わうことはないだろう。

## 世の中はオフィスへの回帰が進んだ
特に2023年に入り、シリコンバレーでは出社の義務化が流行しているらしい。

曰く、在宅勤務では能率が下がるそうである。

逆に言えば、能率さえ下げなければ在宅勤務でもよいということではないのか。

オフィスへの回帰は必要なのだろうか。

今までの経験から考えてみた。

## 個人的な感想
率直に言って、週1出社がベストではないかと思う。

理由はコミュニケーションを取るのに丁度いいから。

勿論、オンラインで顔を合わせておけばいいという人もいるだろう。

それはそうだ。私が丁度よいと思った。それだけの話。

行きたくなかったら行かなければいいし、出社したければ行けばいいのである。

私は同期と示し合わせて週1でコミュニケーションを取りに行くのが丁度よかった。それだけの話だ。

一人暮らしはちょっと寂しいし。

### でも一律で出社すべき時はある。
それは入社直後だ。同期とは仲良くなっておくべきだ。
研修期間に地獄の通勤電車を耐えてよかったと、これは自信を持って言える。

あの期間がなければ、きっと今も「在宅しか勝たん」みたいな記事を書いているのだろう。

# メリット・デメリット
最後に、それぞれのメリット・デメリットをまとめて終わりにする。

#### 在宅のメリット
・通勤電車に乗らなくていい
・通勤時間が浮くのでいろんなことができる

#### 在宅のデメリット
・電気代が余計にかかる
・家を出なくなるので人に会わない

#### 出社のメリット
・人と会う、話す
・同期に会える
#### 出社のデメリット
・電車に乗らないといけない
・なんか知らんけどめっちゃ疲れる
・通勤時間の分、睡眠時間が削られる
・たまーにオフィスに静かにしてほしいなぁという人がいる

# 最後に
もう一度だけ書いておきますが、これは単に個人の感想です。どっちがいいとか悪いとかいう話ではありません。
どんな勤務形態をとるにせよ、所属企業のルールに従い、その上で個人の自由意志に依るべきだと考えます。

以上

## 補足
記事を書いてから気づいたのですが、オフィス回帰の動きは既に減少傾向にあるようです。

https://www.nikkei.com/article/DGXZQOGN03CBU0T00C23A7000000/

https://www.businessinsider.jp/post-272525
今の活動場所

Qiita へのアウトプットはストップしています。今後は以下へアウトプットしていきます。

- Zenn 技術ブログ 
    - [snakaさんの記事一覧 | Zenn](https://zenn.dev/snaka)
- Dev 技術ブログ(英訳版)
    - [Shinji NAKAMATSU - DEV Community](https://dev.to/snaka)
- Scrapbox 備忘録・メモ
    - [Scrapbox(snaka)](https://scrapbox.io/snaka/)


過去には以下で書いてました

- [今日もスミマセン。](https://snaka72.hatenadiary.org/)
VenturaにおいてRSA暗号のkeyでssh接続を行う方法

# no matching host key type found
最近PCを更新しまして、色々と設定を行っていました。
そこで、少し古いシステムにログインしようとしたところ、以下のように怒られてしまいました。

```
Unable to negotiate with xxx.xxx.xxx.xxx port xxxx: no matching host key type found. Their offer: ssh-rsa
```

利用しているシステムが、ssh-rsa keyを指定してきていますが、そんなhost key typeは無いよ！と怒られてしまいました...。
RSAは古い方式のためすでに弾いているようですね...。
ただし、これだと困るので、以下のように指定して対応しました。

# configファイルの設定

~/.ssh/config ファイルに以下を追記します。
```
Host xxx.xxx.xxx.xxx
    Port xxxx
    HostkeyAlgorithms +ssh-rsa
    PubkeyAcceptedAlgorithms +ssh-rsa
```
これで、ssh-rsaでのssh接続ができるようになります。
ローカルネットワークで利用するものなのであまり大きな問題はないと思いますが、そろそろ更新しないとダメですね...。
Gmailへの送信がエラーになる問題を解決したSPFレコードの設定

# はじめに

お客さんにメールを送信したけど、届かないって妻から連絡をもらいました
受信箱にエラーメールで返ってきていると相談を受けたので対処した内容になります

## 環境

ドメインは、別で取得済み「ムームードメイン」
独自ドメイン設定
DNSは、Cloudflareで管理
メール送信サーバは、さくらインターネット

## 結論

ちゃんとやり方がさくら公式の問い合わせに書いてありました

https://help.sakura.ad.jp/notification/n-2595/?utm_source=website&utm_medium=faq&utm_campaign=faq_mail_01

## 何にハマったのか・・・

SPF設定をちゃんと理解していなかったです（今も理解できていないですが・・・）

公式にも書いてあるコレを書くことで設定できます

```
"v=spf1 a:www***.sakura.ne.jp mx ~all"
```

自分が書いていたのはコチラ

```
"v=spf1 a:www***.sakura.ne.jp mx -all"
```

これで送信して届くときもあるのですが、届かない時もあるという状態になっていました
違いは、`~all`か`-all`の違いになります

https://support.google.com/a/answer/10683907?hl=ja

> SPF レコードに ~all（SoftFail 限定子）が含まれている場合、SPF レコードにない送信元からのメールは受信サーバーで通常は受け入れられますが、不審なメールとして扱われます

> SPF レコードに -all（Fail 限定子）が含まれている場合、SPF レコードにない送信元からのメールは受信サーバーで拒否される可能性があります。SPF レコードが正しく設定されていない場合、Fail 限定子によってドメインからのメールがより多く迷惑メールに分類されるおそれがあります

受信サーバから見たら、レコードにない送信元を受け入れるかが大きく変わってくる記述になります

エラーメールを許可を取ったら貼り付けようと思うのですが、エラーメールを見ている感じ送られるまでに、複数のメールサーバを経由する事があることがわかりました

## さいごに

今回はGmailへの送信がエラーになる問題を解決するためにSPFレコードの設定方法について説明しましたが、正しく設定することでメールの配信率を向上げることができ、送信元の信頼性を高めることができます

誰かの参考になれば幸いです
Unity2021でToolbarOverlayのボタンに文字が表示されない

# ToolbarOverlay

Unity2021.2から導入されたSceneViewのToolbarOverlay。なかなか便利なUIで、今までUnityEditorのメニューに入れたり別途EditorWindowを作らないといけなかったのが、直接ビュー内でボタンで機能をOnOffできたりするのは楽で良い感じです。

# ボタンの文字が見えない…

ただ、Unity2021ではなぜかEditorToolbarButtonなどのボタンの文字列が表示されません。
![ElementToolbars.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141731/de31a7e7-ca33-3e2c-370a-54ff0a8e8e5d.png)
…フローティングにするとちゃんと見えるようにはなるんですが。
![Toolbar_Floating.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141731/fc4edbf6-8d6f-b88d-c8c4-006b84eb9570.png)
「常にフローティングで使ってください！」というのは不親切なので、EditorToolbarButtonなどのコンストラクタにこのような処理を追加します。
```c#
text = "ボタン名";
var textElement = contentContainer.Query<TextElement>().Where(e => e.text == text).First();
 if (textElement != null) textElement.style.display = DisplayStyle.Flex;
```
原因としては「テキスト領域が内容に応じて広がる設定になっていない」という感じで、Flexにして広げるようにしています。

# 実装メモ

ポイントは、どうやって当該のTextElementを検索するか？というところなんですが
、SceneViewの右上のメニューにある"UI Toolkit Debugger"の"Pick Element"で画面上のボタンを選択すると、実装の中身を見ることができます。

すると、テキスト領域のサイズがゼロになっていて、styleがNoneになっているのを見つけました。他の正常なTextElementを見るとFlexになっていたので、同じようにすれば良さそうです。(他にも方法はありそう)

次は、それをスクリプトから参照して変更するわけですが、1つのUIが複数のTextElementを持っていることもあるので(例 EditorToolbarDropdownToggle)、VisualElement.contentContainerからQueryで検索して、EditorToolbarButton.textと同じtextが設定されているものをボタンテキストとみなす形にしました。ちょっと危ういけど…。

ElementをWhereとFirstで検索していますが、LINQっぽく見えるけどUQueryBuilderという別のAPIです。ここでのFirstはLINQでのFirstOrDefault相当で、見つからなかった場合には例外ではなくnullを返します。

# 最後に

この件、2022以降では問題なさそうなんですが、2021の最新版である2021.3.30f1でも文字が見えないのは変わらなかったので、2021のUIElements(UIToolkit)の根本的な問題なのかなと思います。知らんけど。

理由あってアップデートできない人は参考にしてください。

ちなみに、ToolbarOverlayの作り方は、公式ドキュメントが一番分かりやすいです(珍しい)。
https://docs.unity3d.com/2023.2/Documentation/Manual/overlays-custom.html
アンケートの自由記述の回答からどの単語がよく使われるのかを調べる方法の紹介

今回は、アンケートの自由記述の回答からどの単語がよく使われるのかを調べる方法について簡単に紹介します。

アンケートによくある質問のタイプの1つが「自由記述」です。自由記述の回答は、5段階評価などでは得られない、より詳細な情報を得ることができます。


例えば、セミナーを定期的に開催していて、セミナーを改善するためのヒントを得るために、アンケートを取っていたとしましょう。

また、具体的な改善点を模索するために、「より良くするための提案」といった自由記述の回答を得ていたとします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/2ea65e19-3069-362a-e82c-4b04b4574ba6.png)

しかし、自由記述の回答は、回答者が少ない場合は1つ1つ読んでいくことができますが、多い時には全体像が掴みにくいといった問題があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/e9387b0e-634b-542d-54e8-8e7254bc3e1f.png)

全てのデータを見ることは現実的には難しいため、このままのデータではよりインパクトのある文章に印象を引っ張られてしまい、どこを優先的に改善すればいいのかのヒントを得ることが難しくなってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/9e210107-3cd9-00ec-fbc9-9e2cef44e9f2.png)

そういった時に、文章を「単語」に分けることで、それぞれの単語の出現回数を集計（定量化）し、データの中にあるパターンや特徴を掴むことができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/1112c310-9442-a8ec-c2da-8569e37d2948.png)


例えば、下記のように「時間」といった単語がどれだけ出現しているのかを知ることで、アンケートの回答者が「時間」を気にしている人が多いのか（少ないのか）を比べていくことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/a57dc5db-5413-226b-b3f0-1e6b5e0d4f7e.png)

実際に単語化した際のそれぞれの出現回数は以下となりますが、「時間」や「事例」といった単語の出現回数が多いために、これらを優先的に解決することでより満足度を高めやすくなるのではないかと考えることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/aa4db023-4071-cdeb-8b93-181637ed8faa.png)


RではRMecabなどを用いて文章の単語化ができますが、[Exploratory](https://exploratory.io)の場合、アナリティクス・ビューにある「テキスト分析 - 単語のカウント」にて簡単に単語化できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/166caff3-0702-72df-e989-b4619c9bb37a.png)


さらには、文章が単語化されるだけでなく、ワードクラウドや共起ネットワークといったものを使って単語の使用頻度に関する傾向が直感的につかめるようになります。

**ワードクラウド**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/9932db93-82a6-7030-8208-bd394ec8bfe1.png)

**共起ネットワーク**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/2b83a189-3073-abd0-cb8a-634fde9b7a93.png)

最後に、アンケートの自由記述の回答はプロダクトやサービスなどを改善するために有益な情報ですが、使いこなせていないのが現状です。

そこで、文章を単語化して定量データとして扱うことで、何を優先的に見るべきかのヒントを得られますので、今回の記事の例が皆様のアンケートデータを活用していくうえでご参考になれば幸いです！

# 実務で使えるスキルを身に着けたい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/b4956034-7410-51d1-4d74-1f461ce36df3.png)

今回紹介したようなアンケートデータの分析に役立つ分析手法、さらにアンケートデータに特有なデータ加工の問題の解決方法などをもっと深く学び、さらに現場で使えるレベルのスキルを身に着けたいという方は、アンケートデータの加工と分析に特化したトレーニングを用意しておりますので、ぜひご検討いただければと思います。


https://exploratory.io/survey-data-training-jp/?utm_campaign=5analytics-survey&utm_medium=blog&utm_source=qiita


# 自分のデータで試してみたい！

記事内の全てのチャートは、データの加工、可視化、分析、レポーティングのためのUIツールの[Exploratory](https://exploratory.io/?utm_campaign=5analytics-survey&utm_medium=blog&utm_source=qiita)を利用して作成しています。

ご自身のデータを使って、これらのチャートを作成したり、データの分析をしたい方は、下記のページより無料トライアルが可能ですので、ぜひ、お試しください！

https://exploratory.io/?utm_campaign=5analytics-survey&utm_medium=blog&utm_source=qiita
ネストされたオブジェクトに要素を追加する

オブジェクト操作の初心者です。
JavaScriptの配列の行数に応じて、ネスト構造になっているオブジェクトにプロパティを追加していくスクリプトを作成したいのですが、方法が分かっておりません。


### 最終的に作成したいオブジェクトのイメージ

//配列arrの要素が2つであれば2つ分requestBodyのlines内のプロパティが追加される

var arr = ["明細1","明細2"]

var requestBody= {
  "subject": "テスト",
  "lines": [　
    {
      "description": "明細1"
    },
    {
      "description": "明細2"
    }
  ]
}

//配列arrの要素が3つであれば3つ分requestBodyのlines内のプロパティが追加される

var arr = ["明細1","明細2","明細3"]

var requestBody= {
  "subject": "テスト",
  "lines": [　
    {
      "description": "明細1"
    },
    {
      "description": "明細2"
    },
    {
      "description": "明細3"
    }
  ]
}

このように配列内の要素数に応じて　,{"description": "明細○○"} を増やしていきたいです。
参考になるメソッドがあればご教授いただけますと幸いです。
Rails newする時のコマンドにオプションを付ける


## Rails newのコマンド例
```terminal
$ bundle exec rails new . -d mysql --skip-test
```

## コードの意味

- このコードは、`Ruby on Rails`の新しいプロジェクトを作成するためのコマンドだ。
- `bundle exec rails new .` これは現在のディレクトリ(.)つまり`current directory`に新しいRailsプロジェクトを作成する命令である。
- `bundle exec`は、`Bundler`を使って正しいバージョンのRailsを実行するためのものだ。
- `-d mysql` これはデータベースとして`MySQL`を使用することを指定している。
- `--skip-test` これはデフォルトのテスト環境を作成しないように指定している。代わりにRSpecなど他のテストフレームワークを使う予定の場合によく使われるオプションである。
- このコマンドを実行すると、現在のディレクトリに`Railsのプロジェクトが作成`され、`MySQL`をデータベースとして使用するように設定され、`デフォルトのテスト環境は作成されない`という事である。
Lighthouse 11の変更をピックアップ！

2023年8月にリリースされたLighthouseのメジャーバージョン、11について内容を確認していきます。

https://github.com/GoogleChrome/lighthouse/releases/tag/v11.0.0

https://developer.chrome.com/blog/lighthouse-11-0/

Lighthouse 11ではAccessibilityのカテゴリーの追加、INPの計測に関する変更、Legacy navigationの削除などの変更がありました。

Chromeのdevtoolで試したい場合、Chrome 118で取り込まれる予定ですが、Chrome Canaryではすでに利用可能です。

## Accessibility

v10 → v11で、13のauditsが追加されました。
個人的にちゃんと見れていなかったのですが、マイナーバージョンアップで都度いくつか追加されていたようです。

> - aria-allowed-role
> - aria-dialog-name
> - aria-text
> - html-xml-lang-mismatch
> - image-redundant-alt
> - input-button-name
> - label-content-name-mismatch
> - link-in-text-block
> - select-name
> - skip-link
> - table–duplicate-name
> - table-fake-caption
> - td-has-header

これに伴い重み付けも変更されています。

https://developer.chrome.com/docs/lighthouse/accessibility/scoring/

### Accessibility の Manual audit について

Accessibilityにはスコア化されない Manual audit というものがあります。(今まで見逃していました)
これらはLighthouseで自動的にテストできないものなのでスコア化されていないですが、チェックした方がいいリストになっています。

Accessibilityスコアが100だったときにこの Manual Check が優先して表示されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/fe420e7c-b68c-67a7-f7e3-2014462deec6.png)

(画像は[What's new in Lighthouse 11](https://developer.chrome.com/blog/lighthouse-11-0/)から引用)

## INPの変更について

2024年3月にCore Web Vitalsとなる予定のINPですが、Lighthouseからexperimentalの表記がなくなりました。

https://web.dev/inp-cwv/

keyが変わるので、計測している場合は対応が必要となります。

```diff:outputs/lighthouse-results.report.json
@@ -120,4 +120,4 @@
     },
-    "experimental-interaction-to-next-paint": {
-      "id": "experimental-interaction-to-next-paint",
+    "interaction-to-next-paint": {
+      "id": "interaction-to-next-paint",
       "title": "Interaction to Next Paint",
\ No newline at end of file
```

INPはLighthouseのUser flow計測をすることができます。

https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md

CrUXでINPを確認する方法に関しては過去に記事を書いているので、詳しくはこちらをご覧ください。

https://qiita.com/kyntk/items/71bd88f97cd751616681

## Legacy navigationの変更について

Legacy navigationに関するフラグ等が完全に削除されました。
Legacy navigationにはページの読み込み方法をコントロールするオプション等があったのですが、今後はuser flowを使うことを検討する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/ac1118d4-4bb6-50c7-f0f0-613e6291401b.png)

## その他

その他の変更はReleaseをご確認ください。

https://github.com/GoogleChrome/lighthouse/releases/tag/v11.0.0

## 参考

- [Release v11.0.0 · GoogleChrome/lighthouse](https://github.com/GoogleChrome/lighthouse/releases/tag/v11.0.0)
- [docs: remove legacy navigation by adamraine · Pull Request #15340 · GoogleChrome/lighthouse](https://github.com/GoogleChrome/lighthouse/pull/15340)
Pandoc で数式を含む TeX をキレイに Word 変換

# 概要
英文校正サービスなどを利用するために TeX を Word に変換したい場面は多々あろうかと思います．
文書ファイル変換で有名なのは `pandoc` ですが，数式を含む TeX を直接 Word には変換できないため，画像付き HTML への変換を介して Word へと置き換える手法を紹介します．

# 準備
1. Pandoc をインストール
1. TeX で使用しているコマンドに合わせて `pandoc` 実行用の上書きスタイルファイルを作成

## 1. Pandoc インストール
公式ページにしたがってインストールしてください．

https://pandoc.org/installing.html

## 2. スタイルファイル
数式の位置調整に `\hspace` や `\vphantom` を入れていたり，太字を使いたくて `\bm` を使っていたりする場合，`pandoc` ではうまく解釈してくれません．

`pandoc` で処理できないコマンドは無視するようにコマンド上書き用のスタイルファイルを準備します．以下はスタイルファイルの一例です．

```tex:pandoc.sty
\renewcommand{\hspace}[1]{}
\renewcommand{\vphantom}[1]{}
\renewcommand{\bm}[1]{\boldsymbol{#1}}
```

変換する `.tex` ファイルのプリアンブルの最後にスタイルを読み込ませて準備完了です．

```tex:paper.tex
\documentclass{...}
...
\usepackage{pandoc}  % <-- Pandoc を使う場合のみコメントを外す
```

# 変換手順
1. TeX -> HTML
1. HTML -> Word
## 1. TeX -> HTML: pandoc コマンドによる HTML の作成
以下のコマンドで TeX ファイルを数式画像付き HTML に変換します．
```bash
pandoc --webtex -s paper.tex -o paper.html
```

`bibliography` を使用している場合には，以下のオプションを付与することで文献とリンクを HTML 化できます．
```bash
pandoc --citeproc -M link-citations=true --webtex -s paper.tex -o ../docs/paper.html
```

## 2. HTML -> Word: HTML を Word アプリで開き，Word ファイルとして保存
前段で生成された HTML ファイルを Word アプリで開きます．
内容を確認し，問題なければ Word ファイルとして保存し直します．

> 元々は HTML をブラウザで開いてコピペ，などというイケてない＋処理の重い方法を書いていたのですが，私のお師匠に上記方法を教えていただいたので記事修正しました．Special Thanks!

:::note warn
HTML から Word への変換も Pandoc でできるのでは，と思って試しましたが，以下のようなエラーで止まりました．メモリ不足かな？

```
zsh: bus error  pandoc paper.html -o paper.docx
```
:::

# まとめ
Pandoc で数式を含む TeX をキレイに Word 変換する方法を紹介しました．
本当は Pandoc でキレイに TeX -> Word できると一番簡単なのですがね...

それはそうと，何故か私の環境では `pandoc` コマンドで生成された Word ファイルが全く開けませんでした．Pandoc の謎はまだまだ続く...
TSOコマンドまとめ

###### 以下は、TSOの操作方法を記載しています。
##    はじめに

  __<font color="blue">　【z/OS（ゼットオーエス）】</font>とは__　IBM製のメインフレームという大型の汎用機のOSです。

####  このメモは、z/Oで使用する対話型処理を行うための機能であるTSO（Time Sharing Option）のコマンドまとめです。

### ○<font color="blue">TSOのログイン</font>（エミュレーターでホスト・コンピューターへ）

##### ・LOGON
      ⇒ログオン後（またはスペースを開けて）Useridを入力するとTSO/Eログオン・パネルが表示
      Command にISPFの自動起動コマンド、Size にユーザが使用する領域の設定等を行った状態で
      Password を入力するとログインする（ISPF:対話式システム生産性向上機能のプログラム開発支援ソフトで、JCLやプログラムの編集等が可能）

### ○<font color="blue">編集系のコマンド</font>（JCLの編集（EDIT）等で使用）

##### ・END(PF3)
      ⇒編集を終了（だだし、初期設定では、データを自動保存する AUTOSAVE　がされるので注意）

##### ・CAN(PF12)
      ⇒キャンセル　編集を保存せずに終了（修正する必要がない場合はこちらで終わるようにする）
      
##### ・SAVE
      ⇒保存　編集中データを保管

##### ・F　'検索したい文字'　ALL
      ⇒文字を検索
      ⇒FIND(PF5) でファインド（次の文字を検索）

##### ・F　400,'検索したい文字'　ALL
      ⇒カラム400を指定して　検索

##### ・X　400,'非表示にしたい文字'　ALL
      ⇒カラム400を指定して該当検索値を非表示

##### ・F　536 '検索したい文字'　ALL
      ⇒カラムを指定して　検索

##### ・C　'置換する文字'　'置換結果文字'　ALL
      ⇒置換する文字　を　置換結果文字　へ　置き換え

##### ・COL
      ⇒画面にカラムを表示する

##### ・RES
      ⇒メッセージを消す




### ○<font color="blue">ラインコマンド</font>（操作したい行の1桁目～6桁目に記載する）

##### ・C
https://www.ibm.com/docs/ja/zos/2.4.0?topic=commands-ccopy-lines
##### ・CC　コピー（範囲）
⇒CC　と　CC　の範囲指定したラインをコピー


##### ・M
https://www.ibm.com/docs/ja/zos/2.4.0?topic=commands-mmove-lines

##### ・MM　移動（範囲）
⇒指定した範囲の行を移動する


##### ・I
https://www.ibm.com/docs/ja/zos/2.4.0?topic=commands-iinsert-lines
##### ・In(nは数字)
指定した行の下にn行の空白行を挿入



##### ・R
https://www.ibm.com/docs/ja/zos/2.4.0?topic=commands-rrepeat-lines
##### ・RR　コピー（範囲）
⇒RR　と　RR　の範囲指定した行を繰り返す

※ライン（コピー等）後に、基本コマンド
CUTを入力し、その後、別のJCLで
ラインコマンド「A」を入れた状態で
PASTE をすると別のJCLへ貼り付けが可能
WEBアプリにおいてどのようにサイトが表示されるの？

# はじめに
WEBアプリケーションは実際にどのように表示されて反映されているのか。
よくフロントエンド技術の仕方によって移り変わる画面を表示することは多いかなと思います。
今回は簡潔にどのような表示の仕方があるのか簡潔にまとめていきます。

# 使用するフロントエンド技術によって表示が変わる
WEBアプリケーションにおけるコンテンツの表示方法は、使われるフロントエンド技術で変わります。
静的コンテンツだけで構成される静的なサイトではWEBサーバからのhttpレスポンスを受けて(Javascriptのエンジンが起動し）コンテンツが表示されることがあります。

また動的サイトでは、APサーバーとDBサーバーのやり取りにより取得された動的コンテンツが静的コンテンツとともに表示されていきます。

また近年ではAjaxやWebSocketといったデータ送受信技術を使った非同期でのWebサーバーとのやり取りにより、画面遷移せずに画面を切り替えることも可能になっています。
さらに、SPA(single page application)という表示方式を遣えば、ページ全体を表示するのは初回のみで、2回目以降は必要な個所(コンテンツ）のみが切り替え表示されます。

これによりWEBサイト表示の高速化、高度なWEB表現、WEBアプリのスマホアプリとしての提供などが可能になります。
このようにWEBアプリケーションでは、表示速度を上げつつ、コンテンツ表示を豊かにするために、フロントエンド開発の名インドが上がっています。

# 静的なサイト・動的サイトの比較

★静的なサイト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3530029/a97ac54a-b57d-ba6a-569f-210a5792784e.png)

html、CSS画像で構成される単純なサイトである

★動的なサイト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3530029/1a3112ba-0337-edcd-0d76-a01f34efa0a7.png)

現在、多くのサイトがこの3階層モデルによってサイトを表示している。

# 静的サイトのメリット・デメリット
- 静的のメリット
1. パフォーマンスの最適化が容易─「動的な」部分が少ないため、簡単にパフォーマンスを最適化することができます。うまく構築すれば、無駄な要素を最小限に抑えることができ、読み込みも高速化されます。
2. ホスティング費用が安価─趣味のプロジェクトやポートフォリオ用であれば、GitHub PagesやCloudflare Pagesなどのホスティングサービスを利用して、無料で運用することも可能です。プロフェッショナルなプロジェクトでは、Kinstaのアプリケーションホスティングなどの有料サービスを利用することも。
3. シンプルなサイトの立ち上げが非常に簡単─データベースなどの専門知識が求められる設定がないため、簡単に素早く構築することができます。

- 静的サイトのデメリット
1.コンテンツやデザインの更新が複雑─変更や更新を行うたびにサイトの再デプロイが必要に（たとえナビゲーションメニューの項目を変更するだけでも）。定期的に更新が必要になるサイトの場合は、特に手間がかかります。　
2.機能の実装に専門知識が求められる─WordPressのような動的CMSでは、サイトに機能を追加するには、プラグインをインストールするだけで済みます
3.コンテンツ管理の機能がやや劣る─静的サイトジェネレーターは一般的に、コンテンツの管理には長けていないため、何千ものコンテンツやタクソノミーを持つ大型サイトでは厄介になる可能性があります。一部の静的サイトジェネレーターには、この懸念を解消するような様々な工夫も。

# 動的サイトのメリット・デメリット

- 動的サイトのメリット
 1.サイト（コンテンツとデザイン）の更新が容易─動的サイトでは、コンテンツやデザインの更新が容易。管理画面で変更を加えれば、本番サイトに即座に反映され、静的サイトで必要になるサイト全体の再デプロイは不要です。
 2.プラグインやアプリケーションによる機能の追加が容易─動的サイトをWordPressで作成すれば、プラグインをインストールするだけで機能を追加することができます。
 3.規模に応じた強力なコンテンツ管理機能─動的CMSでは、コンテンツ管理に長けています。例えば、何千ものローカルビジネスのディレクトリを構築する場合は、動的サイトを構築するのが賢明です。

- 動的サイトのデメリット
1.ホスティング費用が比較的高価─サーバーサイドの処理には、多くのリソースが必要になるため、必然的にホスティング費用が高くなる傾向にあります。
2.セキュリティの確保が難しい─動的サイトは、静的サイトよりも攻撃対象になりやすく、高度なセキュリティの確保がやや難しくなります。例えば、動的サイトでは、SQLインジェクションに対する脆弱性が懸念されるのに対して、静的サイトにはデータベースがないため、心配はありません。
3.パフォーマンスの最適化に手間がかかる─フロントエンドとバックエンド両方のパフォーマンスを考慮しなければならいため、パフォーマンスの最適化が複雑に。例えば、静的サイトでは簡単に行えるのに対し、動的サイトではデータベースクエリとパフォーマンスの最適化にかなり手間がかかる可能性があります。

# AjaxやWebSocketによるサイト表示
- Ajaxによる表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3530029/6ad44acd-a37d-a468-fa2b-edc76a036b23.png)
Ajaxでは、非同期でWEBサーバーから変更要素を取得する

- Websocketによる表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3530029/158ec17b-91b7-b772-2993-de61e4d52b2d.png)
WebSocketでは、コネクション確立後、Webサーバーと双方向通信する

■カジュアル面談受付中
下記からスケジュール設定可能となります。
https://t.co/TfUrQzPhQr

↓↓↓こちらのセミナーもご検討ください↓↓↓

▼【Engineer Meetup #１】エンジニア交流会▼
　《9/13（水）18:00～21:00 場所:AKKODiS本社オフィス》
https://job.axol.jp/jn/c/akkodis_career/entry_cxJl3n0N64LU04LVg/input

▼～キャリア変遷・年収推移全公開！～年収600万のインフラエンジニアが年収1,200万越えのデータサイエンティストになるまで▼
《9/15（金）19:00～21:00 オンライン開催》
https://techplay.jp/event/917353

★Twitterもやってますので、是非フォローお願いします★
https://twitter.com/A831SS336O
【Git】git push でリモートリポジトリにプッシュ

この前こんなツイートをしました。今回は git push について解説してますのでわからない方はぜひ！

普段はプログラミングについて発信しています。<a href="https://twitter.com/div_tomo?ref_src=twsrc^tfw" class="twitter-follow-button" data-lang="ja" data-show-count="false"> フォローする </a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">夜中だけどすごく大事なこと言います。。。<br><br>git add<br>git commit<br>git push<br><br>これだけは超初心者でも絶対に覚えておくべきです。<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a></p>&mdash; Tomoya🧑‍💻エンジニア (@div_tomo) <a href="https://twitter.com/div_tomo/status/1696906858471317804?ref_src=twsrc%5Etfw">August 30, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

リモートリポジトリにローカルの内容をアップすることを `push` と呼んでいます

普段の開発現場では

**コミットしたら、その内容をリモートリポジトリにプッシュします。**

## どのような時にpushするか

- 他のチームメンバーに自分の開発したコードを共有したい時
- リモートリポジトリにローカルの内容を保存したい時

## 事前準備

> ＞_ コマンドライン
> 

```bash
> git remote add origin ＜リモートリポジトリのURL＞
```

`git remote add` でリモートリポジトリを新規に追加することができます。

`origin` というショートカットでurlのリモートリポジトリを登録をしています。

▲

これをすると、今後 `origin` という名前でリモートリポジトリに `push` したりすることができるようになります。

`git remote add` で登録しなかった場合 `origin` の箇所に リモートリポジトリのURLを記載しないといけなくなります。

## リモートリポジトリへ送信する

リモートリポジトリへ送信するコマンドは、`git push` コマンドを使います。

> ＞_ コマンドライン
> 

```bash
> git push <リモート名> <ブランチ名>
# 例
> git push origin master
```

`origin` というのは先ほど登録したリモートリポジトリのショートカット名です。

`master` はブランチ名です。

# git push の使用方法

```mermaid
flowchart LR

A[ワークツリー] -- git commit --> B((ステージ)) -- git push --> C((リポジトリ))
```

ワークツリーでファイルを変更したら、その内容を `git commit` でローカルリポジトリに保存します。この内容を `git push` でリモートリポジトリにプッシュしていきます。
【Google検索 SGE】検索にも生成AIが。お遊びなし。

:::note info
本記事は、
　Google検索のニュースです。
　　あしからず。
:::

　どうも、カーブミラーです。

　今回は、
　　Google検索に
　　　生成AIが試験運用開始の
　　　　お知らせがありました。

　今年の5月に
　　米国で
　　　先行試験運用
　　　　されていたものが、
　　8月30日午前9時から
　　　日本語でも試験運用を開始。

　Search Generative Experience
　　SGEというものだとか。

　まだ試験運用中なので、
　　登録ユーザーに限定開放。

　詳細は、
　　ググってくださいw

　You Tube動画で、
　　かわごんさんが、
　　　今朝アップする、
　　　　と言っていたので、
　　　　　そちらからの方が
　　　　　　早いかも。

　「かわごん」で検索してください。
　　坊主頭のキャラが、その人です。

　登録は、
　　Googleの[Search Labs]から。
　　　リンクは、貼りませんよ。
　　　　手順がありますからね。
***
　（実際に使用）

　ググると、
　　AIを使いますか？、と
　　　出てきて、はい、と
　　　　タップする。

　生成中になり、
　　2〜3秒ほどで、
　　　要約されて、出てきます。

　見た目、
　　Bingな感じです。
　　　次の入力のボタンが
　　　　ある感じが、そのまま。

　「追加で聞く」という
　　ボタンがあるので、タップ。

　続けて、入力ができるので、
　　候補を絞り込めます。
***
　ただ、
　　すべての検索に
　　　適用されるわけでは
　　　　ないようです。

　また、
　　ハルシネーションの
　　　可能性もあります。

　ご注意を。
***
　私感。

　Bingを使わなくなるかも。

　理由は、
　　こっちの方が、早いから。

　問題は、
　　ハルシネーションでしょうね。

　検索の文章を
　　プロンプト同様に
　　　書く必要があるかも。

　以上。
新規作成したレコードのIdを取得する方法 フロー


+ [Flow Builder Get Contact ID of record created during Flow process](https://developer.salesforce.com/forums/?id=9062I000000DJaHQAW)

# 1件のレコードをInsert した場合

「変数を手動で割り当てる」オプション (オレンジ色の丸で囲んだ部分)を使って、Idを得ることが可能です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/0a48795b-3197-52a9-f65f-31c0f1c6afb2.png)


Apexなら

```
Account acct = new Account(Name='SFDC Account');
insert acct;

system.debug("Inserted Account Id = "+acct.Id);
```

https://salesforce.stackexchange.com/questions/57234/how-to-get-id-of-inserted-record-via-apex

# コレクション変数を使って一括insertした場合

[レコードのすべての値を使用する] オプションを使用して新しいレコードを作成した場合、その後、 [Create] 要素で使用される元の変数を参照することによって、新しく作成されたレコードのレコード ID を参照できます。以下のスクリーンショットでは、Opportunity の作成に使用される変数が「OpptoCreate」という名前であることがわかります。次に、次のスクリーンショットでは、変数「OpptoCreate」から商談 ID を参照する商談連絡先ロールを作成しています。

この例だとおそらく最初の１件目しかIdはとれないと思う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/fad41b8e-7aa7-cd37-ae91-716338c0d945.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/70332c27-8362-c250-846d-55f949926ff1.png)

一括新規作成した場合にIdを取得するには

以下のように複数更新したら、このコレクション変数にIdがちゃんと入っているということでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/e34316c9-f3de-058f-5bed-d1c14bf7b714.png)

このコレクション変数でループを作って、中身を確かめたらちゃんとIdがありましたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/d0031353-1834-3aeb-2c1a-50b85390b463.png)


今まで試したことはないですが、Apexの一括更新で　insert insertAccList とリスト変数で一括作成した後にはこのList変数にIdがちゃんと入っているかもしれなですね。

考えてみれば、これと挙動は変わらんだろう。

```
Account acct = new Account(Name='SFDC Account');
insert acct;

system.debug("Inserted Account Id = "+acct.Id);
```

# 資料

+ [トランザクションにおけるフローのバルク化](https://help.salesforce.com/s/articleView?id=sf.flow_concepts_bulkification.htm&type=5)
+ [フロー: レコードフィルタで SOQL の「IN」条件と同等のものをサポート](https://ideas.salesforce.com/s/idea/a0B8W00000GdhBKUAZ/flow-support-equivalent-of-soql-in-condition-in-record-filters)
Laravel10でCSRFトークンミスマッチが起きた時にログイン画面にリダイレクトさせる方法

https://qiita.com/qwe001/items/99e604bfaedd81b94732

Laravel5系で開発していた際は、renderメソッドに書く形でCSRFトークンミスマッチ時にリダイレクトさせていましたが、
Laravel10系では、registerメソッドに書くのが正解のようです。

```php:app\Exceptions\Handler.php
<?php

namespace App\Exceptions;

use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Throwable;

use Illuminate\Http\Request; // ★追加
use Illuminate\Session\TokenMismatchException; // ★追加

class Handler extends ExceptionHandler
{
    /**
     * The list of the inputs that are never flashed to the session on validation exceptions.
     *
     * @var array<int, string>
     */
    protected $dontFlash = [
        'current_password',
        'password',
        'password_confirmation',
    ];

    /**
     * Register the exception handling callbacks for the application.
     */
    public function register(): void
    {
        $this->reportable(function (Throwable $e) {
            //
        });

        // ★ここから追加
        $this->renderable(function (\Exception $e, $request) {
            // 419エラー: CSRFトークンミスマッチエラーの場合の処理
            if ($e->getPrevious() instanceof TokenMismatchException) {
                return redirect()->route('auth.login')->withErrors([
                    'errors' => trans('auth.csrf_token_mismatched')
                ]);
            };
        });
    }
}
```

```php:resources/lang/ja/auth.php
<?php

return [
    'csrf_token_mismatched' => 'CSRFトークンが一致しません。もう一度お試しください',
];
```

Viewでは以下のようなループ処理でエラーメッセージを取り出せます

```php:resouces/views/auth/login.blade.php
@if ($errors->any())
      <div id="alert-messages" class="alert alert-danger">
        <ul>
    @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
    @endforeach
        </ul>
      </div>
@endif
```

## 参考URL

https://stackoverflow.com/questions/76411066/laravel-how-to-capture-419-then-redirect-to-different-login-page

https://readouble.com/laravel/10.x/ja/errors.html#rendering-exceptions
【SQL】カラム数が多くてみにくい時に、縦表示にするメタコマンド「\G」

mysql のメタコマンドに『\G』っていう便利なのがある。

SQL文の最後に「\G」ってつけると、問い合わせ結果をたてに表示してくれるというもの。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684145/1afbc79c-3953-679e-b384-a1d748b7a23f.png)

https://www.javadrive.jp/mysql/select/index1.html
【適宜追記】マークダウン記法(備忘録)

### 見出し
```
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
```
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
### リスト
```
- リスト 1
   - ネストリスト 1-1
       - ネストリスト 1-1-1
           - ネストリスト 1-1-1-1
               - ネストリスト 1-1-1-1-1
           - ネストリスト 1-1-1-2
       - ネストリスト1-1-2
   - ネストリスト 1-2 
- リスト 2
- リスト 3
```
- リスト 1
   - ネストリスト 1-1
       - ネストリスト 1-1-1
           - ネストリスト 1-1-1-1
               - ネストリスト 1-1-1-1-1
           - ネストリスト 1-1-1-2
       - ネストリスト1-1-2
   - ネストリスト 1-2 
- リスト 2
- リスト 3 

```
1. 番号付きリスト1
    1. 番号付きネストリスト1
2. 番号付きリスト2
    1.番号付きネストリスト1  
```
- 番号付きリスト
    - 数字.の後には スペースが必要
    - ネストする時には 段落と同じ数のスペースが必要

1. 番号付きリスト1
    1. 番号付きネストリスト1
2. 番号付きリスト2
    1.番号付きネストリスト1
EC2 (Amazon Linux 2023) 起動時に Docker コンテナを自動起動する

## やりたいこと
Docker コンテナでアプリケーションを構成しているとして、EC2 インスタンスを起動したとき、自動的にコンテナが立ち上がったらうれしいので、実現したい。

## 手順
1. EC2 インスタンス起動時に Docker が自動起動するようにする
    ```shell
    $ sudo systemctl enable docker
    ```
    ※ 確認するには以下を実行し `docker.service; enabled;` と表示されていれば OK
    ```shell
    $ sudo systemctl status docker
    ```

1. Docker コンテナ起動のスクリプトを配置する
    - `/var/lib/cloud/scripts/per-boot/` にスクリプトを配置することで、インスタンス起動時に実行してくれる
[起動時に Linux インスタンスでコマンドを実行する](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/user-data.html)
    - 配置するスクリプト
        ```bash
        #!/bin/sh
        cd /home/ec2-user
        docker start CONTAINER_NAME
        ```
    - `docker-compose` でやるなら例えばこう
        ```bash
        #!/bin/bash
        cd /home/ec2-user
        docker-compose -f docker-compose.yml up --build
        ```
    注意点としては、`/var/lib/cloud/scripts/per-boot/` で実行されるようなので、スクリプトの実行位置に気をつけてディレクトリを移動する必要がある。
【Android/Kotlin】FirestoreのデータをFlowで簡単に返す方法

# はじめに
FirestoreでFlowを返したいときcallbackFlowを独自で実装するケースは多いと思います。

しかしながらFirebase Android BoMのバージョン`30.5.0`以上(firestore-ktxのバージョン`24.3.1`以上)であれば、便利な拡張関数が提供されています。

firestore-ktxが提供する拡張関数を使用することでわずか数行で記述することができます。

# 方法の比較
Repositoryのコードを例としてBefore(callbackFlowを実装する方法)とAfter(Firestore-ktxの拡張関数を使用する方法)を比べてみます。

```kotlin
class HogeRepositoryImpl @Inject constructor(
    private val db: FirebaseFirestore,
) : HogeRepository {

    companion object {
        private const val COLLECTION_PATH = "hoge"
    }

    // Before: callbackFlowを実装する方法
    override fun getHoge(): Flow<List<Hoge>> = callbackFlow {
        val collectionReference =
            db.collection(COLLECTION_PATH)

        val listener = collectionReference.addSnapshotListener { value, error ->
            if (error != null) {
                // エラー処理
            } else if (value != null) {
                val a = value.documents.mapNotNull { it.toObject<Hoge>() }
                trySendBlocking(a)
            }
        }
        awaitClose {
            listener.remove()
        }
    }

    //  After: 拡張関数を用いる方法
    override fun getHoge(): Flow<List<Hoge>> {
        val collectionReference = db.collection(COLLECTION_PATH)
        return collectionReference.dataObjects<Hoge>()
    }

```

Afterの拡張関数を用いる方法は、`dataObjects()`メソッドを用いて簡単にFlowを返せることがわかります。

# `dataObjects()`の実装について
この便利な`dataObjects()`関数はどのように実装されているのでしょうか。

下記が`dataObjects()`メソッドの実装です。

```kotlin
inline fun <reified T : Any> Query.dataObjects(
  metadataChanges: MetadataChanges = MetadataChanges.EXCLUDE
): Flow<List<T>> = snapshots(metadataChanges).map { it.toObjects(T::class.java) }
```

`metadataChanges`引数として受け取ります。これはメタデータの変更も受信するかの設定です。デフォルト引数ではメタデータの設定は除外するように`MetadataChages.EXCLUDE`が設定されています。

`snapshots()`メソッドを呼び出し、返ってきた値を`toObjects()`メソッドで指定の型パラメータに変換しています。


次に`snapshots()`メソッドを見ていきます。

```kotlin
fun Query.snapshots(
  metadataChanges: MetadataChanges = MetadataChanges.EXCLUDE
): Flow<QuerySnapshot> {
  return callbackFlow {
    val registration =
      addSnapshotListener(BACKGROUND_EXECUTOR, metadataChanges) { snapshot, exception ->
        if (exception != null) {
          cancel(message = "Error getting Query snapshot", cause = exception)
        } else if (snapshot != null) {
          trySendBlocking(snapshot)
        }
      }
    awaitClose { registration.remove() }
  }
}
```

callbackFlowを使用していることがわかると思います。`addSnapshotListener()`メソッドで変更をリッスンし、値があれば`trySendBlocking`メソッドで値を流しています。


# おわりに
以上です。便利な拡張関数を使用してコードがすっきできると嬉しいですね。
【Laravel】モデルを並び替える方法

orderBy()を使用する。
```○○Controller.php
Todo::orderBy('id','asc')->get();
$todo->orderBy('id','asc')->get();
```
・orderByの第1引数：並び替えの基準にするカラム名。
・orderByの第2引数：並び替えの方法。（例：asc...昇順、desc…降順）
・最後に必ず`get()`をつける。

## 参考サイト
モデルを複数の条件で並び替えるorderbyの書き方
https://umebius.com/laravel/multiple_sort_orderby_model/
| 未経験から自社開発企業へ転職 | 転職までの道のりとエンジニアになり1ヶ月経っての振り返り

初投稿です！
約半年のニート期間を経て、今年7月に現在の会社に入社しました。
これから転職しようと考えている方などの参考になると嬉しいです！

# 目次
- [この記事を読んでいただきたい方](#この記事を読んでいただきたい方)
- [転職成功までの道のり](#転職成功までの道のり)
- [転職して1ヶ月でやったこと](#転職して1ヶ月でやったこと)
- [1ヶ月の振り返り](#1ヶ月の振り返り)
- [今後やりたいこと](#今後やりたいこと)
- [最後に](#最後に)
---

### この記事を読んでいただきたい方
- 未経験からエンジニア転職を考えている方
- 転職活動中の方
- プログラミングスクールに入ろうか迷っている方
---

### 転職成功までの道のり
前職では自動車工場の製造ライン作業者として働いておりました。
エンジニアとは全く異なる仕事です。とにかく体を動かす仕事だったので
エンジニアに限らずデスクワークに強い憧れがありました。
業務の改善を行う中でExcelのVBAについて学習する機会があり、
それがきっかけでプログラミングに興味を持ち始め、エンジニア転職を志しました。
しかし、「未経験エンジニア」と調べると、予測で「やめとけ」や「現実」と出てきたり、
地元の先輩エンジニアからも未経験からの転職は難易度が高いと聞いてました。
それもあって転職サポートのついたプログラミングスクールに通い始め、
本格的にプログラミング学習を始めました。
プログラミングスクールでは6ヶ月間のコースでRuby(Rails)を主に学習しました。
ポートフォリオでは、「写真好きな人」をターゲットにしたSNSを個人で開発しました。
結論から言うと、プログラミングスクールに通ったことについては、高額ではあったものの後悔はしていません！
学習効率はメンター制度を活用することでエラー解決までの時間も短縮されましたし、
カリキュラムも整備されていた為、独学に比べると圧倒的に良かったと思います。
ポートフォリオ制作まではスムーズでしたが、
転職活動を始めてからがメンタルかなりえぐられました。。。
ポートフォリオを制作して今の会社に内定をいただくまで約3ヶ月ほどかかりました。
応募した企業の数は書類選考で言うと、恐らく3桁いってるかな？くらいで、
そこから面接に進んだのはたったの8社でした。
面接まで進んでもやはり、実力不足で7社お見送りとなりました。
転職成功した現在、当時やっておけば良かったなと感じることは以下の点です。
- **SPIの学習**
    - 選考のフローで取り入れている企業は割と多かった印象です
- **自分のポートフォリオは何を聞かれても責任持って答えられるようにしておく**
    - 技術的な質問をされると面接で答えることができませんでした...
    - 何事も基礎を定着させることが重要だと再認識しました。
- **エンジニアとしてどうなりたいかを明確にしておく**
    - ほぼ全ての企業に聞かれました。
    - 3年後、5年後、10年後にどうなっていたいかはまとめておくべき
- **企業の求める人物像を理解しておく**
    - 結局は「この人と働きたい」と思ってもらえるようにアピールすることが大事かなと思います！
- **早めに転職活動を進める**
転職サポートのついたスクールだからこそ、
スクールが紹介してくれる企業に頼り切っていました。
転職活動を始めて1ヶ月ほど経ってからようやく、
WantedlyやGreenで自らもエントリーするようにしましたが、
もっと早く行動しておけば少しは転職期間を短縮できたのかな〜と感じています。
結局、スクールからの紹介ではなくWantedlyで自ら応募して現在の会社に入社しました。
---


### 転職して1ヶ月でやったこと
iOSエンジニアとして業務を行う中で毎日学びがあります！
研修では、まず参考書2冊で学習した後、サンプルアプリを作成しました！
その後は、迅速にチームに参加させていただいています。
実際のチーム開発においては、最初はラベルの変更などの簡単なタスクからスタートし、
徐々に実務を通じて学習を進め理解を深めていく形です。
転職活動中に求人票を見ていると、
「3ヶ月間研修を行った後にテスターから始めてもらいます」
といったような企業が多い印象でした。
対して、今の会社では未経験から入社した自分でも、
チームに入り開発させていただいています。非常に有難いですし楽しいです！

---
### 1ヶ月の振り返り
- 良かったこと
    - まずは、エンジニア未経験からの転職がこの会社で本当に良かった
    - 環境の面においても何一つ不満がなく、安心して楽しく働けている
    - 前職とは業種も全く違うため、エンジニアの働き方を知れた
    - 特に周りの先輩方が優しい方ばかりで質問をしやすい環境なのが本当に良い
    - 「まずはやってみる」の精神で、少し難しいタスクにも積極的にチャレンジできた
    - タスクを完了する流れを掴むことができた
- 難しかったこと・反省
    - ファイル数が参考書で学習していた時とは桁違いに多くファイルを探すところから苦戦した
    - MVPの考え方やDelegate,DataSourceなどの基礎的な部分の理解が浅い
    - 一人でタスクをこなすのが難しく、手助けがないと課題を解決できない
    - 一人で考えても解決できそうにないことにかなり時間を使ってしまった
    - 英語力がなくコードやエラーメッセージが解読しにくい
    - 「こうすれば解決できそう」と思ってもコードに起こす方法がわからない時がある
---

### 今後やりたいこと
- 自作アプリを1から制作して、処理の流れをより理解することを試みる
- 20分考えて分からないことは積極的に質問し、理解を深めるよう努める
- ドキュメントやUdemyで学習して、Swiftに関する知識を増やし1日でも早く一人前になる！
---

### 最後に
最後まで読んでいただきありがとうございます！
転職で苦労する気持ちは痛いほど分かるので、
挫折しそうになっても諦めなければ良い会社に巡り合えると思います！
この投稿を読んでくださった方の今後のご活躍をお祈りしています！
***