環境構築時の$ PATH を通すとは

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回はdiscordで他の受講生の方がpathをとおしていないので環境構築ができなかったという話を耳にしました。私も今まで環境構築を何度か行ってきたのですがその現象に当たることはありませんでした。なので今回この話を聞いた時、pathって結局なんなの?なんで通すの?と疑問に思い調べてみたので復習の意味も込めてアウトプットしたいと思います。

 

rbenvって何?

 

ここから順に書いていこうと思います。

環境構築を行う時、事前にrubyのバージョンを指定し現環境で使用できるようインストールしていると思います。rbenvはそのrubyのバージョンを管理し適切にインストールできるようサポートするrubyバージョン管理ツールのことです。

 

pathとは

 

コマンドを検索するためのpathのことです

....???となりました。

一つ一つ紐解いていこうと思います。

 

コマンドとは

 

lsとかをターミナルで実行したことがあると思います。

このlsもコマンドコマンドの一つです。

 

ではpathを通すとは

 

このコマンド。今まではなんのけなしにターミナルで $ ls ~とうっていたと思います。しかしこれは正確な表現ではありません。

このlsというのはこのコマンドを定義しているファイルを辿ってそこに書かれているlsという役割のコマンドを拾ってきて実行しているというのが正しい解釈です。

 

では結局pathを通すとはなんなのか。

もしこのpathを通さないとlsを実行する際、どうしなくてはいけないか。ターミナルで echo $PATH を実行すると

https://i.gyazo.com/4efa4fd89011dfa424765f1220b1b2af.png

このように出てくると思います。これは分解すると

/usr/local/opt/openssl@1.1/bin

このようになり各コマンドがどのファイルの中に保存されているかがわかるようになっています。pathを通さないと入力したコマンドがどこのファイルに保存されていてどこから引っ張ってくればいいのかわからず実行できなくなってしまうのです。

その状況を回避するために環境構築段階でpathをとおしlsと打っただけコマンドが実行できるようにするためにpathを通す必要があった訳です。

 

最後に

 

次回は環境変数とは?と設定方法についてまとめてみようと思います。

 

 

 

rails6にbootstrapのモーダルを実装した話

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回はrails6に導入したbootstrapとjqueryを合わせてモーダルを表示した際に詰まってしまったので復習の意味も込めてアウトプットしたいと思います。

 

bootstrapのモーダルとは

 

こちらは添付したbootstrapの公式サンプル集をみていただければわかりやすいと思います。

ボタンを押すと画面に小さな画面が表示されます。

https://i.gyazo.com/90d37b2ff1031f8e8600f202e4f82673.png

このようなものです。

 

ajaxとは

 

通常、同期処理にて画面全体を更新するものですがajaxを導入すると画面の一部分だけを非同期で更新します。

ajaxについては別記事で詳しく取り上げようと思いますのでそちらをご覧ください。

 

jqueryajaxとくみ合わせる

 

今回私が詰まってしまったのは以下のような状況です。

https://i.gyazo.com/495bb346ef473f0848fe1dd79fc816d6.gif

これは私がポートフォリオで実装しようとしている一部分なのですがコントローラーにデータを送った後に質問や回答欄を消しその後にモーダルが表示されると言う実装を行っています。

これの何に詰まってしまったのか。

それはbootstrapのサンプルではボタンを押すとすぐにモーダルを出現させる仕組みなのでjqueryなどを裏で動かしているとモーダルが表示されないと言う問題です。

 

思考

 

今回に限ってはエラー文などは発生しませんでした。

ただ、画面が暗くなるだけでモーダルが表示されないと言う情報しかありませんでした。

そこでjqueryでモーダルを表示させると言う内容を検索します。

するとおそらくそこまで多くの記事は出てこないと思うのですが下記添付記事が解決に導いてくれると思います。

BootstrapのJavaScriptで、Modalを使うメモ(とても短いサンプル) - Qiita

これに習い、以下のコードを導入してみました。

```

$("#domoNormalModal").modal('show');

```

