Visual Studio Code の始め方〜オープンキャンプ in 南島原 2022〜

長崎県南島原市で開催された「オープンキャンプ in 南島原 2022」で講演した時のスライドです。

Transcript

1. Visual Studio Code の始め方 オープンキャンプ in 南島原 2022 日本仮想化技術株式会社 石本 達也 VirtualTech.jp 2022/06/18 1
2. 自己紹介 2
3. • 本名: 石本　達也 • 日本仮想化技術 DevOpsエンジニア • 長崎出身→福岡→東京 ◦ 長崎: 18年。福岡: 3年。東京: 8年目。 • 2012年10月　OSC福岡で初めて学生として参加し、オープンソースを知る ◦ 在籍していた学校が会場になった回がきっかけ • 2015年04月　新卒として商社系のSIerに入社 ◦ SAPの導入支援&アドオン開発を担当 • 2016年05月　オープンキャンプ in 南島原(第0回)？に参加 ◦ 毎年リアル参加していたが2020〜2021はコロナ渦でオンライン参加に • 2017年07月　ベンチャー系の人材紹介会社に入社 ◦ 大手通信会社でサービス開発プロジェクトで要件調整やマルチベンダとの折衝や調整を担当 ◦ 社内に戻りディレクション業務とRPA開発チーム立ち上げをエンジニア兼務で担当 • 2022年01月　日本仮想化技術に入社し、DevOpsエンジニアとして奮闘中 自己紹介 3
4. 南島原の印象って？ 4
5. いままで • 小学校〜高校までサッカーをやっていた • 練習試合や大会などで行く機会があったくらい • 学校やがまだすドーム横のグラウンド、陸上競技場など • 週末にドライブや旅行で行こうと思うような場所ではなかった • 街や都会っぽさへの憧れの方が強かった • どちらかというと長崎市内の方に出かけてしまう • 大学生くらいになってくるとドライブなどで出かけることはあったのかも (その頃は福岡にいた ...) 南島原の印象って？(1/2) 5
6. いま • 毎日が都会だとそれはそれで疲れる • 緑は少ない。星が見えない。いつ空見たんだろう？状態。 • 気づいたら実家をすっ飛ばして南島原に行くようになっていた • 真砂で温泉に入る • 吉田屋さんにお酒を買いに行く • たつみで海鮮丼を食べる • 神崎さんのところのクリーニング工場に遊びに行く • 池田さんのところにそうめんを買いに行く • イベントの時は論所原でキャンプ • カレー作りやったり、力尽きるまで語りながら飲み明かしたり。最長は 28:00(AM: 4:00)？ • 唐揚げ美味しい！ 南島原の印象って？(2/2) 6
7. エディターの話に入る前に... 7
8. エンジニアとは？ 8
9. • エンジニアリングに関する専門的な知識やスキ ルを持った人材 • 科学技術を応用して社会に役立つような仕組み を作るような人 エンジニアとは？ 9
10. エンジニアの三大美徳って知ってます か？ 10
11. エンジニアの三大美徳(1/3) 傲慢 (Hubris) 11 怠慢 (Laziness) 短気 (Impatience)
12. そうです。エンジニアってすごく性格が悪 いんです 12
14. エンジニアの三大美徳(2/3) 14 • 怠慢 ◦ 全体の労力を減らすために手間を惜しまな い気質。 • 短気 ◦ コンピューターが怠慢な時に感じる怒り。 • 傲慢 ◦ 人様に対して恥ずかしくないプログラムを 書き、また保守しようとする気質。 傲慢 (Hubris) 怠慢 (Laziness) 短気 (Impatience)
15. 怠慢(Laziness) 15
16. • 面倒だからやらなくなる・やり方を変えないタイプ • 面倒だからやらなくてもいいような仕組みや労力を減らす仕組みを作るタイプ ◦ 他の人に任せる ◦ 機械やコンピューターに任せる 怠慢には大きく2つのタイプがある 16
17. • 今世の中に出てきているものはエンジニアの怠 ける力が産んだ産物 • エジソンの電球。ライト兄弟の飛行機。 • 毎日階段を登るのが面倒だから ◦ エスカレーターを開発 • 沢山のデータを暗算やそろばんで計算するの は面倒だから ◦ 電卓を開発した エンジニアの三大美徳(3/3) 17
18. • 機械語 ◦ 0と1の情報 ◦ プログラムも最後は電気信号レベルの世 界 ◦ ごく稀に読める人がいると聞いたことあるく らい • アセンブリ言語 ◦ 低水準言語 ◦ 人間が理解しやすいようにニーモニックと いう命令語で表現 • プログラミング言語 ◦ 高水準言語 ◦ C言語 ◦ Python(裏ではC言語に翻訳) ◦ ノーコード、ローコード プログラミング言語と機械語 18 01011011010110101010101 10101010010100010101000 00101010010001010010101 000101001001010101…. function main() { print(“Hello World!”) } PSHS A,B,X,U LDA #$80 ADDA #$C0 PULS A,B,X,U,PC
19. 19 エンジニアの世界に興味がある人は 「怠慢(怠ける)力」を高めよう！
20. 怠けるための初めの一歩として 「エディター」から 20
21. 21 Visual Studio Code知ってますか？
22. テキストエディタとIDEの違い 22
23. テキストエディタとは 23 • 文字通りテキストを編集するためのツール ◦ テキストが編集できればテキストエディタなので対象が広い • ツールによってプレーンなものからリッチなものまで様々 主なツール • Windowsのメモ帳 ◦ 高校の授業で初めてのプログラミングをやったときに C言語書いた • TeraPad ◦ 実はプログラム書くときにいい感じのやつがあると初めて知ったやつ • サクラエディタ ◦ 使っていた記憶はあるけど、詳しくは覚えていない • 秀丸エディタ ◦ Windowを使ってた頃に最後に使っていたやつ • Sublime Text Editor ◦ Macに変えてから使っていたやつ • Visual Studio Code ◦ 社会人になりたてくらいの頃に使い始めた
24. IDEとは • Integrated Development Environment(統合開発環境) • 色んなものを1つにまとめたもの ◦ ソフトウェア開発は、コーディング、コンパイル、ビルド、デバッグなどの工程の繰り返し ◦ テキストエディタ、コンパイラ、リンカ、デバッガなどのツールを使い分け • 1つにまとめた方が生産性上がるよね。というところから統合開発環境と呼ばれるものが登場した • 最近ではテストも一般的になりつつあり、ソフトウェアテストも統合されている 主なツール • Visual Studio Code • Eclipse • Xcode • Android Studio • IntelliJ IDEA 24
25. 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を通じてほぼすべての機能をカスタマイズしたり拡張したりできる 25
26. Visual Studio Codeは人気？ • Stack Overflow Developer Surveyで圧倒的人気 26
27. エディタで何をするのか？ 27
28. プログラミング 28
29. プログラミングとは？ • プログラミングとは、「プログラム」を作る作業のこと • プログラムとは、コンピューターが実行する作業の順番のこと 29
30. ハンバーガーを作りたい 30
31. ハンバーガーを作るときに① 順番が大事です。ハンバーガー作りで順番を間違うとこうなります。 31
32. ハンバーガーを作るときに② 正しい順番で作ると、こうなります。 32
33. 実際はもっと工程が多い 33
34. バンズは... いくつかの材料を組み合わせて作られている 34 クラス、ライブラリ、 モジュール 関数やメソッド
35. 塩は... 海水から水分を蒸発させて、あれこれ工程を経て作られている 35
36. 卵は... 卵を産んでもらうニワトリを育てるところから。エサは... 36
37. 実際に何かを作ろうとすると... 色んな種類のハンバーガーを作りたくなる 37
38. 作る量が増えると... 必要な材料も増える 38
39. 「やること」や「考えること」がどんどん増える 39
40. • どこでどんな材料を使っているのか全体を把握するのが大変 ◦ クラスや関数などの使用先 • 同じものなのに使ってる場所で名前が違う、単位がバラバラ(inch、cm、feet)なの大変 ◦ フォーマットやコーディング規約の統一 • 異物が混入していないか、味が変じゃないかチェックする量や回数が増えるの大変 ◦ テストやレビュー • 味変したいから、色々と調味料を秘伝のソースに入れてみたら味が変になって調査が大変 ◦ デバッグ どんどん収拾つかなくなってくる 40
41. • 視覚的な濃淡をはっきり(シンタックス ハイライト) • 入力のサジェスト(インテリセンスやフォーマッター、静的解析) • コードを修正するたびに自動テストを実行(アクティビティのテスト) • 不具合の詳細調査にデバッガーを活用(アクティビティのデバッグ) • 関数やクラスを参照している先を一覧化(定義へジャンプ、参照先の一覧化) 「負担を減らす」「労力を減らす」ためのエディター 41
42. 開発サイクル • 期待した通りに動くまで繰り返す ◦ 設計(Plan) ◦ コーディング(Do) ◦ テスト(Check) ▪ 境界値テスト ▪ データ型に応じたテスト ▪ 最小値と最大値テスト ▪ 回帰テスト ▪ 成功率、カバレッジ率 ◦ 修正(Action) ▪ デバッグ 42
43. • Software Development Life Cycle(SDLC) ◦ Planning(計画) ◦ Analysis(要件の定義) ◦ Design(設計とプロトタイピング) ◦ Implementation(ソフトウェア開発) ◦ Testing and integration(テストと展開) ◦ Maintenance(運用と保守) ソフトウェア開発のライフ サイクル 43
44. 画面構成 44
45. • アクティビティバー • エクスプローラー • 検索 • ソース管理 • 実行とデバッグ • 拡張機能 • リモートエクスプローラー • テスト • プライマリサイドバー • セカンダリサイドバー • パネル • ステータスバー • サイドバー 画面構成 45
46. 画面構成 - 全体 46
47. 画面構成 - アクティビティバー 47
48. 画面構成 - プライマリサイドバー 48
49. 画面構成 - セカンダリサイドバー 49
50. 画面構成 - パネル 50
51. 画面構成 - ステータスバー 51
52. 画面構成 - サイドバー 52
53. 画面構成 - ミニマップ 53
54. 主な機能紹介 54
55. コマンドパレット 55
56. 拡張機能について 56
57. • プログラミング言語系の拡張機能はオールインワンで使えたり、複数インストールし て使う必要があるのものなど様々 • ブラウザでMarketplaceにアクセスして探すこともできる 拡張機能について 57
58. 少しでもリスクを減らす拡張機能の選び方 58 • なにかとお世話になることが多い拡張機能だからこそ安全に使いたい • VS Codeからインストールできるからといってすべてが安全ではない • 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題になった • ポイント • 認証バッチが付いている • Marketplace側で検証済み • 2021年に追加された機能 • 提供元が信頼できるか • インストール数や評価、最終更新日 https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers
59. • ケースを変更してくれるもの ◦ スネークケース ◦ パスカルケース ◦ キャメルケース など • スペルチェックをしてくれるもの ◦ betaをbataとよくTYPO • コードの見た目を整えてくれる • 見た目に少し変化を加えたい人向け ◦ シンプルなデザインが好み 全員向け 59
60. Gitを使っている人向け • Git使い始めましたと人は急がなくてもいい • 誰が変更したのかなどをサクッとみたい時に便 利 60
61. • フロントエンド系の開発であれば実行環境が手 軽に手に入る • あとでやろうと思ってたことを忘れがちな人に HTML + JavaScript + CSS向け 61
62. • Xdebugをデバッガーで動かすために必要 • 定義への移動や入力補完をしてくれる PHP向け 62
63. Python向け • 言語名で検索して出てくるお決まりのもの 63
64. デバッガー • ブレークポイントで処理の実行を一時停止でき る • その時に変数にどんな値が入っているのかなど を確認できる 64
65. テスト&カバレッジ 65 • アクティビティバーのフラスコマークから実行できる • テストコードを書いている時に役立つ • 1ケース以上テストできている行は、「緑色」 • 1ケースもテストできていない行は、「赤色」 •
66. シンタックスハイライト • 日本語にすると構文強調 • テキスト中の一部分をその分類ごとに異なる色やフォントで表示するもの • Linterツールと組み合わせて、コード上に警告を表示する 66
67. インテリセンス • キー入力を監視し、何を入力しようとしているのか推測 • 自動補完（オートコンプリート） • 後続要素の候補を表示して選択するだけで入力できるようにしてくれる 67
68. スニペット • 日本語で言うと断片 • 再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語 • インテリセンスの機能で保管できない部分を独自に定義することができる 68
69. エディターって何を使えばいいの？ 69
70. 迷ったらVS Codeから。まずは1つ使いこなせるエディタを • ユーザ目線だとあまり大きな違いはないが、 OSSで提供されていたり拡張機能の開発をしたい人はよりオススメ • テキストエディタと統合開発環境 (IDE)の中間的な位置付けでバランスがいい • 自分がよく使う機能の見極めとしても活用できる • 使っている人が多いので情報量も豊富 流行りものに手を出すのはあとで • ITの世界は特にトレンドの変化が早く新しいツールなどが出てくるが、ぐっと我慢して 1つ使えるようになってから • ブログなどでの情報が少ないので、単純にググっても情報が出てこないことが多いので挫折しがち • 使い道がわからずに使わなくなってしまう エディターって何を使えばいいの？ 70
71. おすすめの本は？ 71
72. おすすめの本は？① • 基本的な機能を中心に使いたい人 • 教養的にVS Codeを使ってやってみたい人 72 https://book.impress.co.jp/books/1121101051
73. おすすめの本は？② • お仕事で使用する予定がある人 • Dockerを使った開発を始めたい人 • Pythonで開発をやっている人 73 https://www.ric.co.jp/book/new-publication/detail/2152
74. おすすめの本は？③ • マイクロサービスの開発をやってみたい人 • Node.js、Go、Javaで開発をやってみたい人 • 拡張機能を自作してみたい人 74 https://book.mynavi.jp/ec/products/detail/id=115232
75. 午後のワークショップで使ってみてくださ い！ 75
76. • 何か作りたいものを事前に決める ◦ 特になければHTML + JavaScriptでTo Do管理を • 開発を進めながら設定や拡張機能などのセットアップを進めていく流れ • 「◯◯ってできる？」や「△△の手順をもっと効率的にやれる方法ない？」など随時聞いてOK ◦ めんどくさいことや怠けたいことをどんどん増やしていきましょう • プログラミングを始めたいけど...あれこれ相談したいな事でもお気軽に 午後にVS Codeのハンズオンに参加される方へ 76
77. • Youtube ショートとTikTokを見ていると2時間くらい平気で過ぎ去ってしまう ◦ 言い訳のつもりで始めた ◦ クリエイターとして毎日他の人の動画研究をしている(つもり) • デモ動画などを作成する機会が増えてきたので、練習後に作ったものたちの供養先として投稿 ◦ 10〜30秒くらいの長さ ◦ ショートカットや機能の使い方、ちょっとしたテクニックなことをメインに ◦ 月〜金で毎日投稿が目標。週末に撮り溜めを頑張っている ◦ 企画力と動画の編集力が上がってきたらもう少し長い動画にも手を出したい YoutubeとTikTokやってます 77
78. 「いっしーのDevOpsちゃんねる」で検索 78
79. おわり 79