Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ここから始めるDevOps クライアント開発環境編
Search
とことんDevOps
March 16, 2023
Technology
0
490
ここから始めるDevOps クライアント開発環境編
DevOpsを始めるにあたってクライアント開発環境の観点から学ぶべきポイントを紹介します。
とことんDevOps
March 16, 2023
Tweet
Share
More Decks by とことんDevOps
See All by とことんDevOps
今日からはじめるWSL実践入門
devops_vtj
0
42
'24/11月開催 Visual Studio CodeのDev Containersを使って開発環境構築してみよう
devops_vtj
0
290
DevOpsに関連するツールとその概要を淡々と読み上げる会
devops_vtj
2
260
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
7
5.8k
自動化と効率化のためにGitHub Actionsを使いこなそう
devops_vtj
5
970
Gitで始めるバージョン管理入門
devops_vtj
1
480
今さら聞けないDocker入門 〜 Dockerfileのベストプラクティス編
devops_vtj
34
11k
AWS AmplifyではじめるDevOps
devops_vtj
0
620
IaCコードリーディング ~Terraformのコードを一緒に読んで行こう~
devops_vtj
0
840
Other Decks in Technology
See All in Technology
DevSecOps入門:Security Development Lifecycleによる開発プロセスのセキュリティ強化
yuriemori
0
240
あなたの興味は信頼性?それとも生産性? SREとしてのキャリアに悩むみなさまに伝えたい選択肢
jacopen
6
3.2k
RevOpsへ至る道 データ活用による事業革新への挑戦 / path-to-revops
pei0804
3
800
消し忘れリソースゼロへ!私のResource Explorer活用法
cuorain
0
140
HCP TerraformとAzure:イオンスマートテクノロジーのインフラ革新 / HCP Terraform and Azure AEON Smart Technology's Infrastructure Innovation
aeonpeople
3
990
panicを深ぼってみる
kworkdev
PRO
2
150
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.8k
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
2
230
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
170
Tokyo RubyKaigi 12 - Scaling Ruby at GitHub
jhawthorn
2
210
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
6
520
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
340
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Writing Fast Ruby
sferik
628
61k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
52k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Embracing the Ebb and Flow
colly
84
4.5k
Navigating Team Friction
lara
183
15k
Designing for humans not robots
tammielis
250
25k
How STYLIGHT went responsive
nonsquared
96
5.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Speed Design
sergeychernyshev
25
760
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Transcript
ここから始めるDevOps (クライアント開発環境 編) 日本仮想化技術株式会社 VirtualTech.jp 2023/03/15 1
自己紹介 2
3 アジェンダ • コーディング環境 • 実行環境 • ソースコード管理
コーディング環境 4
コーディング環境とは • プログラミングを行うための環境のこと • プログラムを記述するためのエディタやIDE(統合開発環境) • コンパイラやインタプリタ、自動テストやデバッガなどの開発ツール • 実行時に必要なライブラリやフレームワークなど 5
エディタ 6
エディタ 7 テキスト編集に特化したもの エディタの種類 • プレーンテキスト: ◦ テキストの原形そのままの状態で、書式やスタイルなどの装飾がないテキストのこと ▪ Windowsのメモ帳。macOSのテキストエディットなど
• リッチテキスト: ◦ 文字の色やサイズ、太字や斜体、下線や強調などのスタイルを追加することができる ▪ MicrosoftのWordなど プログラミングに特化した高機能なエディタ • プログラミング向けに使いやすい機能で特化されたエディタのこと • IT業界の発展と共にどんどん形を変えて最適な形を求めながら変化し続けている
コーディング以外にも色々と必要 避けたいこと • 本番環境にリリース後に深刻なエラーが発生によるサービス停止(Q:クオリティ) • 手戻りによるコスト増加(C:コスト) • リリース待ちの増加(D:デリバリー) どうするの? •
重要なエラーや不具合には早く気づきたい ◦ 静的解析ツール ◦ 自動テストツール • 不具合やエラーの原因を早く特定したい ◦ デバッグツール • リリースサイクルを早くしたい ◦ CI/CD、ビルドツール • 継続的な開発のために可読性や保守性を高める ◦ FormatterやLinter、スペルチェック、環境の統一など 8
統合開発環境(IDE) 9
統合開発環境(IDE) • 統合開発環境(Integrated Development Environment)の略 • プログラミングに必要な最低限の機能を一つにまとめたソフトウェア開発環境 • 主な機能 ◦
コード編集の自動化やコード補完 ◦ 構文の強調表示 ◦ リファクタリング ◦ ローカルビルドの自動化 ◦ テスト ◦ デバッグ など 10
IDEの選択が主流に 11 • 統合開発環境(IDE)が第1候補としてオススメ • コードを書くだけに特化するだけではダメ。今後はテストなどの自動化は最低でも必須 ◦ コード保存時に意識せずとも静的解析やテストなどが実行される など •
DevOpsな開発環境を求めていくとツールやサービスは増えるので、極力集約していく • CI/CD系のツールとの連携ができるかも今後大切になってくる ◦ Visual Studio Code向けの拡張機能としてCircleCIがサポートされた • 設定が共有しやすいかも鍵 ◦ VS Codeではsettings.jsonを使うと共有できる。最近は、プロファイル機能が追加された
IDEの選び方 • 指定がある場合 ◦ Apple製品向けのアプリを作成する際は、Xcodeが必要 など • プラットフォームである程度暗黙的に決まっているもの ◦ Apple製品向けのアプリ開発=Xcode
◦ Androidアプリ開発=Android Studio ◦ Javaの開発=Eclipse ◦ Windows向けのアプリ開発=Visual Studio • 上記以外 ◦ お金をかける?かけない? ◦ 情報量は多い?少ない? ◦ 人気がある?人気がない? 色々と気になるけども、、、 Visual Studio Codeがオススメ 弊社メンバーも使用しており、継続的に情報収集中。使い方などのご相談も可能 12
Visual Studio Codeとは? 13
Visual Studio Codeとは? • Visual Studio Code=VS Code、code • Microsoftが開発したオープンソースのソースコードエディター
◦ Windows、Linux、macOSで利用可能 • 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発 ◦ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール など • ブラウザー版で一定の成功を納めたのち、より高みを目指してデスクトップ版の開発にも着手 ◦ Electron上で構築 • 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表 ◦ 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている ◦ 統合開発環境(IDE)とテキストエディターの中間的な位置付け • 2015年11月にオープンソースとして公開 ◦ オープンソースな場で開発を行い、ブランド製品としてリリースしている(Chromiumと同じようなスタイル) • 拡張機能から拡張APIを通じてほぼすべての機能にアクセス可能 • リリースサイクルは、毎月第1金曜あたり。 ◦ Youtubeでリリースパーティがライブ配信される 14
Stack Overflow Developer Surveyで見る人気ランキング 15 Stack Overflow Developer Survey(2021) Stack
Overflow Developer Survey(2022)
VS Codeの主な機能 16 シンタックスハイライト 構文の強調表示。ifやfunctionに色がついているあの機能 公式ドキュメントはこちら スニペット ループや条件文など繰り返し使用するようなコードをテンプレート化できる機能 公式ドキュメントはこちら インテリセンス
コード補完、パラメーター情報、クイックインフォ、メンバーリストなどの機能を提供する総称 公式ドキュメントはこちら リファクタリング よりよくするコードの書き方を提案してくれる機能。拡張機能によるサポート状況次第で様々 公式ドキュメントはこちら デバッグ デバッガーの機能を提供 公式ドキュメントはこちら テスト テスト機能を提供
17 ユーザーインターフェース
18 https://code.visualstudio.com/docs/getstarted/userinterface
ユーザーインターフェース 19 アクティビティ バー(A) ビューを切り替えたり、Gitやテスト、デバッグなどにアクセスできるアイコンが表 示されている領域 WindowsやMacの下の部分にあるアプリケーションのアイコンのようなイメージ サイド バー(B) プロジェクトの作業中に役立つエクスプローラーなどのさまざまなビューが含まれ
ている領域。 エディターグループ(C) ファイルを編集するためのメイン エリア。縦横に並べて好きなだけエディタを開く ことができる領域 パネル(D) 出力またはデバッグ情報、エラーと警告、統合ターミナルを表示する領域 ステータス バー(E) 開いているプロジェクトと編集するファイルに関する情報
CircleCIの拡張機能もサポートされました👏 20
実行環境 21
実行環境 ローカル • ローカル端末に直接、実行環境を構築する方法のこと • 仮想化技術などは用いない 仮想化 • 仮想化技術を使用してローカル端末上に仮想環境を構築し、 仮想環境上に実行環境を構築する方法のこと
• DockerやVirtualBoxなど リモート • ホスティングサービスまたは、クラウド上に実行環境を構築する方法のこと • GitHub CodespacesやAWSのEC2など 22
実行環境 ローカル実行環境はどうしたらいいのか? • ローカルとコンテナの二刀流 ◦ 📌 IDEからコンテナ連携は今後の発展度合いで選択肢になる ▪ コンテナに接続したデバッグやテスト機能はサポートされていない •
拡張機能(プレビュー版)を使えばコンテナ内でVS Codeを実行可能 ▪ コンテナ内の開発は、コンテナ上のスペックに依存 • 端末のスペックが強くないと、スペックが落ちたPCを使うのと同じかも? ◦ 📌 頻繁に更新する場合はコンテナで動かさない方がいいかも ▪ ローカルに比べるとファイル同期する分の遅さを感じる ▪ 頻繁に変更するところはローカルで動かす ◦ 📌 全部をローカルに構築しなくてもいい ▪ DBやRedis、Elasticsearchなどデータ通信など最低限の使用で済むもの ◦ 📌 リリースに向けた準備作業として使う ▪ コンテナ環境でビルド済みのアプリで動かしてみて、パッケージやライブラリの追加漏 れがないかの確認用に使う 23
ローカル実行環境 コンテナ技術は何を使ったらいい? • Docker ◦ Dockerは、コンテナと呼ばれる実行環境を管理するソフトウェア ◦ コンテナの作成、配布、実行を簡単にできるツールとして人気がある Docker Desktopは?
• MacやWindows環境向けにグラフィカルなUIを提供しているアプリケーション ◦ CLIも同時にセットアップされる ◦ DockerやKubernetesの実行環境を簡単に手に入れられる • 注意点: ◦ 従業員が250人以上または、収益が1000万ドル以上は有料サブスクが必須 ◦ 代替ツールもあるので検討 24
ローカル実行環境 リモートな環境に接続して開発するのはどうなの? • GitHub Codespacesなどがある ◦ 環境構築は手軽で必要に応じて高スペックの環境を手に入れられる ▪ 最大32コア。64GBのメモリを積んだ環境を手に入れられる ◦
費用面がスペックに応じて課金されるので費用対効果をみて判断 25
ソースコード管理 26
ソースコード管理 • システム開発においてソースコードの変更履歴やバージョンを管理すること ソースコード管理のメリット • プロジェクトの全期間にわたって、誰がいつ何を変更したかを確認できる • 変更内容や理由をコメントで記録できる • 複数人で同じファイルを編集しても、衝突や上書きを防げる
• 過去の任意のバージョンに戻ったり、比較したりできる GitやSVNなどのシステムが必要 • ローカルやクラウド上にリポジトリと呼ばれる保存場所を作り、 そこにソースコードやその履歴を保管する • これから使用を検討している人でSVNを採用するメリットは少ない 27
ソースコード管理 Gitとは • 分散型バージョン管理システムの一つで、無料かつオープンソースのソフトウェア ◦ 各ユーザーはリポジトリの完全な複製を持ち、インターネットに接続していなくても作業で きる • Gitでよく使うコマンド: ◦
clone、checkout、pull、commit、push など リモートリポジトリとは? • Gitなどの分散バージョン管理システムで、ネットワーク上のサーバで運用され、プロジェクト の大本のファイル群を保管、管理するリポジトリ • チームで開発する際にはリモートリポジトリが必要。 ◦ ホスティングサービスを利用することが一般的で、GitHubが最も人気のサービスの1つ • GitHubで覚えておきたい用語: ◦ プルリクエスト、リポジトリ など 28
おわり 29