一つ一つ説明していこうと思います。

$("#domoNormalModal")これは何に対して行う動作なのかを示しています。

今回のモーダルはサンプルからとってきており

```

<div class="modal fade" id="demoNormalModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h1>なんでモーダルが出たかわからないけど嬉しいピー</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

このような構造になっています。

この先頭行のidが今回のフックになる部分です。

続いてmodal('show');の部分。こちらはそのままの意味で指定したidのモーダルを表示すると言う意味になります。

本来ならこれで表示されるのですが他の処理と組み合わせる際はこのままではうまくいきませんでした。

 

解決

 

初めに記述しましたが今回は質問と解答を消してからモーダルを出現させなければなりません。

加えて上記のコードでは出現されない場合があります。

初めの問題に関しては順番を示して上げなければなりません。こちら以前記事にも取り上げたwhenとdoneが必要になります。

二つ目の問題は記述方法です。下記のように記述してあげるとモーダルが出現します。

```

$("demoNormalModel").show();

```

出来上がったコードがこちらです。

// 質問を非表示にしてモーダルを表示
$.when(
$('#q_05').fadeOut(),
$('.progress').fadeOut()
).done(function(){
$("#demoNormalModal").show()
});

一つ目の処理、whenで問題と選択肢をfadeOut=display: noneの状態にし画面から消しています。

二つ目の処理doneでモーダル全体を表示しています。

このように現状の処理とモーダルを組み合わせる場合は順番と動作を明確にする必要があったのです。

 

最後に

 

他にも詰まった部分はあったのですが大きな所ではこの点でした。

jqueryはとても便利ですが繊細な点が多々あります。

今後もポートフォリオで詰まった点を順次記録に残し後から見直せるようにしていこうと思います。

 

seed_fuで初期データを導入しようと思ったらエラーがでた話

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回は以前紹介したseed_fuを使い初期データを導入しようと思ったらファイルの配置ミスによってエラーが出てしまったので復習の意味も込めてアウトプットしたいと思います。

 

今回のエラー

 

rails db:seed_fu を実行すると

 

ActiveRecord::InvalidForeignKey: Mysql2::Error: Cannot add or update a child row: a foreign key constraint fails (`(アプリ名_development`.`first_answers`, CONSTRAINT `fk_rails_a064cfe5d3` FOREIGN KEY (`first_question_id`) REFERENCES `first_questions` (`id`))

 

このようなエラーが出てきました。

 

現状

 

db/fixtures/first_anser.rb

https://i.gyazo.com/c0e3f21cd306de99f708f1cbcf75d56f.png

 

db/fixtures/first_question.rb

https://i.gyazo.com/1d5f0f45930418fdf75f4bce72e4dd26.png

 

ファイルの配置状況

https://i.gyazo.com/74e640d147122ba1e1b598e9fa567218.png

 

思考

 

今回に関してはまずforeign_keyと書いてあるのでリレーションの外部キー制約がうまくいってないんだなと目星を付けました。

そこでファイルの中身をそれぞれみてみると記述に誤ったところやタイポなどは見当たりません。

そこでエラー文を検索してみます。すると下記記事を見つけました。

tech.mof-mof.co.jp

この中に答えがのっていました。是非解決にいく前にどこがおかしかったのか記事を読んで予測をしてみてください。

 

解決

 

結論から言うと、「ファイルの作成順」でした。

現状、fixturesファイルの中にfirst_answer.rbの下にfirst_question.rbがあります。

しかしリレーション的にはquestionが親でanswerが子なので先に親のquestionが作成されなければanswerに外部キーが導入されることはありません。

そこで今回の状況をみてみるとseed_fuはファイルの順序で上から作成されていきます。

つまりこのままだと先にanswerが作成されてしまうので外部キーにいれるidが存在せずエラーが発生すると言うことです。

ではどうすればいいか。これは添付記事の方法を採用しました。

ファイル名の先頭に数字で順番を明示してあげると言う方法です。

https://i.gyazo.com/133b273efc1ecd548cf49ce7b6abfc33.png

そうすることで順番が正確な位置に入れ替わりました。

 

これで再びrails db:seed_fuを実行するとうまく初期データが入ってくれました。

 

最後に

 

ファイルの順番で作成順が変わると言うことを完全に抜けていました。

思わずコードに目がいってしまいますが今後はこちらも気にしながら開発を進めていこうと思います。

jqueryで1クリック2機能導入を試みた際につまづいてしまった話

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回は以前railsjqueryを導入し他のですが、今回満を辞してフルにjqueryを使ったクイズアプリのフロントを作成していた時にハマってしまったので復習の意味も込めてアウトプットしたいと思います。

 

今回実装しようと思っている機能はこんな感じ

質問に対して3つの選択肢がありクリックすると現在の質問と選択肢が消え、次の質問が表示されるというものです。

 

gyazo.com

 

今回この機能を実装しようと色々調べたのですが意外と調べるのに苦労したこと、そして似たような実装をしている記事があったのですが機能しなかったので記事にしました。

 

環境

 

rails 6.0.3

ruby 2.6.5

jqueryはwebpackerで導入しています。

 

view

 

https://i.gyazo.com/c14f990387d27bb8cf6f79f876758f5a.png

 dbにあらかじめseed_fuを利用して初期データを導入しそれをコントローラーから引っ張ってきてます。

これはわかりやすいようにと1問分で記述していますがリファクタリングをすればおそらく10行ぐらいで10問ほど表示できるのではと思っています。

 

score.js

 

webpackerでインストールしているのでapp/javascript/score.jsファイルを作成し、packs/application.jsで読み込んでいます。

今回のjqueryでの実装はこのようになりました。

 

https://i.gyazo.com/29b54e68803b4481c891ca523e0168c8.png

 

1行づつ説明していこうと思います。

1行目:turbolinks : loadこれは「初回ページ読み込み&リロードで動くが、ページ遷移し

    て該当ページに戻ってくるとjqueryが動かない!」という状況を回避するために

    使用しています。turbolinks自体はページの遷移を早くする。みたいな認識だと 

    思うのですがgemを入れている場合、$(document).ready()では動きません。

2行目 : これはフロント<a></a>の中にあるclassとリンクしています。何が行われた時  

     にどうするのかの何かを明示しています。

4行目 : これは2行目の何がどうするかのどうするかの部分に当たります。今回の場合は

     質問と選択肢を全て消すことから始まるのでdiv要素を指定しています。

6行目 : 4行目の後に次の質問と回答を出力しなくてはなりません。そこで次のdiv要素

    の中にあるidを明示してあげることで引っ張ってきています。

 

ポイント

 

3,5行目 : $.when() と .done()

ここで詰まってしまいました。

おそらくjqueryのボタン関係の記事をみてもこの記述のあるものは少ないのではと思います。

これは何かというと処理を行う順番を表しています。

$.when() は初期動作の後に初めに実行するもの

. done() はその後に行う動作を明示しています。

.fail()というものもあり、エラーが起きた際にどう言った処理を行うかを明示的に示すものもあります。)

 

Ajaxなどの非同期通信を行う場合、データベースからデータを読み込む場合に利用します。

今回の場合は後者が原因だったように思います。

 

最後に

 

jqueryは今まで一度だけ触ったことがあったのですが今回のようにガッツリ開発の中で使ったことがないのでわからないことが多々あります。

今後もつまづいたことをそのままにせずアウトプットしていこうと思います。

 

参考記事

 

$.when() | jQuery 1.9 日本語リファレンス | js STUDIO

Rails5でjqueryを動かす方法 - Qiita

$.when() | jQuery 1.9 日本語リファレンス | js STUDIO

 

 

 

railsにsorceryを導入した時に公式wiki通りにやったらハマった話

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回はrailsにuser管理機能を実装するためにsorceryを導入した時にハマった話をアウトプットしていこうと思います。

 

sorceryって

 

sorceryは簡単にプロダクトの中にuser管理機能を導入することのできるgemです。

具体的にはgemをインストールして公式のwiki通りに進めるとuser新規登録機能とuserログイン機能に必要なモデルやマイグレーションファイル、その他いくつかの設定ファイルが作成され手間をかけずにuser周りの操作が実装できます。

これが公式wikiです。

Simple Password Authentication · Sorcery/sorcery Wiki · GitHub

この後はこの通りに進めていくので一読していただけると内容がわかりやすいと思います。

 

実装

 

① gemのインストール

  gem 'sorcery'をgemファイルの中に入れbundleします。

 

② sorceryを実行

  rails g sorcery:installで必要なファイル等も作成します。

  するとdbにモデルを作成するためもととなるファイルが大きく2つ作成されます。

  migrateファイル

     https://i.gyazo.com/87e3b0aabdbb25ba25e675526246e702.png

     user.rb     

     https://i.gyazo.com/68258a1dde95dbcaab01c41b5462f9ab.png

 

rails db:migrate

    設定やvalidatesの書き込みなどあると思いますが今回はwikiの流れにそうのでここでmigrateします。

 

④ viewの実装

  新規登録画面を実装します。

  https://i.gyazo.com/c39301e40ed14c83b515f0997d617f05.png

  nameカラムを追加してbootstrapで装飾してますがほとんどwiki通りだと思います。

 

⑤  ブラウザで確認

   最後にブラウザで新規登録できるか確認してみましょう。

   

https://i.gyazo.com/543068a1e0c5e1e2859d139fd7bc09c5.png

 

  ?????????????????

 

これが今回、私がハマったエラーです。

 

思考

 

今回は公式は正しいと思い込んでしまいエラーをよくみなかったのが時間を取られてしまった大きな要因だったと反省しています。

 

例によって例のごとくエラーからざっくり内容を予測します。

ActiveRecord::StatementInvalid - Mysql2::Error:Table'mentalhealth_management_test_development.users' doesn't exist:

form_withで使うためにuserインスタンスをUser.newで作成しているところで起きています。内容はusersテーブルがMysqlの中に存在しないよと言っていると考えました。

 

予測を立てたのでschema.rbファイルを確認しにいきます。

https://i.gyazo.com/b5b1f1cf3d76c3d6135d8396a1fec18b.png

 

テーブルは作成されていました。

ただテーブル名はUser ....ちょっと変です。

次にテーブルのもととなるマイグレーションファイルを見に行きます。

https://i.gyazo.com/b8faa9bdd696ac9cf2ba408563e71007.png

ここが原因でした。

sorceryで自動生成されたものですが本来テーブルは複数形で記載する必要があります。

ここがUserになっているせいでusersテーブルがないと言われてしまっていたのです。

 

解決

 

マイグレーションファイルを本来の形に修正しました。

https://i.gyazo.com/8150f9edb394f763ec31f6e057523ec1.png

emailに重複を避けるためにvalidatesでuniqueが貼られているのでadd_indexの記述も変更しました。

私はここの変更を忘れて半日はまりました。

これでrails db:migrateすると無事レンダリングすることができました。

 

最後に

 

公式は正しいと思い込み何か見落としたことがあるのではと実装順序を目をさらにして確認してしまいました。

エラーに真摯に向き合うことが大切だと学びました。

今後もエラーについてまとめていこうと思います。

 

 

 

 

 

bundle execとはなんなのか

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回はbundle execを使用する意味が曖昧だったのでアウトプットしていこうと思います。

 

今回のエラー

 

The `rubocop' command exists in these Ruby versions:
2.6.3
2.6.4

 

rubocopを導入しファイルを生成するためにgithubを参照しながらgemを入れbundleし、rubocop --auto-gen-configをターミナルで打ったところ上記エラーが発生しました。

 

思考

 

初めて見るものだったのでとりあえずエラーメッセージを見てみるとどうもこのrubyのバージョンでこのコマンドは使えません。下記環境でなら使えます。という風に読み取りました。

今回の私の環境はruby 2.6.5だったので環境にあってないのだと考えます。

そこで調べていると環境変数を変えるなどの記事は見受けられますが以前入れた時のことを思い出すとbundle execを使用したなと思い調べた。

 

bundleって?

 

プロジェクトの中でgemのバージョンを管理します。

ツールの名前としてはbundler、コマンドはbundle.

 

bundle execとは

 

gem file内で指定されている全てのgemを実行可能にし、そのコマンドの利用も実行可能にします。

 

bundle execの有無で何が違うの?

 

現在開発を行っているプロジェクト内でコマンドを実行する。

gemfileに応じたバージョンを実行するためにrails〜のようなコマンド以外は基本的にbundle execを使用

rbenvで指定したrubyのバージョンに応じたシステム共通のコマンドが実行される。仮にシステム共通のものがなかった場合rails〜は使用されない。

 

解決

 

結論からいくと

bundle exec rubocop --auto-gen-config

こちらで無事作成されました。

 

rubocop特有のコマンドだったためgemでインストールした場合、gemfileのバージョンに応じて使用しなくてならなかった。システム共通のライブラリの保存場所を環境下にしてコマンドが実行されてしまっていたのでは。

というのが現段階の私の考えです。

正直曖昧な部分も多いので今後、追記していこうと思います。

 

 

参考文献

 

bundle exec | Bundler日本語ドキュメント | Ruby STUDIO

【Rails】結局bundlerって何?bundlerの仕組みを図解形 | Pikawaka - ピカ1わかりやすいプログラミング用語サイト

rbenv環境で特定バージョンのコマンドを実行する(特にrubocop) - None is None is None

bundle execって必要なの? - Qiita

 

 

 

 

rails6にwebpackerでjquery, bootstrap, popper.jsを導入した話

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回はPFで使用しているrails 6にwebpackerを使ってjquery, bootstrap, popper.jsを導入した流れについて話そうと思います。

 

webpackerって?

 

webpackを利用してrails上にJavaScriptの開発環境を整えるためのgemパッケージ

 

webpackとは違うの?

 

webpackはjavascriptファイルやsassファイルなどをまとめるモジュールバンドラです。モジュールとは複数のjsファイルを一つのjsファイルにまとめることを言います。(sassファイルも同じ)。webpackerはwebpackをrailsに簡単に適応させるgemです。

 

アセットパイプラインとは違うの?

 

アセットパイプラインもモジュールバンドラです。ですがフロントエンドの発展に伴いこちらはどんどん古くなっています。webpackの方が今の環境にあった新しいモジュールバンドラになります。

 

導入の流れ

 

① yarn add jquery bootstrap popper.js 

 

②yarnしたものがrailsの中にしっかり入っているか確認

 確認の仕方はpacage.jsonファイル

  https://i.gyazo.com/8ed2f73a75c5d0b87898be268418b18b.png

  いろいろ入っているとは思いますがこの時点でbootstrap, jquery , popper.jsが入って

     いればとりあえずrailsの中にインストールは完了しています。

 

②Bootstrapの管理方法

 app/javascriptの中にsrcディレクトリを作成しapplication.scssファイルを作成しま

 す。

 

 @import '~bootstrap/scss/bootstrap' ;

    

 さらにapp/javascript/packs/application.jsの中に以下を追記

 (おそらくpacksフォルダは作成されていないので作成)

 

 import 'bootstrap'

    import '../src/application.scss'

 (@importとはscssが用意しているメソッド。application.scssファイルからscssファ

 イルをインポートするために使用する)

 

jqueryの管理方法

 app/javascript/packs/application.jsに以下を追記

  

 require("jquery")

    (requireは外部ファイルの読み込みに使います)

 

 config/webpack/environment.jsに以下を追記

 

  https://i.gyazo.com/353be19aa98defe7e71fb9be6b231541.png

 

これで完了。

あとはrails sをしてみて実際に適応されているかを確認してみてください。

 

最後に

 

rails 6から仕様が変更になりwebpackerでの導入になったみたいで焦りましたがwebpack周りをしるいい機会になりました。