2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails初学者がRailsアプリのトップページを作り上げるまでにぶつかった壁と解決策についてまとめてみた

Posted at

1.Rails6でアプリを作ってみたいけど…

 Djangoにて作ってたアプリが一通り出来上がったため次はRailsを使ってアプリを作ってみるのもいいかもなあと思ってとりあえずDjangoアプリ開発用のWindowsにてRailsアプリの開発を進めてみようと思いましたが、思い立ってから実際にアプリのトップページを完成させるまでに何度も壁にぶち当たり、結局1週間近くトライ&エラーを繰り返しましたのでRails初学者の私がトップページを完成させるまでに直面した問題についてと、何を参考にして解決を図ったかについての記事を書こうと思います。

2.OS Windowsにて開発を進めようとした結果…

2-1.UbuntuにRubyがインストールできない!!

 とりあえず参考書を買って指示通りにPCにUbuntuをインストールしてRails5を使うことが前提のセットアップをやってみたわけですが、仮想環境にRailsを入れる以前にRubyのインストールが上手くいかない問題に直面しました。これについては解決策をどれだけググっても答えが出てきませんでしたので改めてRails6でのセットアップのやり方についてググって試してみることにしました。

2-2.ググって出てきたRails6のセットアップ方法だととりあえずうまくいったけど…

こちらのサイト(https://prog-8.com/docs/rails-env-win)を参考にしつつRubyをインストールしてRails6のセットアップを進めていった結果としてとりあえずコマンドラインでのrails newコマンドでアプリファイル一式を作ることはできました。しかし、このやり方はsqlite3をデータベースとして使うことが前提であり、リリースして運用していくことを考えましたらMySQLかPostgreSQLのどちらかをデータベースとして設定したうえで開発を進めていく必要があると感じましたので改めてMySQLかPostgreSQLを使ってrails newコマンドを試してみました。
 ですが、エラーばかりが返されました。解析してみると、MySQLやPostgreSQLを使うためのGemが入っていないとのこと。gem installとGemファイルへの書き込みとbundle installをしてみましたが、結果は変わらず。調べていたところDocker環境を前提にセットアップするやり方かmacOSにてbrew installコマンドにてデータベースを導入し、パスをつなげた上でやっていく方が手っ取り早いと感じましたのでOSを変更して再挑戦することにしました。

3.OSをmacに変えてみた

3-1.Permissionエラー

 ターミナルにてこちらの記事(https://qiita.com/SaitoJP/items/65a765e7810a9dacea75)を参考にしつつセットアップを進めていきましたところ、railsをインストールしようとする過程でエラーが置きました。エラーの内容はPermissionエラーで、rubyが入っていないのにrailsをインストールするコマンドを入力していますよということでした。macってRubyが標準で入っているはずなのにおかしな話ですよね?そこで、その解決策についても調査を進めていきましたところ、こちらの記事(https://qiita.com/nishina555/items/63ebd4a508a09c481150)へと行きつきました。Permissionエラーが返される原因としては、Rubyを使うためのパスがつながっていないとのこと。そこで、rbenvでrubyを管理するように仕向けてから改めてセットアップを再開しましたところようやくDBをMySQLに設定したうえでアプリ用のファイル一式を作成することができました。rails sコマンドも正常に作動し後は作りこむだけかなあと思っていましたがまだ問題はここからでした。

3-2.画像が読み込まれない…

 早速作っていこうとしましたが、ここまで来てさらに別の問題が発生しました。Railsチュートリアルに従って画像を読み込ませようとしているのにassetsのimagesに置かれている画像が読み込まれませんでした。これについても原因を調べていきましたところ、こちらの記事(https://qiita.com/SaitoJP/items/65a765e7810a9dacea75)のRailsプロジェクト作成時のコマンドの--skip-sprocketsの記述が原因であることが判明しました。画像ファイルを一切使わないんでしたらこのコマンドでもよかったんですが、デフォルトでONになってる画像読み込みのためのsprocketsをプロジェクト作成時にOFFにしちゃってたらそりゃ他の記述がどれだけ正しくても画像が読まれないわけだ…。
 原因が分かった段階でもう一度「--skip-sprockets」のコマンド抜きでファイルを再作成したらようやく画像が読まれました。もっとも、まだあと一つトップページの完成までに立ちはだかる問題がありましたが…。

3-3.BootStrapは読んでくれたのに…

 最後に立ちはだかったのはCSSファイルの読み込みです。こちらのサイト(https://medium-company.com/rails-bootstrap/)を参考にしつつBootStrapを導入してフロントサイドの開発を進めてみたわけですが、BootStrapはきちんと適用されているのに自分で書いたCSSが適用されていないという新たな問題が発生しました。
 そこで、原因を調べる過程で行きついたのはこちらの記事(https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a)でした。BootStrapやJqueryを導入する方法としては、Webpackerで入れる場合とassetsに入れる場合の2通りがあるそうです。私が最初に使っていたやり方は前者のWebpackerで入れるやり方でした。
 だからこそ、assetsにあるCSSファイルはapplication.html.erbの「stylesheets_link_tag」を「stylesheets_pack_tag」に書き換えた時点で読まれなくなってしまったわけです。BootStrap導入用のapplication.scssファイルに直接CSSを書き込むならまだしも、そうでなければ同階層ないしはassets内にどれだけscssファイルを作っても無視されてしまうのは当然なんでしょうね…。BootStrap導入用のapplication.scssに直接CSSを書き込んでもよかったんですが、そうすると背景画像を設定しようとする過程でassetsのimagesに画像を用意していても「画像がありませんよ」と怒られるわけです。後、BootStrapも適用されなくなってデザインが崩れます。
 ですが、後者のやり方(assetsに入れるやり方)を試してみましたところ、今度は上手くいきました。BootStrapを入れるだけならWebpackerを使うやり方で十分なんでしょうけれども、オリジナルのCSSも適用することが前提ならassetsに入れるやり方一択だと判明したわけです。

 ともかく、これらの問題を解決するのに1週間かけて何度もプロジェクトを破棄したり再作成したりし続けてようやくスタート地点に立つことはできたかなあと思います。

4.まとめ

 Webアプリの開発ならばRailsと言われるほどにRailsの需要って多いんでしょうけれどもPythonのDjangoと違ってセットアップの段階やBootStrap導入の過程で既に心が折れかけました。Railsを使いこなせれば受けられる仕事も格段に多くなるんでしょうけれども私見としてはDjangoの方が圧倒的にやりやすい気はしました。どのフレームワークを使ってアプリを作るかって好き好きなんでしょうけれども私みたいにRailsセットアップの段階で心が折れそうな方向けにこの記事が役立てば幸いです。React.jsとかVue.jsを入れようとしたらまた別の壁に当たるでしょうけれども少なくとも静的なページを作るだけでしたらこれだけで十分開発は進められると思います。以上、長文にお付き合いいただきありがとうございました。

2
1
1

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
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?