どうも、まさとらん（@0310lan）です！
今回は、多彩なプログラミング言語を活用したプロジェクト開発ができる無料のクラウドIDEをご紹介します。
HTML / CSS / JavaScriptを利用したフロントエンド開発から、Node.js / Python / PHP / Ruby / GOなどを使ったバックエンド開発まで、さまざまな言語を利用した開発環境がブラウザ1つで完結できるのが特徴です。
他にも、GitHub連携や複数人とコラボなども可能なので、ご興味ある方はぜひ参考にしてみてください！
【 Repl.it 】
■「Repl.it」の使い方
それでは、「Repl.it」をどのように使うのか詳しく見ていきましょう。
サイトのトップページにアクセスしたら【start coding】ボタンをクリックしてください。
プログラミング言語を選択する画面が表示されるので、好きな言語を選びましょう。
2020年6月時点において、C,Pyhton,Ruby,PHP,JavaScript,Node.js,GO,kotlin,Swift...など、50を超えるプログラミング言語に対応しているのが特徴です。また、プログラミング言語は随時追加されており、自分でリクエストを申請できる仕組みも提供されています。
言語を選択したら【Create Repl】ボタンをクリックしましょう！
ブラウザ上にクラウドIDEのエディタが表示されます。
この画面上で好きなようにプログラミングをしたり、実行結果を確認したりできるように設計されています。
エディタの基本的な画面構成は以下のとおりです。
画面レイアウトは自由に調整可能であり、設定オプションからテーマカラーの変更やフォントサイズ・キーバインドなども細かく指定できるようになっています。コードエディタに関しては、優秀なコード補完機能やさまざまな機能へ即座にアクセスできるコードパレットなどが提供されているので便利です。
また、単純にプログラミング言語を試す用途以外にも、あらかじめいくつかのテンプレートが搭載されているので、ちょっとしたプロジェクトを素早く開発できる工夫もされています。
たとえば、以下のようなテンプレートが標準で提供されています。
- Reactのプロジェクト
- Vue.jsのプロジェクト
- Djangoのプロジェクト
- 個人向けブログサイトの構築
- ポートフォリオサイトの構築
- p5.js / Phaser.js用のゲーム開発
- Node.js / Expressプロジェクト
- A-FrameによるVRプロジェクト
- Three.jsによる3Dコンテンツの作成
試しに「ポートフォリオ」用のテンプレートを利用してみましょう。
エディタが起動したら【run】ボタンをクリックして実行すると、プレビューにポートフォリオのWebページが表示されます。
さらに、プレビューの端にあるアイコンをクリックしてみます。
すると、プレビューではなく一般公開用のWebページとして別タブから閲覧できます。
あとは、テンプレートのHTML / CSSを自分の好みに合わせて書き換えれば、すぐにオリジナルのポートフォリオとして公開できるわけです。（URLをシェアすれば誰でも閲覧可能です）
■無料のユーザー登録をしよう
「Repl.it」はユーザー登録をしなくても基本的なプログラミング作業はおこなえます。
ただし、登録を済ませると専用のダッシュボードでプロジェクトを管理したり、複数人とのコラボやGitHub連携など便利な機能がたくさん使えるようになるので合わせてご紹介しておきます。
「Repl.it」のトップページから、【sign up】ボタンをクリックしてください。
ユーザー名・メールアドレス・パスワードを設定すればすぐに登録可能です。
他にも、Google・GitHub・Facebookのアカウント経由でもログインができるようになっています。
ログインすると以下のようなダッシュボードが表示されます。
この画面から新規のプロジェクトを作成したり、直近で利用したプロジェクトを1クリックで開くことができます。また、他のユーザーが作成したプロジェクトを閲覧したり、チュートリアルなどを確認することもできます。
プロジェクトは、ディレクトリ構造を作成して好きなように整理できるので便利です。
また、ユニークな点として「シェア機能」をご紹介しておきます！
エディタ画面の上部にある【share】ボタンをクリックしてみてください。
【Invite】タブから、友人・知人のメールアドレスを登録することで同じコードエディタを複数人で同時編集ができるようになります。
Googleドキュメントを複数人で同時編集するような感覚で作業ができるので、たとえばチームでチャットしながらプログラムを組み立てることができるようになります。
画面下部にあるリンクをシェアすると他の「Repl.it」ユーザーとコラボをすることも可能です。
埋め込みコード（embed code）を利用すれば、自分のブログやサイトにエディタをそのまま丸ごと挿入することもできます。ソースコード付きでプレビューを見てもらえるので、自分の作品紹介や学習用途などに活用できるでしょう。
ダッシュボードの左にあるメニューから【Talk】を選択すると、世界中のユーザー同士とコミニュケーションできるフォーラムのような機能も利用可能です。
「Repl.it」の分からない点を質問したり、プログラムのエラーや解決したい問題点などを相談したりすることができます。また、自分のプロジェクトを投稿できる機能もあるので、おもしろいプログラムを作成したら他のユーザーに見てもらうのも楽しいでしょう。
■GitHubのリポジトリを利用する
「Repl.it」を使うと、GitHubのリポジトリURLを入力するだけでプログラムを簡単にインポートできる機能があるのでご紹介しておきます。
新規プロジェクトを作成するときに【Import From GitHub】タブに切り替えて、リポジトリのURLをそのままコピペしてください。
ボタンをクリックすると、あとは自動的にリポジトリをインポートして「Repl.it」で利用できるように設定してくれます。
エディタが起動したら、プレビューに初期設定の画面が表示されるので適切な言語を選択して【done】ボタンをクリックしましょう。
すると、プログラムがインポートされて編集ができるようになります。
あとはコードを編集したり、プレビューやコンソールを利用してデバッグなどの作業をおこなえます。（新規のプロジェクトとして保存することも可能）
変更したソースコードは元のリポジトリへ「コミット＆プッシュ」することもできます。その場合は左メニューにある「バージョンコントロール」アイコンをクリックしてから、コメントを添えて【commit & push】ボタンを1クリックするだけです。
ちなみに、初回のみGitHubアカウントと連携するメッセージが表示されるので、ボタンをクリックして認証をしてください。
「Repl.it」を使えば、GitHubにあるリポジトリをインポートして編集したあとにプッシュまで完結できるので非常に便利でしょう。
■スマホにも完全対応
「Repl.it」はPCブラウザだけでなく、スマホのブラウザからも利用できるように最適化されているので合わせてご紹介しておきます。
使い方は同じで、スマホのブラウザから「Repl.it」のトップページにアクセスしたら【start coding】ボタンをクリックしてプログラミング言語を選択します。
すると、スマホのブラウザから利用できるコードエディタが表示されます。
スマホの仮想キーボードからプログラミングできますが、Bluetoothで接続したキーボードからでも利用できます。
画面下部のタブを利用すれば、コンソール画面やプレビューの確認も同じように使えます。
「Repl.it」を活用すればPC・スマホなどのデバイスを問わず、いつでもどこからでも多彩なプログラミング言語を利用した開発環境が手に入るわけです。
また、今回ご紹介した機能はすべて無料プランで利用可能なので、気になった方はぜひ試してみてください！
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
他にもpaizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。
また、paizaでもクラウドIDE「PaizaCloud」を提供しています。環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。
無料プランもありますのでぜひお試しください。
■まとめ
今回は、多種多様なプログラミング言語に対応したクラウドIDE「Repl.it」をご紹介しました。
IDEとしての機能も優れていますが、何よりもコミュニティの活動が活発なのでさまざまなリソースを活用できるのも大きな魅力となっています。チュートリアルやプログラミング学習、各種フレームワークの活用法などブログ記事のような感覚で公開されています。
また、ClassRoom機能も提供されており、先生＆生徒の関係で「Repl.it」のエディタを学習用途に活用できるのも特徴的です。
これからプログラミング学習を始めようと思っている人はもちろん、何かプロジェクトを開発したい人にもオススメできるクラウドIDEなので、ご興味ある方はぜひ試してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
