1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【初心者必見】環境構築いらずでコードがかける!Cloud9の使い方

Pocket

「Cloud9」って皆さんご存知ですか?プログラミングを勉強する時、いざコードを書こう!どこに書くの」?と困った経験はありませんか?そう、プログラムを動かすには「環境」が必要なのです。しかし、初心者にとって環境構築は至難の技。情報を集めるだけでも大変なのに、エラーなんて出たら半日は潰れます。
そんな環境構築の手間を省いてくれる強い味方が「Cloud9」です。

この記事はこんな方に向けて書いています。
・本や動画で学習したプログラムを手で書いて動かす、カンタンな方法を知りたい
・コードを表示して結果をブラウザやターミナルに表示させるプロセスを体験したい


これを10分で出すのが目的です!

Cloud9って何?

「Cloud9」とは、プログラミングを行うための統合開発環境のことです。名前の通り仮想環境で動いており、ユーザーはアカウントを作ってクラウドの一部を使用するイメージです。
「Cloud9」の特徴は、PHPやJavaなど大抵のプログラミング言語のパッケージやWebサーバー、データベースがあらかじめ用意されている点です。したがってユーザーはアカウント作成のみでプログラミングを開始できるのです。所要時間にして約5分!

Cloud9でアカウントを作成してみよう!

それでは早速Cloud9を使ってみましょう。以下のURLより接続することができます。
https://c9.io
まずはアカウント作成です。
①ご自身のメールアドレスを入力し、「Sign Up」をクリックします。

②「Your name」には名前やニックネームを登録します。

③「username」を登録します。ここで登録したものが、後にURL等に使用されます。

④属性や使い方は何を選んでも特に影響しません。「Hobby」や「studying」関連を選択しておけばいいでしょう。

⑤クレジットカードを登録します。下の「PostalCode」には郵便番号を登録します。
※2016年11月から、アカウント取得時にクレジットカードの登録が必要となりました。登録のみで、もちろんプレミアム会員にならない限り費用はかかりません。

⑥以上で登録は完了です。以下にチェックし「Create accout」をクリックします。

これで登録が完了しました。送付されてきたメールのURLをクリックして早速ログインしてみしょう。

Cloud9でプログラミングをしてみよう!

自分のワークスペースをつくろう

①ワークスペースの作成
Cloud9でプログラミングを行うには「ワークスペース」が必要です。これは仮想環境に、自分専用のディレクトリを作るという認識をしておけばいいでしょう。
ログインしたばかりの状態なので、当然なにも作成されていません。以下の「+」をクリックして作成を始めます。

②各項目の選択
・Workspace name:ワークスペースの名称です。自分がわかりやすいように付けましょう。
・Public /Private
「Private」を選択すると、自分以外はそのワークスペースを見られなくなります。ただし1アカウントにつき1ワークスペースしか作成することができません。「Public」では作成数に制限はありません。学習用に使うには、いったん「Public」を選択しましょう。
・Choose a Template 使用したいフレームワークや環境に応じて選択します。ここでは初回なのでシンプルな環境である「Blank」を選択すればいいでしょう。

これで環境が自動的に作成されます。処理が終わるまで通常1~3分ほどかかるのでお待ちください。

実際にコードを書いてみよう

①「Hello,World」の表示
早速、作成されたワークスペースでコードを書いてみましょう。PHPで「Hello World」と表示させます。
ファイルを作成するときはツールバー「File」から「NewFile」を選択します。作成されたら任意の名称をつけてください。

また、以下のようにターミナルにUNIXコマンド「touch [作成したいファイル名称]」でも作成できます。コマンドも勉強したい人はターミナルからの入力の方がよいかもしれません。今回はphpファイルを作りたいのでコマンド「touch echo.php」を入力します。

作成されたPHPファイルをクリックして開き、以下のプログラムを入力してみます。

書き終わったら「Save」を選択します。キーボードから「crrl + S」でも保存可能です。

右上の「Run」ボタンを押すと、下の方にURLが表示されるのでクリックして「Open」を選択します。

以下のようにブラウザが立ち上がり、「Hello Wordl!」と表示されればOKです。

これで、学習したif文でも配列でも、実際に動かしてみることができます。初心者の方はこれを繰り返してから次に進みましょう。
ちなみに今回の記事ではPHPを使用していますが、RubyやPythonなどもこのワークスペース内で書くことができます。

※ちなみにRubyはブラウザ上ではなく、ターミナルへの出力となります。
試しに下のターミナル上からコマンド「ruby [実行させたいファイル名]」を入力してください。ターミナル上に「Hello,world!」と出力されればOKです。

《補足》
Cloud9では、今回使用したCustomテンプレートのほかにも「PHP」テンプレートや「Ruby on Rails」テンプレートが用意されています。
PHPテンプレートではCustomに加えて「PHP.ini」など設定用のファイルが用意されています。Railsテンプレートはその名の通り、Ralisフレームワークが入っています。いずれも学習が進んだ段階で活用してみるといいでしょう。

webサーバやデータベースとのやり取りについてはまたの機会に書いていきたいと思います。

おわりに

いかがでしたか?環境構築いらずで数分でプログラミングが必要な状態まで設定できる手軽さがCloud9の魅力です。開発画面も使いやすいようにカスタムできるので是非、使い倒してみてください。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る