目指せ年収1000万PGタイトルロゴ
IT業界の底辺職であるプログラマーが年収1000万円を目指す生き様を各年収事に綴った自分史型ブログ



【STEP2】Rubyプログラミングの第一歩

プログラミングを始める第一歩

STEP1では、TODOアプリをつくるにあたってどのように学習を進めていくかのポイントについて説明しましたが、STEP2では実際のWEBサイトでRubyを実行する学習をすすめていきます。


STEP2の開始まえに、まずはSTEP1の、答え合わせを実施します。



≪STEP1の答え合わせ≫
こたえ

◆ブラウザ
ブラウザプレビュー ◆ソース
ブラウザプレビュー

STEP1の4章の入力フォームのHTMLの見た目とHTMLのソースです。


必要なものだけで構成しているので超シンプルですが、まずはこのレベルでOKです!


では、このフォームを使って登録できる機能を実装していきましょう!



「登録フォーム」が実際に登録できるようになるためには「システム化」する必要があります。 ただの「ホームページ」ではなく、フォームの情報を登録する「システム」を作りこんでいく必要があります。 すこし回りくどくなってしまいますが、STEP2では「システム化するための土台の知識」にフォーカスをあてていきたいと思います。


作成したHTMLはまた後で使います





1.Rubyを実行してみよう

今回は動的なサイトをつくるプログラミング言語にRubyを使用します。第一章ではRubyを動かすことにチャレンジしていきます。


ネット上にあふれるプログラミング学習サイトは、ブラウザ上で簡単に学習できたり、動作確認できるものが多いですが今回の学習は実務に近い環境で実施していきます。


難易度が高いようであればヒントを多めの記事に修正していくつもりなので分からない事があれば問い合わせフォームやTwitterの@ebiebi_pgまでDMください


さっそくRubyの実行環境を用意していきましょう。


まずは自分のパソコンにRubyをインストールして「HelloWorld」をRubyで表示できる環境を用意してください。Google先生に「Ruby インストール HelloWorld Windows(もしくはMac)」みたいな条件を入れて検索すればたどり着けると思います。(インストールするRubyのバージョン指定は特にないのですが、なるべく新しいものを入れておいて下さい。)


うまくいくと下記画像のような結果になると思います。


ローカルRuby実行結果

多くの人は「出たけど… これが何?」となると思います。(筆者もそうでした)が、それでもOKです。動かすまでの環境を作れるという事が最初に必要な一歩です。



一番のポイントは検索した結果から自分の理解しやすい情報を取捨選択するスキルを身に着けることです。


一番上に表示されたサイトをクリックして、少し読んでみて理解できなければ2個目、3個目と見るサイトを変えて理解するサイトへたどり着いて下さい。


慣れてくると、ページが開いた瞬間に「あ、このサイトは良い情報が無いな」って分かるようになります。



検索で一番注意すべきポイントは技術関連情報で検索した場合、プログラミングスクールへ誘い込む為の技術ブログ風ページが大量に表示されてしまう事です。


筆者は昔から技術関連情報を検索しているので「業者」と「技術者」のページを見分けるのは簡単ですが、初心者のかたにはそれが難しいと思います。


やたらプログラミングスクールを推してくるサイトであれば、記事の内容がスクールへの誘導中心となっており、技術情報に注力していない場合が多いのであまり見る価値はないのでご注意下さい。


何故、こんなにスクール推しをするブログが多いかというと、紹介した時の報酬が超高額だからです。




2.サーバへ接続してみる


自分のPCで動かせたら、今度はサーバ上へアップロードしてHelloWorldを実行してみようと思います。


サーバ上へアップロードするということはサーバが必要となってきます。Twitter経由でこのサイトで学習されているかたは筆者が用意したサーバをそのままお使い下さい。


Google検索等で飛んできて学習しようかなと思っている方は「SSHが使えるレンタルサーバ」を検索して契約しておいてください。
(Rubyが実行できるサーバでないと先へ進めなくなりますので、Rubyが実行できるサーバプランの契約が必要となります。どうやって探せばよいか分からない場合は問い合わせフォームからお問い合わせ下さい)


2-1.サーバ上で動かす準備その1(ターミナル接続)

Windowsの利用者は「TeraTerm」というソフトをダウンロードしてインストールしてください。


