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

by Ishimoto Tatsuya

Slide 1

Slide 1 text

VS Codeで始める Webアプリケーション開発入門〜お勧め拡張機能大紹介〜日本仮想化技術株式会社 VirtualTech.jp 2022/09/03 1

Slide 2

Slide 2 text

スライドは後日公開予定です 2

Slide 3

Slide 3 text

● 本名: 石本　達也 ● 日本仮想化技術 DevOpsエンジニア ● 長崎出身→福岡→東京 ● 2012年10月〜　OSC福岡で初めて学生として参加し、オープンソースを知る ○ OSC/ODCに関わってから10年目。セミナーは今日が初登壇 ● 2015年04月　　新卒として商社系の SIerに入社 ○ SAPの導入支援&アドオン開発を担当 ● 2017年07月　　ベンチャー系の人材紹介会社に入社 ○ 大手通信会社の案件でサービス開発 PJで要件調整やマルチベンダとの折衝や調整を担当 ○ 社内に戻りディレクション業務と RPA開発チーム立ち上げをエンジニア兼務で担当 ● 2022年01月　　日本仮想化技術に入社(8ヶ月目) ○ VS Codeを軸にした「開発環境構築」と「自動化」をテーマに実験と検証 ○ 得たナレッジや気づきを弊社で開発しているDevOpsサービスに反映自己紹介 3

Slide 4

Slide 4 text

Slide 5

Slide 5 text

DevOpsとは？ 5

Slide 6

Slide 6 text

DevOpsとは？ ● 厳密な定義はない ○ 2009年にFlickrの社員が講演した内容がきっかけ (諸説あり) ○ 「1日10回デプロイ：FlickerにおけるDevとOpsの協力」 ● 決まったツールや手順があるわけでもない ● 「Dev」vs「Ops」から「Dev」and「Ops」で協力関係を構築 ○ 運用に知らせずにリリースして、運用担当が未知のアラート対応に追われる日々 ... ○ 運用の理解を得るのが難しく、決められた日や時間のリリース。多数の決裁まわりの日々 ...(パターナリスト症候群 ) ● DevOpsの4本柱(CAMS) ○ 「文化(Culture)」「自動化(Automation)」「メトリクス(Metrics)」「共有(Sharing)」 ○ 自動化：人的資源を解放して改めて価値ある領域に再分配できる ○ 共有：人は誰かに教えようと思う時に1番よく学ぶ。共有する機会を増やす 6

Slide 7

Slide 7 text

● 待ち時間 ○ あるタスクや行動が誰かによって実行されるのを待たされる時間 ● 実行時間 ○ 人よりもコンピューターがやった方が速いタスクがある ● 実行頻度 ○ 人は単純作業が苦手。頻度が増えてくると集中力が低下してミスが増える ○ テストとコードのフォーマットをVS Codeで保存時に自動実行に ● 実行のばらつき ○ 「四角を書いて」という単純なタスクだとしても10人いれば10通りの形が生まれる ○ Formatterの設定ファイルやテストコードを共有して統一した品質に 7 自動化によって改善できること

Slide 8

Slide 8 text

Visual Studio Codeの基本 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Stack Overflow Developer Surveyで見る人気ランキング 10 Stack Overflow Developer Survey(2021) Stack Overflow Developer Survey(2022)

Slide 11

Slide 11 text

● VS Codeが公式でショートカット集をPDFデータとして配布 ○ Mac、Windows、Linuxの3つプラットフォーム向けに提供 ● VS Code上でショートカット一覧を表示する方法 ○ Mac：Command + k s(Commandを押しながらK→Sの順番に押下) ○ Windows：Ctrl + k s(Ctrlを押しながらKとSの順番に押下) 11 キーボードリファレンスシート

Slide 12

Slide 12 text

12 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Slide 13

Slide 13 text

13 ユーザーインターフェース

Slide 14

Slide 14 text

14 https://code.visualstudio.com/docs/getstarted/userinterface

Slide 15

Slide 15 text

