VS Codeで始めるWebアプリケーション開発入門

2022/09/03に開催されたOpen Developer Conference(ODC)で発表時に使用したスライドです。

Transcript

1. VS Codeで始める Webアプリケーション 開発入門 〜お勧め拡張機能大紹介〜 日本仮想化技術株式会社 VirtualTech.jp 2022/09/03 1
2. スライドは後日公開予定です 2
3. • 本名: 石本　達也 • 日本仮想化技術 DevOpsエンジニア • 長崎出身→福岡→東京 • 2012年10月〜　OSC福岡で初めて学生として参加し、オープンソースを知る ◦ OSC/ODCに関わってから10年目。セミナーは今日が初登壇 • 2015年04月　　新卒として商社系の SIerに入社 ◦ SAPの導入支援&アドオン開発を担当 • 2017年07月　　ベンチャー系の人材紹介会社に入社 ◦ 大手通信会社の案件でサービス開発 PJで要件調整やマルチベンダとの折衝や調整を担当 ◦ 社内に戻りディレクション業務と RPA開発チーム立ち上げをエンジニア兼務で担当 • 2022年01月　　日本仮想化技術に入社(8ヶ月目) ◦ VS Codeを軸にした「開発環境構築」と「自動化」をテーマに実験と検証 ◦ 得たナレッジや気づきを弊社で開発しているDevOpsサービスに反映 自己紹介 3
5. DevOpsとは？ 5
6. DevOpsとは？ • 厳密な定義はない ◦ 2009年にFlickrの社員が講演した内容がきっかけ (諸説あり) ◦ 「1日10回デプロイ：FlickerにおけるDevとOpsの協力」 • 決まったツールや手順があるわけでもない • 「Dev」vs「Ops」から「Dev」and「Ops」で協力関係を構築 ◦ 運用に知らせずにリリースして、運用担当が未知のアラート対応に追われる日々 ... ◦ 運用の理解を得るのが難しく、決められた日や時間のリリース。多数の決裁まわりの日々 ...(パターナリスト症候群 ) • DevOpsの4本柱(CAMS) ◦ 「文化(Culture)」「自動化(Automation)」「メトリクス(Metrics)」「共有(Sharing)」 ◦ 自動化：人的資源を解放して改めて価値ある領域に再分配できる ◦ 共有：人は誰かに教えようと思う時に1番よく学ぶ。共有する機会を増やす 6
7. • 待ち時間 ◦ あるタスクや行動が誰かによって実行されるのを待たされる時間 • 実行時間 ◦ 人よりもコンピューターがやった方が速いタスクがある • 実行頻度 ◦ 人は単純作業が苦手。頻度が増えてくると集中力が低下してミスが増える ◦ テストとコードのフォーマットをVS Codeで保存時に自動実行に • 実行のばらつき ◦ 「四角を書いて」という単純なタスクだとしても10人いれば10通りの形が生まれる ◦ Formatterの設定ファイルやテストコードを共有して統一した品質に 7 自動化によって改善できること
8. Visual Studio Codeの基本 8
9. Visual Studio Codeとは？ • Visual Studio Code=VS Code • 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発を行なってい た ◦ Visual Studio Online ◦ Azure Web AppやAzure DevOpsなどのオンラインエディター ◦ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール • ブラウザー版での成長が頭打ちになりつつも、より高みを目指していくためにデスクトップ版での提供も 必要だと判断されて開発された • 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表された • 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている • 統合開発環境(IDE)とテキストエディターの中間的な位置付け • コードエディターとしてのシンプルさとコーディングとデバッグサイクルで開発者が必要とする機能を組み 合わせた新しいツールの選択肢 • オープンソースとして公開されている • 拡張APIを通じてほぼすべての機能をカスタマイズしたり拡張したりできる 9
10. Stack Overflow Developer Surveyで見る人気ランキング 10 Stack Overflow Developer Survey(2021) Stack Overflow Developer Survey(2022)
11. • VS Codeが公式でショートカット集をPDFデータとして配布 ◦ Mac、Windows、Linuxの3つプラットフォーム向けに提供 • VS Code上でショートカット一覧を表示する方法 ◦ Mac：Command + k s(Commandを押しながらK→Sの順番に押下) ◦ Windows：Ctrl + k s(Ctrlを押しながらKとSの順番に押下) 11 キーボード リファレンスシート
12. 12 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
13. 13 ユーザーインターフェース
14. 14 https://code.visualstudio.com/docs/getstarted/userinterface
15. ユーザーインターフェース 15 アクティビティ バー(A) ビューを切り替えたり、 Gitやテスト、デバッグなどにアクセスできるアイコンが表示されて いる領域 WindowsやMacの下の部分にあるアプリケーションのアイコンのようなイメージ サイド バー(B) プロジェクトの作業中に役立つエクスプローラーなどのさまざまなビューが含まれている領 域。 エディターグループ(C) ファイルを編集するためのメイン エリア。縦横に並べて好きなだけエディタを開くことがで きる領域 パネル(D) 出力またはデバッグ情報、エラーと警告、統合ターミナルを表示する領域 ステータス バー(E) 開いているプロジェクトと編集するファイルに関する情報
16. 16 主なアクティビティバーの紹介
17. • ファイルやフォルダの操作ができる ◦ Finderのようなもの 17 エクスプローラー
18. 検索 • プロジェクト全体をgrep検索できる機能 • ショートカットは：Command + Shift + F • Command + Fは、ファイル内検索 18
19. • Git操作などを行うビュー • コミット後にPR作成画面に遷移する機能などが 最近追加された ソース管理 19
20. • 最低限に必要なものと好みや使い勝手に応じ てインストールする • 日本語化やFormatterなどは拡張機能をインス トールして有効化する • 自分で開発してインポートすることもできる 拡張機能 20 ※それぞれの拡張機能については後ほど紹介します
21. その他の主要機能 21
22. コマンドパレット • VS Codeで使用できる機能のほぼ全てにアク セスできる • Command + Shift + P ◦ エディターコマンドを検索して実行 • Command + P ◦ ファイル名で検索して開く • Command + Shift + O ◦ ファイル内のシンボル(関数など)を検索し てアクセス • Command + G ◦ 指定した行にジャンプ • ? ◦ コマンドの一覧を表示 22 https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette
23. • 複数のプロジェクトフォルダを1つのワークス ペースで作業することができる • マイクロサービス開発などで複数リポジトリを 行ったり来たりするときなどに便利 Multi-root Workspaces 23
24. 開発環境の構築 24
25. 開発環境の全体像 25
26. 26 シングルリポジト シングルワークスペース (Not マルチワークスペース )
27. バックエンド 27
28. • Python + FastAPI ◦ FastAPIは、PythonでRESTfulなAPI開発をするためのWebフレームワーク • コーディング規約は、PEP8を使用 ◦ VS Codeでレコメンドされるもの • テストフレームワーク ◦ pytest • Docker環境 ◦ APIサーバー：Pythonイメージをベース ◦ DBサーバー：PostgreSQLイメージをベース 28 バックエンド環境の概要
29. FastAPIのチュートリアル 29 https://fastapi.tiangolo.com/ja/tutorial/
30. • VS Code のインストール • ソース管理の有効化 • ブランチ作成 • First Commitの作成 • リモートリポジトリの作成 • 拡張機能をインストール • src/main.pyファイルを作成 • フォーマッターを有効化 • デバッガの有効化 • テストの有効化 • ローカル環境の実行と停止 構築の流れ 30
31. VS Code インストール 31
32. VS Code インストール 32 • VS Codeのダウンロードページにアクセス ◦ もしくは、Homebrewを使用(brew install --cask visual-studio-code) • お使いの環境に応じてインストーラーをダウンロード • ダウンロードされたファイルを実行してインストール
35. プロジェクトの ルートディレクトリを開く 35
36. 36 「code .(ドット)」コマンドを使用してターミナル上から 起動することもできる
39. ソース管理を有効化 39
40. 40 ターミナル上で「git init」コマンドでも可。 GitHubから作成してCloneする場合は、この手順は不要
41. 41 先にREADME.mdファイルを作成して コミットとしておくとスムーズ
42. GitHub連携 42
49. 49 基本的なGitについて知りたい人向け https://www.slideshare.net/ToruMiyahara/git-126165282
50. 50 Python 拡張機能
53. • 総合的に機能を提供してくれている ◦ 拡張機能によって濃淡あり • 主な機能 ◦ インテリセンス ◦ リント ◦ コード フォーマッター ◦ デバッグ ◦ テスト ◦ リファクタリング ◦ (Jupyter Notebooks) Python拡張機能の主な機能 53
54. 1. Pythonをインストール a. パッケージマネージャーの anyenv > pyenv > Pythonをインストール b. Pythonの公式サイトから最新のバージョンを確認 2. VS CodeでPythonの拡張機能(ms-python.python)をインストール 3. Python(*.py)ファイルを開いてコーディングを開始 54 Python拡張機能のインストール
55. 55 フォーマッターの有効化
56. 56 ショートカットのShift + Option + Fを実行 コマンドパレットからは、「 Format Document」を実行
57. 57 ショートカットのCommand + カンマ(,)でも可
58. 58 設定ファイルのスコープ 3パターン • ユーザー(青枠) ◦ すべてのワークスペースで有効 ◦ GitHubを通じて他者と共有されない ▪ プロジェクト外に作成される • ワークスペース(緑枠) ◦ ワークスペース内のみで有効 ◦ GitHubを通じて共有することが可能 ▪ ワークスペースのJSONファイル • フォルダ(赤枠) ◦ 特定のフォルダのみに有効 ◦ Multi-root Workspaces使用時のみ ◦ GitHubを通じて共有することが可能 ▪ プロジェクト配下に.vscode/settings.json
59. デバッグの有効化 59
62. 62 ブレイクポイントは行数表示の左側をク リックして、ON/OFFできる ここから実行できる
63. 63 テスト
67. 67 コードの保存時に自動テストを実行して欲しいが 標準機能では動かなかった →追加で拡張機能をインストールして代用
69. 69 ローカル環境で実行
70. Dockerfileとdocker-compose.ymlを作成 • Dockerの実行環境を準備 ◦ ※省略します。別スライドの資料を参照 • VS CodeでDocker拡張機能をインストール • コマンドパレットで「Docker: Add Docker Compose files…」を実行 • 次に「python」と検索して「Python: Fast API」を選択 70
72. 72 Dockerfile docker-compose.yml docker-compose.debug.yml
73. 73 作成されたファイル docker-compose.debug.yml Dockerfile
74. 74 起動と停止 • コマンドパレットから「Docker: Compose Up」を実行 ◦ 「Docker: Compose Up - Select Services」は、起動したいコンテナを選択できる • コマンドパレットから「Docker: Compose Down」を実行
75. Dockerコンテナの基本について知りたい人向け 75 https://www.slideshare.net/ToruMiyahara/docker-252321145
76. フロントエンド 76
77. フロントエンド環境の概要 • Node.js + React • Reactは、Meta(旧Facebook)とコミュニティによって開発されているUI構築のためのJavaScriptライ ブラリ • スタイルガイド • Airbnb JavaScript Style Guide • テストフレームワーク/ライブラリ • Jest + React Testing Library • Docker環境 • Webサーバー：Nodeのイメージをベース • モックサーバー：WireMock Studioのイメージをベース • CORSの対応 • クライアントから直接APIサーバーは、localhostでもポート番号が異なるとNG • package.jsonにプロキシを記載してサーバー経由でAPI通信するように設定変更で回避 77
78. 公式サイトのチュートリアル 78
79. 流れ • VS Code のインストール(※済み) • ソース管理の有効化(※バックエンドと同様) • ブランチ作成(※バックエンドと同様) • First Commitの作成(※バックエンドと同様) • リモートリポジトリの作成(※バックエンドと同様) • 拡張機能をインストール • Reactのプロジェクトを作成 • フォーマッターを有効化 • デバッガの有効化(※バックエンドと同様) • テストの有効化(※バックエンドと同様) • ローカル環境の実行と停止 • モックサーバーの使い方 79
80. • Nodeをインストール ◦ anyenv > nodenv > nodeでインストール ◦ 公式サイトからインストール • Reactプロジェクトを作成 ◦ 「npx create-react-app {フォルダ名}」を実行してプロジェクト作成 ◦ cd appで作成したプロジェクトに移動 ◦ 詳しくいは公式チュートリアルを参照 • 拡張機能をインストール ◦ ES7+ React/Redux/React(dsznajder.es7-react-js-snippets) ◦ 公式で提供しているものがないため、人気が高いものを使用 Reactプロジェクトの作成 / 拡張機能のインストール 80
81. • ES7+ React/Redux/… • Reactまわりのスニペットを提供 • Jest • Jestまわりのサポートをする機能を提供 • ESLint • JavaScriptで実装するのリント機能を提供 拡張機能 81
82. • 基本的な手順は同じ • 言語のプロファイルを「JavaScript」から 「JavaScript React」に変更 フォーマッターの有効化 82
83. 実行環境の準備 83
84. 84 作成されたファイル docker-compose.debug.yml Dockerfile
85. モックサーバーの使い方 85
86. 概要 86 • WireMock ◦ モックAPIを作成するためのツール(GUIなし) • WireMock Studio ◦ ベータ版 ◦ Docker または Kubernetes クラスターで Java アプリとして実行できる API モックの IDE • Mock Lab ◦ クラウドサービス版 http://localhost:9000でアクセス 8080〜8100までがモックサーバーに割り当て可能なポート番号
87. モックAPIの作成 87
92. 92 表示された内容をコピー http://localhost:8000/docsでドキュメントページを表示
98. Mock上でエンドポイントを追加 98
101. 101 拡張機能の紹介
102. 拡張機能を使用する際の注意点 • なにかとお世話になることが多いからこそできるだけ安全に使いたい • マーケットプレイスからインストールできても100%安全ではない ◦ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題 ◦ マーケットプレイス側で配信時などにチェックされているが 「羊の姿をしたオオカミ」が潜んでいる可能性もある ポイント • 認証バッチが付いている ◦ 2021年に追加された機能 ◦ Marketplace側で配信者とドメイン所有者が一致しているか確認済み • マーケットプレイスからダウンロード ◦ GitHubからコードを取得してインポートも可能 102 https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers
103. マーケットプレイスから拡張機能を探す 103
104. Code Spell Checker • よくスペルミスをやってしまう人には必須 • スペルチェックと修正案をレコメンドしてくれる機 能 • cSpellベースで作られている 104
105. GitLens / Git History • 検索やログ調査などGitに関連する機能を提供 • 右も同様 105
106. • GitHubとの連携やPR作成時に役立つ機能を 提供してくれている • 特に気に入っている機能 ◦ コードのコメントに「#{{イシュー番号}}」を書 くとリンクをしてくれる機能 ◦ TODOコメントを認識してイシュー作成がで きるボタン GitHub Pull Requests and Issues 106
107. gitignore • テンプレートを元にgitignoreファイルを作成して くれる機能 • 言語ごとにいくつかのパターンが用意されてい る 107
108. Swagger Viewer • VS CodeでSwagger Editorの右側の部分を描 画してくれる拡張機能 108
109. Live Share • VS Codeの画面を共有しながら共同編集でき る機能 • ペアプロやモブプロなどで活用できる 109
110. • マークダウンを書くときに役立つ機能を提供して くれる ◦ Formatter ◦ Linter ◦ 目次の作成&自動更新 など Markdown All in One 110
111. massCode assistant • クリップボードのようにコードを保存できる機能 • 別でソフトウェアのインストールが必要 • VS Codeのスニペットは便利だけど作るのに手 間がかかる 111
112. • テストコードを自動的に生成してくる機能 • TypeScript、JavaScript、Pythonに対応 • 2022/03にCircleCIが買収 Ponicode 112
113. Project Manager • 複数のプロジェクトの切り替えを楽にしてくれる もの • タグ付けができて、好きなグループでまとめて 一覧化できる 113
114. • PrettierをVS Code版として提供しているもの • コードを整形してくれる Prettier 114
115. Auto Rename Tag • タグ名を終了タグも含めて一緒に変更してくれ る拡張機能 115
116. change-case • 変数名の形式を手軽に変更できるので便利 • スネークケース、キャメルケースなど多様なパ ターンに対応 116
117. REST Client / Thunder Client • ファイルベース(*.http)で操作 • GUIベースで操作 117
118. Todo Tree • 「TODO」コメントなどを認識してリスト化してくれ る • サイドバーから確認できる 118
119. Regex Previewer • 正規表現が効いている部分を色付けしてくれる 機能 119
120. Code Runner • 特定の行のコードを実行したい時に便利 120
121. Bookmarks • 特定の行に目印を付けたい時に便利 • サイドバーから一覧で確認できる 121
122. Bash IDE • Bashスクリプトを作成する際に便利 • F2キーを使った名称変更など一部未対応の機 能があり惜しいところ 122
123. Dotenv Official (with Vault) • 2022/08/22に公開されたばかり ◦ 月間トレンドランキング上位 • .envファイルをクラウド上で管理できる • 3ユーザーまで無料で使える 123
124. Draw.io Integration • Draw.ioをVS Code上で利用できる • xxx.drawio.pngなどの拡張子にすると編集もで きるしREADMEなどで画像としても埋め込める 点は便利 124
125. Markmap • マークダウン形式でマインドマップが作成できる 機能 125
126. npm intellisense • npmパッケージをインポートする時のあれこれ をサポートしてくれる機能 126
127. Marp for VS Code • VS CodeでMarkdown形式でスライドが作成で きる機能 127
128. codic • 日本語を入力すると変数名などを作成してくれ るサービスでお馴染みのcodic • APIキーを取得してVS Codeから利用すること ができる • いちいちブラウザに移動しなくていいので意外と あり 128
129. Qalc • VS Code上で使える電卓的なもの 129
130. お問い合わせ先 130 sales@VirtualTech.jp 開発環境の悩みを話してみませんか？ ❏ オンラインでのお打ち合わせ OK ❏ 相談ベースからでも OK
131. おわり 131