Skip to content
hama.day

GitHub Codespacesから投稿してみる

パブリックベータで利用申込していたGitHub codespacesが使えるようになったので試してみる。 あわせて今までエディタとしてVimを使っていたがこの機会にVSCodeも試す。

もともとこのブログは記事データをGitHubで管理してその投稿フローもPRによるmainへのマージをトリガーにしたGitHub Actionsで自動化しており、今までVimはGitやGitHubとの連携はあまり行っていなかったので記事のcommitからPR mergeはCUIやGitHub画面から行っていた。

今回のGitHub codespacesとVSCodeの利用によって記事の作成から投稿までをVSCodeで完全に完結させることが出来る。

本投稿もVSCodeで完結させてみた。

GitHub Codespacesとは

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自体の話。メモ程度に置いておく。

Mermaidについて

VSCodeは拡張機能で Markdown Preview Mermaid Support を入れるとMermaidをプレビューできる。 そもそもMermaidはplantUMLと違いjsでレンダリングされてるようなので、プレビューなどの環境構築がしやすい。 plantUMLはjavaが必要。

A
B
C
D

参考: Mermaid自体の書き方

VSCode 環境構築

基本的にがっつりコードを書くのは今まで通りvim, それ以外のちょっとした物書きやコードブラウジング、メモなどをVSCodeでやるつもりなので、エディタ部分のカスタマイズはあまり行わない想定。

  • 入れた機能拡張
    • GitHub Codespaces
    • Favorites
    • Japanese Language Pack for Visual Studio Cod
    • Markdown Preview Mermaid Support
    • Todo+
    • Markwon All in One
      • これ入れないと、リストで改行時に自動で-を保管してくれない
      • これを入れると⌘ + b がデフォルトのショートカット機能でなく、カーソル部分のbold切り替えになったので、そのbold切り替えは ctrl + shift + bに変更した。

FAQ

VSCode自体のFAQ

  • 行ジャンプ: ctrl + g
  • 現在行の折りたたみ: ⌘ + k ⌘ + [
    • 現在行の展開: ⌘ + k ⌘ + ]
  • markdownプレビュー: ⌘ + k v
    • mdxファイルもファイル形式をmarkdownとして同様にプレビューすればデフォルトで普通に見れる。
    • むしろmdでなくmarkdownとしてプレビューしたほうが、コードフェンス内のコードも適切にシンタックスハイライトされる。mdxだとシンタックスハイライトされない。よってmfxをmardown reactでなくmarkdownに関連付けた。
    • markdownプレビューのtips
    • markdownの改行について
  • プレビューを閉じる: プレビュー側をアクティブにした状態で ⌘ + w
  • 別タブでのプレビュー表示: ⌘ + shift + v
  • 開いているファイルタブの切り替え: ctrl + tab
    • ⌘ + shift + [でもok (参考)
    • ctrl + 番号: 左からn番目のファイルタブにジャンプできる
  • エディタ設定変更: ⌘ + ,
  • キーボードショートカットのカスタマイズ: ⌘ + k ⌘ + s (参考)
  • 左サイドメニューのtoggle: ⌘ + b
  • コマンドパレット: ⌘ + shift + p
  • ファイルエクスプローラーの表示: ⌘ + shift + e
  • 機能拡張のTODO+を入れていい感じにタスク管理できそう (コマンドパレット todo: open でTODOリストを開ける。参考
  • git関連操作)
    • commit: ctrl + shift + g の画面からcommitしたいファイルを選んでコミットメッセージを入力し、⌘ + enterでcommitできる
    • push: ↑画面右上の ・・・ からpushを選ぶ (もしかしたら自動でpushできるかもしれないけど、されてなさそう)
    • コマンドパレットからもcommitやpushはできそう
  • devcontainerについて
#blog#GitHub#VSCode