【Ruby入門】初心者はブラウザでプログラミングを始めよう！【#1】

習うより慣れろ

こんにちは。Tomoyuki（@tomoyuki65）です。

「プログラミングをやってみたいけど始めるまでが結構大変そう」

って方も多いのではないでしょうか？

でも今の時代、ブラウザさえあれば簡単にプログラミングを始めることができるんです！

この記事では、そんなブラウザで簡単にプログラミングを始める方法を解説します。

ブラウザで簡単にプログラミングを始めるには？

プログラミングを始めるためには環境構築が必要です。

ただし、最近はWebブラウザがあれば簡単にプログラミングを始められるサービスが沢山あるんです。

その中で、日本のサービスで無料で利用可能な「paiza.io」というサービスをご紹介します。

paiza.ioは主要24言語に対応しており、プログラミングを学びたい方におすすめのサービスです。

paiza.ioを利用すれば、すぐにRubyのプログラミングが始められますよ！

この記事では、piza.ioでRubyプログラミングを始める方法について解説していきます。

paiza.ioでRubyプログラミングを始める方法

まずはpaisa.ioの公式サイトにアクセスします。

paiza.ioは、現在アカウント登録なしで無料で使用することができます。

サイトにアクセス後、「コード作成をためしてみる（無料）」をクリックして下さい。

図のような画面が開いたら、すぐにプログラミングを始めることができます。

初期設定でプログラム言語がRuby以外になっている場合は、Rubyに変更して下さい。

言語を切り替えるには、図のように左上の「Swift」ボタンにカーソルを合わせると、変更可能なプログラム一覧が表示されます。

言語一覧から「Ruby」をクリックします。

Rubyに変更できたら、早速Rubyプログラミングを初めてみましょう！

図の通り、吹き出しの①の黒い画面にプログラムを書いていきます。

プログラムを書いたら、吹き出しの②のボタン「実行（Ctrl-Enger）」をクリックして下さい。

するとプログラムが実行されます。

プログラムが実行後、ログの出力結果などは吹き出しの③に出力されます。

まずは画面に「Hello World !」を出力しよう！

Rubyを実行する環境が整いましたね。

では、早速簡単なプログラミングを実行してみましょう。

最初は、画面に「Hello World !」という文字列を出力させるプログラムを書くのが慣習となっています。

画面に文字を出力するためには、「print」メソッドを使用し、以下のように記述します。

このメソッドとは、処理をしてくれる関数のようなものです。

（printと文字列の間には半角スペースを入れて下さい）

print 出力したい文字列

では先ほど準備した黒い画面にプログラムを記述し、「Hello World !」という文字列を画面に出力してみましょう。

図の通り以下のプログラムを記述し、「実行（Ctrl-Enter）」ボタンをクリックして下さい。

尚、文字列を出力する場合は「”」（ダブルコーテーション）または「’」（シングルコーテーション）で文字を囲います。

（以下の例では「”」で囲っています。）

print "Hello World !"

プログラムの実行に成功した場合、出力画面に「Hello World !」が表示されます。

実行に失敗した場合は？

では実行結果が失敗した場合はどうなるでしょうか？

以下のようにプログラムを記述し、実行してみて下さい。

（printではなくpprintと間違った記述をした場合の例です）

pprint "Hello World !"

図の通り、実行結果が失敗（エラー）した場合、エラーに関する内容のメッセージが画面に表示されます。

プログラミングに慣れてくると、このエラー内容からプログラムのバグ（誤り）を特定できるようになります。

プログラムにコメントを書く方法を覚えよう！

通常、プログラムは上に書いたコードからから順に実行されます。

そして、構文にない記述があった場合は警告やエラーになります。

※エラーの場合は、処理が中断します。

そこで、プログラム中にメモなどのコメントを記述したい場合は、以下３つのいずれかの方法でコメントを記述します。

1.  #で行コメントを記述する方法
2.  「=begin」と「=end」で複数行のコメントを記述する方法
3.  「__END__」の記述以降にコメントを記述する方法

① #で行コメントを記述する方法

まず①について、以下の通り#の後に行コメントを記述することが出来ます。

#から行末までが全てコメントになります。

# コメントを記述

②「=begin」と「=end」で複数行のコメントを記述する方法

次に②について、「=begin」から「=end」で囲った部分が全てコメントになります。

コメントを複数行で記述したい場合は、この方法を使用します。

=begin
コメントを記述①
コメントを記述②
コメントを記述③
=end

③「__END__」を記述以降にコメントを記述する方法

最後に③について、「__END__」を記述するとスクリプトの終わりを定義できます。

「__END__」以降の記述は実行されません。

__END__
ここ以降の処理は実行されない。

行コメントを記述してみよう！

では先ほどエラーになったプログラムに、「#」を記述して実行して見ましょう。

# pprint "Hello World !"

paiza.ioでは、「# pprint “Hello World !”」がコメントと判断されてグレーアウトになります。

ではもう一度プログラムを実行してみて下さい。

図の通り、エラーにならず処理が終了します。

これでコメントの書き方がわかったかと思います。他の記述方法も試してみて下さいね。

まとめ

•  ブラウザだけで簡単にプログラミングを始めるには、「paiza.io」がおすすめ
•  プログラミングの環境が整ったら、まずは画面に「Hello World !」を出力しよう
•  プログラム中にコメントを記述する方法を覚えよう
•  コメントの書き方は、「#で行コメント」、「=begin〜=endで囲い複数行コメント」、「__END__後のコメント」の３つの方法を覚えよう
•  『プログラムには適切なコメントを記述することが大切』ということを覚えておこう

今回は初心者がブラウザで簡単にプログラミングを始める方法を解説しました。

「paiza.io」を使えば、すぐにプログラミングが始められるのでおすすめです！

これからプログラミングを始めたい方は、ぜひ利用してみて下さいね。

•  関連記事

【無料あり】Ruby入門サイトおすすめ３選！初心者向けの学習方法を解説

2017年10月24日

MacでRuby！ターミナルの使い方からHomebrewのインストールで環境構築

2017年9月20日

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Tomoyuki

SEを5年経験後、全くの未経験ながら思い切ってブロガーに転身し、月間13万PVを達成。その後コロナの影響も受け、以前から興味があったWeb系エンジニアへのキャリアチェンジを決意。現在はWeb系エンジニアとして働きながら、プロゲーマーとしても活躍できるように活動中。

最新記事 by Tomoyuki (全て見る)

• Azure AD B2Cを使ってみた！PostmanやLaravelでMicrosoft Graph APIの実行方法もご紹介 - 2024年4月17日
• Expo（React Native）によるアプリ開発方法まとめ - 2024年2月8日
• Web系エンジニアに転生した36歳男性の記録 - 2023年12月31日