［アラフォプログラミング未経験］Railsで非同期通信「Ajex」を動かしてみました
以前作成していましたpictweetに非同期通信「Ajex」を組み込むカリキュラムに突入しました。
少し前に「Ajex」(エイジャックス？アジャックス？)についてやってみましたが、
まあ例によってよくわかってないわ、覚えてないわ、
で、もう一度復習しながら、進めていくといういつも感じでやっております。。。
目次
APIの作り方
APIの機能をRailsに追加する時には、大きく分けると以下の3つの方式があります。
HTMLを返すためのコントローラーを共用してAPIとして使えるようにする
手軽にAPIを追加できる
API専用のコントローラーを作成する
APIの機能が大きくなるとコントローラを分けてコードの見通しを良くしたくなる
pictweetに実装
ひと通りおさらいしたので、早速pictweetに実装していきます。
Gemfileの記述を確認しよう
Gemfileにjquery-railsが記載されているか確認しましょう。
pictweet/Gemfile
>|javascript|
...
（中略）
...
# Use jquery as the JavaScript library
gem 'jquery-rails'
...
（中略）
...
|
記載されてにない場合は最下部に記載し、bundle installしてください。
確認すると記載されていたので、改めてbundleってみました。
おまけ
上記の作業後にスルスル先に進めてみると、
うん？
Ajexせずにいちいち更新してんじゃん！非同期してないじゃん！
ってことに気づき、consoleで止めてみてみると、
・Uncaught ReferenceError: $ is not defined
ってエラーが出て、怒られてました。
色々、ググって悪戦苦闘して１時間半、ようやく下記のサイトに辿り着いて解決。
→//= require_tree .を最後に読み込むようにして解決
https://qiita.com/bambis13s/items/0b0030578ecf7fd0af05
まじか、そんなことかー！！
ファーーーーー！！
でも、とりあえず解決してもやが晴れてよかった。。。
［アラフォプログラミング未経験］JavaScriptって何？
JavaScriptとは
JavaScriptはWebページを操作するためのプログラミング言語です。
Webサイト上のHTML要素を取得したり、取得したHTML要素を操作することができます。
JavaScriptの特徴
javaScriptの特徴は以下の3点です。
HTMLやCSSの取得ができる
JavaScriptを使うことによってWebサイト上のHTMLやCSSを取得することが出来ます。
例えば、フォームの値の取得やWebページ上のテキストを読み込むことが可能です。
HTMLやCSSをリアルタイムで変更できる
普通Webページは表示したらそのあと変化しません。
JavaScriptを使えば、Webページに"リアルタイム"で動きを加えることができます。
例えば、ボタンをクリックすることでアイコンの色を塗りつぶしたり、
リアルタイムで検索結果を表示ことが可能です。
ユーザーの操作によって処理を実行できる
JavaScriptを使えば、ユーザーのクリックやキーボードの入力といった操作を感知して処理を行うことができます。
例えば、検索ボタンをクリックしたときに画面の表示を変えることなどが可能です。
scriptタグ
scriptタグはJavaScriptを埋め込むためのタグです。
scriptタグの中にはJavaScriptを直接書き込むことができます。
またscriptタグは別ファイルのJavaScriptを読み込むこともできます。
<script>
// scriptタグの間にJavaScriptを記述する
</script>
［アラフォプログラミング未経験］ Gemを利用した効率的なテストコードを学ぶ
今回は、「RSpec」のコードをより効率的に書く方法について勉強しました。
初学の時はほんと頭に残らずに流れていきましたが、
こうやってアウトプットしてみると、
「あっそういうことか！」
「う、忘れてるぅ」
とか気づかされる。
そして、使い慣れると効率的な手法だと実感しますね。。。
目次
factory_botというgemを導入
factory_botというgemを導入し、specファイルの記述を効率化します。
また、テストコードを書く際には常に気をつけなければいけない原則があるので、
この原則についても学習していきます。
factory_botにおける最も基本的なメソッド
factory_botにおける最も基本的なメソッドである
buildメソッドとcreateメソッドを紹介します。
buildメソッド
引数にシンボル型で取ったクラス名のインスタンスを、factory_botの記述をもとに作成します。
例えば前述のusers.rbが存在する場合、下記2つの変数userの値は同じ値になります。
#factory_botを利用しない場合 user = User.new(nickname: "abe", email: "kkk@gmail.com", password: "00000000", password_confirmation: "00000000") #factory_botを利用する場合 user = FactoryBot.build(:user) ||< ** createメソッド buildとほぼ同じ働きをしますが、 createの場合はテスト用のDBに値が保存されます。 注意すべき点として、1回のテストが実行され、 終了する毎にテスト用のDBの内容がロールバックされます。（保存された値がすべて消去されてしまう） 従って、binding.pry等でテストの実行を一時停止しないと テスト用のDBに保存された値をSequel Pro等で確認することはできません。 factory_botによるインスタンスの生成 >|javascript| #createしたインスタンスはDBに保存される user = FactoryBot.create(:user)
factory_botの記法の省略
factory_botによってインスタンスを作成する際に、
レシーバーであるクラスのFactoryBotという記述を省略することができます。
そのためには、spec/rails_helper.rbを以下のように編集します。
rails_helper.rb
#省略 RSpec.configure do |config| #下記の記述を追加 config.include FactoryBot::Syntax::Methods #省略 end >|| すると、先ほどのuser_spec.rbの記述はFactoryBotを省いて以下のように省略できます。 user_spec.rb >|javascript| #nicknameが空では登録できないこと it "is invalid without a nickname" do user = build(:user, nickname: "") user.valid? expect(user.errors[:nickname]).to include("can't be blank") end
［アラフォプログラミング未経験］RSpecの基本構文について学ぶ
今回は、「RSpec」の基本構文について学びます。
Ruby のテストコードなので、Rubyにルールが似ててそこまで拒否感はないですね。
むしろすんなり受け入れますわ〜
目次
describe
1行目のdescribeは、直後のdo ~ endまでのテストのまとまりを作ります。
describeの後に続く""の中にはそのまとまりの説明を書きます。
itとexample
2行目のitはexampleと呼ばれる実際に動作するテストコードのまとまりを表します。
itの後に続く""の中にはそのexampleの説明を書きます。
エクスペクテーション
実際に評価される式のことです。
it do ~ endの間に書きます。
上記の式ではexpect(1 + 1).to eq 2の部分がエクスペクテーションです。
expect(X).to eq Y
エクスペクテーションの文法です。
xの部分に入れた式の値がYの部分の値と等しければ、テストが成功します。
eqの部分を、マッチャと言います。
マッチャ
エクスペクテーションの中で、テストが成功する条件を示します。
例えばeqは「等しければ」という意味になります。
他にもinclude(含んでいれば)、valid(バリデーションされれば)など複数のマッチャが存在します。
|javascript| require 'rails_helper'
describe User do describe '#create' do it "is invalid without a nickname" do end end end ||<
1行目のrequire 'rails_helper'は、rails_helper.rb内の記述を読み込むことで共通の設定を有効にしています。
この1行目の記述は、全てのspecファイルに書き込みます。
3, 4行目に連続してdescribeが登場しています。describeは、このようにネスト(入れ子状)にすることができます。ここでは「Userクラスにあるcreateメソッドをテストするまとまり」であることを示しています。このように、describeとdoの間にメソッド名を書く際は#をつけるのが慣習です。
bundle exec rspecコマンド
RSpecのテストコードを利用したテストを実行するためのコマンドです。
ターミナル
|| bundle exec rspec ||<
「nicknameが空の場合登録できないことを確かめる」テストコードを書いていきます。
|javascript| require 'rails_helper'
describe User do describe '#create' do it "is invalid without a nickname" do user = User.new(nickname: "", email: "kkk@gmail.com", password: "00000000", password_confirmation: "00000000") user.valid? expect(user.errors[:nickname]).to include("can't be blank") end end end ||<
【5行目】テストしたいプロパティを持ったuserクラスのインスタンスを新規作成する
スペックファイルの中では、そのRailsプロジェクトで作成しているモデルクラスを利用することができます。
今回は「nicknameが空である場合登録できないこと」を確かめるテストコードを作成したいのでnicknameの値を空にし、
それ以外は適当な値をセットした状態でuserクラスのインスタンスを作成しています。
【6行目】作成したインスタンスがバリデーションによって保存ができない状態かチェックする
続いて、新規作成したuserクラスのインスタンスがバリデーションに引っかかるかどうかを確かめるvalid?メソッドを利用します。
valid?メソッド
valid?メソッドを利用すると、
ActiveRecord::Baseを継承しているクラスのインスタンスを保存する際に
「バリデーションにより保存ができない状態であるか」を確かめることができます。
errorsメソッド
valid？メソッドの返り値はtrue/falseですが、
valid?メソッドを利用したインスタンス対してerrorsメソッドを利用すると、
バリデーションにより保存ができない状態である場合なぜできないのかを確認することができます。
includeマッチャ
includeマッチャは、引数にとった値がexpectの引数である配列に含まれているかをチェックすることができるマッチャです。
今回の場合、「nicknameが空の場合はcan't be blankというエラーが出るはずだ」ということがわかっているため、
include("can't be blank")のように書くことができます。実際にその通りになればこちらのエクスペクテーションはパスし、
このコードは意図した動作をすると保証できます。
コードに関する説明は以上です。テストを実行してみましょう。
メールアドレスが存在しなければ登録できないことを確かめるテストコードを書いてみました。
バリデーションをかけることで、メールアドレスが入力されていないと登録できない実装がしてあります。テストコードを書くことで、メールアドレスが存在しなければ登録できないことを確かめましょう。
［アラフォプログラミング未経験］Rubyのテストコード「RSpec」の概念について学ぶ！
結構、四苦八苦しながらカリキュラムを進めてみましたが、
あれ、思ったよりわかるし、重要だなぁと実感。
むしろ機能を実装する際にテストしながら、
コード書いていった方が効率的なんだなと思いました。
わかりやすく書いているサイトを貼りつつ、復習をしていきます。
目次
Railsにおけるテストについて
Ruby on Railsにおいては、基本的にはモデルとコントローラのファイルに対してテストコードを作成します。
その際はRSpecという独自の言語を利用します。
RSpec
RSpecは、Rubyを元に作成されたテストに特化した言語です。
「rspec-rails」というGemをインストールすると、RSpecを利用できます。
テストを書くメリット
基本的に、ひとつのプロダクションコードに対してはひとつのテストコードが必要です。
例えばRuby on Railsにおいては、モデルクラスやコントローラークラスひとつにつきひとつのテストコードを書かなければいけません。
これは面倒に感じるかもしれませんが、
それを補いなお余るほどのメリットも存在します。
それは、主に以下の3つです。
1.仕様漏れを減らすことができる
テストをするにあたっては、対象のメソッドがどのような目的で作成されどんな挙動をしなければいけないのかということを全て洗い出します。
結果的に仕様を良く確認することになり、バグを引き起こす仕様漏れを少なくすることができます。
2.リファクタリングや機能追加をしやすくなる
リファクタリングとは、コードをより綺麗なかたちに修正する作業のことです。
一度テストを通過してしまえば、最終的な結果を維持しリファクタリングをするのが簡単になります。
また、新たな機能を追加する際も、従来の箇所は間違いなく動いていることを確認できているので、
その結果を崩さないようにするだけで安全に実装することができます。
3.楽しくコードを書ける
テストを通過するという快適な体験を重ねることで、コードを書く作業が楽しくなります。
注意力が必要で神経をすり減らしやすいプログラミングという作業において、楽しくコードが書ける、
ということは非常に重要です。
何気に大事なことが書かれているので、囲ってみました。
［アラフォプログラミング未経験］データベース設計の基礎について学んだみた
データベース設計について、学習してみました。
データベースの検索についてカリキュラムを進めてましたが、エラー地獄にハマってしまい、
いやになったので、次のカリキュラムへ現実逃避っす！
目次
データベース設計って何？
データベースの設計とは、作成するサービスやシステムに必要な情報を
どのようにデータベースで管理するかを決める作業です。
データベース設計をしっかりと行うことで、サービスが複雑になった場合でも
より効率的かつ簡易的にデータの操作を行うことができます。
〜カリキュラム抜粋〜
今後のサービスを作っていくにも、しっかりしたデータベースの構築が必要不可欠・・・ってことですよね！
今までのカリキュラムでは流れでサラッと作ってましたが、今回でしっかり理解するってことですかい！
って、生意気なことを言っていた自分を殴ってやりたいです。。。
先のカリキュラムのDB設計で全くチンプンカンプンで、撃沈しましたー
やはり基本は大事だと痛感しました。。。
・データベース設計はなぜ必要？
ほとんどの場合、サービスはデータベースを持ちます。
データベースには顧客の情報や商品の情報など様々なデータが保管されます。
サービスのプログラムを書く際に、こうしたデータやデータ同士の関係性（どの顧客がどの商品を買ったかなど）を
あらかじめ決めて置かなければいけません。なぜならプログラムはそれらのデータを操作することが主な役割だからです。
データベース設計を行うことで、データ同士の関係性を明確にするだけでなく
効率のよいデータ操作を可能にします。
〜カリキュラム抜粋〜
ここはサラッと流してたんですが、
何気に大切なことを言ってます。
特にリレーションを多対多で作るときに
関係性をしっかり掴んでコードをあてないと
こちらの意図とは違う動きをしてしまいます。
・データベース設計はいつ行うのか
データベース設計はサービスやシステムの開発の最初の段階で行います。
プログラムを書き始めるよりも前にデータベースの設計は行っておきましょう。
〜カリキュラム抜粋〜
最初に設計しておくのか！
入れ物を先に入れんといかんのね。。。
しっかり道順を決めておかないと後々袋小路に迷い込んじゃいます。
というか迷い込んで立ち往生してましたorz
データベース設計の基礎知識
データベース設計は基本的には現実世界の要素をデータに落としこむ作業です。
現実世界の要素とは例えば顧客(ユーザー)です。
顧客をデータベースで管理するには
「顧客という概念（エンティティ）」
「一人ひとりの顧客の持つ情報（属性）」
「顧客と他の情報の関係性（リレーション）」
を決める必要があります。
〜カリキュラムより抜粋〜
定義をしっかり抑えます。
データベースを構成する要素
データベースを構成する要素は以下の3つです。
1.サービスで扱う概念（エンティティ）
サービスで扱うデータを定義します。
データベース設計ではこのデータをエンティティと言います。
・ エンティティ
エンティティとは、サービスの中で管理する必要のある概念(情報)を指します。
例えば、SNSなどのサービスでは「ユーザー」や「投稿内容」、「コメント」などの情報を管理する必要があります。
これらの情報がエンティティにあたります。
・エンティティの属性
エンティティは属性を持ちます。
映画というエンティティであれば、
タイトルや説明、公開日、監督などが属性です。
・ エンティティの属性
属性とは、エンティティが個別に持つ情報です。
ユーザーというエンティティでは、
「名前」「アドレス」「パスワード」「プロフィール写真」
が属性にあたります。
これらを踏まえると、エンティティはサービスで扱う情報を大きく捉えたものであり、
属性はエンティティそれぞれが実際に持つ情報と言えます。
〜カリキュラムより抜粋〜
エンティティと属性の例
| エンティティ | 属性 |
|---|---|
| ユーザー | 名前、アドレス、パスワード、プロフィール写真 etc |
| 投稿内容(ツイートなど) | 投稿したテキスト、投稿した写真、イイネ数 etc |
実際に設計したいサービス当てはめて考える癖をつけねばと感じますね！
マックのレシートからDB設計しようといったカリキュラムの演習でもありましたが、
日常のサービスからある程度DB設計を考えてみるのも良い練習になりますね。。。
エンティティ同士の関係性（リレーション）
エンティティとエンティティの間に関係性がある場合があります。
これをリレーションといいます。
Twitterではツイートとツイートを投稿したユーザーの間には関連性があります。
・リレーション
リレーションとは、エンティティとエンティティとの間に存在する関係性のことです。
例えば、映画には、その映画を撮った監督がいます。
こういった場合映画と監督の2つのエンティティには関係性があります。
〜カリキュラムより抜粋〜
データベース設計の手順
データベース設計の手順のうち、ほとんどの場合で必須となる手順は以下の4つです。
1. データベースで管理するデータ（エンティティ）を決める
まずは、作成するサービスで管理するデータを決めます。
この作業はエンティティを決定することと同義です。
2. それぞれのデータの持つ属性を決める
エンティティが決定したら次に属性を決定します。
属性とはエンティティがそれぞれ持つデータの事でした。
ユーザーに持たせる属性は名前、アドレス、パスワードなどがあげられ、
ツイートに持たせる属性は、本文、イイネ数、投稿時間などがあげられます。
3. エンティティ同士の関係性を決める（リレーション）
エンティティ同士の関連性を決定します。
ツイートには必ず投稿したユーザーが存在します。
そこでユーザーとツイートとの間にリレーションを設定することで２つのエンティティ同士に関係性を持たせます。
もちろん他のエンティティと関係のない独立したエンティティも存在します。
4.データを実際にデータベースのテーブルとして定義する
最後に１〜３の手順を元に実際にテーブルを作成することになります。
エンティティはテーブルに相当し、属性はテーブルが持つカラムに相当します。
〜カリキュラムより抜粋〜
この流れが基本であり、一番シンプルなんですが、
身につけるためには何度も繰り返し設計しないとですね。。。
以前取り組んでいたPicktweetでもやったはずなんですが、
今回でようやく「こういうことだったんだ！」と気づいた気がします。
ただ、まだリレーションの決め方にイマイチ確信が持てないので、
それはドンドン設計しながら覚えるしかないですね！！
［アラフォプログラミング未経験］Hamlについて学んだみた
今回は、「Haml」について勉強してみましたー
というか、並行してそもそものHTMLやCSSもまたおさらいしてます。。。
まさに３歩進んで２.５歩下がってを繰り返して、少しずつ少しずつ進んでいく感じですね。
目次
Hamlとは？
Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジンです。
公式サイトによると「マークアップは美しくあるべき」という原則に基づいて開発されました。
Hamlを使用することで、
「綺麗に」、「読みやすく」、「生産的に」
ビューを作成することができます。
〜カリキュラムより抜粋〜
HTMLもわかりやすかったけど、さらに簡単に綺麗に書けるとな？！
参考（英語ですが）
haml.info
Hamlの基本的な記法について
まずは一番シンプルにHamlを書く場合。
%p Hello!
と書くと％pをhtmlのpタグと認識して次のようなHTMLに変換してくれます。
<strong>Hello!</strong>
階層構造
「半角2つ」を使って階層構造を表すこともできます。
%gee %whiz 今日も良い天気だなぁ！
次のようなHTMLに変換されます。
<gee> <whiz> 今日も良い天気だなぁ！ </whiz> </gee>
属性情報の付加
HTMLタグの属性情報は次のように記述すると
%div{id: "my-id"} Contents %div{class: "my-class"} Contents
HTMLに変換するときに付加されます。
<div id="my-id"> Contents </div> <div class="my-class"> Contents </div>
