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
500
ここから始めるDevOps クライアント開発環境編
DevOpsを始めるにあたってクライアント開発環境の観点から学ぶべきポイントを紹介します。
とことんDevOps
March 16, 2023
Tweet
Share
More Decks by とことんDevOps
See All by とことんDevOps
今日からはじめるWSL実践入門
devops_vtj
0
140
'24/11月開催 Visual Studio CodeのDev Containersを使って開発環境構築してみよう
devops_vtj
0
310
DevOpsに関連するツールとその概要を淡々と読み上げる会
devops_vtj
2
260
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
7
6k
自動化と効率化のためにGitHub Actionsを使いこなそう
devops_vtj
5
980
Gitで始めるバージョン管理入門
devops_vtj
1
490
今さら聞けないDocker入門 〜 Dockerfileのベストプラクティス編
devops_vtj
34
11k
AWS AmplifyではじめるDevOps
devops_vtj
0
640
IaCコードリーディング ~Terraformのコードを一緒に読んで行こう~
devops_vtj
0
850
Other Decks in Technology
See All in Technology
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
RSNA2024振り返り
nanachi
0
500
アジャイル開発とスクラム
araihara
0
160
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Side Projects
sachag
452
42k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Done Done
chrislema
182
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Speed Design
sergeychernyshev
25
780
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building Applications with DynamoDB
mza
93
6.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
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