ユーザーインターフェース 15 アクティビティバー(A) ビューを切り替えたり、 Gitやテスト、デバッグなどにアクセスできるアイコンが表示されている領域 WindowsやMacの下の部分にあるアプリケーションのアイコンのようなイメージサイドバー(B) プロジェクトの作業中に役立つエクスプローラーなどのさまざまなビューが含まれている領域。エディターグループ(C) ファイルを編集するためのメインエリア。縦横に並べて好きなだけエディタを開くことができる領域パネル(D) 出力またはデバッグ情報、エラーと警告、統合ターミナルを表示する領域ステータスバー(E) 開いているプロジェクトと編集するファイルに関する情報

Slide 16

Slide 16 text

16 主なアクティビティバーの紹介

Slide 17

Slide 17 text

● ファイルやフォルダの操作ができる ○ Finderのようなもの 17 エクスプローラー

Slide 18

Slide 18 text

検索 ● プロジェクト全体をgrep検索できる機能 ● ショートカットは：Command + Shift + F ● Command + Fは、ファイル内検索 18

Slide 19

Slide 19 text

● Git操作などを行うビュー ● コミット後にPR作成画面に遷移する機能などが最近追加されたソース管理 19

Slide 20

Slide 20 text

● 最低限に必要なものと好みや使い勝手に応じてインストールする ● 日本語化やFormatterなどは拡張機能をインストールして有効化する ● 自分で開発してインポートすることもできる拡張機能 20 ※それぞれの拡張機能については後ほど紹介します

Slide 21

Slide 21 text

その他の主要機能 21

Slide 22

Slide 22 text

コマンドパレット ● VS Codeで使用できる機能のほぼ全てにアクセスできる ● Command + Shift + P ○ エディターコマンドを検索して実行 ● Command + P ○ ファイル名で検索して開く ● Command + Shift + O ○ ファイル内のシンボル(関数など)を検索してアクセス ● Command + G ○ 指定した行にジャンプ ● ? ○ コマンドの一覧を表示 22 https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette

Slide 23

Slide 23 text

● 複数のプロジェクトフォルダを1つのワークスペースで作業することができる ● マイクロサービス開発などで複数リポジトリを行ったり来たりするときなどに便利 Multi-root Workspaces 23

Slide 24

Slide 24 text

開発環境の構築 24

Slide 25

Slide 25 text

開発環境の全体像 25

Slide 26

Slide 26 text

26 シングルリポジトシングルワークスペース (Not マルチワークスペース )

Slide 27

Slide 27 text

バックエンド 27

Slide 28

Slide 28 text

● Python + FastAPI ○ FastAPIは、PythonでRESTfulなAPI開発をするためのWebフレームワーク ● コーディング規約は、PEP8を使用 ○ VS Codeでレコメンドされるもの ● テストフレームワーク ○ pytest ● Docker環境 ○ APIサーバー：Pythonイメージをベース ○ DBサーバー：PostgreSQLイメージをベース 28 バックエンド環境の概要

Slide 29

Slide 29 text

FastAPIのチュートリアル 29 https://fastapi.tiangolo.com/ja/tutorial/

Slide 30

Slide 30 text

● VS Code のインストール ● ソース管理の有効化 ● ブランチ作成 ● First Commitの作成 ● リモートリポジトリの作成 ● 拡張機能をインストール ● src/main.pyファイルを作成 ● フォーマッターを有効化 ● デバッガの有効化 ● テストの有効化 ● ローカル環境の実行と停止構築の流れ 30

Slide 31

Slide 31 text

VS Code インストール 31

Slide 32

Slide 32 text

VS Code インストール 32 ● VS Codeのダウンロードページにアクセス ○ もしくは、Homebrewを使用(brew install --cask visual-studio-code) ● お使いの環境に応じてインストーラーをダウンロード ● ダウンロードされたファイルを実行してインストール

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

プロジェクトのルートディレクトリを開く 35

Slide 36

Slide 36 text

36 「code .(ドット)」コマンドを使用してターミナル上から起動することもできる

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

