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
470
ここから始めるDevOps クライアント開発環境編
DevOpsを始めるにあたってクライアント開発環境の観点から学ぶべきポイントを紹介します。
とことんDevOps
March 16, 2023
Tweet
Share
More Decks by とことんDevOps
See All by とことんDevOps
'24/11月開催 Visual Studio CodeのDev Containersを使って開発環境構築してみよう
devops_vtj
0
5
DevOpsに関連するツールとその概要を淡々と読み上げる会
devops_vtj
1
190
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
7
4.7k
自動化と効率化のためにGitHub Actionsを使いこなそう
devops_vtj
5
870
Gitで始めるバージョン管理入門
devops_vtj
1
400
今さら聞けないDocker入門 〜 Dockerfileのベストプラクティス編
devops_vtj
34
11k
AWS AmplifyではじめるDevOps
devops_vtj
0
540
IaCコードリーディング ~Terraformのコードを一緒に読んで行こう~
devops_vtj
0
750
Software Design 11月号第1特集「理想のコンテナイメージを作る」を振り返る 第1章
devops_vtj
0
500
Other Decks in Technology
See All in Technology
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
複雑なState管理からの脱却
sansantech
PRO
1
140
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
370
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Taming you application's environments
salaboy
0
180
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Building Your Own Lightsaber
phodgson
103
6.1k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Producing Creativity
orderedlist
PRO
341
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Six Lessons from altMBA
skipperchong
27
3.5k
Visualization
eitanlees
145
15k
Ruby is Unlike a Banana
tanoku
97
11k
4 Signs Your Business is Dying
shpigford
180
21k
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