文系卒のWebエンジニアの成長と備忘録
エンジニア経験を生かして発信するメディアサイト

Ruby初心者がWebアプリケーションを公開するまでにやった4つのこと

plan do check action

こんにちはYsです。
今日は、Ruby初心者の僕が1つのWebアプケーションを作成し、公開するまでにやったことをこのブログに書いていきたいと思います。
これからRailsを使用したWebアプリケーションを作成して公開してみたいという方必見です。

Ruby初心者の僕が作成したものは以下のサイトになります。

Color Pallet
Color Pallet
https://colorpallet.herokuapp.com/about
「Color Pallet」はエンジニア、デザイナー向けの色のマネジメントツールです。CSSのカラーコードをテキスト形式などで管理する手間を省き、絵の具のパレットのように自分の好きな色、カラーコードを一覧で管理する事が可能です。

エンジニアやデザイナー向けのカラーコードの管理サイトです。
自分が気に入ったカラーコードを登録することができます。

Ruby初心者の僕がやった4つのこと

  1. Railsの元となるプログラミング言語Rubyを学ぶ
  2. フレームワーク【Ruby on Rails】を習得し、Webアプリケーション作成の流れを学ぶ
  3. 自分のPCにRubyの環境構築を行う
  4. サーバーを選び公開する

Railsの元となるプログラミング言語【Ruby】を学ぶ

Ruby 勉強方法

まず、前提としてこのWebアプリケーションの作成まで、僕はプロプログラミング言語【Ruby】は触ったこともソースコードも見たことがありません。

一応、Web系のエンジニアとして実務としてPHPやJavascriptなどは触れていますが、Rubyに関しては基礎知識は0でした。

基本的な文法すら知りません。(HTMLやCSSなどのマークアップ言語に関しては基礎知識等は持っています。HTMLやCSSなどのマークアップ言語の知識がないという方は、まずそちらから着手し同時並行でRubyの取得をオススメします。勉強方法は同じです。)

そのため、Rubyというプログラミング言語を触ってみるところからスタートしました。

どうやって勉強したのか

僕がまず利用したのは、オンライン学習サービス「Progate」の基礎講座であるRubyのコース。
ここから着手し始めました。

受講のやり方としては、非常にオーソドックスです。

1日目:用意されたスライドを確認する
   →練習問題を解く
2日目:前日受講したレッスンのスライドを確認する
   →次のレッスンのスライドを確認する
   →練習問題を解く
** 以下、2日目の工程を繰り返し **

僕は働きながらこの勉強をやっていたので、自宅に帰ってPCを開いたときに実際に練習問題を解いて、電車などの移動時間においてはProgateのアプリでスライドを見て前日の復習していました。

Progateで用意されているRubyの講座は全部で5講座、目安の修了時間は合計で7時間45分とされています。
しかし、実際に受講してみると目安の時間より、1講座あたり30分〜1時間前後早く終わることが殆どです。
そのため、僕が実際に全ての講座が終わるまでにかかった時間は5時間もしていないと思います。

上記を少しずつやっていたので、結局1週間近くかかってしまいましたが、スピードアップして3日、4日で終わらせるのもアリだと思います。
そこは自分のスケジュールややる気と相談して大丈夫ですが、なるべく基礎のところなのでダラダラやるより、スピード感を持ってやった方がいいです。

ちなみに、参考書などはこの段階では手につけていません。
というのもここの講座では基礎文法を学ぶだけなので、この段階では参考書は不要です。全てProgateが用意してくれているスライドで十分です。

受講のまとめ

  • 演習問題は自宅のPCで実施する
  • Progateのアプリを利用して学習スライドで復習
  • 基礎文法の部分はスピード感を持って実施する

フレームワーク【Ruby on Rails】を習得し、Webアプリケーション作成の流れを学ぶ

Ruby on Rails 勉強方法

上記では、実際にプログラミング言語のRuby取得までの流れを学びました。
今度は本格的に、Webアプリケーションの作成の流れを学ぶために、Rubyのフレームワークである「Ruby on Rails」を学びます。

こちらの講座数は通常講座が11講座、それに加えて実践講座(道場)が3講座で、合計講座数が14講座習得時間の目安が合計で30時間強のなかなかのボリュームある講座です。

講座数が結構な数あるので、若干やる気が落ち込んでいくこともありますが、1つ1つの機能を作っていく感じになっているので、常に新しい発見と知識を得ることができます。

この講座の学習方法

・3講座ごとにある実践講座を確実に実施すること!
・分からなかったら、スライドを確認しに手戻りしよう!

基本は上記の項目で書いた、
復習→講座→実践の繰り返しで問題ないですが、異なるのは用意されている実践講座を確実に実践する事です。

実践講座では、ヒントはありますが基本的には前回までに学んだ事を実践してみようというのがスタンスです。
インプットしたら次はアウトプットを意識して実践すると、次からの講座が楽になるだけではなく、余計な手戻りが無くなるので時間の短縮にもなります。

大事なのは知識だけじゃない

 ここの段階では、フレームワークを学ぶという前提があるため、知識を身に付けようと躍起になるかもしれませんが、肝心なことはもう一つあります。
