paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

初心者が簡単にRubyプログラミングを覚えられる!Smalrubyの使い方

f:id:paiza:20161209201006j:plain
Photo by Fumitake Taniguchi

f:id:paiza:20140916135428p:plainこんにちは。今回は谷口がお送りします。

先日このブログで、Flappy Codeを使って実際に弊社社員にビジュアルプログラミング学習をしてもらい、ゲームを作ってもらったというお話をしました。


プログラム未経験者の同僚が、たった1時間でゲームを作った方法 - paiza開発日誌


そこで今回は、その次のステップとしてRubyに変換できるビジュアルプログラミングツール『Smalruby』を使って、ビジュアルプログラミングときどきRubyの学習をしてもらいましたので、その過程をご紹介していきます。

こちらのSmalrubyは、ブロックを組み合わせて作ったプログラムを、ボタン1つでRubyに変換して見ることができるという、一からRubyを学ぼうという人にはもってこいのツールとなっております。そもそもが「小学3年生以上の子どもたちがプログラミングを学ぶための教材」として作られていますので、お子さんのプログラミング学習にも良さそうです。

ちなみにやってもらったのは、普段は事務を担当しており、プログラミング経験はビジュアルプログラミングのみという弊社女性社員(if文やfor文の概念に関しては他のビジュアルプログラミングサイト等を使って勉強したそうです)ですので、初心者のサンプルとしては最適な人材だと思います。

■Smalrubyの環境設定をしてみよう

Smalrubyは、Rubyプログラミング少年団のサイトからインストールできます。


NPO法人Rubyプログラミング少年団

Rubyプログラミング少年団とは、Ruby開発者のまつもとゆきひろさんのお膝元である島根県松江市で、Rubyを使って青少年がプログラムを作る喜びを体験するために活動している団体です。


f:id:paiza:20141028160510p:plain
こちらの「インストールする」をクリックしますと


f:id:paiza:20141028160553p:plain
子供でも使えるよう、大変親切にインストール方法を教えてくれます。


f:id:paiza:20141028160723p:plain
言われたとおり、ZIPファイルをダウンロードしてC直下に展開します。


f:id:paiza:20141028160847p:plain
展開されたファイルの中から「run-smalruby」をクリックすると……


f:id:paiza:20141028161113p:plain
Smalrubyがブラウザで起動したよ!簡単!これで環境設定ができました!時間にして5分もかかりませんでした!

■Smalrubyで遊んでみよう

f:id:paiza:20141028161953p:plain
このSmalruby、右上のメニューからロードを押しますと


f:id:paiza:20141028162001p:plain
「いろいろなプログラム」という、既にプログラミングされたゲームを実行したり、中を作り変えたりすることができます!


f:id:paiza:20141028162127p:plain
例えばこちらのピンポンゲームを実行してみましょう。


f:id:paiza:20141028162354p:plain
猫をキーボードで上下に動かしてカエルと対決するピンポンゲームで遊べます。


f:id:paiza:20141028162526p:plain
左上のRubyボタンをクリックすると、ブロックから実際のRubyに変換したコードを見ることができます!すごい!

■Smalrubyでプログラミングしてみよう

さて、今回プログラミング初心者の弊社社員には、「SmalrubyFizzBuzz作ってみて」という問題を出しました。

FizzBuzzとは、1から順に次の数字を発言していき、3で割り切れる場合は「Fizz」、5で割り切れる場合は 「Buzz」、3でも5でも割り切れる場合は「Fizz Buzz」と発言しなければならないゲームです。(Fizz Buzz - Wikipedia

f:id:paiza:20141028163512p:plain
まずキャラクターを選んで設定し……


f:id:paiza:20141028163653p:plain
ブロックを組み合わせていきましょう。


f:id:paiza:20141028164111p:plain
適宜実行して確認と保存をしましょう。


f:id:paiza:20141028170020p:plain
Rubyに変換するとこんな感じでコードを見ることができるよ!


f:id:paiza:20141028164453p:plain
プログラミング初心者が使っていることと、使える処理のブロックが限られていることもあって、かなり冗長的なプログラムになってしまいましたが……


f:id:paiza:20141028164707p:plain
コードに変換したものです。

実行結果は動画に撮ってYouTubeにアップしてみました。見てみてください!(※上の画像ではループ処理が「100回繰り返す」になっていますが、動画にする際は長いので20までに減らしました)

ちなみにこのシステムは初心者でも1時間半ほどで作成できたそうです!


SmalrubyでFizzBuzz作ってみた - YouTube

さらにこちらのコードを、先日スタートいたしました無料オンラインプログラミング実行環境サービス『paiza.IO』で、実際のRubyでも実行できるように修正してみました!(SmalrubyのコードそのままではRubyでは動かないため一部修正をしました。)

paiza.IO』では猫が出てきてくれないため、Smalrubyで変換されたコードからは、冒頭の「くろいねこ」を生成する処理を削除し、「say(message: "Buzz")」で猫に言わせていた部分をputsで表示するように修正しております。

ちなみに上記のブログパーツは、ただコードと実行結果を張っているだけではありません。例えばこの中の「20.times」を「100.times」に変えて「実行ボタン」を押すと100までの結果が表示されたり、「Fizz」「Buzz」を違う言葉に変えたりもできます。ぜひやってみてください。

これは『paiza.IO』から作れるブログパーツです。

paiza.IO』では、このようにブラウザですぐにコーディングと実行ができ、また、コードを公開したり共有したりすることもできます。


24のプログラミング言語がブラウザで即実行できる『paiza.IO』 - paiza開発日誌

■まとめ

SmalrubyFizzBuzzができるまで、いかがだったでしょうか。

ビジュアルプログラミング学習サイトはたくさんありますが、Smalrubyは、自分でブロックを組み合わせて作ったプログラムをすぐにRubyに変換して確認できるところがとても良いと思います。

プログラミング初心者でRubyを学んでみたいけど敷居が高いな~と感じている皆さん、まずはSmalrubyを使ってみてはいかがでしょうか。

ちなみに、今回弊社社員に作ってもらったFizzBuzzの処理がコードで書けるようになりますと、paizaではDランクに相当するレベルの実力がついたということになります。ある程度Smalrubyに触れてプログラミングの基礎が身についてきたなと思いましたら、ぜひpaizaでご自分のスキルレベルをはかってみてください

また、「実際のRubyのコーディングを学びたい!」という方は、ぜひ無料オンラインプログラミング実行環境サービスpaiza.IO』もご活用ください。

paiza.IO』は、環境構築の手間ゼロでブラウザ上でコードが書け、書いたコードをその場で実行できるオンラインのプログラム実行環境です。Rubyの環境構築は特にWindowsだと手間取る事も有りますので、最初のうちは『paiza.IO』で学習するのがオススメです。




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編