Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ここから始めるDevOps クライアント開発環境編

ここから始めるDevOps クライアント開発環境編

DevOpsを始めるにあたってクライアント開発環境の観点から学ぶべきポイントを紹介します。

とことんDevOps

March 16, 2023
Tweet

More Decks by とことんDevOps

Other Decks in Technology

Transcript

  1. ここから始めるDevOps
    (クライアント開発環境 編)
    日本仮想化技術株式会社
    VirtualTech.jp
    2023/03/15
    1

    View full-size slide

  2. 自己紹介
    2

    View full-size slide

  3. 3
    アジェンダ
    ● コーディング環境
    ● 実行環境
    ● ソースコード管理

    View full-size slide

  4. コーディング環境
    4

    View full-size slide

  5. コーディング環境とは
    ● プログラミングを行うための環境のこと
    ● プログラムを記述するためのエディタやIDE(統合開発環境)
    ● コンパイラやインタプリタ、自動テストやデバッガなどの開発ツール
    ● 実行時に必要なライブラリやフレームワークなど
    5

    View full-size slide

  6. エディタ
    6

    View full-size slide

  7. エディタ
    7
    テキスト編集に特化したもの
    エディタの種類
    ● プレーンテキスト:
    ○ テキストの原形そのままの状態で、書式やスタイルなどの装飾がないテキストのこと
    ■ Windowsのメモ帳。macOSのテキストエディットなど
    ● リッチテキスト:
    ○ 文字の色やサイズ、太字や斜体、下線や強調などのスタイルを追加することができる
    ■ MicrosoftのWordなど
    プログラミングに特化した高機能なエディタ
    ● プログラミング向けに使いやすい機能で特化されたエディタのこと
    ● IT業界の発展と共にどんどん形を変えて最適な形を求めながら変化し続けている

    View full-size slide

  8. コーディング以外にも色々と必要
    避けたいこと
    ● 本番環境にリリース後に深刻なエラーが発生によるサービス停止(Q:クオリティ)
    ● 手戻りによるコスト増加(C:コスト)
    ● リリース待ちの増加(D:デリバリー)
    どうするの?
    ● 重要なエラーや不具合には早く気づきたい
    ○ 静的解析ツール
    ○ 自動テストツール
    ● 不具合やエラーの原因を早く特定したい
    ○ デバッグツール
    ● リリースサイクルを早くしたい
    ○ CI/CD、ビルドツール
    ● 継続的な開発のために可読性や保守性を高める
    ○ FormatterやLinter、スペルチェック、環境の統一など 8

    View full-size slide

  9. 統合開発環境(IDE)
    9

    View full-size slide

  10. 統合開発環境(IDE)
    ● 統合開発環境(Integrated Development Environment)の略
    ● プログラミングに必要な最低限の機能を一つにまとめたソフトウェア開発環境
    ● 主な機能
    ○ コード編集の自動化やコード補完
    ○ 構文の強調表示
    ○ リファクタリング
    ○ ローカルビルドの自動化
    ○ テスト
    ○ デバッグ など
    10

    View full-size slide

  11. IDEの選択が主流に
    11
    ● 統合開発環境(IDE)が第1候補としてオススメ
    ● コードを書くだけに特化するだけではダメ。今後はテストなどの自動化は最低でも必須
    ○ コード保存時に意識せずとも静的解析やテストなどが実行される など
    ● DevOpsな開発環境を求めていくとツールやサービスは増えるので、極力集約していく
    ● CI/CD系のツールとの連携ができるかも今後大切になってくる
    ○ Visual Studio Code向けの拡張機能としてCircleCIがサポートされた
    ● 設定が共有しやすいかも鍵
    ○ VS Codeではsettings.jsonを使うと共有できる。最近は、プロファイル機能が追加された

    View full-size slide

  12. IDEの選び方
    ● 指定がある場合
    ○ Apple製品向けのアプリを作成する際は、Xcodeが必要 など
    ● プラットフォームである程度暗黙的に決まっているもの
    ○ Apple製品向けのアプリ開発=Xcode
    ○ Androidアプリ開発=Android Studio
    ○ Javaの開発=Eclipse
    ○ Windows向けのアプリ開発=Visual Studio
    ● 上記以外
    ○ お金をかける?かけない?
    ○ 情報量は多い?少ない?
    ○ 人気がある?人気がない? 色々と気になるけども、、、
    Visual Studio Codeがオススメ
    弊社メンバーも使用しており、継続的に情報収集中。使い方などのご相談も可能
    12

    View full-size slide

  13. Visual Studio Codeとは?
    13

    View full-size slide

  14. 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

    View full-size slide

  15. Stack Overflow Developer Surveyで見る人気ランキング
    15
    Stack Overflow Developer Survey(2021)
    Stack Overflow Developer Survey(2022)

    View full-size slide

  16. VS Codeの主な機能
    16
    シンタックスハイライト 構文の強調表示。ifやfunctionに色がついているあの機能
    公式ドキュメントはこちら
    スニペット ループや条件文など繰り返し使用するようなコードをテンプレート化できる機能
    公式ドキュメントはこちら
    インテリセンス コード補完、パラメーター情報、クイックインフォ、メンバーリストなどの機能を提供する総称
    公式ドキュメントはこちら
    リファクタリング よりよくするコードの書き方を提案してくれる機能。拡張機能によるサポート状況次第で様々
    公式ドキュメントはこちら
    デバッグ デバッガーの機能を提供
    公式ドキュメントはこちら
    テスト テスト機能を提供

    View full-size slide

  17. 17
    ユーザーインターフェース

    View full-size slide

  18. 18
    https://code.visualstudio.com/docs/getstarted/userinterface

    View full-size slide

  19. ユーザーインターフェース
    19
    アクティビティ バー(A) ビューを切り替えたり、Gitやテスト、デバッグなどにアクセスできるアイコンが表
    示されている領域
    WindowsやMacの下の部分にあるアプリケーションのアイコンのようなイメージ
    サイド バー(B) プロジェクトの作業中に役立つエクスプローラーなどのさまざまなビューが含まれ
    ている領域。
    エディターグループ(C) ファイルを編集するためのメイン エリア。縦横に並べて好きなだけエディタを開く
    ことができる領域
    パネル(D) 出力またはデバッグ情報、エラーと警告、統合ターミナルを表示する領域
    ステータス バー(E) 開いているプロジェクトと編集するファイルに関する情報

    View full-size slide

  20. CircleCIの拡張機能もサポートされました👏
    20

    View full-size slide

  21. 実行環境
    21

    View full-size slide

  22. 実行環境
    ローカル
    ● ローカル端末に直接、実行環境を構築する方法のこと
    ● 仮想化技術などは用いない
    仮想化
    ● 仮想化技術を使用してローカル端末上に仮想環境を構築し、
    仮想環境上に実行環境を構築する方法のこと
    ● DockerやVirtualBoxなど
    リモート
    ● ホスティングサービスまたは、クラウド上に実行環境を構築する方法のこと
    ● GitHub CodespacesやAWSのEC2など
    22

    View full-size slide

  23. 実行環境
    ローカル実行環境はどうしたらいいのか?
    ● ローカルとコンテナの二刀流
    ○ 📌 IDEからコンテナ連携は今後の発展度合いで選択肢になる
    ■ コンテナに接続したデバッグやテスト機能はサポートされていない
    ● 拡張機能(プレビュー版)を使えばコンテナ内でVS Codeを実行可能
    ■ コンテナ内の開発は、コンテナ上のスペックに依存
    ● 端末のスペックが強くないと、スペックが落ちたPCを使うのと同じかも?
    ○ 📌 頻繁に更新する場合はコンテナで動かさない方がいいかも
    ■ ローカルに比べるとファイル同期する分の遅さを感じる
    ■ 頻繁に変更するところはローカルで動かす
    ○ 📌 全部をローカルに構築しなくてもいい
    ■ DBやRedis、Elasticsearchなどデータ通信など最低限の使用で済むもの
    ○ 📌 リリースに向けた準備作業として使う
    ■ コンテナ環境でビルド済みのアプリで動かしてみて、パッケージやライブラリの追加漏
    れがないかの確認用に使う
    23

    View full-size slide

  24. ローカル実行環境
    コンテナ技術は何を使ったらいい?
    ● Docker
    ○ Dockerは、コンテナと呼ばれる実行環境を管理するソフトウェア
    ○ コンテナの作成、配布、実行を簡単にできるツールとして人気がある
    Docker Desktopは?
    ● MacやWindows環境向けにグラフィカルなUIを提供しているアプリケーション
    ○ CLIも同時にセットアップされる
    ○ DockerやKubernetesの実行環境を簡単に手に入れられる
    ● 注意点:
    ○ 従業員が250人以上または、収益が1000万ドル以上は有料サブスクが必須
    ○ 代替ツールもあるので検討
    24

    View full-size slide

  25. ローカル実行環境
    リモートな環境に接続して開発するのはどうなの?
    ● GitHub Codespacesなどがある
    ○ 環境構築は手軽で必要に応じて高スペックの環境を手に入れられる
    ■ 最大32コア。64GBのメモリを積んだ環境を手に入れられる
    ○ 費用面がスペックに応じて課金されるので費用対効果をみて判断
    25

    View full-size slide

  26. ソースコード管理
    26

    View full-size slide

  27. ソースコード管理
    ● システム開発においてソースコードの変更履歴やバージョンを管理すること
    ソースコード管理のメリット
    ● プロジェクトの全期間にわたって、誰がいつ何を変更したかを確認できる
    ● 変更内容や理由をコメントで記録できる
    ● 複数人で同じファイルを編集しても、衝突や上書きを防げる
    ● 過去の任意のバージョンに戻ったり、比較したりできる
    GitやSVNなどのシステムが必要
    ● ローカルやクラウド上にリポジトリと呼ばれる保存場所を作り、
    そこにソースコードやその履歴を保管する
    ● これから使用を検討している人でSVNを採用するメリットは少ない
    27

    View full-size slide

  28. ソースコード管理
    Gitとは
    ● 分散型バージョン管理システムの一つで、無料かつオープンソースのソフトウェア
    ○ 各ユーザーはリポジトリの完全な複製を持ち、インターネットに接続していなくても作業で
    きる
    ● Gitでよく使うコマンド:
    ○ clone、checkout、pull、commit、push など
    リモートリポジトリとは?
    ● Gitなどの分散バージョン管理システムで、ネットワーク上のサーバで運用され、プロジェクト
    の大本のファイル群を保管、管理するリポジトリ
    ● チームで開発する際にはリモートリポジトリが必要。
    ○ ホスティングサービスを利用することが一般的で、GitHubが最も人気のサービスの1つ
    ● GitHubで覚えておきたい用語:
    ○ プルリクエスト、リポジトリ など
    28

    View full-size slide