ソース管理を有効化 39

Slide 40

Slide 40 text

40 ターミナル上で「git init」コマンドでも可。 GitHubから作成してCloneする場合は、この手順は不要

Slide 41

Slide 41 text

41 先にREADME.mdファイルを作成してコミットとしておくとスムーズ

Slide 42

Slide 42 text

GitHub連携 42

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

49 基本的なGitについて知りたい人向け https://www.slideshare.net/ToruMiyahara/git-126165282

Slide 50

Slide 50 text

50 Python 拡張機能

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

● 総合的に機能を提供してくれている ○ 拡張機能によって濃淡あり ● 主な機能 ○ インテリセンス ○ リント ○ コードフォーマッター ○ デバッグ ○ テスト ○ リファクタリング ○ (Jupyter Notebooks) Python拡張機能の主な機能 53

Slide 54

Slide 54 text

1. Pythonをインストール a. パッケージマネージャーの anyenv > pyenv > Pythonをインストール b. Pythonの公式サイトから最新のバージョンを確認 2. VS CodeでPythonの拡張機能(ms-python.python)をインストール 3. Python(*.py)ファイルを開いてコーディングを開始 54 Python拡張機能のインストール

Slide 55

Slide 55 text

55 フォーマッターの有効化

Slide 56

Slide 56 text

56 ショートカットのShift + Option + Fを実行コマンドパレットからは、「 Format Document」を実行

Slide 57

Slide 57 text

57 ショートカットのCommand + カンマ(,)でも可

Slide 58

Slide 58 text

58 設定ファイルのスコープ 3パターン ● ユーザー(青枠) ○ すべてのワークスペースで有効 ○ GitHubを通じて他者と共有されない ■ プロジェクト外に作成される ● ワークスペース(緑枠) ○ ワークスペース内のみで有効 ○ GitHubを通じて共有することが可能 ■ ワークスペースのJSONファイル ● フォルダ(赤枠) ○ 特定のフォルダのみに有効 ○ Multi-root Workspaces使用時のみ ○ GitHubを通じて共有することが可能 ■ プロジェクト配下に.vscode/settings.json

Slide 59

Slide 59 text

デバッグの有効化 59

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

62 ブレイクポイントは行数表示の左側をクリックして、ON/OFFできるここから実行できる

Slide 63

Slide 63 text

63 テスト

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Slide 67

Slide 67 text

67 コードの保存時に自動テストを実行して欲しいが標準機能では動かなかった →追加で拡張機能をインストールして代用

Slide 68

Slide 68 text

Slide 69

Slide 69 text

69 ローカル環境で実行

Slide 70

Slide 70 text

Dockerfileとdocker-compose.ymlを作成 ● Dockerの実行環境を準備 ○ ※省略します。別スライドの資料を参照 ● VS CodeでDocker拡張機能をインストール ● コマンドパレットで「Docker: Add Docker Compose files…」を実行 ● 次に「python」と検索して「Python: Fast API」を選択 70

Slide 71

Slide 71 text

Slide 72

Slide 72 text

72 Dockerfile docker-compose.yml docker-compose.debug.yml

Slide 73

Slide 73 text

73 作成されたファイル docker-compose.debug.yml Dockerfile

Slide 74

Slide 74 text

74 起動と停止 ● コマンドパレットから「Docker: Compose Up」を実行 ○ 「Docker: Compose Up - Select Services」は、起動したいコンテナを選択できる ● コマンドパレットから「Docker: Compose Down」を実行

Slide 75

Slide 75 text

Dockerコンテナの基本について知りたい人向け 75 https://www.slideshare.net/ToruMiyahara/docker-252321145

Slide 76

Slide 76 text

フロントエンド 76

Slide 77

Slide 77 text

フロントエンド環境の概要 • 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

Slide 78

Slide 78 text

公式サイトのチュートリアル 78

Slide 79

Slide 79 text

