SharePointFrameworkの理解を深める01(開発環境構築)

:::note warn
2021年に書いた記事を備忘録でアップしてます
SharePointFramework1.13を使ってます。
結論Docker上の開発環境だとうまくいかず、、
https://qiita.com/C_pnpc/items/0f731e3b3fa0e571ac2c
私の場合、ローカルに構築しなおしてでうまくいきました。
:::

今時はPowerAppsやAoutomateなどのローコード開発が人気みたいですが、やっぱりSharePointサイトやTeamsに自由なレイアウトの表示をつくってみたいなと思い、勉強にいたりました。

開発は未経験で、いろいろ勉強することがありそうなので、その軌跡を残そうと思います。

# 開発入門の知識収集
下記サイトの記事を読むと必要な情報が分かりそうです。
参考リンクはすべて見ると時間かかりそうなので、ここの動画だけみて概要をつかみ、別記事を参考にまず手を動かしてみようと思いました。
> SharePoint Framework 開発入門 まとめ
https://sharepoint.orivers.jp/sharepoint-framework-dev

# Dockerを利用した開発環境の構築
下記を実践しました。
>Visual Studio Code Remote – Containers と Docker による SharePoint Framework 開発環境構築
https://sharepoint.orivers.jp/article/10501

## 備忘録：VScodeでのエラー
参考の下記手順でエラー発生。
本手順はVSCodeのDockerインストールだけと思いきや、DockerDesktopもインストールが必要みたいでしたので、インストールを進めていきます。待ち時間含め、結構時間かかりました。


■プロジェクトをコンテナで開く
1.コマンドパレットを開きます。
2.コマンドパレットに「reopen in container」と入力します。
⇒エラー
Reopen in container: Docker returned an error make sure the docker daemon is running

3.VScodeを再起動して更新すると下図の画面が出てくるので、YESで閉じる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/6e50c844-f527-d4d3-e2e7-7de8927a524e.png)

4.右下に下図のポップアップがでるので、「Reopen in Container」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/0eef20ff-6101-af6a-a598-327e077336ca.png)

5.下図のエラーがでるので「Install」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/79a7b302-000f-e733-df9b-0753c0285fad.png)

6.しばらく待つ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/bcd684ba-9e6b-3f2f-205f-f75646c71c04.png)

7.DockerDecktopインストールのポップアップが表示。デフォルトのままOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/8315948b-b1ff-1c51-530d-87828efa3a09.png)

8.インストール中。しばらく待つ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/5ab7d898-b3cb-8e37-a9fb-83f925dbb4d5.png)

9.DockerDesktopインストール完了。「Close and restart」をクリックしPC再起動。
※すぐ再起動するので、保存するものは事前に保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/3f6518a5-b43f-1c12-37d3-fb66e6c86f30.png)


10.再起動後、下図が表示。agreeをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/6e1898b7-07d9-2045-3764-e78c72b54d47.png)

11.今度はLinuxカーネルアップデートとかで、リンクに移動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/1f591548-d550-4bd4-7b07-7efb05e5c935.png)

12.パッケージをダウンロードし、実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/e2f390f3-9e3d-0762-9bc4-1bde4d23743a.png)

13　Next

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/c65e5991-a81a-eed8-b4c1-1c97fa95bef8.png)

14 Finish

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/7fa7cfc2-97ac-3bf5-9156-793b47dea3c5.png)

15.PC再起動

16.DockerDesktop起動

17.TIPSが見れる？今は閉じる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/fc941fa0-546f-becc-df34-45032214adea.png)

18.チュートリアル？今は閉じる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/4cb6f5f5-6f8e-78a4-b572-66cadc442fe3.png)

19.Dockerがこの状態になってから、VSCode起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/3cc32d4a-457e-d2e6-cbd5-1e1d0756769a.png)

20.reopen in Containerを再度実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/e083ede4-eaaf-fcf3-efac-11fb5fa92005.png)

jsonファイルのパス修正したのに、ファイル移動するの忘れてた。。ファイルを移動してもう一度実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/a8436ca6-a7b1-76db-ed7d-e1d4dd104b6c.png)

21.ここから、参考の「プロジェクトをコンテナで開く」の手順に戻ることができました。説明の通り、結構時間かかってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/5528df22-121c-c220-fef2-819c038db2b4.png)

22.進んでないみたいだったので、F5で更新かけたら進みました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/5b9ed4bc-d2b6-4d83-c150-b3a325329950.png)

.
今回はここまで

次の記事

https://qiita.com/C_pnpc/items/2bbe4251bc7d22d77840