それは、開発の流れを掴むこと。

このレッスンでもう一つ大事なことは開発の流れを掴むことだと僕は思っています。
というのも、いざ、何か1つのWebアプリケーションを作成するといった時に、手順が分からないとどうしようもないです。

この講座では、アプリケーション作成前の準備から、ローカルサーバーの建て方、DBの作成といった一連の流れを丁寧に説明してくれています。

断片的に講座を受講するのではなく、流れをまずは掴み、作成手順を学ぶことで開発知識に紐づいた開発手順を得ることができます。
まずは、サーバーを建てるところから、次に何をすればいいのか意識するだけで、自分が0から作成するときに役に立ちます。

まとめ

  • 実践講座(道場)は確実に実践し、確実に知識を身に付けること
  • 開発の流れを意識すること

自分のPCにRubyの環境構築を行う

開発言語、手順等を習ったので実際に環境を出来る環境を自分のPCに構築します。

今までは、Progateで用意された環境を借りて開発していましたが、これからは自分のPCでオリジナルのものを作成するため開発環境を構築する必要があります。

Rubyの環境構築はProgateでチュートリアルを公開していますが、実際にRailsを入れる部分までは公開していません。
なので僕は以下の記事を参考にして構築しました。

環境構築を学ぶことも大切な勉強なので、実際に0からやる事が重要だと思います。
自作のサーバーでも、レンタルにおいても結局やる事になるので、自分のローカル環境を練習台と思って構築します。

また、構築する際にターミナルにコマンドを貼り付けると思いますが、いつでもその手順を実行できるように自分のPCのメモ帳にどういう風に構築をしたのか全てメモを取った方が良いと思います。

エラーが起きた場合なども同様に、エラー文をそのままメモ帳に貼り付けて、解消法のやり方も同時に書いておくと、もし次回実際に仕事などで同じ手順を踏む場合役に立ちます。

技術書は買う必要があるのかどうか

ぶっちゃけ言うと、作成しようとしているサービスの物にもよりますが基本は無くてもOK。
今作成している物が現在の知識だけではどうしようもない、といった場合は買うことをオススメします。

まとめ

  • 環境構築は調べながら0から自分の手で行う
  • 構築手順は全てメモ帳に記録しておく(エラー内容、その解消法含めて)
  • 技術書は無くてもOK。ただし、知識の限界を感じるのであれば買うのはアリ

サーバーを選び公開する

言語の勉強をして、開発の勉強をして、自作のオリジナルのものを作成したら今度は、作成したものをサーバーを借りて公開します。

今流行りのAWSやFirebaseなどのクラウド型のものが現在の主流です。
個人で使用するものに、どういったサーバーがあるのかどうかは以下で詳しく書かれています。

しかし、地味にAWSなどは初心者からすると敷居が高いので、今回は初心者にも優しいHerokuを使用します。
僕自身Herokuに対する予備知識等全くありませんでした。便利で無料のサーバーって認識程度です。
ただ、調べると参考に出来る記事も多いので、こちらを選びました。

Herokuに関する詳細は書きませんが、簡単に言えば、「インターネット越しに使用できるプラットフォーム」です。
Herokuを使用して実際にWebアプリケーションを公開する手順等は、以下の記事にまとめています。

ここで気をつけたことは、上記で書いた環境構築手順と同じく、構築手順を全てメモすること。
環境構築において、メモを取ることは必須です。

といってもHerokuでは、サーバー上で環境構築をする必要がないため、複雑なことは必要ありません。
Heroku CLI(コマンドラインインタフェース)という自分のPCからHerokuを触れるようにするための手順を行うだけでした。
あとは調べながらほとんど手順書通りに行えば無事に完了します。

公開したあとは、SNSで拡散したり、友人に使用してもらったりして改善点を洗い出しリファクタリング等していけば良いと思います。

そもそもなぜ自作したものを公開する必要があるのか?

スキルシート・ポートフォリオとして利用できるため

なぜ僕が作成したものをわざわざ公開したのかというと上記が理由になります。

転職する際に、職務経歴書などにこれまで業務で行ってきた事を書くだけでは、エンジニアとして説得力に欠ける部分があります。
実際に相手のPCから見ることができるのものがあるだけで、説得力が出るので公開することはオススメです。

まとめ

  • 初めてサーバーを利用するのであれば無料のものを利用する(Herokuオススメ)
  • 構築手順は全てメモを取る(2度目

最終的なまとめ

全体的な流れを元に、僕がやったことを公開していきました。
スピード感は若干遅めで1ヶ月半〜2ヶ月近くかかっています。

全く言語の知識がなくても、2ヶ月くらいで1個のサービスを展開することができます。
これからRubyを勉強するといった方参考にしてみてください。

人気記事【独学者おすすめ】プログラミング学習動画サービス3選

人気記事プログラミング実務未経験者が自社開発エンジニアになるための方法

人気記事エンジニアを目指しているなら使用すべき5つの転職サイト

\記事のシェアをお願いします!/