【環境構築】オンライン実行環境でプログラムを実行する。 (paiza.IO編)

in #promari6 years ago

オンライン実行環境の使い方(paiza.IO編)

1. paiza.IOとは

paiza.IOは、ブラウザさえあれば、すぐにコードを書いて実行することができるオンライン実行環境です。 Java,Ruby,Python,PHP,Perl,C,C++,など主要24言語に対応しています。

2. 操作方法

以下では簡単なJavaプログラムを例に使い方を学んでいきましょう。

2.1 コード作成を試してみる

まず、以下のリンクをクリックし「paiza.IO」をブラウザで開きます。

https://paiza.io/ja

1.jpg

「コード作成を試してみる(無料)」をクリックします。

2.png

クリックすると既に雛形で作成されたプログラムコードが記述された画面が表示されます。

3.png

左上の緑のプルダウン(▼)をクリックすると、ブラウザ上で実行したい言語を選ぶことができます。

4.png

paiza.IOではJava、JavaScript、C言語など主張24言語に対応しています。プロマリではコースやオリジナルカリキュラムで学習する言語が異なります。必要に応じて学んでいる言語を選択してください。

paiza.IOの基本的な使い方はどの言語を学習するにしても同じですので、基本的な使い方をここでマスターしましょう。

5.png

ここではJavaを例に簡単なプログラムを実行する方法を学びましょう。

左上の緑のプルダウン(▼)からJavaを選択します。

6.png

選択すると、なにやら英語で記述された暗号のような文が表示されているかと思います。ご安心を。今は何を書いているか分からないかと思いますが、学習を終えるころには、その文の書いている意味が理解でき、皆様もなんなくプログラムを実行している日が到来しますので楽しみにしていてください。

ここで以下のプログラムコードが記述されているかと思います。

System.out.println("XXXXXXXX");

この文を以下のように修正してみましょう。

System.out.println("はじめてのプログラム!!");

変更すると以下の画面になるかと思います。

7.png

どうでしょうか。書けましたでしょうか。

お待たせしました。それでは皆様、プログラムを実行してみましょう。皆様の初めてのプログラムです。この興奮を覚えておきましょう。

「実行(Ctrl-Enter)」ボタンをクリックします。

8.png

するとどうでしょう。画面下部のウィンドウに「はじめてのプログラム!!」という文字列が出力されているのが分かりますでしょうか。

9.png

拡大するとちゃんと表示されていることが分かると思います。

10.png

もし皆様の中に、プログラムを書いてみたが、文字列が表示されないという方がいましたら、再度以下のプログラムコードにスペルミスがないか確認してみてください。

System.out.println("はじめてのプログラム!!");

文末のセミコロン(;)の記述漏れはないでしょうか。もしプログラムにスペルミスがあった場合は以下の様にエラー原因が出力されます。

11.png

この場合、実行環境のソフトウェアがこのプログラムの7行目に";"があるはず(expected)なんだけど間違ってないかい?と教えてくれるわけです。

今後プログラムを書いていく際に、このエラーメッセージから何のエラーでプログラムが動かないかも学習していきますので、頭に入れていってください。最初はできなくても大丈夫です。

プログラムも日本語や英語を学習するのと同じように使えば使う程、上達していきます。野球選手もバットを素振りしたり、グローブを使ってボールを取ったりという作業を繰り返して上達しますよね。プログラムも同じです。野球選手がルールだけ覚えて、プロ野球選手になれるかといったらなれない理由と同じです。ちょっとずつ、一歩一歩ステップアップしていきましょう。

「はじめてのプログラム!!」を好きな文字に変更してみて実行してみてください。

12.png

ここまでで分からなければ、以下のenvironment-questionから質問を行ってください。

https://discord.gg/NZR5XjY

プロマリでは「積極的に学び自己解決を大切にする」という問題解決能力を養うスキルも二人三脚で伸ばしていきます。問題解決能力のスキルの重要性ついてはこちらを是非一読していてください。

2.2 サインアップ

paiza.IO」では、サインアップ(会員登録)すれば、自分の過去のコードを閲覧/編集したり、 他の開発者のコードをお気に入り登録したり、後ほど学習するバージョン管理システム(GitHub)連携が可能になります。

今後の学習で作成したプログラムを保存したり後から編集を可能にするためにサービスへ会員登録を行っておきましょう。

「サインアップ」をクリックします。

13.png

ユーザ名、メールアドレス、パスワードを入力する画面が表示されますので、必要事項を入力し、サインアップをクリックします。

17.png

「アカウント確認のリンクが入っているメールを送りました。メール内のリンクでアカウントを有効にしてください。」というメッセージが表示されます。

18.png

メールを確認し、「アカウントを確認する」というリンクをクリックし、アカウントを有効にします。

22.png

「アカウントを登録しました。」というメッセージが表示されますので、「ログイン」をクリックします。

登録したメールアドレスとパスワードを入力し、「ログイン」をクリックします。※2

※2 アカウント作成が済んでいない方は以下のユーザでログインしてください。

21.png

「ログインしました。」というメッセージが表示されましたらログイン完了です。

24.png

2.3 プログラムを作成する

ログイン後の画面より「新規コード」をクリックします。

25.png

2.1 コード作成を試してみる」と同様の画面が表示されすので、この画面でプログラムを作成しましょう。

26.png

2.4 プログラムを実行する

2.1 コード作成を試してみる」と同様に、「実行(Ctrl-Enter)」をクリックするとプログラムが実行できます。

27.png

2.5 プログラムを保存する

作成したプログラムはまた後日学習の続きをするために保存しておきましょう。作成したプログラムを保存するには「実行(Ctrl-Enter)」の右にある▲をクリックし、「Save only」を実行します。

28.png

プログラムが保存されたか確認しましょう。画面の「一覧」をクリックします。

29.png

保存したプログラムが表示されます。

30.png

言語別に絞り込むこともできます。

3. 終わりに

オンライン実行環境は、サインアップ(会員登録)すれば、自分の過去のコードを閲覧/編集したり、 他の開発者のコードのをお気に入り登録したり、後ほど学習するバージョン管理システム(GitHub)連携が可能になります。皆様も是非、サインアップして開発をトライしてみてください。

RGgukq5E6HBS5wrYDNU5euL5kWt6DCj2LPGHAqZSwkfuoLdEdH7eB2otBDVMtGomJ8P4VL5cKfjf69rtMbw4585DE9g1mLB8NZM7JXuMHuBBCgyw74nJcZCj8hD8Z6n.png
written by tamito0201

プログラミングとのご縁結びならプロマリへ。

オンラインプログラミング学習スクールのプロマリは、プログラミングの初学者の皆様を応援しています。プログラミング講師と一緒に面白いアプリを作りませんか。

btpb5hmlur.png

The programming school "Promari" will help you learn programming. "Promari" is supporting the first scholars of programming. Let's develop an application with our programming instructor.

Sort:  

Thanks for using eSteem!
Your post has been voted as a part of eSteem encouragement program. Keep up the good work! Install Android, iOS Mobile app or Windows, Mac, Linux Surfer app, if you haven't already!
Learn more: https://esteem.app
Join our discord: https://discord.gg/8eHupPq

Congratulations @promari! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 500 upvotes. Your next target is to reach 1000 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Valentine challenge - Love is in the air!

Support SteemitBoard's project! Vote for its witness and get one more award!

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.028
BTC 57495.90
ETH 2348.52
USDT 1.00
SBD 2.36