Macの利用者は標準でSSH接続できるので「Mac SSH接続」といったキーワードで検索し接続方法を確認してください。


Mac、Windowsどちらも「ホスト名」「PORT」「ユーザ名」「パスワード」を入力する必要があります。


Twitter経由でこのサイトで学習されているかたは「ホスト名(お伝えしたIPアドレス:111.111.111.111みたいなやつ)」「ユーザ名」「パスワード」はSTEP1の時に使ったものを入れて下さい。
ご自身でレンタルサーバを借りている方はレンタルサーバのSSH接続方法の説明ページ等でご確認下さい。


必要な情報がそろったところでさっそくログイン方法を調べてみましょう。「SSH ログイン方法 Windows(もしくはMac) クライアント」とつけて検索仕手ください。Windowsの人は「最後にTeraTerm」と入れて下さい。


ログインできると下記のような画面になります。(画面はWindows)

ログイン後

試しに「date」というコマンドを実行(画面上でコマンドを入力してエンター)すると現在時刻が表示されるはず。

コマンド実行確認

2-2.サーバ上で動かす準備その2(アップロード)

サーバへSSHでの接続が確認できたら次は「FileZilla」というソフトを使ってファイルをアップロードします。


「FileZilla インストール Windows(もしくはMac)」というキーワードで検索し、自分のPCへインストールしてください。インストールが成功して起動すると下記のようなアプリが立ち上がります。

FileZilla画面

このソフトを使ってサーバへRubyソースをアップロードします。


FileZillaについてもGoogle検索で情報を集めて設定してもらおうかと思っておりましたが、レンタルサーバのヘルプページ等が大量に引っかかる為アップロードについては手順を載せて説明します。


①サーバマネージャを開く
FileZilla設定画面1
②新しいサイトを選択
FileZilla設定画面1
③サイト名を決める
FileZilla設定画面1
④サーバの接続情報を入力
FileZilla設定画面1
⑤作った接続情報を使って接続
FileZilla設定画面1
⑥接続完了
FileZilla設定画面1
初めて接続するとき、下記の警告がでると思いますが「OK」ボタンを押して下さい。
FileZilla設定画面7

※接続が終わったらまだアップロードはせずに次の章へ進んで下さい。




3.HelloWorldアプリをサーバ上で実行


「2-2.サーバ上で動かす準備その2(アップロード)」で設定したFileZillaを使って自分のパソコンから何かファイルをアップロードしてみてください。(画像とかテキストファイルとか何でもいいので)ファイル名は日本語ではなくアルファベット名にしておいてください


FileZillaのアップロードが終わったら「2-1.サーバ上で動かす準備その1(ターミナル接続)」で繋げたターミナルの画面を開いて下さい。


ターミナル上で「ls」と打ってエンターキーを押すとファイルの一覧が表示されると思います。もし、初めてターミナル上でlsコマンドを打ったのであれば、これが貴方のCUIデビューです!CUIを使いこなす事はWEB技術者としての第一歩であり、WindowsやMacに慣れた人からは少しニガテと思われる世界です。


コマンドを打った結果を見てみるとアップロードしたファイルがズラッと表示されていると思います。

lsコマンド実行結果

上記lsコマンド結果をGUIで表すと下記のような感じとなります。

ディレクトリイメージ

イメージがつかめたら1章で作った「HelloWorld」のRubyのソースをアップロードしてみてください。


アップロード後、ターミナル上で「ls」コマンドを実行してアップロードしたファイルがあるかを確認し、ファイルがあれば「ruby hello.rb」を実行してみてください。


実行方法は下記画像を参考にして下さい。


Ruby実行結果

Linuxで何かを実行するときは「プログラム名 引数」という形で実行します。




4.STEP1の課題を表示してみる


↑STEP2の課題としてSTEP1で作ったHTMLをターミナル上に表示するRubyを作ってもらいます。


目指す実行結果は下記イメージを参照してください。


HTMLを出力するRuby


≪ヒント≫

うまく行かなくて下記画像のようなエラーが出る可能性もあります。エラーのあった行数とエラーのヒントを見ても分からない場合は、エラー内容をコピーしてGoogle先生に聞いてみると解決できるかもしれません。


Ruby実行結果