search
LoginSignup
50

More than 1 year has passed since last update.

posted at

updated at

未経験からRuby・Railsを独学してWEBサービスを作るまで ※一部休止中

 未経験からRuby・Railsを独学してWEBサービスを公開しました。
 独学にあたっては、未経験から作ってみた系の記事
 ◎「37歳からプログラミグ未経験で、Rubyを2ヶ月独学してWebサービスをつくってみた」
   https://qiita.com/spark/items/db665a1d523e2f8fa023
 ◎「中年の危機ど真ん中のオッサンがWEBサービス作ってみた。」 
   https://qiita.com/hiroz31/items/d7f2f9b7d02f9be1ca92
 といった記事にとてもやる気をもらったので、自分も(上の2つ程のクオリティはありませんが)真似をして記事を書きました。

作ったもの

「統計データから探す観光地@GIFU,AICHI」

https://statistics-tourism.herokuapp.com/

qita.png
※Herokuの無料プランのため初回アクセスの際、表示に時間がかかることがあります。
 勉強の延長でつくっているので、レイアウトや不具合などはご勘弁を・・・。
 馴染みのある愛知県・岐阜県をベースにまずは作りました。

作った理由

 旅行が趣味なのですが、例えば「岐阜県 観光」でGoogle検索をしても、膨大な情報が出てきて一体どこが本当に良いスポットなのか探すのに苦労しました。いっそのこと統計データ(年間観光客数)のランキングからスポットを探せたら公平なのではないかと思って作りました。
 仕組みはデータベースに観光地と観光客数の情報を保存し、データベースの情報をもとにGoogleMapsAPIが、画像や口コミなどの情報を取ってきて詳細を表示するというものです。

自己紹介

 事務職サラリーマン歴7年のもうすぐ30歳で、典型的な年功序列企業勤務です。誰が決めているのかわからない遠方転勤や配置転換が頻繁に行われ、でも事務職は特別な能力があるわけではなく、言われたとおりがむしゃらに頑張るしか道はない。それで、無理をして壊れてしまう人を何人も見てきました。
 組織に頼りきりなのではなく、自分で食べていける力を養いたい! WEB上で見かける自分の力で活躍する人達に少しでも近づきたい! という思いから、勤務後と休みを使って昨年12月からプログラミングを独学で進めました。(田舎在住なのでプログラミングスクールがありません。)

学習の流れ

 もともと人のブログを巡回するのが趣味で、かねてからRubyプログラマの伊藤淳一さんのブログを見ていました(当時はプログラミングというより、そのライフスタイルに憧れていました)。プログラミング学習の情報収集を進めるうちに、ブログに登場していたRubyというのがプログラミング言語の一種であると知り、じゃあ自分もRubyを選ぶ!と即決しました。

◆Progate

 情報収集をしたところ、初心者にはProgateやドットインストールという学習サイトがお勧めで、HTML・CSSなるものをまず学ぶ必要があることを知りました。
 そこで、仕事終わりにコメダ珈琲店に通い、ProgateのHTML・CSS→Ruby→Railsを、「俺、プログラムを書いているぜ!」なんて考えながら、ひたすら打ち込みました。
 Progateは環境構築もいらないし、なによりも説明→問題の繰り返しで理解しやすかったです。それと、学習ランキングもあってモチベーションが上がりました。通常はweeklyランクで100位以内になるのが限界でしたが、お正月の連休にWeeklyランク5位を取ったことが自慢です。
 あと、毎日同じコメダ珈琲店に通っていたら、何も言わなくてもガム抜きミルク入りのコーヒーを出してもらえるようになりました。
progate.png
 Progateを3周くらい終えた後、資格という形に残るものがあるとモチベーションも上がると思い、「基本情報技術者試験とRuby技術者認定silver」の勉強に取り掛かりました。

◆基本情報技術者試験

 「基本情報技術者試験」について、プログラミングに関しては時間対効果が薄く遠回りだと思うのですが、2進数からのコンピュータ基礎について浅く広く学べたので結果良かったと思っています。あと、表計算の関数をたくさん覚えたので、本業のエクセル事務がスムーズになるという思わぬ副産物がありました。

◆Ruby技術者認定Silver

 「Ruby技術者認定silver」について、ProgateでRubyを3周して練習問題に挑んだところ4割程度しか正解できませんでした。ProgateはRailsが充実しているものの、Ruby文法については手薄な気がするので、以下の本で学習しました。
◎3ステップでしっかり学ぶRuby入門
 http://gihyo.jp/book/2018/978-4-7741-9502-5
 とにかくシンプルわかりやすく、Rubyを薄く早く学ぶためには最適だと思いました。自分みたいな初心者にお勧めです。
◎プロを目指す人のためのRuby入門
 http://gihyo.jp/book/2017/978-4-7741-9397-7
 Progateの知識だけでも説明がわかりやすく内容が理解でき、かつ、初心者の域を脱したそれなりのステージにRuby能力を引き上げてくれる素晴らしい本だと思います。Ruby技術者認定Silverはもちろん、今後Goldを目指す時にも力になってくれると思います。
◎Ruby技術者認定試験合格教本
 認定試験の貴重な練習問題がいっぱい載っています。分かりにくい解説が多いので、上の2つの本で補いました。

