プログラミングの学習を気軽にするためのオンラインコンパイラの紹介
想定読者
・プログラミング初学者
・腰が重いエンジニア
はじめに
こんにちは@chiba_dです。
最近Reactの勉強会を友人と行っていた際に紹介した、ブラウザ上でコードの記述と実行が可能なオンラインコンパイラについて紹介します。
環境構築面倒じゃないですか？
例えばReact Hooksの勉強をする時、フォルダを用意して、create-react-appをして、npm startを行ってという手順が地味に面倒くさい。
場合によってはDockerを立ち上げて、コンテナを作って...ということもあるでしょう。一度だけコードを試す時にこの手順が重い腰を更に重くしています。
(npx create-react-appは公式から非推奨となった話はここではしません。気になる方はこちらを参照してください。)
オンラインコンパイラという選択肢
上記の手間を解消してくれるオンラインコンパイラというものが存在します。簡単に解説するとブラウザ上からコードの記述と実行が行えます。
またファイルの作成と読み込みが可能なオンラインコンパイラもあります。
以下で私がよく使うオンラインコンパイラについて紹介したいと思います。
codesandbox
こちら個人で利用する分には無料のサービスとなっています。(2023年12月現在)
右上のTry for freeから利用できます。
こちらの一番右のCreate a Sandboxを押します。
React TypeScriptを押します。
以上です。ブラウザから自由に開発を行ってください。
他のオンラインコンパイラの紹介
私がよく利用しているオンラインコンパイラをいくつか示します。
自分にとって使いやすいものを探してみてください。
myCompiler
こちらはコードの記述と実行結果を表示する機能に絞ったオンラインコンパイラになります。
画像にある言語の実行を行うことができ、私も頻繁に利用しているおすすめのオンラインコンパイラです。
TypeScriptPlayground
こちらはTypeScriptに絞ったオンラインコンパイラです。
コンパイル後のJSを確認することもできるため、TypeScriptの学習に非常に便利です。
onlineGDB
こちらはmyCompilerと似ており、様々な言語を実行できます。
ファイルも別で作成できる点は異なり、例えばCSSなどを別ファイルで記述などができます。
右上のLanguagesから言語を選択できます。
StackBlitz
こちらはWeb開発に特化しているオンラインIDEです。
はじめに紹介したcodesandboxに似ています。
COMPILER EXPLORER
こちらも幅広い言語をサポートしているオンラインコンパイラです。
おわりに
いかがだったでしょうか。
いくつかの私が使用した経験のあるオンラインコンパイラを紹介いたしました。
個人利用であれば無料で使えるものが多く存在します。
学習のハードルを下げて、スキルアップに繋げられたら良いですね。
この記事が役に立ったという方は下のハートマークを押してもらえると嬉しいです！
Discussion