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
380
ここから始めるDevOps クライアント開発環境編
DevOpsを始めるにあたってクライアント開発環境の観点から学ぶべきポイントを紹介します。
とことんDevOps
March 16, 2023
Tweet
Share
More Decks by とことんDevOps
See All by とことんDevOps
AWS AmplifyではじめるDevOps
devops_vtj
0
110
IaCコードリーディング ~Terraformのコードを一緒に読んで行こう~
devops_vtj
0
370
Software Design 11月号第1特集「理想のコンテナイメージを作る」を振り返る 第1章
devops_vtj
0
330
Software Design 11月号第1特集「理想のコンテナイメージを作る」を振り返る 第3章
devops_vtj
0
340
Software Design 11月号第1特集「理想のコンテナイメージを作る」を振り返る 第4章
devops_vtj
0
350
Terraformでニフクラにリモート開発環境を自動構築した話
devops_vtj
0
790
【ライブデモ】Visual Studio CodeのDev Containersを使って開発環境構築してみるよ
devops_vtj
1
690
VS Code Dev Containersで始めるリモート開発環境体験ハンズオン
devops_vtj
0
310
システムの脆弱性、把握してますか? 〜 これからはじめる脆弱性管理
devops_vtj
0
480
Other Decks in Technology
See All in Technology
任意コード実行の原理
ffri
0
180
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.6k
統計的学習理論読み Chapter 2
kmatsui
1
250
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
暗黙知を集積するプラットフォーム : 「健常者エミュレータ事例集」の取り組み
sora32127
1
160
こんなに簡単!AWSマルチアカウント
takuya_terada
0
110
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
280
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
480
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
137
21k
Bash Introduction
62gerente
604
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
How GitHub (no longer) Works
holman
301
140k
Building an army of robots
kneath
300
41k
Optimizing for Happiness
mojombo
369
69k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Music & Morning Musume
bryan
39
5.5k
Navigating Team Friction
lara
177
13k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
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