◆開発環境構築・Railsチュートリアル

 Progateと上記の2つの資格を取り終えると、プログラミングに対する自信も少しつき、次はローカル開発環境の構築に取り掛かりました。
 自分はWindowsを使っており、事前の情報収集で環境構築はかなり手間取るとあったので構えていましたが、ドットインストールのローカル開発環境構築を見れば四苦八苦しながらもとりあえずは動作する開発環境を整えることができました。
◎ローカル開発環境の構築 Windows編
 https://dotinstall.com/lessons/basic_localdev_win_v2
 続いて定番の、Railsチュートリアルに取り掛かります。第1章のGitとHerokuの設定でいきなり躓き、勉強がてらローカル開発環境をCentOSからUbuntuに変えました。Ubuntuの設定は以下のサイトが参考になりました。
◎Heroku入門
 http://www1290ui.sakura.ne.jp/index.php?Heroku%C6%FE%CC%E7
 Railsチュートリアルは理解が難しい部分も多く、特に7章以降は理解できていない部分も多いですが、2週したらとりあえず自主制作に取り組みました。

制作の流れ

◆HTMLテンプレート
 最初からHTML・CSSを作るのは時間も能力もないので、テンプレート使おうと考えたのですが、生半可なHTML・CSS・JSの知識なので、テンプレートをRailsに取り込むのに一苦労しました。以下のページを参考にさせてもらい、ガチャガチャ作業して何とかトップページだけは取り込めました。
◎railsでbootstrapのテンプレートを使用する方法
 http://now-is-the-time1014.com/programming/post-613/
(※テンプレートは次のサイトのものをお借りしています。https://template-party.com/)

◆GoogleMapsAPI
 やっぱり観光地紹介サイトだし、画像が欲しいなと思い、画像を提供してくれるAPIを探しました。
・インスタグラムAPI? → 全然機能ないじゃん!
・FlickrAPI? → 少しいじったけど、うまく入れられなかった……。
 それで、Google MapsのAPIに落ち着きました。
 しかし、どうやってGoogle Maps APIが提供してくれるJSON情報を自分のサイトに取り込むのかわからず時間を取られました。Google検索で粘り、以下のサイトと、なんだかんだGoogleの公式情報が参考になりました。
◎【Rails】Google Place API Web Serviceで取得したjson形式から値を取り出す
 https://pg-happy.jp/google-places-api-webservice-jsontoridasi.html
 また、GoogleMapsAPIが必ずしも意図する情報を返してくれるわけではなく、よくエラーが出るので、if文を書きまくるという初心者的方法で回避しています。

◆Git怖い
 失敗談もあり、誤ってGithubに秘密情報を挙げてしまう → 慌ててリポジトリを削除 → 新しくリポジトリを作ってpush先を変更 → あれ、git pushできない? → googleで調べる → revertとかresetすれば行けるんじゃね? → がちゃがちゃ → なんか手元のコードがだいぶ昔の状態に戻ってしまった/(^o^)\
 結局コードは戻らず、数日の作業を無駄にしました。当たり前ですが、定期的なバックアップは大事なことと、Gitは理解ないまま使うと危険と学びました……。

◆Heroku push
 ひととおり体面を整えたので、いざHeroku デプロイ! さぁ自分のサイトが公開されたのを見るとするか…!
wesorry.png
OMG/(^o^)\ (何回か起こりました。)

 自分の原因は、ローカル環境のRailsでは自動で補完してくれるコードもHeroku上ではで明示的に書く必要があった(例:require 'net/http')。その他、<%=%>の%抜けという、単純なタイプエラーもありました。Heroku上のコードはより厳密さが必要と学ぶ。

◆Heroku DB
 エラーも消えていざ表示してみたら今度はページがスカスカ(データベースが空)。HerokuのデータベースはPostgreSQLと(Railsチュートリアルで)事前に学んでおり、事前にProduction環境はPostgreSQLにする設定もしていたのですが、それが自動でSQLiteのデータを取り込んでくれることを意味するのではないと知る。
 どうやってHeroku上のPostgreSQLにデータを流し込むか悩んだのですが(SQLの知識不足)、AK-M5というありがたいツールでcsvからデータを流し込んでなんとかしました。以下のページがとても参考になりました。
◎A5-Mkを使ってHeroku DB[PostgreSQL]に接続
 http://blog.w-hippo.com/entry/2017/03/03/A5-Mk%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6Heroku_DB%5BPostgreSQL%5D%E3%81%AB%E6%8E%A5%E7%B6%9A

 以上、製作期間は3週間弱かかりました。

最後に

 これまで仕事が終わった後は疲れたことを言い訳に、勉強もしてきませんでした。プログラミングに触れ、学び続けることの大切さを知り、それと自分でも何かを作り上げられるということに希望が持てました。実際に自分でサイトを作り始めたら夢中で、なんとしてでも定時帰りをするために本業も一層集中して取り組めました。
 自分は30歳目前でプログラミングを始めましたが、大学とかもっともっと若いときからプログラミングに取り組み、遥か高みの技術レベルにいる人をとても羨ましく見ています。そうした域にいる人のことを考えると、今回作ったWEBサイトはレイアウトも機能もまだまだ未熟で、ちょっぴり無力感も感じてしまいます。それでも、今後もサイトの機能を増やしつつ、もっと知識を深めて少しでも追いつけるようにしたいです。

以上

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
50