はじめに

みなさんこんにちは、ALH開発事業部のREIYAです。
こんなお悩みはありませんか？

• 今までJavaを使ってきたけど、新しくGo言語を始めたい、でも環境構築がめんどう...

• いろんな言語を使ってみたいけど、とりあえずどんな感じなのかだけサクっとためしたい

そんなとき、わざわざ環境構築をせずともブラウザ上でコードを書いてサクっと動かすことができます。
そう、ブラウザで動くんです。つまりスマホでも動きます。

今回はそういったエディタとなるサイトのうち、個人的におすすめなものについて
軽い特徴と個人的な使いやすさをまとめました。

汎用系

GitHub Dev

https://github.dev/

保存先: レポジトリにコミット
コミット先の権限が必要

GitHubでは、ブラウザ上でファイルを編集しコミットすることができますが
複雑な編集などを行う場合はエディタを使いたい。
そんな要望に応え、ブラウザ上で動くVSCodeのようなものを用いてコミットできます。
まんまVSCodeなので、拡張機能等も問題なく使えます。

あくまでブラウザ上で動かすので、ショートかっトーキーが競合することがあるため注意。
特にCmd + W

VSCode

保存先: レポジトリにコミット
コミット先の権限が必要

そうです。VSCodeもブラウザで動かせます。
GitHub Devとの違いがよくわかってませんが、こちらも前者同様に
ブランチをチェックアウトして編集、コミットを行います。

Code Sandbox

保存先: レポジトリにコミット
サインインが必要

よく見るライブラリやフレームワークのサンプルコードなんかは、だいたいCode Sandboxの埋め込みを使っているイメージです。
公開されている軽いスニペットレベルの埋め込みをフォークしたりでき、内部ブラウザを起動できるため
フロント言語でよく使われている印象があります。

Code Pen

https://codepen.io/your-work/

保存先: CodePen内に保存
サインインが必要

Qiitaなどの記事に、html js cssだけでいいから埋め込みたい！という時はこれが便利。
CDNでReactやVueも使えます。

Code HS

保存先: CodeHS内に保存
サインインが必要

主に教育目的でのコード公開系なものです。
バックエンド系言語のコンパイル実行が扱いやすいです。
作成したコードの埋め込みもhtmlコード経由でできます。

Wandbox

保存先: localStorage、Wandbox内保存で永続リンク取得可能
アカウント不要

対応言語に不自由たことがなく、標準入力・標準出力だけとにかく確認したければ
個人的には最も使いやすい実行環境です。
ちょっと書いてすぐ閉じても、再度ひらけば続きから描き始められます。
コードと実行結果を永久に保存し公開リンクを取得することもできます。
サンプル

onlineGDB

https://www.onlinegdb.com/online_c_compiler

保存先: GitHub Google
実行だけならアカウント不要、サインインすれば保存機能がある

GDBとつくように、基本的にはC/C++言語の実行が強いですが
RustやGo Haskellなど他言語にももちろん対応し、共有もできます。
Wandboxで気に食わない時にこちらを使うイメージ。

Code Chef

保存先: GitHub Google
実行だけならアカウント不要、サインインすれば保存機能がある

onlineGDBと同等とみて良い、UIの好みで使い分けるとよし。

マークダウン系

マークダウン中のコード埋め込みでシンタックスハイライトがつくので
マークダウンis最強と個人的には思ってます。
私は業務中のメモは基本マークダウンで取りますし、この記事もマークダウンで記載しております。

Stack Edit

保存先: localStorage、GitHubレポジトリと連携も可能
基本アカウント不要

めちゃくちゃよく使っているのでとてもおすすめです。
マークダウンのコードブロックについて、Mermaidの図も描画できます。
フォルダやファイルを複数設定できる上、これらが全てローカルストレージ保存のため
業務用のPCでも気兼ねなく使えます。

Marix

保存先: localStorage
アカウント不要

StackEditが嫌ならこちらを使えば良いかと思います、といった印象
機能として不足はないと思います。

Mermaid

保存先: localStorage
アカウント不要

Mermaid公式のライブエディタです。
図の種類ごとにサンプルがあるため、いちいち文法を覚えなくて良いです。
軽くクラス図やER図、シーケンス図などを描きたい時にとても重宝。
StackEditにコードブロックとして貼り付ければ完璧です

ファイルツリー表示

保存先: localStorage
アカウント不要

ファイルのツリービューを綺麗に描きたいとき、こういった記号を使うのが
意外と面倒ですが、これだと空白を使ったインデントで記載するだけで
綺麗な描画にしてくれます。
意外と便利。

おまけ

私のレポジトリに、これらのライブエディタへのリンクをバッジで埋め込んでいます。
また、こういうリンクをバッジとして作るツールも作りました

さいごに

ブラウザ上でぱぱっと動かせるだけで、コードを書くことへのハードルが格段に下がり
いろいろなことを試すことができると思います。
これらの便利ツールを活用して、よりよいエンジニアライフを送りましょう!

ALHについて知る

↓ ↓ ↓　採用サイトはこちら　↓ ↓ ↓

↓ ↓ ↓　コーポレートサイトはこちら　↓ ↓ ↓

↓ ↓ ↓　もっとALHについて知りたい？　↓ ↓ ↓