OmniAICreator/Qiita-1.07M huggingface dataset:
#ReactなんでもLT会 #2に参加して

## ReactなんでもLT会 #2 in LCDCに参加して
前回 [ReactなんでもLT会#1](https://qiita.com/T_Kumamoto/items/f9b0d661e2c9b81d1138) に引き続き、Reactの勉強会に参加してきました。
今回もその中から自分が気になったこと、ためになったことをピックアップしてまとめていきます。

## ドメイン駆動なステート設計
最初に断っておくのですが、ステート設計の部分に関しては結果的に私の理解が追いつかなかっので、今回は「ドメイン駆動」と「ドメイン駆動設計（DDD）」について軽くまとめます。

### ドメイン駆動とは
ドメイン駆動（ドメイン駆動設計）とは
> ドメインの知識に焦点をあてた設計手法
という説明がどの本やサイトにも大体書いてあります。

では、「ドメイン」とはなんなのか。

英単語で「ドメイン」は「領域」を表す単語です。
つまり**プログラムを適用する対象となる領域**を指します。
ここではそのドメインの領域に何が属するかが重要になります。

すなわち**プログラムでなんの問題を解決したいのか**が重要になってくる分けです。

#### ドメインモデリング
![](https://camo.qiitausercontent.com/039d6515333b99a1a2900eac3fcb34696bfe9aed/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f33303438392f36303461656165372d633365662d346566312d353831372d3836336163303031366638642e706e67)

この画像が比較的わかりやすいかと思います。
解決したい事象、問題を「ドメイン」とし、ドメインに対する関連する事象などを列挙して「モデル」を形成します。

- 例：メモをとる
  - 紙、ペン、聞く耳、理解する言語能力...

とかですね。

次に列挙したモデルを元に継続的にソフトウェアに反映していきます。
先程の「メモをとる」という事象に対して、列挙したモデルは果たして完璧でしょうか？

紙とペンがあっても書く手が無いとメモは取れません。
このように常にモデルが完璧か否かを吟味しながらソフトウェアに反映していきます。

というようにDDDを理解するためには、前段階がすごい大変なんだなぁというのが今回の印象。
ただ、質の良いソフトウェアを作る上では避けては通れない考え方だと思いました。

今回発表していただいた方のスライドはこちらになります。
↓
[ドメイン駆動なステート設計](https://speakerdeck.com/codynog/domeinqu-dong-nasutetoshe-ji)
[比較的参考になったQiita](https://qiita.com/little_hand_s/items/721afcbc555444663247)

## Suspense使ってみた
SuspenseはReact v16.6から実装された機能で、非同期処理などでRenderを待機させたいstateがある場合に、データが揃うまでrenderをストップさせておくことができる機能です。

[React official docs](https://ja.reactjs.org/docs/concurrent-mode-suspense.html)

#### メリット
- renderを待たないで非同期処理を開始できるので早い
- コンポーネントの遅延ロードを簡単に実装できる

#### デメリット
学習コストが高い
Promiseで再ロードされてしまうのでuseState, useEffect, useMemoなどの値が破棄されてしまい、使用できない。
非同期処理時にエラー(reject)が吐かれると処理が止まる。

印象としては便利そうではあるものの、まだ安定板での供給ではないので実用度は低そうですが、今後のアップデートではかなり使えるものになる思います。

## ReactのKeysについて
Reactでリストを作った時など、よくユニークなキーを設定しないとwarningで怒られます。挙動は大概問題なく動くのですが、一応エラーなのでその理由を今回知ることができて基礎的なことではありますがいい収穫でした。

#### なぜユニークなキーを設定する必要があるのか
Reactには変更された箇所だけを検知してそこだけ更新する機能が備わっています。
それを実現するためにKeyが使用されています。
よって、リストなど同じような要素が並んでいる場合にKeyが正しく設定されていないと全件更新することになる場合が発生し、パフォーマンスの低下につながります。
inputなどで動的に追加する場合など、要素に入っている値が正しく更新されない場合もあるので、致命的なバグにつながる場合があります。

[視覚的にめちゃくちゃわかりやすいサンプル](https://jsbin.com/wohima/edit?js,output)
パフォーマンスの良いSQL

今回はパフォーマンスの良いSQLの一例を紹介します。
※今回は基礎がわかっている人向けです。基礎部分は別途記事にするのでお待ちください。

#どちらがパフォーマンスが良い？

**①SELECT goods  FROM goods g 
　INNER JOIN goods_b gb on g.goods = gb.goods
　WHERE g.stock = 10  and gb.type = 3
　GROUP BY g.goods**

**②SELECT g.goods FROM goods AS g 
　WHERE g.goods =10 
　AND EXISTS(
　　SELECT * FROM goods_b gb
　　WHERE gb.type = 3
　　AND c.goods = gb.goods )**

出力結果は同じです。

ヒントは優先順です。
優先順のことが書かれたわかりやすい記事です。ブックマーク必須
https://qiita.com/suzukito/items/edcd00e680186f2930a8


#答え
①です。
これはSELECTされる回数によって変わるという問題です。
①は1回に対し、②は2回です。
テーブルを参照する回数に差異があります。
これの不思議なところは、データ量の多い少ないに関わらず①の文のほうが圧倒的に処理が速いところです。
先に絞り込みをして探した方が確かに早いもんなぁと初めのころは思いました。

#最後に
疲れがたまる木曜日、今日も頑張って乗り切った。。。
皆さんも体調に気を付けて無理せず頑張りましょう。
他にも学んだことがあったら追記していきます。
vistaでstm32duino その3

#概要

vistaでstm32duinoやってみた。
arduino ideに、stm32duinoを入れる。

#手順

- jsonを設定する。
- https://github.com/stm32duino/BoardManagerFiles/raw/master/STM32/package_stm_index.json
- ボードネージャーで、stm32 coresをインストール。
- ver 1.9

以上。
G'sでの半年間振り返り

G’sに入学して半年。昨日卒制を提出したので、半年間を振り返ってみた。

G‘sに入学した理由は2つ。
1つは現職の仕事がつまらなくなっていたから。もう1つは作りたいものがあったから。

現職は、化粧品通販会社のデータサイエンス部署。
売上予測、販促計画の作成、プログラミング経験はSQLを使用したデータ抽出や、
分析用のアプリケーション(ほとんどノーコード)でレポート作成や回帰分析を行っていた。
入社8年目。プロジェクトのチームリーダー、研修講師、購入制度改革や周年イベント企画、
分析に留まらず、幅広くなんでもやっていた。側から見れば、順風満帆なのかもしれない。
何をするにも出来て当たり前。誰からも怒られもしなければ、褒められもしない。
これで良いのか？つまらない。何か新しい事にチャレンジしたい。そんな時間あるのか？
毎日そう言う思いがループしていた。
そんな折、商品管理部門から在庫削減するために、適正在庫の予測モデルを作って欲しいと相談を受けた。
面白そうだなと思った。俗に言う「ビビッときた」みたいな感覚だった。
(今考えたら新しい事に飢えていただけだと思う)
すぐに既存の分析用のアプリケーションで受注出荷データから仕入れ在庫数の予測を行うモデルを作った。
しかし、すぐに行き詰まった。コロナ禍で物流は変則的に稼働、
配送会社の配達も遅延、社内では過剰発注した商品を消化するための計画にない販促、
営業の気合いや希望の入った商品発注を行い、無駄な在庫が増えていった。
私が作った予測モデルは使い物にならなくなった。
システム導入の検討、上申をしたが、時期尚早と言う事で予算は降りなかった。
自分に出来る事は他にないのか、予算がないなら自分で作れないのか、そう思っていた。

そんな折、G‘sのインスタの広告が目に止まった。
(後で知ることになるが、インスタ広告からG’s入学に至った同期が結構いた。インスタのコンバージョン率高そう…)

説明会に申し込み、ダメ元で受けて落ちただろうと思ったIT試験に合格し、あっという間に入学が決まった。
入学前は本当に不安だった。自分にプログラムが書けるのか？講義についていけるのか？課題がこなせるのか？
トライアル期間で辞めそうだなと思いながら入学式を迎えた。
入学前の不安は、G‘sに入学して1ヶ月も経たないうちに消えた。

初めはエラーだらけ。
わからない→わからない→わからない→間に合わない→眠れない→出来たのループ。
でもエラーには何がダメなのかどこが間違ってるかヒントがある。
エラーは今の会社と違って、ダメなところをちゃんと教えてくれた。
エラーを繰り返すうち、エラーは「出来ないことがわかったという成果」だと思えるようになった。
課題ではJavaScriptでもぐらたたきを作って、息子と遊んだり、
APIでチャットボットを作って、自部署で使ってみたりした。
毎日仕事も課題もあって寝れないけど、めちゃくちゃ楽しかった。

在学中に会社の業務改善の一環で、チャットボットの実装したり、
社内のポータルサイトの一部を作ったりした。
データ分析と違って、自分の作ったものが目に見える。誰かが使って、喜んでもらえる。
家族や友人に、どんな仕事してるか一瞬で説明できるものが自分で作れた。
今まで職業の話しても、ほとんど理解してもらえなかった。
最近は会社の同僚や先輩がG‘sってどんなところ？と聞かれるまでになっている。 
自分の見る世界も見られ方も変わってきた。

そして、何よりG‘sで関わった全ての人から刺激をもらった。
講師陣、チューター、メンターの皆様。
それから、既に起業、就職、転職し、活躍している先輩や企業の代表の方々
。中には、同期同士で会社を立ち上げ、経営者とエンジニアという関係の先輩もいた。
同期も凄いメンバーが揃っている。行政職員、エンジニア、会社経営者、医者、主婦。
出会った人たちの視野、視点、視座が私の知見を広げ、話すたびに学びを与えてくれた。

G‘sは単なる座学ではなく、自走力を鍛え、問題解決を学ぶための場所だと思う。
(私にとってはパワースポット)
卒業まであとわずか。最後までやり切り、卒業してもずっと関わっていたい。

以上
vistaでstm32duino その2

#概要

vistaでstm32duinoやってみた。
STM32CubeProgが、必要らしい。

#インストール

- stマイクロに、登録する。
- downloadして、win32をインストールした。
- ver 2.8.0

#写真

![cube.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/05f21514-e232-0538-da62-44165c626149.png)


以上。
そうだ AWS に引っ越そう【その1】

# はじめに

株式会社オズビジョンにてエンジニア8年目のテラシマユウコ (@terra_yucco) です。
通常開発の他、オフショア開発のブリッジエンジニアや運用保守作業、企画のためのデータ出しなども担当させてもらっています。
（ここまでテンプレ）

前回記事「[新米データサイエンスチームのこれまでとこれから](https://qiita.com/terra_yucco/items/2e5eba6ad06738d85aae)」の他、いくつかのエントリでも触れていたように、今までオズビジョンでは分析基盤には BigQuery を利用していました。
BI 用途では Looker、Re:dash、Google Data Studio あたりが乱立していましたが、このたび「基盤も BI も AWS に統合しよう」という話になったため、これから直面する色々を含めて備忘録を書いていこうと思います。

**なお、2021-10-14 現在、この話は現在進行形です。**

## なぜ統合することになったのか

下に色々書いたのですが、「分析者の要望を満たせているのは Looker だが、お値段が高すぎてデータが全員のものにできていない」「他の基盤は基本 AWS なのにここだけ GCP　にあるのが将来のリスク」というあたりが主な理由でした。

- BI ツール乱立事件
    - Looker（パワフルだけどとにかく高い、なので使えるユーザ制限してた）
    - Re:dash（自分でSQL書ける人向け）、
    - Google Data Studio（まあ元データがBigQueryだからね…）
- アプリの基盤、分析したいデータのオリジナルはほぼ全て AWS にある
    - GA や Firebase 関係は除く
- 「とにかくデータの見える化を！」で社内の色々な人が連携取らずに動いてしまったので、各々が正しいと思い込んでいるデータがあちこちにある状態になり、ガバナンスの効いていないデータから謎数値が提示されることが増えた

## どんな風に構成を変えるのか
### 既存

- AWS Aurora の定期 snapshot から Parquet 生成
- Parquet を BigQuery 転送し、全件洗い替えでデータ反映
- BigQuery 側の Scheduled Query 機能で必要な ETL や集計を実施
- Looker をはじめとしたツールで可視化・分析

### これから（希望）

- AWS Aurora の定期 snapshot から Parquet 生成【変更なし】
- AWS Glue Data catalog で database を定義し、上記 Parquet でテーブルを作成
- Athena を利用して ETL や集計を実施
- QuickSight を利用して可視化・分析

# まとめ

データの民主化とコストの問題から、今まで GCP に寄っていた分析基盤を AWS に寄せることになりました。
次以降の記事では、移行検討でぶちあたっている壁について書こうと思います。
緑になったのでメモ書き

![スクリーンショット 2021-10-14 18.59.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034202/b3caf902-2bdc-ae24-eef6-f8c270c221d9.png)
<div style="text-align:center;"><font color="green">**ギリギリですがなんとか入緑することができました！！！**</font></div>


ということで、緑になるためには何々した方が良いみたいな記事はたくさんあるので、この記事は自分がこれまでやったこととこれからやっていきたいことのメモ書きみたいな感じで書いて行こうと思います。ここはこうした方が良いみたいなことがあればコメントお願い致します。

#今までやったこと
###<font color="Gray">灰</font>のとき
**A,B,C**問題をそれぞれ20問ずつくらいやった。D,E問題はほとんど触れず。**C++**の方が速度が速く競プロ向きだということで最初はC++を使ってた。普段の研究やインターンなどでは**Python**の方が使う機会が多そうなことと、ライブラリが充実しており、記述も簡単であり、Pythonerも少なくとも青までは速度が出なくて困ったことはないという記事があったため、途中からPythonに移行。
初めは茶diff前後の問題を中心にやっていた。最初はC++やPythonの文法、Atcoderの方式に慣れるという意味でもA,B問題を解くことに意味があったと思うが、徐々に簡単に思えてきてやる意味あるのかな？と思ったので、それからはCを中心にやるようになった。

使った教材
・初心者用の記事にあった問題（何やったかよく覚えてない）
・ABCの過去問数年分
・atcoder版蟻本
https://qiita.com/drken/items/e77685614f3c6bf86f44

#####しくじり
・ツイッターやってたけど実際に一緒に競プロのチャとかをやることはせず、ほとんど完全な1人プレイだった。<font color="Blue">他の競プロerと繋がった方が楽しい。</font>
・途中までA,B問題埋めてて、解いてる時は出来てる感があって楽しいけど、それやってもC,Dの正答率は大して上がらないのでA,B埋める時間あったら**C,D**問題やった方が良かった。
・問題のdiffではなくA,B,Cというアルファベットで難しさを判断していた。たまにC問題だけど青diffみたいな問題もあって、そのような問題も一応取り組んでいたけどしっかり理解できてなかった。アルファベットではなくdiffで判断するべき。
・解説みてもイマイチ理解できない時頭の中で何時間も考えてたけど、わからなくてもとりあえずコード書いて、コードの途中の変数を出力してみたりすると理解できたりする。


###<font color="Brown">茶</font>のとき
茶,緑,水diffの問題中心にやった。
使った教材
・競プロ典型90問
・螺旋本
・Atcoder版蟻本

#####しくじり
・途中院試があって精進しなくなったとき、精進しないでコンテストやってもレート上がらなかった。レートを上げるという意味では精進していない時はコンテストやらない方が無難。もちろんコンテストによって定期的にコーディングすることに強制力を持たせる分には良いと思う。ただ、週一とかの頻度でコンテスト出るだけで普段精進しないとそこまで実力は伸びないと感じる。
・DPどっから勉強すれば良いのかわからずとりあえず場当たり的に蟻本に乗ってる問題解いてたけど、アルゴ式だったら段階的にDPのc勉強できるのでアルゴ式とか使って典型からひとつずつ段階的にちゃんと抑えたい。
・<font color="Blue">atcoderの拡張機能入れてなかったが、入れといた方が多方面に便利なので早めに入れた方が良かった。

##これまでやったアルゴリズム

- 単純な全探索
- ビット全探索
- 順列全探索(next_permutation)
- 最大公約数,最小公倍数
- 高速素数判定
- エラトステネスの篩
- 素因数分解
- 約数列挙
- 半分全列挙
- bit全探索
- 二分探索（単純）
- BFS
- DFS
- ダイクストラ法
- ワーシャルフロイド法
- クラスカル法・プリム法
- DP（基本）
- LIS
- Union-Find木
- ModInt(剰余をとる必要がある四則演算やべき乗、nCr、階乗)
- XORの問題


##今後やりたいアルゴリズム
- **<font color="Red">DP（応用）</font>**←最重要
- 累積和
- いもす法
- 尺取り法
- 高速な冪乗計算
- 逆元の利用
- 座圧
- BIT

#終わりに

一応入緑したけど今のレートだと一回でも茶パフォ出すと茶色に戻るので、なんとか緑キープできるように頑張っていきたい。話を聞くところによると、緑から水になるまでが結構大変そうなので頑張る。

やりたいと思ってること
・競プロerの繋がりをもっと広げたい
・１日１AC。精進ツリー作って、streakを稼ぐのをモチベにしつつ、茶色以下diffの問題やっても実力伸びないと思うから、緑~水diffに絞ってやっていきたい。
・とはいえ、今後は研究やKaggleに重きを置こうと思っているからやる頻度は減っていくかも

今後使う教材
・Atcoder版蟻本
・アルゴ式
・競プロ典型90問
・精選100問

#おまけ
参考までにユーザ情報
![スクリーンショット 2021-10-14 19.46.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034202/2aee1478-ce56-4ee4-2bf2-354da0500d8b.png)
![スクリーンショット 2021-10-14 19.49.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034202/29685906-f468-7030-cea3-43da01b6e2f1.png)

![スクリーンショット 2021-10-14 19.49.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034202/77febec7-6cc3-76da-dd6c-a18909668813.png)
vistaでstm32duino

#概要

vistaでstm32duinoやってみた。
STM32F401CCU6買ってみた。


#仕様

|ボード|STM32F401CCU6|
|:--|:--|
|周波数（MHz）|		84
|CPU		|			ARM Cortex-M4
|FLASH（KB）	|		256
|RAM（KB）	|		64
|パッケージ	|		UFQFPN48
|ユニバーサルIO	|	36
|最小動作電圧	|	1.7
|最大動作電圧|		3.6
|16bitタイマ|			6
|32bitタイマ|			2
|モータ制御用タイマ|	1
|12bit ADC	|		1
|12bit ADCチャネル数|	10
|SPI			|		3
|I2S			|		2
|I2C			|		3
|U(S)ART		|		3
|USB OTG FS		|	1

#写真

![i-img600x800-1633238230wb39gk45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/44e35e22-0341-774d-fe1f-08f91845c111.jpeg)

#ピン配置

![STM32F4x1_PinoutDiagram_RichardBalint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d7c286dc-8e82-6923-c948-09308c341f7d.png)


以上。
rspecで ActionView::Template::Error:に遭遇した！

メール送信機能を追加した後に、いつも通りプルリクだして自動テストの結果を待ってた
rspec関連は今回いじってなかったのでエラーの通知がslackに飛んできてびっくりし^^;

<h1>エラー内容</h1>

```
  2) PostProduct valid if post_id is different
     Failure/Error: <p><%= link_to 'クリックして登録を完了する', controller: 'users/confirmations', action: 'create', confirmation_token: @token %></p>

     ActionView::Template::Error:
       Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true
```

exampleは16作っているのですが、出たエラー全てこれでした。

エラーになっているのは、確認メールの中身なので本当に原因がわからなかった

missing hostって書いてあるくらいだからhostがないのでホストを設定するかonly_pathを設定するかしてくださいみたいな感じかな

<h1>解決</h1>

hostは設定していたと思っていたのですが、設定していたのはdevelopment環境だけ！！
rspecを実行するtest環境では設定しなかったことに気づき、


```
config.action_mailer.default_url_options
```

これをtest.rbに設定しましたところ。。。。。

全てのexampleがパスしました！
anaconda でstreamlit コマンド実行できない

<現象>
streamlitコマンドが実行できない
![202110142.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1849793/bb6e52f7-f446-9e89-86c3-0256d4ffa026.jpeg)
<解決方法>
```conda deactivate 
pip uninstall streamlit
conda activate 仮想環境名
pip install streamlit```
リスト型

# 今回の授業資料

<script async class="speakerdeck-embed" data-id="c60b39558a154fca86b23d05221fe6cc" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

:::note info
また本日の授業のサンプルコード (以下で列挙したコードであるarray_sample.pyと次回記事 dic_sample.pyを合算したpython3ファイル) を，まなBOXにアップしています．演習や授業の参考としてご活用ください．
:::

# リスト
複数の値を代入したい時に使用．数字でも文字でも代入が可能．

例えば，名簿を作るとしましょう．

|インデックス番号|0|1|2|
|:-:|:-:|:-:|:-:|
| **値** |alfred|beck|charlie|

```python3:array_sample.py
# 変数名 = [要素0,要素1,要素2, …]
name_array=['alfred','beck','charlie']

# ['alfred','beck','charlie']と出力
print(name_array) 

# 要素0番目に代入されている'alfred'が出力される
print(name_array[0]) 
```

---

### リスト内の要素の上書き　

|インデックス番号|0|1|2|
|:-:|:-:|:-:|:-:|
| **値** |anna|beck|charlie|

要素0番目の'alfred'を'anna'に変えたいときは **「変数の再代入」** のときと同様， **変数名[要素番号]**へ新たに代入したい要素(値)を再代入します．

```python3:array_sample.py
# リスト内の要素の上書き　※変数の再代入と同様
name_array[0]='anna'
print(name_array[0]) # → annaと出力される
```
---

### リスト内の要素の追加　

|インデックス番号|0|1|2|3|
|:-:|:-:|:-:|:-:|:-:|
| **値** |anna|beck|charlie|daisy|

同じリスト内に新しい要素を追加したいときは， **変数名.append(新しい要素/値)** と記述します． 

```python3:array_sample.py
# リスト内の要素の追加　append(追加したい値)
name_array.append('daisy') 
print(name_array) 
#　→ [‘anna’,‘beck’,‘charlie’,‘daisy’] と出力，daisyが追加されている．

```

---

### リスト内の要素の個数を出したい時

リスト内に代入した値/要素の順番は，[要素0,要素1,要素2, …]と0からカウントするのに対し， **要素内の個数は自然数でカウントします**!!

```python3:array_sample.py
##### 先述までのコード #####
# name_array=['alfred','beck','charlie']
# print(name_array) 
# print(name_array[0]) 
# name_array[0]='anna'
# print(name_array[0]) 
# name_array.append('daisy') 
# print(name_array) 
##### 先述までのコード #####

# 上記踏まえ，リストの長さの値を取得　
# 【記法】len(リスト型の変数名)
len(name_array) 
#　→name_arrayのリスト内の要素数を取得,今回は4と出力される．

```

## 書いたコードの実行

**要編集！！！**

コードの実行のためには，多少Linuxコマンドの知識が必要になります．今回は必要最低限のコマンドを使い，徐々に使い慣れるようにしていきましょう！

|コマンド|Mac|Win|
|:-:|:-:|:-:|
| change directory |cd|cd/chdir|

![3_list_dic_16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271604/33388393-89b2-a3ff-571b-42026471d205.jpeg)

## 該当演習箇所

**演習4**
[リストの要素同士の計算](https://qiita.com/hakukikun/items/44036f883ee19c681cf8)

その他の演習一覧は，授業ページの [【演習一覧】 成績評価に関わる演習問題](https://qiita.com/hakukikun/items/ce55fef4fa1ffefb4e6d#%E6%BC%94%E7%BF%92%E4%B8%80%E8%A6%A7-%E6%88%90%E7%B8%BE%E8%A9%95%E4%BE%A1%E3%81%AB%E9%96%A2%E3%82%8F%E3%82%8B%E6%BC%94%E7%BF%92%E5%95%8F%E9%A1%8C) を参照してください．

---
**次の記事「辞書型」へのリンクは[こちら](https://qiita.com/Rumi_Yamaguchi/items/ed30341b6b136d97dfce)から！**
CSS Grid Layout

**グリッドレイアウト**

このレイアウトをGrid Layoutで作ってみました。
![layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630394/58ebd651-2aca-9505-12ed-968ffe702aa7.png)


HTMLはこんな感じです。

```html:HTML
<div class="content">
  <h2>タイトル</h2>
  <p>テキストテキストテキストテキストテキスト</p>
  <img src="img/img.png" alt="">
  <button>ボタン</button>
</div>
<!-- スマホ表示時はボタンを一番下にしたい為、この書き方にしました。 -->
```

CSSはこちら

```css:CSS
.content{
  width: 1200px;
  height: 900px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 3fr;
  grid-template-columns: 400px 1fr;
}

img{
  grid-row: 1 / 5;
  grid-column: 2 / 4;
}
```

説明しやすいようにwidthを1200px、heightを900pxで指定しました。

```
grid-template-rows: 1fr 1fr 1fr 1fr; 
```

こちらは行を4つ作っています。プロパティの中の値の数だけ行を作ります。

:::note info
frは何分割するかを指定する単位で、値を"1fr 1fr 1fr 3fr"にしている為合計して6分割している事になります。
高さが900pxで、ここでは1frは1/6、3frは1/2という事なので　150px 150px 150px 450pxに行が区切られます。
:::

```
grid-template-columns: 400px 1fr;
```

こちらは列を2列に分けて、400pxと1fr(800px)に分けています。


図で表すとこんなイメージ
![gridlayout1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630394/7432b5ad-0891-3095-b272-443c5939dd3c.png)


```css:CSS
img{
  grid-row: 1 / 5;
  grid-column: 2 / 4;
}
```

今回は画像だけ位置の指定をしています。
"grid-row"で何行から何行まで配置するか指定できます。"1 / 5"でRowのグリッド線(ピンク色の線)の1本目から5本目まで指定。
"grid-column"では何列から何列か指定。"2 / 4"でColumnのグリッド線(青色の線)の2本目から4本目まで指定。
![gridlayout2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630394/bd67baac-741b-56a0-b73b-93288a91fe36.png)
こんな感じに配置されます。


先程のHTMLに当てはめるとこんな感じ
![gridlayout3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630394/b59a2cde-6ebf-55a2-52bd-f8634ec52f66.png)

```css:CSS
@media screen and (max-width : 768px) {
  .content{
    display: block;
  }
}
```

これで"display:grid;"が解除され
![layout2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630394/2a7c68bd-6daa-25e0-6a8c-83e836a25070.png)
こんな感じでレスポンシブ対応ができました。
.NETネットワーク2　メモ

参考資料
[.NETネットワーク・プログラミング入門 @IT]
(https://atmarkit.itmedia.co.jp/fdotnet/special/networkprog/networkprog_01.html)

#ネット基礎3
この記事は「[.NETネットワーク1　メモ](https://qiita.com/kohaku-dayo/items/12ceea7b3a13e0687a6f)」の続きです
まだ読んでない人は上記↑の記事を読んでから戻ってきてください🎵

https://qiita.com/kohaku-dayo/items/12ceea7b3a13e0687a6f

####ソケット・インターフェイス
TCP/IPを用いてデータの送受信を行うと、異なるプラットフォーム(WindowsやMacなどのOSのこと)間でも通信することが可能である。
しかし開発する際には通信手順を細かく実装しなくてはならない。
これをより簡単に実装するようにと開発されたのがソケットインターフェース。

ソケットインターフェースを利用することでTCP/IPの具体的な通信手段や仕組みを知らなくても開発者はソケットの仕組みに沿ってプログラムを記述すれば通信を実装することが可能となる。
尚、ソケットインターフェースはAPI(第三者が開発した機能)であるため、TCP/IPを意識して開発を進めるよりは何倍も楽に開発できるような機能が多く実装されているため開発者は通信をよりスピーディーに実装することが可能となります。

.NET(C#の開発環境)ではソケット通信を行うためのクラスが用意されています。
Socketクラス(System.Net.Sockets名前空間)

####.NETネットワーク・プログラミングにおける選択肢
以下はソケット通信、.NETリモート処理、Webサービスからなるネットワーク通信方法である。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1724045/b2670ac9-4386-1b35-d773-9e928721186f.png)
今回使用するのは.NETリモート処理です。
上記の表に書いてある通り、Javaやその他プラットフォームとの通信はできません。
Unity2DのチュートリアルをInputSystemに書き換える(4)

[前](https://qiita.com/DiveMasakazu/items/7018a7ec8b0fefcd90b7)



## EnhancedTouch + LineRenderer
[ここ](https://www.hekeke999.xyz/entry/2019/06/06/163807)参考に指でなぞったところ（というか、始点と現在位置）に線を引きたい。
という事で同じようにしてやってみた。

まずは空のオブジェクトを作って（今回はプレハブ化してみた）、スクリプトをセット。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2081290/4fc7c090-7651-27d4-90bc-d794b6ac26a8.png)

```
void Update()
    {
        // 二本指でタッチは考慮しない。Vector2から3へは自動変換みたいなので気にしない。
        foreach (var touch in Touch.activeTouches){
           switch (touch.phase){
                case TouchPhase.Began:
                    Vector2 cameraPosition1 = touch.screenPosition;
                    startPos = Camera.main.ScreenToWorldPoint(cameraPosition1);

                    //ラインの起点設定
                    renderer.positionCount = 1;
                    renderer.SetPosition(0, startPos);

                    break;
                case TouchPhase.Moved:
                    Vector2 cameraPosition2 = touch.screenPosition;
                    pos = Camera.main.ScreenToWorldPoint(cameraPosition2);
                    rendererPositions=true;
                    break;
                case TouchPhase.Ended:
                    renderer.positionCount = 0;
                    rendererPositions=false;
                    break;
           }
           
        }

        // 元のマウスの方も微妙に修正
        if (Input.GetMouseButtonDown(0))
        {
            //タッチ位置取得
            Vector3 cameraPosition = Input.mousePosition;
            cameraPosition.z = 10.0f;
            startPos = Camera.main.ScreenToWorldPoint(cameraPosition);

            //ラインの起点設定
            renderer.positionCount = 1;
            renderer.SetPosition(0, startPos);
        }
        else if (Input.GetMouseButton(0))
        {
            //タッチ位置取得
            Vector3 cameraPosition = Input.mousePosition;
            cameraPosition.z = 10.0f;
            pos = Camera.main.ScreenToWorldPoint(cameraPosition);
            rendererPositions=true;
        }
        else if (Input.GetMouseButtonUp(0))
        {
            renderer.positionCount = 0;
            rendererPositions=false;
        }

        // ラインレンダラーに座標を設定し線を描画
        if (rendererPositions)
        {
            renderer.positionCount = 2;
            renderer.SetPosition(1, pos);
        }
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2081290/17365e61-b4e1-436c-7bf0-9acf887d262c.png)

とりあえずタッチ操作もある程度出来たので満足
Github ActionsでMySQLが文字化けした場合の対応

## 概要
Github ActionsでMySQLを使ったテストを書いたが文字列のassertの際に文字化けでエラーになってしまった。
そのため、Github ActionsでMySQLを使う場合に文字コードをUTF-8にする方法を書きました。

## default mysql と mysql-action について
Github Actionsがデフォルトで用意しているmysql（default mysql） は、
charasetの変更ができず、テスト時の文字列比較でエラーになってしまうので、[mysql-action](https://github.com/mirromutth/mysql-action) を使用しました。

**例. default mysql の場合、charset =latin1 になってしまう**

```
jobs:
  test:
    name: Test
    runs-on: ubuntu-latest
    services:
      mysql:
        image: mysql:5.7
        ports:
          - 3306:3306
        env:
          MYSQL_ROOT_PASSWORD: root
        options: --health-cmd "mysqladmin ping -h localhost" --health-interval 20s --health-timeout 10s --health-retries 10
    steps:
      - name: show charset
        run: |
          mysql -h 127.0.0.1 --port 3306 -uroot -proot -e "show variables like 'chara%'"
```

**↓ 結果**

```
Variable_name	Value
character_set_client	latin1
character_set_connection	latin1
character_set_database	latin1
character_set_filesystem	binary
character_set_results	latin1
character_set_server	latin1
character_set_system	utf8
character_sets_dir	/usr/share/mysql/charsets/
```

これだと charset が latin1 のため、文字列のassertでエラーになってしまう
※ docker のように `command` で設定できません

**例. mysql-action の場合、charsetを指定可能**

```
jobs:
  test:
    name: Test
    runs-on: ubuntu-latest
    steps:
      - name: Setup mysql-action
        uses: mirromutth/mysql-action@v1.1
        with:
          host port: 3306 # Optional, default value is 3306. The port of host
          container port: 3306 # Optional, default value is 3306. The port of container
          character set server: 'utf8' # Optional, default value is 'utf8mb4'. The '--character-set-server' option for mysqld
          collation server: 'utf8_general_ci' # Optional, default value is 'utf8mb4_general_ci'. The '--collation-server' option for mysqld
          mysql version: '5.7' # Optional, default value is "latest". The version of the MySQL
          mysql database: 'test_db' # Optional, default value is "test". The specified database which will be create
          mysql root password: 'root' # Required if "mysql user" is empty, default is empty. The root superuser password
      - name: show charset
        run: |
          sleep 30
          mysql -h 127.0.0.1 --port 3306 -uroot -proot -e "show variables like 'chara%'"
```

**↓ 結果**

```
Variable_name	Value
character_set_client	utf8
character_set_connection	utf8
character_set_database	utf8
character_set_filesystem	binary
character_set_results	utf8
character_set_server	utf8
character_set_system	utf8
character_sets_dir	/usr/share/mysql/charsets/
```

utf8になった

## MySQLのrootユーザーのパスワードについて
docker の mysql の場合、`MYSQL_ALLOW_EMPTY_PASSWORD` で指定することで root のパスワードを空にできますが、
mysql-action では、root のパスワードを空に設定できませんでした。
参考:
https://github.com/mirromutth/mysql-action/issues/13
https://github.com/mirromutth/mysql-action/issues/17

ちなみに default mysql の場合の root のデフォルトパスワード は、`root` です

## ローカルPCでGithub Actionsを試したい
act を使うことで可能
下記を参考にインストール
https://github.com/nektos/act

リポジトリに`repo/.github/workflows/test.yml`がある状態で下記を実行

```
cd repo
act pull_request
```

※ default mysqlやdefault で用意されている aws cli などは、動きません。
ABC149 C - Next Prime を解いた

https://atcoder.jp/contests/abc149/tasks/abc149_c

![abc149_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/444aa97d-15c9-3c53-beb7-6d9c5c42f4e1.png)
![abc149_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/1f88c16f-b71c-2011-2fac-0bb18daacb26.png)

素数判定ってなんだっけ？
過去の自分に聞いてみた。

https://qiita.com/AKpirion/items/f827b85de976dcd1678e

ok なるほど。
以下で通った。

```abc149c.py
X = int(input())

def judge(n):
    from math import floor
    for i in range(2,floor(n**0.5)+1):
        if n%i == 0:
            return False
    return True

for j in range(1000):
    if judge(X+j):
        print(X+j)
        exit()

```
【Nuxt.js】axiosを使った非同期通信

#はじめに
こんにちは。
こちらの記事では、axiosで非同期通信を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

##axiosとは
axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントで、HTTP通信を行いたいときに使うと簡単に実装できるようになる。Nuxt.jsに限らず、JavaScriptで使えるライブラリです。

##実装のゴール
非同期通信で受け取ったデータのIDとユーザー名を表示させる。

###axiosをインストールする

Nuxtで新規プロジェクトの作成する際や個別でインストールできる。
axiosのインストールがされていると、`package.json`の`dependencies`のところにバージョンが表示される。

###APIからデータを取得する
今回は`JSONPlaceholder`のusersデータを使用する。

```javascript:script
<script>
const axios = require('axios')
// import axios from 'axios';　　でも定義できる。

const url = 'https://jsonplaceholder.typicode.com/users'

export default {
  asyncData({ params }){
    return axios.get(url)
    .then((res) => {
      return { users: res.data }
    })
  }
}
</script>
```
axiosをいつでも使える状態に定義しておき、URLも変数に入れておく。
`asyncData`は、コンポーネントをロードする前に非同期の処理を行えるNuxt.jsのメソッドです。
`axios.get`でAPIのデータを取得し、`res`にサーバーからのデータが格納される。`users`と名前をつけることで呼び出しやすくしておく。

```html:template
<template>
  <div>
    {{ users[0] }}
  </div>
</template>
```
axiosで受け取ったAPIのデータを、マスタッシュ構文で１件分表示する。

<img width=“200” src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966101/b77e815c-5873-40da-638b-4936072ec466.png">


###async, awaitで置き換える
axiosはPromiseベースのHTTPクライアントなので、先ほどのscriptの記述をasync, awaitで書き換えることができる。

```javascript:script
<script>
const axios = require('axios')
const url = 'https://jsonplaceholder.typicode.com/users'

export default {
  async asyncData({ params }){
    const res = await axios.get(url)
      return { users: res.data }
  }
}
</script>
```
先ほどと同じ処理結果が得られる。

###IDとユーザー名を表示
IDとユーザー名を表示を表示させるために、template側の記述を書き換える。

```html:template
<template>
  <div>
    {{ users[0].id }}：{{ users[0].name }}
  </div>
</template>
```
<img width=“200” src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966101/2c4e764e-f32e-ccc9-71c3-c0976e807d36.png">
このように表示されれば完了です。

<br>

#おわりに
ここまでaxiosを使った非同期通信についてまとめました。
非同期については完全な理解がまだできていないので、引き続き復習を進めていきます！
以上、最後まで読んでいただきありがとうございました！
【Laravel8】マイグレーションで既存のテーブルにカラムとデータを追加する

## 概要

既に作成済みのテーブルへカラムを追加し、データまで入れる機会があったのでまとめます。
データの投入といえばシーダーが一般的かと思いますが、追加するカラムへどのようなデータが投入されるのかをマイグレーションファイルのみで確認できるため、今回はこの方法を採用しました。

## 想定

- リリース済みのサービスへの改修依頼
- 並び順カラム(sort_id)を追加し、1,2,3・・・とデータを挿入する

## 環境
- Laravel 8.24.0

## マイグレーションファイル

```
<?php

use App\Models\Post;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Schema;

class Modifyposts20211013 extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        // sort_idカラムの追加
        Schema::table('posts', function (Blueprint $table) {
            $table->unsignedInteger('sort_id');
        });

        // カテゴリなしのsort_idを指定

        // Postレコードの追加
        $postRecord = [
            'name' => '投稿1',
            'sort_id' => 0,
        ];
        DB::table('posts')->insert($postRecord);

        // 既存のカテゴリレコードを取得
        $posts = Post::oldest('id')->get();

        $counter = 1;

        // 既存のカテゴリレコードへsort_idの追加
        foreach ($posts as $post) {
            if($post->name === '投稿1') {
                continue;
            }
            $post->sort_id = $counter;
            $post->save();

            $counter++;
        }
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        // Postレコードの削除
        DB::table('posts')->where('name', '投稿1')->delete();

        // sort_idカラムの削除
        Schema::table('posts', function (Blueprint $table) {
            $table->dropColumn('sort_id');
        });
    }
}

```

## 解説
### use App\Models\Post;について
```
use Illuminate\Support\Facades\DB;

$users = DB::table('users')->get();

foreach ($users as $user) {
    echo $user->name;
}
```
上記はマニュアルの日本語訳サイトにあるものです。DBファサードを使用して既存のレコードを取得することはできるのですが、$userはstdClassオブジェクトのインスタンスとなるため、saveメソッドやupdateメソッドが使用できずエラーが発生します。そのためuse App\Models\Post;　を使用し既存レコードをコレクションとして取得してデータを保存しています。

投稿1の追加など、レコードを1件挿入する際はDBファサードを使用して簡単に行うことができます。

### down()メソッドについて
```
// Postレコードの削除
DB::table('posts')->where('name', '投稿1')->delete();
```
downメソッドには追加したレコードの削除も書いておきます。
この記述がないとロールバックした際に追加したレコードが削除されないため注意です。
Slackみたいなドロワーを作る

個人開発でSNSアプリを作っているのですが、グループ（以下コミュニティとする）機能を実装する際にSlackのワークスペースを選択するような実装にしたいと思い取り掛かりました。
## 目指すもの
以下の様にドロワーでワークスペース一覧&選択ができるようにしたい。
とくに可視性を考慮して、【大きな角どりアイコン（正方形）】＋【名前】のリストタイルを実現したい
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2058516/3289eaf9-5beb-f079-51fa-a923d44945a9.jpeg" width=200>


## 実装
ドロワーの部分はListViewを子に持つColumnで簡単に実装できる。
肝心はListViewで返すセルWidgetでした。
以下の様にListTileでは、画像が横長になってしまいうまくできませんでした。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2058516/1667eb86-4379-5448-296a-b1f780b6114e.png" width=200>


~~~Dart:失敗
Widget build(BuildContext context) {
    return ListTile(
      leading: SizedBox(
        child: Container(
          height: MediaQuery.of(context).size.width * 0.2,
          width: MediaQuery.of(context).size.width * 0.2,
            child: ClipRRect(
                child: Image.network(
                  communityImageUrl,
                  fit: BoxFit.cover,
                ),
              borderRadius: BorderRadius.circular(8),
            ),
        ),
      ),
        title: Text(
          communityName,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white
          ),
        )
    );
  }
}
~~~
恐らく、リストタイルのleadingプロパティに指定できるWidgetの最大サイズを超えているのだと思われます。

ListTileを止めて、自作で作ることにしました。以前お世話になったインターンのエンジニアも“ListTileはつかわないほうが自由が利く”とおっしゃっていましたし、なるべく自分で作ったほうがいいのかもしれません
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2058516/b5efbb43-2195-9a13-2ac2-e77425635e61.png" width=200>

~~~Dart:解決
  Widget build(BuildContext context) {
    return Row(
       children: [
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Container(
             height: MediaQuery.of(context).size.width * 0.2,
             width: MediaQuery.of(context).size.width * 0.2,
             child: ClipRRect(
               child: Image.network(
                 communityImageUrl,
                 fit: BoxFit.cover,
               ),
               borderRadius: BorderRadius.circular(8),
             ),
           ),
         ),
         Text(
           communityName,
           style: TextStyle(
               fontWeight: FontWeight.bold,
               fontSize: 20,
               color: Colors.white
           ),
         )
       ],
    );
  }
}
~~~
GoogleのWebRTC Androidをビルドする


GoogleのWebRTC Androidをビルドする機会があり、所々つまづいたので残しておきます。

参考URL
https://webrtc.googlesource.com/src/+/main/docs/native-code/android/index.md

## 1.Ubuntu Linux環境の構築

VirtualBoxにUbuntuを導入する手順はよく転がっているので、詳細は割愛します。

### 仮想環境の構築
ビルド環境はLinuxのみがサポートされているので、私の場合はMacにVirtualBoxをインストールしUbuntu Linuxの環境を構築しました。
注意点としては、まずストレージのサイズですがデフォルトの(確か)10GBだと小さすぎるので64GBのストーレジを割り当てたことと、ビルド速度に影響するCPUの個数も4個割り当てました。１個だとビルド時間がかなり長くなります。メインメモリも8GB割り当てました。

### Ubuntu Linuxのインストール
Ubuntuは言語を日本語でインストールすると画面にウインドウが収まらなくてボタンが押せなかったので言語をEnglishで最小構成（Minimal installation）インストールしました。Englishならギリギリボタンが押せます。
800x600のサイズで画面が始まるので文字が小さいけど頑張ってインストール。
インストール後はSettings -> Display からいい感じの大きさに変更しました。
あとソースのダウンロードなど結構時間がかかるのでSettings -> Power SavingでBlank ScreenをNeverにして画面にロックがかからないようにしました。

## 2.Chromium depot toolsをインストールする
AppRTCをビルドする時に利用するコマンドが使えるようにUbuntu LinuxにChromium depot toolsをインストールします。

- UbuntuでTerminalを起動します

### gitのインストール
gitが入っていなかったのでインストールします

```
$ sudo apt install git
```

### Chromium depot toolsのソースを取得
適当なところにディレクトリを作って

```
$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
```

### パスを通す

```
$ export PATH=/home/atsuo/Source/depot_tools:$PATH
```

## 3. webrtc_androidのビルド

gccを使うのでインストールしておく

```
$ sudo apt install gcc
```

適当なところにディレクトリを作成して

```
$ fetch --nohooks webrtc_android
$ gclient sync
```
↑結構時間がかかります。
<font color="Red">2012/10/14時点のソースだとdebugビルドすると通話切断時にクラッシュする問題があるのでreleaseビルドします</font>

ビルド！！

```
$ cd src
$ gn gen out/Release --args='target_os="android" target_cpu="arm64" is_debug=false'
$ autoninja -C out/Release AppRTCMobile
```

out/Release/apks/AppRTCMobile.apk
↑
apkファイルができているのでスマホにインストールして
https://appr.tc/　
→いつからかアクセスできなくなったので自身でホスティングしないといけない

とスマホとブラウザ間でビデオ通話できます。
Macのメモアプリに入力した『""』『''』『--』が『””』『‘’』『—』に自動置換されてしまう現象の解決

#前置き
Appleの純正メモアプリ、使っていますか？
端末を跨いだiCloud同期が便利で、私はちょっとしたメモやスクリプトを置いておくのに使っているのですが、
『"』（ダブルクォーテーション）や『'』（シングルクォーテーション）を含む文字列を入力（コピペ）した際に、これらが勝手に『””』や『‘’』に変換され、毎度ウッ……となってしまっていたので解決方法をここに記します。

#解決したい現象
* 『""』（ダブルクォーテーション囲い）が『””』に自動置換される
* 『''』（シングルクォーテーション囲い）が『‘’』に自動置換される
* 『--』（ハイフン）が『—』（ダッシュ）に自動置換される

#なぜ置換が起きるのか
自動置換機能「スマート引用符」「スマートダッシュ」が原因です。

>Macで書類のテキストと句読点を置き換える
>https://support.apple.com/ja-jp/guide/mac-help/mh35735/mac
>> スマート引用符とダッシュを使用する
>> ストレート引用符をタイポグラフィで使用する引用符（丸い引用符記号）に、2つのハイフンを自動的にemダッシュに変換します。



#解決方法
メモアプリの「スマート引用符」「スマートダッシュ」をオフにしましょう

#設定方法
　上部メニューの[編集]→[自動置換]→[スマート引用符]と[スマートダッシュ記号]のチェックを外す
　
#余談
システム環境設定の「キーボード」内「ユーザ辞書」にも自動置換機能の設定があります。
気になる方はこちらもオフにしておきましょう。
ABC148 C - Snack を解いた

https://atcoder.jp/contests/abc148/tasks/abc148_c

![abc148_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/c8e89f69-4ce2-e867-8f05-0ca6509abf96.png)
![abc148_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/6d01b161-2680-5fb0-dd30-ac86ab42bcb7.png)

最小公倍数ってどうやって求めるんだったか、調べた

https://note.nkmk.me/python-gcd-lcm/

以下で通った。

```abc148c.py
a,b = map(int,input().split())
from math import gcd

print( (a*b)//gcd(a,b) )
```
VSCodeの拡張機能"commandvariable"がまあ便利なので紹介


# Command Variableが便利

https://marketplace.visualstudio.com/items?itemName=rioj7.command-variable

vscodeの拡張機能であるcommandvariabeがとても便利だけど日本語記事が見当たらなかったのでメモ。

## IntelliSenseが効かない

慣れないC++を書いていていつもIntelliSenseに頼りまくっていたのですが、あるときからIntelliSenseが正しく機能しなくなりました。
ワークスペースとvscode内のC++設定ファイルの例です。[^1]

* ワークスペース

```
workspace
├─ .vscode
│  ├─ c_cpp_properties.json
│  └─ settings.json
├─ build
│  ├─ ...
└─ src
   ├─ package_A
   │  ├─ CMakeLists.txt
   │  ├─ LICENSE
   │  ├─ README.md
   │  ├─ include
   │  │  └─ utility.h
   │  └─ src
   │     ├─ program_A.cpp
   │     ├─ program_B.cpp
   │     └─ program_C.cpp
   └─ package_B
      ├─ CMakeLists.txt
      ├─ LICENSE
      ├─ README.md
      ├─ include
      │  └─ utility.h
      └─ src
         ├─ program_A.cpp
         ├─ program_B.cpp
         └─ program_C.cpp
```

* c_cpp_properties.json

```json
{
  "configurations": [
    {      
      "includePath": [
        "/usr/include/**",
        "${workspaceFolder}/**/include/**"
      ],
    }
  ],
  "version": 4
}

```

例えば、package_Bのコードを開発しているとき、`includePath`の設定を上のようにしていると、ヘッダファイル(`include/utility.h`)がpackage_Aのそれとして認識されてしまうことがあります。おそらく名前順で最初にヒットしたものを読み込んでいるのだと思います。

package_Bの開発をしているときに、`includePath`の一番上に`"${workspaceFolder}/package_B/include/**"`のように書けば解決はするのですが、開発するパッケージごとに設定を変えるのは面倒だなあと思っていたところでこの拡張機能を見つけました。

## Command Variable

ひとことでいうとvscodeの設定ファイル内で使える変数が増える拡張機能です。

`${workspaceFolder}`は馴染み深いと思いますが、Command Variableを使うとより細かい設定ができるようになります。

https://marketplace.visualstudio.com/items?itemName=rioj7.command-variable

## 使い方

先ほどのIntelliSenseが効かない問題ですが、**今開いているファイルの親ディレクトリのパス**が取得できれば解決できそうです。

vscode標準で現在開いているファイルのディレクトリが格納される`${fileDirname}`という変数があり、一見相対パスで指定できそうですが、残念ながら相対パスには対応していないようです。[^2]

```
# これはNG
"${fileDirname}/../include/**"
```

そこで、Command Variableを使います。`extension.commandvariable.file.fileDirname1Up`というコマンドを使えば、現在開いているファイルの親ディレクトリのパスを取得できます。`${command:extension.[拡張機能名]...}`という形で呼び出すことができます。

```json
{
  "configurations": [
    {      
      "includePath": [
        "${command:extension.commandvariable.file.fileDirname1Up}/include/**",
        "/usr/include/**",
        "${workspaceFolder}/**/include/**"
      ],
    }
  ],
  "version": 4
}
```
これで現在開いているファイルのIntelliSenseが正しく機能するようになりました。
ちなみに、親ディレクトリは5階層まで遡れるようにコマンドが用意されています(`extension.commandvariable.file.fileDirname5Up `)。

## おわりに

もちろんtasks.jsonやlaunch.jsonにも使えるので使いこなせばかなり便利になりそうです。

[^1]: ROSのワークスペースの例なのでこのような構成になっています
[^2]: ここのissueで言われています。[Do we have any Variable that give me Parent Folder of a File?](https://github.com/microsoft/vscode/issues/95542)
Mikan OSの勉強メモ(1章)

## 背景

OSの勉強がしたくてMikanOSの本を購入した。実際に手を動かして学べる部分が多いテキストだが読むだけの部分も多いので、自分なりにその辺を文章の形でまとめることにした。

## OSを作りたい

極論でいえばファイルの全てはバイナリから構成されている。OS自体もファイル、つまりバイナリから出来ているのだからバイナリエディタでOSも作成できる(すごい)。

### 作ったのかOS

今回バイナリエディタでパチパチ作成したのはEFIファイルと言われるもの。
EFIはExtensible Firmware Interfaceの略で、ブートローダ(OSをメインメモリに読み込んで起動させるプログラム)の機能を呼び出すファイルとなっている。
今回はUEFI BIOSという規格上で動くブートローダとしてEFIファイルを作成した。

## OSを起動させたい

### OS起動用USBの作成

今回はUSBからOSの起動を行った(物理ではなく仮想的に)。作成手順は以下。

```
qemu-img create -f raw disk.img 200M
mkfs.fat -n 'Mikan OS' -s 2 -f 2 -R 32 -F 32 disk.img
mkdir -p mnt
sudo mount -o loop disk.img mnt
sudo mkdir -p mnt/EFI/BOOT
sudo cp made.EFI mnt/EFI/BOOT/
sudo umount mnt
```

詳細は以下のようになる。
`qemu-img create -f raw disk.img 200M`

qemu-img create -f rawでraw形式のイメージ(disk.img)を作成している。200Mはイメージのサイズ(200MB)。

`mkfs.fat -n 'Mikan OS' -s 2 -f 2 -R 32 -F 32 disk.img`

作成したdisk.imgのフォーマットを行う。ファイルシステムはFATを使用。
オプションはFAT固有の値?(よくわからない)

`mount -o loop disk.img mnt`

イメージをマウント(フォーマット済みの領域に対し他のディレクトリからアクセスを行えるよう設定を行う)する。今回は作成したmntディレクトリをdisk.imgと結びつける。
その後`mnt/EFI/BOOT/`ディレクトリを作成し、EFIファイルをそのディレクトリ配下に置く。

`sudo umount mnt`

マウント後はディレクトリをアンマウントする。

### 起動方法

(物理媒体を使っているならば)EFIファイルの保存されたUSBをPCに挿して電源を入れることでOSが起動する。上記のように仮想的にイメージを作成した場合はQEMUでOSを起動させることも可能である。

PC内のファームウェアといわれるプログラムが、OSをストレージ(2次記憶装置)からメインメモリ(主記憶装置)へと読み出す役割を担っている。

今回はUEFIというファームウェアが実行可能なEFIファイルを作成している。

## C言語で作って起動しよう

### C言語で作る場合

本来はEFIファイルをバイナリ直打ちで作成することはない。
今回作成したファイルも本来はC言語で作成されたものとなっている。

流れとしては、C言語で書かれたファイルをコンパイル(CPUが実行できるように機械語に翻訳)してオブジェクトファイルを作成し、その後リンクという作業を行うことで複数のオブジェクトファイルをまとめて1つのEFIファイルを作成する。

### 実行可能ファイルの形式について

C言語で書かれたファイルをコンパイルする形式としてはCOFF形式やELF形式などが存在する。今回はリンクの際にCOFF形式が要求されるため、C言語で書かれたファイルをCOFF形式でコンパイルされている。
COFFファイルをリンクすることでWindows標準のPE形式の実行可能ファイル(EFI)が得られる(本来はWindowsでのPEとUEFIのPEでは異なる部分がある)。

実行可能ファイルの形式としては他にもLinux標準であるELF形式などが存在する。
ELFは実行可能ファイルでもありながら、オブジェクトファイルとして表現されることも可能な形式となっている。
ABC145 C - Average Length を解いた

https://atcoder.jp/contests/abc145/tasks/abc145_c

![abc145_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/49e529db-f25d-9cbf-9b67-ca3cb5e5fd0e.png)
![abc145_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/8b6c11dc-637d-fae0-98ce-bcf6ce68c89b.png)
![abc145_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/6057f587-2112-fa20-4f68-21a3a6b2d94a.png)

N が max 8 と小さいから
floating で平均を求めても問題ないのでは？
以下で通った。

```abc145c.py
N = int(input())
lis = []

for i in range(N):
    x,y = map(int,input().split())
    lis.append([x,y])

from itertools import permutations
cnt = 0
score = 0
for num in permutations(range(N),N):
    cnt += 1
    num = list(num)
    #print(num)
    for i in range(N-1):
        #print(lis[num[i]], lis[num[i+1]])
        x = lis[num[i]][0]-lis[num[i+1]][0]
        y = lis[num[i]][1]-lis[num[i+1]][1]
        score += (x**2 + y**2)**(0.5)
        #print(score)
    #print()

print("{:.6f}".format(score/cnt))

```
ifLinkにサイコロIMSが新たに追加になりました。

#はじめに
ifLinkマイクロサービスを開発している八教と申します。

新たに３つのサイコロ出目及び出目の合計を取得し、ifLinkに通知するIMSが追加されましたので、
紹介させていただきます。

#ifLinkとは
https://iflink.jp/

#サイコロIMSとは
３つのサイコロの出目、または出目の合計をifLinkのIFとして設定できます。
例えばIF条件をサイコロ出目の10以上とし、サイコロを振って10以上が出た場合に「あたり！」をトーストメッセージIMSで表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/2172fb35-9f3f-ce00-fe3e-ca9c86458260.png)

#サイコロで遊ぶまで
サイコロで遊ぶまでに以下の準備が必要です。
１.IAIIMSをインストールする
　 IAIIMSはサイコロIMSとifLinkをつなげる為に必要です。
　 以下リンクよりインストールしてください。
　 https://dev.iflink.link/


２.SaicoroIMSをインストールする
　 さいころゲーム本体で、以下リンクのReleasesのSaicoroGame.apkをダウンロードしてください。
　 https://github.com/ifLinkOpenCommunity/SaicoroIMS

３.ルールを作成・配信する
　 IF条件で「Saicoro-Game-ToifLink」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/10bca079-1d3f-de04-7c38-5f07e51fbdfb.png)
　条件は以下の通りです
　①.サイコロの目が設定通りなら
　　 ３つのサイコロの出目が設定した値と一致したらTHENが起動します
　　 出目の順番はサイコロを振った順（ランダムで振られます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/d5d45518-4d91-25ce-f0b4-9d5e627f6844.png)

　②.サイコロの目の合計値が設定通りなら
　 　３つのサイコロの出目の合計値が設定した値と一致したらTHENが起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/4ce0bdd9-aeeb-595f-64b9-7b6b3726e664.png)

　➂.サイコロの目の合計値が設定以上なら
　 　３つのサイコロの出目の合計値が設定した値以上ならTHENが起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/699d9a3d-b1ec-8fa0-b951-e6d2d2a33bc6.png)

　④.サイコロの目の合計値が設定以下なら
　 　３つのサイコロの出目の合計値が設定した値以下ならTHENが起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/aa6891fa-0add-cc72-7762-98126afaf35b.png)

４.SaicoroGameで遊びましょう！
　 以下アイコンをタップしてサイコロゲームを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/55a12d51-a2f5-4df7-d7e6-59d4902c1a57.png)

起動すると何も表示されていない画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/c51e26f7-2207-20ad-39b2-ae39a835abf9.png)

画面をタップするとサイコロが振られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/dbb39e91-b015-f6e4-9e62-7b777fc64458.png)

サイコロの動きが止まると出目が確定します。
確定した出目と出目の合計がトーストで表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/65342f72-2b97-2941-0d01-98a01fd49266.png)

IFで設定した条件に合致するとTHENが起動しトーストメッセージ「あたり！」が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780474/8634f329-09fe-e1c4-45df-98f66319cf27.png)

是非お試しいただければと思います。


【検証端末】
　Pixel 4a XL   Androidバージョン11
　Oppo A5 2020  Androidバージョン10
エンジニア志望者が面接で必ず聞かれる「自己紹介」について

<h2>経緯</h2>
転職活動をするに当たっていくつか企業の面接を受けるうちに、面接では必ず「自己紹介してください。」と言われることがわかった。しかし冷静に考えて、「別に語るほどの者じゃねーし。」と考える方も中にはいらっしゃるのではなかろうか。かくいう私がその一人である。面接になると何を話したら良いのかさっぱり分からなかった。面接官側からしたら、「自己紹介もできない人と一緒に働きたくはないし、この人何しにきたんだろう...」というような感想を抱くかもしれない。
そこで私なりに、評価が得られる自己紹介について、ノウハウをまとめてみた。

<h2>自己紹介の例</h2>
今年２６歳になります○○と申します。
本日は面接の面接の機会を頂きありがとうございます。
４月から本格的にプログラミング学習を始めて、最近ではもくもく会の主催や実務案件に携わりました。
８月に行われた○○のプログラミングコンテストにおいて、オーディエンス賞を獲得しました。
本日はどうぞよろしくお願いします。

簡潔で無駄がない自己紹介だと思う。簡単に学習歴を述べているだけでなく、面接官にお礼を述べている。また、コンテストでの受賞歴にさらっと触れており、優秀であることが窺える。もう少し詳しく見ていこう。

<h2>解説</h2>
ここで志望者が述べたことをカードに例えて、主張を言い換えてみようと思う。
「４月から学習を始めて現在のアウトプットがあること。」、「もくもく会を主催していること。」、「コンテストでの受賞歴があること。」これら３枚の手札を所有しており、この３枚からなら何を聞かれても答えられますよ、という意思表示をしているのだ。
面接官からも、志望者に失礼のないように質問をすることになるが、何もとっかかりがない状態では質問のしようがない。面接官は限られた時間の中で印象に残ったカードに関して質問を行い、志望者が「聞かれた質問を」、「過不足無く」、「適切に答えられているか」評価する。

<h3>例１）「もくもく会を主催していたんですね。メンバーはどうやって集めたんですか？」</h3>
注目したいのはここでは志望者が切ったカードについて質問がされていることである。全く脈絡のない質問はされない。

悪い例
「インターネット上で初学者のコミュニティがあることを知りました。slackで継続して情報交換を行い、企業情報を共有しました。」

どうだろう？面接官は気絶してしまうかも知れない。なぜなら聞かれた質問に答えていないのである。メンバー収集の手段を聞かれたのに、回答は募集の経緯と内容である。私は業務上でもコミュニケーションコストをかけまくり、御社に損失をもたらしますよ！とアピールしているようなものだ。聞かれたことに適切に答えるならこうであろう。

良い例
「connpassで未経験エンジニア向けのセミナーが開かれ、その参加者に応募をかけました。」

これなら簡潔に、聞かれた内容に対して受け答えができている。実務に入ってもストレスのないコミュニケーションが期待できるだろう。

<h3>例２）「コンテストでの受賞歴があるんですね。他にどんな参加者がいたんですか？」</h3>

悪い例
「zoom会議でそれぞれ発表をしたのですが、緊張で何も覚えていません。」

これは微笑ましいが、受け答えとしては落第である。面接官との間にはコンテストについて聞かれたらなんでも答えますよと暗黙の了解があるのに、聞かれた内容について答えられていないからである。こう言われると言われた方には疑問が生じてしまう。「こいつ、そもそもなんでその話出したん？」

良い例
「他には託児所と依頼主をマッチングさせるサービスを実運用されている方がいて、デプロイにDocker、インフラにはAWSを使用していました。」

簡潔に答えられている。及第点である。技術面に関してさらに深掘りしていくことも期待できる。聞かれた内容について結論から答えることを常に意識しないといけない。それができないなら、自己紹介の時点でカードを切るべきではないのだ。

<h2>まとめ</h2>
自己紹介は「私が切れるカードはこれですよ。これについてだったら、なんでも聞いてくださいね。」という意思表示をしていること。その意思表示に対して、面接官は質問をしていくこと。聞かれた内容には結論ファーストで過不足なく答えることが重要である。緊張してついつい忘れがちになるが、常に頭の片隅に置いて、面接に臨みたい。
Sync Gateway機能解説：同期メカニズム概要

## Couchbase Liteデータベースの同期

Sync Gatewayを使用して、Couchbase LiteアプリのデータベースをCouchbase Serverと同期し、アプリケーション間で共有することができます。


Couchbase Liteクライアントアプリケーションは、Replicatorプロセスを使用して、ローカルデータベースをSync Gatewayデータベースを介してリモートCouchbase Serverデータベースに同期します。


図1.クラウド/サーバーとエッジとの同期
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/7065a3c3-0b98-edfa-c106-48ad9475c1f5.png)


#### プルレプリケーション
これは、Couchbase Liteデータベースを実行しているクライアントがリモート（サーバー）ソースデータベースからローカルターゲットデータベースにデータをダウンロードするプロセスです。

#### プッシュレプリケーション
これは、Couchbase Liteデータベースを実行しているクライアントがローカルソースデータベースからリモート（サーバー）ターゲットデータベースにデータをアップロードするプロセスです。


## より複雑な同期

サーバーを介して、モバイルアプリケーション間で、データを共有するのは、（はじめのステップとして）理解しやすいところですが、Couchbase Serverのデータベースは、モバイルアプリを前提としなくとも、独立して利用することができるため、他の種類の（例えばWeb）アプリケーションともデータを共有することが考えられます。

### 同期メカニズム
ここでは、「共有バケットアクセス」と「インポート処理」という2つのメカニズムが重要な役割を演じます。

- 共有バケットアクセス: これは、Couchbase ServerのSDKアプリケーション、N1QLクエリ、とSync Gateway/Couchbase Liteアプリケーションが同じバケットに対して同時に読み取りと書き込みを行えるようにするメカニズムです。

- インポート処理： Sync　GatewayがSync　Gateway以外のデータの変更を認識し、それらの変更を複製するために必要なメタデータを作成するメカニズムです。

### 共有バケットアクセス

バケット共有を有効にすると、Couchbase ServerドキュメントをCouchbase Serverに対して、直接（N1QLまたはSDKを使用して）挿入するだけでなく、Sync Gateway（パブリックREST　API）を使用して挿入することができるようになります。


### インポート処理

インポートプロセスは、Sync GatewayがSync Gateway以外のデータの変更を認識し、変更を複製するために必要なモバイルメタデータを作成するための手段です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/fa9822d2-c785-668a-8e39-3d8975b4f085.png)


## 参考情報

https://docs.couchbase.com/sync-gateway/current/sync-with-couchbase-server.html
プロジェクトとは

<h3>プロジェクトとは</h3>
<p name="EImx4">例えば、雪が降った放課後、みんなでかまくらをつくるとしたら、それはプロジェクトといえるでしょう。夕方5時までと期間があり、かまくらをつくるという目標があり、そこにいる人たちがいて、低学年は軽い雪を運ぶ、高学年は重たい雪を持ち上げるなど分担やルールがあり、どの場所にどうつくるのがいいか考える設計もあるからです。</p><p name="fTbLf">プロジェクトの目標が達成されるというのはどういうことでしょうか。上記の例ではかまくらが完成することです。</p><p name="ntvwg">プロジェクトというのはずーっと違うことをしていることは少なく、ひたすらに雪を集める期間や、ひたすらに組み上げる期間などでは、繰り返し同じことをするケースもあります。これを反復的な要素といいます。この中で、やり方に工夫が生まれ、チームに知見がたまるわけですね。また、何かをしている期間のことをフェーズと呼びます。フェーズというもので区切ることで、その中でやることを限定して考えられるので、特に作るのが大変なものなんかの場合には、フェーズに区切ってそこでやるべきことを考えるほうが楽なわけです。</p><p name="5fpQw">ものを作るのだけがプロジェクトではなく、教室の掃除の仕方をもっと効率的にする方法を考えるとかもプロジェクトになり得ます。</p><p name="7Q9vZ">プロジェクトはいつ終了するのでしょうか。実は物が完成した時だけ終了するのではありません。もしかすると、作ることができないという結論もあります。理由として技術的に無理、だったり、人が見つからない（夕飯の時間になったり塾に行かなければいけなかったり）、もしくはそれをやる必要がなくなったりすることもあるかもしれません。それをすることが法律違反になってできなくなることも、社会では起こるのです。意外と法律というのは社会を回している影響力のあるもので振り回されることも多いというのは、とくに若いうちは認識できないかもしれませんが、よくあることなのです。やはり強いものは振り回すものも大きいという感じです。</p><h3 name="aUl84">プロジェクトの種類</h3><p name="ZGRao">プロジェクトにはいろいろな種類がありますが大きく分けると４つ。</p><blockquote name="EISK5">・法律や社会というぼやっとした圧力によってやらされるもの<br>・だれか偉い人、ちからのある人（ステークホルダーといいます）がよろこぶからやるもの<br>・自分たちのグループにとってよくなることだからやるもの<br>・何かをつくるためにやるもの</blockquote><p name="f6HxB">プロジェクトはこの４つのうちのどれかひとつに当てはまる、というわけではなくいくつかの種類を併せ持つことも多いです。例えば、工場で二酸化炭素の排出を抑えた、新しい器械をつくるプロジェクトを立ち上げたとき、そのプロジェクトは、実は法律が変わったからやっているという部分や、偉い人（ステークホルダー）がやれというからやるもの、自分たちのグループにとってよくなるからやることでもあり、結果何かをつくっていることにもなっている、といった具合に。</p><h3 name="MCMJo">プロジェクトマネジメントの大事なところ</h3><p name="16p0Q">プロジェクトをうまくやる（マネジメントする）と、成功する可能性が高まり、危ないとおもわれているところを避けて通ったり、危ないところがあってもうまくのりきれたり、はたまた、もうこれ以上続けても意味がないとわかったらやめることができたり、つぎのプロジェクトでもっとうまくできたりするようになります。逆に、適当にやっていると、いつまでたっても終わらない（納期遅延）どれだけ人をやとっても終わらない（コスト超過：人には給料を払わないといけません）、できたものが雑（品質不良）、何回も意味なく同じことをしている（再作業）、信頼をうしなう（評判の喪失）、えらいひとから残念な顔をされる（ステークホルダーの不満）、そんなことが起きてきます。</p><h3 name="kV6Or">そもそもの目的が何なのか</h3><p name="k4u3a">プロジェクトはうまくやればいい、ただそれだけのものでもありません。たとえばどこかに行くのが目的だとしても、どこでもいいからどこかにいくのではなく、行きたい場所に行けないと、どんなに安全で素早くそこにたどり着けたとしても意味がありません。プロジェクトが掲げる目標が、そもそもだれかがほしかったもの（ベネフィット）からずれていないかというのは見落としがちな重要な視点になります。そこから、プログラム、ポートフォリオという言葉が登場してきます。これは見ている範囲の違いといえると思います。</p><h3 name="GSTeG">プロジェクトをとりまく環境</h3><p name="kUpRm">特に会社など仕事の中では、プロジェクトが単体で実行されることは少なく、何か大きな目的のための手段として実行されることがほとんどです。特に関わる人が多く、答えが一つではなく、1つ1つを実施するのが大変な物事の場合は、いろんな単位で物事を分割して、ある範囲の中で一番良いことを実施していくしか解決策はありません。そのために一見無駄に見えるかもしれませんが課題を、組織のプロジェクトマネジメント（OPM)、ポートフォリオ、プログラム、そしてプロジェクトと、管理する範囲を分ける方法が使われます。これが言うなれば縦方向の分割です。その次は、再びプロジェクトの中身として、フェーズに区切って困難を分割していく方法、言うなれば横方向の分割について記載します。<br>
Powerappsで複数のカレンダーがある場合、勝手に遷移する問題

PowerAppsで、リストからフォームのカスタマイズで、
回答日１、回答日２、回答日3　というカレンダーで日付を登録したかった。
![111キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874732/8784cff1-e100-f239-8942-12b543d5739b.png)
![222キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874732/c61eeee9-5cd0-cbea-4f60-4966cd005f86.png)
回答日１でカレンダーを開き、OKボタンを押下すると、下部にある回答日２へ、勝手に遷移してしまう（勝手にスクロール）。
回答日１のつぎには、回答者１のコントロールに入力したいのだが、回答日２へ移ってしまうので、
わざわざ上へ戻らなければならない。
日付のコントロールを　回答日１のカードに挿入、コントロール名を変更すると、遷移は日付のコントロール間ではおきないが、
肝心の　回答日が登録できなくなった。

カレンダーのOKボタンを押下したあとの挙動をどうしたら、どこを直したらいいのか
教示いただきたい。
#Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

以下のようなテンプレートで```nuxt generate```したら表題のエラーが出た。

```
<table>
    <tr>
        <th>名前</th>
        <td>
            <input v-model="formData.name" type="text" name="name">
        </td>
    </tr>
    <tr>
        <th>メール</th>
        <td>
            <input v-model="formData.email" type="text" name="email">
        </td>
    </tr>
    <tr>
        <th>電話番号</th>
        <td>
            <input v-model="formData.tel" type="text" name="tel">
        </td>
    </tr>
</table>
```

最終的には以下のように「tbody」で囲んでやることで解決した。

```
<table>
    <tbody>
        <tr>
            <th>名前</th>
            <td>
                <input v-model="formData.name" type="text" name="name">
            </td>
        </tr>
        <tr>
            <th>メール</th>
            <td>
                <input v-model="formData.email" type="text" name="email">
            </td>
        </tr>
        <tr>
            <th>電話番号</th>
            <td>
                <input v-model="formData.tel" type="text" name="tel">
            </td>
        </tr>
    </tbody>
</table>
```