パブリックベータで利用申込していたGitHub codespacesが使えるようになったので試してみる。 あわせて今までエディタとしてVimを使っていたがこの機会にVSCodeも試す。
もともとこのブログは記事データをGitHubで管理してその投稿フローもPRによるmainへのマージをトリガーにしたGitHub Actionsで自動化しており、今までVimはGitやGitHubとの連携はあまり行っていなかったので記事のcommitからPR mergeはCUIやGitHub画面から行っていた。
今回のGitHub codespacesとVSCodeの利用によって記事の作成から投稿までをVSCodeで完全に完結させることが出来る。
本投稿もVSCodeで完結させてみた。
GitHub上にホストされたクラウド開発環境のこと。IDEとしてWeb版のVSCodeが組み込まれている。 GitHubから自分のrepositoryに紐づくcodespaceというものを作ることで、そのrepositoryに対するクラウド開発環境を簡単に作ることが出来る。
もともと、Microsoftが提供していたWebIDEである「Visual Studio Code Codespaces」が今回のGitHub Codespacesに統合されたようだ。
GitHub Codespacesの特徴として、IDEと謳われている通りcodeを実行するためのマシンインスタンスが付与されており、Webで開発を完結できることが挙げられる。
またIDEとしてWeb版のVSCodeではなくデスクトップのVSCodeを利用、あるいはそれらを都度切り替えができる。デスクトップ版のVSCodeを利用時でもweb側のCodespaceとsyncしているので、WebのVSCodeを開いた際にはデスクトップでの作業の続きをシームレスに行える。
Codespacesに対してWebかデスクトップかどちらのVSCodeをデフォルトにするかはGitHubのcodespacesに関するSettingsページで設定できる。
GitHub Codespacesは利用するマシンスペック * 起動時間の従量料金制だが、パブリックベータである2022年6月時点ではteamやenterpriseを利用していない個人は無料。
ブログ記事の投稿なのでMarkdownのプレビュー程度が出来ればokとは言え、VSCode初めてでもWeb IDE内のみで簡単にコード変更から投稿のためのPR作成までをシームレスに行えたことは非常に体験として良い。
そもそものVSCodeがデフォルトでもエディタとして使いやすく、ブログの記事投稿やちょっとしたカスタマイズ程度であれば、そこまで設定変更をする必要がなさそう。
とはいえ、Web版のVSCodeはキーボードショートカットキーがブラウザ(今回の場合Google Chrome)のキーボードショートカットとバッティングすることなどもあり、自分の用途であればデスクトップのVSCodeを利用したほうが良さそう。
そもそもvscodeに慣れていないのでvscode自体の話。メモ程度に置いておく。
vscodeは拡張機能で Markdown Preview Mermaid Support を入れるとmermaidをプレビューできる。
そもそもmermaidはplantUMLと違いjsでレンダリングされてるようなので、プレビューなどの環境構築がしやすい。
plantUMLはjavaが必要。
参考: mermaid自体の書き方
基本的にがっつりコードを書くのは今まで通りvim, それ以外のちょっとした物書きやコードブラウジング、メモなどをvscodeでやるつもりなので、エディタ部分のカスタマイズはあまり行わない想定。
-を保管してくれない⌘ + b がデフォルトのショートカット機能でなく、カーソル部分のbold切り替えになったので、そのbold切り替えは ctrl + shift + bに変更した。ctrl + g⌘ + k ⌘ + [⌘ + k ⌘ + ]⌘ + k v⌘ + w⌘ + shift + vctrl + tab⌘ + shift + [でもok (参考)ctrl + 番号: 左からn番目のファイルタブにジャンプできる⌘ + ,⌘ + k ⌘ + s (参考)⌘ + b⌘ + shift + p⌘ + shift + etodo: open でTODOリストを開ける。参考ctrl + shift + g の画面からcommitしたいファイルを選んでコミットメッセージを入力し、⌘ + enterでcommitできる・・・ からpushを選ぶ (もしかしたら自動でpushできるかもしれないけど、されてなさそう)