アプリ開発する際、ソースコードや設定ファイル等を編集するためにテキストエディタを使いますが、
たぬパパは設定ファイル編集やログファイル参照にテキストエディタ、ソースコード編集は統合開発環境（IDE）と使い分けています。
テキストエディタについては、昔は秀丸を使ってましたが、最近はフリーでも軽くて高性能な「サクラエディタ」https://sakura-editor.github.io/を愛用しています。
統合開発環境（IDE） については、最近個人での開発ではmicrosoftが提供しているオープンソース！のvisual sudio code(VScode)を利用しています。 VScode は軽くて多機能なんですが環境設定はそこそこ大変なので、インストールから簡単な使い方までをご紹介したいと思います。
そもそも 統合開発環境（IDE）ってなんぞや
アプリ開発にあたって、テキストエディタでソースコードを編集、CUIでコンパイル・デバッグすることも勿論可能ですが、やはり不便（統合開発環境（IDE）と比較してですが）なので、開発効率向上のため通常は統合開発環境（IDE）を利用することが一般的だと思います。
統合開発環境（IDE）を利用すると、ソースコード入力する際に補完機能を使えたり、
※補完機能の例、次に入力する文を推測して一覧から選べる
文法的に誤っている場合はその場で指摘してくれたり、
※問題点が表示されている。
ブレークポイントを設定して、その状態での変数の値を確認するなんてことができます。
DBと接続してクエリ発行することもできます。
ソースコード管理（gitとかSubversion）と連携して統合開発環境（IDE）上からチェックアウト、コミットを行うこともできます。
昔JAVAメインで開発していたころはeclipseを使っていましたが、重いし環境設定がとても大変なので※会社で使う分にはよかったんですが。環境設定して配布してくれたんで。
VSCodeのインストール
ダウンロード
ダウンロードサイトにアクセスします。
https://code.visualstudio.com/download
windows版、Linux版、mac版とあるので、環境に合わせてダウンロードしてください。
※ここではWindows版のUser Installer（64bit）をダウンロードする前提で説明します。
インストール
ダウンロードが完了したらダブルクリックしてインストーラを起動します。
最初に使用許諾が表示されるので、同意するを選択して「次へ（N）」をクリックします。
インストール先を聞いてくるので、特に変える必要がなければ「次へ（N）」をクリックします。
スタートメニューのフォルダを聞いてくるので、特に変える必要がなければ「次へ（N）」をクリックします。
デスクトップにアイコンを追加するかなど聞いてくるので、ここも特に変える必要がなければ「次へ（N）」をクリックします。
インストール準備が完了したので、「インストール」をクリックします。
インストールが始まります.
インストールが完了したので、完了をクリックします。
VScodeが無事起動したのでインストールは完了です。
日本語化
そのままではメニュー等が英語表示となっているので、日本語化してみましょう。
日本語化を行うには、VScodeの「拡張機能」を使います。
左側に並んでいるボタンから拡張機能のボタンをクリックします。
左上の検索窓にJapaneseと入力すると多分一番上にJapanese Language Pack for VS Codeがヒットするのでそれをクリックします。
右側に詳細が表示されるので、installボタンをクリックしてインストールを開始します。
インストールが完了すると右下に「Restart」ボタンが表示されるので、それをクリックしてVScodeを再起動します。
日本語で表示されるようになりました。
VScodeでgitを使う
VScodeでのgitの使い方
※このセクションはGitがすでにインストールされている前提となります。
VScodeでgitで管理したいフォルダを開きます。
左側のソース管理ボタンをクリックすると、リポジトリを初期化するボタンがあるのでそれをクリックします。※すでにgitで管理されているフォルダを開くとこの画面は表示されません。gitが使える状態になっています
するとフォルダにあるファイルが変更の下に表示されるので、ファイル名の右にカーソルを合わせると出てくる＋をクリックすると変更がステージされます。
ステージされたファイル名を選択すると、右側にgitで管理されている前のバージョンとの差分が表示されます。※今回は初回で前のバージョンが無いため、全部が差分として表示されています。
テキストボックスにコミット時のコメントを入力し、チェックをクリックするとコミットが反映されます。
念のためPowerShellでgit ls-filesしてみると、
PS C:\develop\python_sample> git ls-files
main.pyちゃんとgitで管理されたことがわかります。
拡張機能のGit Historyをインストール
VSCode上でコミットログを見やすくするため、拡張機能のGit Historyをインストールします。
左側の拡張機能ボタンをクリックし、検索窓にgitと入力します。一番上にGit Historyが表示されるのでインストールしましょう。
Ctrl+Shift+pでコマンドパレットを表示して、検索窓にgitと入力します。
Git: View History (git log)がヒットするので、クリックして実行します。
Git Historyでgit logがGUI表示されました。
GitHubとの連携
※このセクションはGitHubアカウントがすでに登録済の前提となります。
GitHubに新規リポジトリを追加
GitHubにサインインし、右上の＋をクリックしてNew Repositoryをクリック。
Create a new repository画面が表示されるので、リポジトリ名を入れて「Create repository」ボタンをクリックします。
新たなリポジトリの設定情報が表示されますが、すでにあるローカルリポジトリをpushするので、…or push an existing repository from the command lineを参考にします。
PowerShellでコマンドを入力します。
git remote add origin https://github.com/xxxxxx/xxxxxx.git
git branch -M main
git push -u origin mainpushした段階でGitHubへの認証画面が表示されるので、Sign in with your browserをクリックします。
GitHubへログインするとAuthentication Succeededが表示されます。
GitHubで確認すると、無事Pushできたことを確認できました。
GitHubからクローン
ここまではローカルリポジトリのソースを新規にGitHubにプロジェクト作成しPushする流れでしたが、
実際のTeam開発では既にGitHub上に存在するリポジトリをクローンすることになると思います。
ここからはその流れを確認します。
VSCode上で既に開いているフォルダがあれば閉じて右側のソース管理ボタンをクリックします。
リポジトリのクローンボタンをクリックします。 リポジトリのURLを聞いてくるので、GithubのリポジトリURLを入力しEnterをクリックします。
リポジトリの複製先を聞いてくるので、適当なディレクトリを指定して「リポジトリの複製先を選択」をクリックします。
コピー完了後、クローンしたリポジトリを開きますか？と聞いてくるので、「開く」をクリックします。
無事コピーされたことを確認できました。
コメント