Ruby on Railsで旅行スケジュール作成Webアプリケーション作りました

動機

Webアプリケーション一個つくるためにどのようなプロセスがあり
ゼロから作る場合、どのような部分で躓いてしまうかを知りたかったことが理由です。
また、Web業界に転職することを考えると、何か成果物があると自分のレベルを伝えやすいかと思いました。

下記で利用できます。
独学でコード書いているのでセキュリティ的にやばいところあるかもしれませんが、
みんな悪いことをしない優しい人だと信じています。

URL : http://13.228.52.57
テスト用ログインメールアドレス：[e-mail]
パスワード：foobar
Git : https://github.com/kitsunecat/trapla

開発環境などについて	使用した技術
開発言語	Ruby, HTML/CSS, JavaScript, jQuery
フレームワーク	Ruby on Rails
Webサーバ	Nginx
アプリケーションサーバ	Unicorn
DB	MySQL
開発環境	Atom、Docker、Vagrant、Git、Git flow
本番環境	AWS

作成したWebアプリケーションについて

旅行に行くときのスケジュールを作成するアプリケーションです。
僕が旅行計画を立てるときは日帰りならそんな細かく考えないのですが、
複数人で行く３泊４日とかになると、「何にどれくらい費用がかかって持っていくものは何で・・」
などを整理するときにNumbersでスケジュールを作成していました。
そういった内容を一定のフォーマットで作成するとちょっとは便利かなーと思ったのです。

言語選択

Ruby, Ruby on Railsで作成し、データベースは検索して出てくる情報が多いという理由でMySQLにしました。
シェアが大きいという理由でRubyを選択しましたが、どうやら実際はそうではないようで、、、
PHPから始めたほうがよい説が飛び交っていることに気づいたときにはだいぶ勉強したあとでした。
なので「他の言語勉強するにしても一個つくってからにしよう」ということにしたのです。
どの言語から勉強したほうがいいとか言う話は個別の情報を信じているとキリがないですしね！

苦労した部分

コードリーディングスキルがまだ足りない

例えば、ユーザ管理についての基本的な部分は、Ruby on Rails Tutorialの各所で
ユーザ管理とリレーショナルデータベース管理システムについて書かれていたので、
「ユーザ管理を実現するためにどのような機能を使うべきか」は理解できました。
しかし、Bcrypt（パスワード暗号化を提供するライブラリ）のソースコードを読み解く部分は理解するのに時間がかかりました。
おそらくコードを書くことができてもコードを読む力がまだまだ不足しているのだと思います。

開発環境構築でつまづく

最初はVagrantを使って仮想OS上で環境を作って作業していました。
途中からDockerで開発したほうが後々楽できそうと思ったので、Dockerでの環境構築を試みました。
Production環境ではWebサーバにはNginx、アプリケーションサーバにはUnicornを使っているのですが、
Webサーバからアプリケーションサーバにデータを渡すときのUnixドメインソケットについて明確に理解できませんでした。
そのため、各Dockerファイル（Rails用、Nginx用、MySQL用)とDocker-composeファイルを作るのに
１週間くらい使ってしまいました。多分ここの動きはかなり効率悪かったと思います。

HTML/CSSのデザインが思い通りにならない

HTML/CSSの記法自体はすんなり理解できたのですが、いろいろいじってもなかなか自分の思ったとおりのデザインにならない、
ということがよくありました。そんなときは

• 自分が求めるデザインに近いサイトのソースを見る
• 内容パクって同じ感じのデザインにする
• 書かれているCSSの、どの文がどのデザインに関与しているかを予想する
• 予想したことが正しいことをリファレンスとかで確認

という風に進めました。
フロントエンドのスキルに関心はありましたが、自分のなかでは優先度は低く設定していたため
そこまでガッツリ納得するまで調べる、ということはしませんでした。

テスト環境の作成

新しい予定を作成する部分にはJavaScriptを使っているのですが、
Railsに標準でついているMinitestではJavaScriptの動きまではテストできませんでした。
そこでRSpecとCapybaraというツールを利用して仮想ブラザを内部で立ち上げて
画面の動作を確認する、という方法にしました。
使うことだけはGemをインストールすればすぐに使えるのですが、
・ブラウザ立ち上げられないよ、というエラーがでてテストが実行できない
・テスト実行できてもブラウザが文字化けする
という想定外の事象に3,4日使ってしまいました。
結局はPhantomJSという仮想ブラウザを使用して文字化け対処する方法が見つかったので、
PhantomJSを使っているのですが、このPhantomJSが重い、、、
インストールだけで数十分かかる、、、
ここは他の仮想ブラウザを使えるように改善が必要かと思います。

HTMLやデータベースの仕様の理解不足による手戻り発生

各旅行計画を作成する、というUIには持っていくものや費用を入力する項目があります。
これは各旅行計画それぞれが複数持つものです。
最初は旅行計画データベースから関連付けた費用データベースや持ち物データベース作ろうとしたのです。
しかしHTMLの仕様でFormタグの中にFormタグを作れなかったのでその方法ができませんでした。
対処法として、JavaScriptを使って擬似的なデータベースを二次元配列で作成
->その値をHiddenタグの値に入れて送信するという方法を選びました。
この方法に着地するまでにいろいろ試して手戻りが結構ありました。。。。

課題

なんか重い

画像の表示遅くないっすか？

ビルドが遅い

'docker-compose build'するときに長時間かかってしまいます。
仮想ブラウザにPhantomJSを使っており、そのインストールに時間がかかるからです。
となると仮想ブラウザをPhantomJSから他に移行すべきですが、
日本語化のナレッジがすくなく手を出すとひっどいことになりそうだな、と思い後回しにしてしまっています。

使いづらい部分が多い

作ってみて、UI/UXの重要さを実感しました。
ぐぐって出てくるUI/UXのセオリーどおりやってればいいだろ、とか甘く考えていたのですが、
セオリーどおり実装することが難しかったり、セオリー通りやっても実際に使ってみると
「なんか知らんけど使いにくい」という正体不明のストレスが発生するのです。
このへんは数こなして経験積むしか無いのかなと考えています。

作ってみた感想

Webアプリケーションを作ること自体は、少なくともRuby on Railsでは一通りできるものだな、、と思いました。
しかしユーザ視点で考えたときに最適な仕様なのか？ということを考えると改善点だらけだと思います。
また、やりたいことを実現するまでにかかる時間は自分でも遅いな、、と思いました。
コードを書くよりもエラーメッセージに対応している時間の方が圧倒的に長かったです。
エラー解決の時間とユーザビリティについての発想は経験の差がでるんだろうな、、、と実感しました。