流れ ● VS Code のインストール(※済み) ● ソース管理の有効化(※バックエンドと同様) ● ブランチ作成(※バックエンドと同様) ● First Commitの作成(※バックエンドと同様) ● リモートリポジトリの作成(※バックエンドと同様) ● 拡張機能をインストール ● Reactのプロジェクトを作成 ● フォーマッターを有効化 ● デバッガの有効化(※バックエンドと同様) ● テストの有効化(※バックエンドと同様) ● ローカル環境の実行と停止 ● モックサーバーの使い方 79

Slide 80

Slide 80 text

● Nodeをインストール ○ anyenv > nodenv > nodeでインストール ○ 公式サイトからインストール ● Reactプロジェクトを作成 ○ 「npx create-react-app {フォルダ名}」を実行してプロジェクト作成 ○ cd appで作成したプロジェクトに移動 ○ 詳しくいは公式チュートリアルを参照 ● 拡張機能をインストール ○ ES7+ React/Redux/React(dsznajder.es7-react-js-snippets) ○ 公式で提供しているものがないため、人気が高いものを使用 Reactプロジェクトの作成 / 拡張機能のインストール 80

Slide 81

Slide 81 text

• ES7+ React/Redux/… • Reactまわりのスニペットを提供 • Jest • Jestまわりのサポートをする機能を提供 • ESLint • JavaScriptで実装するのリント機能を提供拡張機能 81

Slide 82

Slide 82 text

● 基本的な手順は同じ ● 言語のプロファイルを「JavaScript」から「JavaScript React」に変更フォーマッターの有効化 82

Slide 83

Slide 83 text

実行環境の準備 83

Slide 84

Slide 84 text

84 作成されたファイル docker-compose.debug.yml Dockerfile

Slide 85

Slide 85 text

モックサーバーの使い方 85

Slide 86

Slide 86 text

概要 86 ● WireMock ○ モックAPIを作成するためのツール(GUIなし) ● WireMock Studio ○ ベータ版 ○ Docker または Kubernetes クラスターで Java アプリとして実行できる API モックの IDE ● Mock Lab ○ クラウドサービス版 http://localhost:9000でアクセス 8080〜8100までがモックサーバーに割り当て可能なポート番号

Slide 87

Slide 87 text

モックAPIの作成 87

Slide 88

Slide 88 text

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Slide 91

Slide 91 text

Slide 92

Slide 92 text

92 表示された内容をコピー http://localhost:8000/docsでドキュメントページを表示

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Slide 98

Slide 98 text

Mock上でエンドポイントを追加 98

Slide 99

Slide 99 text

Slide 100

Slide 100 text

100

Slide 101

Slide 101 text

101 拡張機能の紹介

Slide 102

Slide 102 text

拡張機能を使用する際の注意点 ● なにかとお世話になることが多いからこそできるだけ安全に使いたい ● マーケットプレイスからインストールできても100%安全ではない ○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題 ○ マーケットプレイス側で配信時などにチェックされているが「羊の姿をしたオオカミ」が潜んでいる可能性もあるポイント ● 認証バッチが付いている ○ 2021年に追加された機能 ○ Marketplace側で配信者とドメイン所有者が一致しているか確認済み ● マーケットプレイスからダウンロード ○ GitHubからコードを取得してインポートも可能 102 https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers

Slide 103

Slide 103 text

マーケットプレイスから拡張機能を探す 103

Slide 104

Slide 104 text

Code Spell Checker ● よくスペルミスをやってしまう人には必須 ● スペルチェックと修正案をレコメンドしてくれる機能 ● cSpellベースで作られている 104

Slide 105

Slide 105 text

GitLens / Git History • 検索やログ調査などGitに関連する機能を提供 • 右も同様 105

Slide 106

Slide 106 text

● GitHubとの連携やPR作成時に役立つ機能を提供してくれている ● 特に気に入っている機能 ○ コードのコメントに「#{{イシュー番号}}」を書くとリンクをしてくれる機能 ○ TODOコメントを認識してイシュー作成ができるボタン GitHub Pull Requests and Issues 106

