ここから始める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