Rails未経験者がゼロから勉強してWebアプリをつくりました
DJミックス、作業用BGMをブックマークして、素早く検索出来るアプリが欲しい → せっかくだから作ってみよう！
以前から作ってみたいと思っていたWebアプリがあったので、せっかくなので未経験だったRuby on Railsをイチから学んでやってみる事にしました。まだちょこちょこ調整中ではあるんですが、大体出来たのでここらで公開することにします。細かい調整が終わるのはずっと先になってしまいそうだし。
今回作成したWebアプリケーション → Mix Bookmark
ざっくりどんなアプリなのかと言うと、ネット上に転がっているDJ MIX、作業用BGM等を簡単に登録・検索できるようにしたもの。はてぶを作業用BGMに特化させてすごくシンプルにしたようなものだと思います。（アプリのおもな機能や中身についてはおいおい書いています。）
Rails経験ゼロから、一応Webアプリっぽいものをつくるまでの記録
今回は賞味約1ヶ月間ぐらいでこのアプリをつくりました。RubyもRailsも触れた事が無かったので、超詰め込み勉強で無理矢理やってみた感じではあります。が、MVCフレームワークの事が大分良く分かったし、ゼロから自分の作りたいものを作れたという事で、なかなか楽しかったです。
もともとのスキル
Webデザイナーとして標準的なHTML、CSS、JavaScriptの技術がある程度で、アプリケーションをゼロから作る知識は全く無い状態でした。ただデータベースの扱いやPHPのビューの操作はある程度理解していたので、「ちょっと勉強すればできるかも？」ぐらいのノリで始めてみた感じですね。
1週目① : ドットインストールをみる
もしこれからRailsを勉強してWebアプリを作ってみたいと考えているなら、間違いなくドットインストールの「Ruby on Rails 4入門」をみてみる事をおすすめします。ドットインストールのレッスンはどれも本当によく出来ているのですが、特にRailsの回は楽しく、滞り無く学習出来る感じがしました。
実際に自分のPCでRailsを扱う際にはローカル開発環境を整えなければなりません。これがなかなか大変ですが、エラーが出ても手当たり次第にぐぐればなんとかなります。最初に環境さえ出来てしまえば、Railsはトントン拍子にアプリケーションを作っていく事ができます。
Railsがすごいとおもった所
Rails = レールに乗っかっていけばOK、という考え方のとおり、決まり事を覚えていけば必要充分なアプリケーションを作成出来る所がすごい。
本格的にやるのであれば、中身のRuby動きを詳しく知る必要があるが、それはある程度アプリが形になってからゆっくり勉強していけば良いのでは無いかと思います。「なんか分かんないけど出来た！」まですぐに行けてしまうので、プログラミングに不慣れでも無理なくWebアプリ制作が出来ます。
１週目② : Rubyを書籍でおさらい
Rubyが余り分からなくてもOK、という声もありますが、ある程度おさらいしておいた方がスムーズに作れます。RubyはJavaScriptなんかに比べるととてもスッキリとしていて、読みやすいと思いました。いずれ、改めてしっかり勉強したいと思います。今回Rubyの勉強用に購入したのはこちら。
簡単な蔵書検索アプリの作成を通じてRubyの仕様を確認していける内容。過不足なく読みやすいので、Railsの前提知識として良いと思います。
また、Railsの本はこちらを読みました。
Ruby on Rails 4 アプリケーションプログラミング
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2014/04/11
- メディア: 大型本
- この商品を含むブログ (3件) を見る
こちらも大変読みやすく、一回ざっと通読したあとはリファレンスとして非常に有用で、長く使えそうな内容です。
２週目 : プロブラミング開始！
ドットインストールを何回か見て内容を頭に入れれば、基本的なCRUDアプリ（=データの登録、読み込み、アップデート、消去が出来るアプリ。例えばブログ）が作れる様になります。あとは自分が作りたいものに合わせて必要なプラグインを入れたり、JavaScriptと連携させてオリジナルなものにしていく作業になります。
今回力を入れた機能
今回の「Mix Bookmark」は「DJ MIXや作業用BGMを簡単に登録・検索できる」ものにしたかったので、そこに注力しました。
登録時にはYouTube、Soundcloud、MixcloudのAPIを取得し、Rails経由でデータベースに格納させる事で、URLを入れただけで沢山の情報が書き込める様になっています。
また、トップ画面に「QUICK SEARCH」という検索フォームを設けて、画面遷移無しでさくっとミックスを検索出来る様にしました。
▲タイトルとトラックリストに該当する文字列があるMIXだけが素早く調べられる。AngularJSすごい
この部分は、試してみたかったAngularJSを使っています。Railsの標準プラグイン「Jbuilder」をを使って自身のデータをJSONで発行し、AngularJSでそこから検索できるようにしています。
Railsの学習を通じて、JavaScriptもレベルアップ
Railsを身につける目的で始めた事でしたが、Railsだけで無くJavaScriptの知識もかなり増えた気がします。ajaxの扱いもかなり上達したのではないだろうか。
今回本腰入れてRailsをやってみた事で分かったのは、「色々な言語を学ぶのは良い事だ」という事です。これをする事で、相互の分かりにくかったポイントが補完されていき、いい感じにスキルが増していくような感じがします。
３週目：ちょっと寄り道。Sass、Emmetで効率的マークアップ
短期間で詰め込もうと思ったのですが、ある程度出来てくると詰めの作業がダルくなってしまい、少し寄り道する事にしました。
Railsでは、標準でSassが使えます。まずはこの機会にSassを覚えてしまおうと思い、ささっとおさらい。慣れてくるとSass独特の入れ子入れ子の書き方が楽しくなってきて、再びマークアップ魂に火がつきました。
また、この頃に初めてEmmetの存在を知り衝撃を受けました。2時間ぐらいかけてEmmetの練習をしましたが、それだけですごい速さでマークアップが可能になります。
こんなふうに新しいツールがどんどん出てきて、それを使う事で仕事が効率化されていく所がコーディング・プログラミングの楽しい所ですね。
４週目：仕上げ。全体の見た目を整えていく
1カラムでいいや、と思って適当に作っていたら自動的にレスポンシブ対応になったので、モバイル用の調整が特に不要だったのが良かった。フォーム部分はBootstrapで対応、ロゴはPhotoshopで15分くらいで作成しました。
見た目は最低限の調整しかしておらず、今の所は結構いい加減です。
ただ全体的なレイアウトはこれで良い気がするので、今後機能が増えるに従ってUIも整えて、かっこ良くしてこうと考えています。
Herokuでお手軽デプロイ
このような小規模なサイトなら、Herokuの無料プランでお手軽にデプロイしてしまうのが良いようです。
通常は有料のレンタルサーバーを借りたりして、色々な設定をしなければならない所ですが、Herokuを利用する事でそういった作業を省略し、簡単に本番環境にWebアプリを置く事ができます。
Herokuは慣れないうちは取っ付きにくいですが、最初の設定をしてgitの最低限のコマンドを覚えておけばあとはとても便利。色々調べて今後もっと使いこなしたいところです。
今後追加したい機能
メモ代わり。とりあえずお気に入り機能は付けたい。あと、はてぶのようにブラウザのアドオンを作って、YouTubeやSoundcloudのページからワンクリックでブックマークできたらかなり便利なので、そちらも実装していきたいですね。
あと当初やろうとして断念していたのが、ニコニコ動画の動画データの取得。ニコ動はJSONのAPIが無く、それだとRailsで上手く取得する方法がわからずやめていました。調べたら出来そうな事が分かってきたので、こちらもはやくやりたいです。
現状では自分専用のアプリケーションなので、ユーザーの意見を気にせず好き勝手に色々作っていけるのが楽しいです。
初めてゼロからWebアプリを作ってみた感想
Railsは楽しい！
とにかくRailsなら「何かは出来る」という所にすぐに行けるので、初心者が最初にチャレンジするならかなりおすすめのフレームワークでは無いかと思います。
とりあえずScaffold（15分でブログが作れる、というすごい機能）で「ブログつくった！」とかやってみるだけでも楽しい。そして、そこから掘り下げて中の構造を知っていくとどんどん知識が増えていきます。ここでMVCの事を理解して、他の言語を改めて勉強してみるのが良い気がしています。
ご意見、ご質問お待ちしています！
僕は本格的なプログラミング経験ゼロの状態から、一応自分が作りたいと思っていたものを作る事ができました。こちらに関してのご質問や、もしもアプリに関して不明点、不備等がございましたらツイッター等を通じてご連絡いただければと思います。
関連記事