Slide 107

Slide 107 text

gitignore ● テンプレートを元にgitignoreファイルを作成してくれる機能 ● 言語ごとにいくつかのパターンが用意されている 107

Slide 108

Slide 108 text

Swagger Viewer • VS CodeでSwagger Editorの右側の部分を描画してくれる拡張機能 108

Slide 109

Slide 109 text

Live Share ● VS Codeの画面を共有しながら共同編集できる機能 ● ペアプロやモブプロなどで活用できる 109

Slide 110

Slide 110 text

● マークダウンを書くときに役立つ機能を提供してくれる ○ Formatter ○ Linter ○ 目次の作成&自動更新など Markdown All in One 110

Slide 111

Slide 111 text

massCode assistant • クリップボードのようにコードを保存できる機能 • 別でソフトウェアのインストールが必要 • VS Codeのスニペットは便利だけど作るのに手間がかかる 111

Slide 112

Slide 112 text

• テストコードを自動的に生成してくる機能 • TypeScript、JavaScript、Pythonに対応 • 2022/03にCircleCIが買収 Ponicode 112

Slide 113

Slide 113 text

Project Manager • 複数のプロジェクトの切り替えを楽にしてくれるもの • タグ付けができて、好きなグループでまとめて一覧化できる 113

Slide 114

Slide 114 text

• PrettierをVS Code版として提供しているもの • コードを整形してくれる Prettier 114

Slide 115

Slide 115 text

Auto Rename Tag • タグ名を終了タグも含めて一緒に変更してくれる拡張機能 115

Slide 116

Slide 116 text

change-case ● 変数名の形式を手軽に変更できるので便利 ● スネークケース、キャメルケースなど多様なパターンに対応 116

Slide 117

Slide 117 text

REST Client / Thunder Client ● ファイルベース(*.http)で操作 ● GUIベースで操作 117

Slide 118

Slide 118 text

Todo Tree ● 「TODO」コメントなどを認識してリスト化してくれる ● サイドバーから確認できる 118

Slide 119

Slide 119 text

Regex Previewer • 正規表現が効いている部分を色付けしてくれる機能 119

Slide 120

Slide 120 text

Code Runner ● 特定の行のコードを実行したい時に便利 120

Slide 121

Slide 121 text

Bookmarks ● 特定の行に目印を付けたい時に便利 ● サイドバーから一覧で確認できる 121

Slide 122

Slide 122 text

Bash IDE ● Bashスクリプトを作成する際に便利 ● F2キーを使った名称変更など一部未対応の機能があり惜しいところ 122

Slide 123

Slide 123 text

Dotenv Official (with Vault) ● 2022/08/22に公開されたばかり ○ 月間トレンドランキング上位 ● .envファイルをクラウド上で管理できる ● 3ユーザーまで無料で使える 123

Slide 124

Slide 124 text

Draw.io Integration ● Draw.ioをVS Code上で利用できる ● xxx.drawio.pngなどの拡張子にすると編集もできるしREADMEなどで画像としても埋め込める点は便利 124

Slide 125

Slide 125 text

Markmap • マークダウン形式でマインドマップが作成できる機能 125

Slide 126

Slide 126 text

npm intellisense • npmパッケージをインポートする時のあれこれをサポートしてくれる機能 126

Slide 127

Slide 127 text

Marp for VS Code • VS CodeでMarkdown形式でスライドが作成できる機能 127

Slide 128

Slide 128 text

codic ● 日本語を入力すると変数名などを作成してくれるサービスでお馴染みのcodic ● APIキーを取得してVS Codeから利用することができる ● いちいちブラウザに移動しなくていいので意外とあり 128

Slide 129

Slide 129 text

Qalc • VS Code上で使える電卓的なもの 129

Slide 130

Slide 130 text

お問い合わせ先 130 [email protected] 開発環境の悩みを話してみませんか？ ❏ オンラインでのお打ち合わせ OK ❏ 相談ベースからでも OK

Slide 131

Slide 131 text

おわり 131