Daiブログ

普段学習したことや生活のことについて書いていきます〜

Ruby Silverに合格したので、そのまとめ

先日Ruby Silverを受験し合格しました!結果は88点(合格は75/100点以上)とまずまずだったかなと思います。

今回は受験までの勉強内容や参考にした書籍、記事をまとめようと思います。

 

勉強前の知識について

・スクールでRubyは勉強したが実務経験は2ヶ月ほど

・ITパスポートは持っている

Ruby, Railsを使って実務ではないが個人でアプリ開発経験はある

 

といった感じでRubyの知識が全くないとかではないが、がっつり知っているというわけでもない程度

 

勉強時間

・約1ヶ月くらい

・合計で30時間程度(1日30分~1時間くらい)

 

勉強でやったこと

勉強でやったことは以下の3点です。

書籍やWebで問題を解く

・Ruby技術者認定試験合格教本

Ruby Silver, Gold両方対応の書籍。最後に基本問題30問、模擬問題50問が付いている。

よく出題される範囲について色々書かれているのでとても参考になりました。

 

・REx

Webで無料で受けることができる問題。同じような問題がランダムで出題される。

利用するにはGithubのアカウントが必要なのでそこだけ注意。

これが一番利用したと思います。毎回50問題出題されるがスキップしたり途中で採点したりできて便利でした。

間違えた箇所や分からない部分は実際に動かしたり公式リファレンスを確認する

paiza.io

paizaが提供しているブラウザでコードを実行できるサービス。

ブラウザで実行できるのでとても便利でした。

docs.ruby-lang.org

Rubyの公式リファレンス。

何かと分からない部分はリファレンスをみて勉強しました。

合格した方の記事を読む

以下の2つの記事を読んでよく出そうな部分を押さえておきました。

結構引っ掛かりそうな問題とかがあって参考になりました。

・Ruby技術者認定試験Silver version 2.1を受けて...

 

・Ruby技術者認定試験Silver/Gold対策の個人的なハマり問題集

出題された箇所について

String/Array/Hashクラスのメソッドに関する問題、File/Dirクラスに関する問題、数値リテラル、パーセント記法、正規表現などがでてきました。

特にString/Array/Hashクラスは「同じ動作のメソッドを選べ」、「破壊的メソッドかどうか」などの問題が結構でてきた印象でした。

例外処理やTimeクラス、IOクラスに関しても出題量は少ないがちょこちょこでてきました。

勉強で参考になった記事

【Ruby】「!」が付かない破壊的メソッドまとめ -Qiita

Rubyで%記法(パーセント記法)を使う -Qiita

Ruby 正規表現の使い方 -Qiita

まとめ

まとめとしては問題を解く→実際に動かして確認するといった作業を繰り返し行うことが重要だったと思います。問題も解くだけでなく「何がダメなのか」といった説明ができるようになるとより完璧に近づく思います。

同じような問題を何回も解くので答えの丸暗記になってしまうと実際の試験で足元をすくわれる危険があるのでそこだけは注意が必要です。

問題集などで9割以上正答率があればかなり安心かもしれません。

基本的には知っているかどうか勝負なので短期間で詰め込むより、毎日少しずつの方が効率もよさそうといった感じです!

 

【PostgreSQL】 connection to server on socket "/tmp/.s.PGSQL.5432" failed: No such file or directory

ローカル環境でrailsアプリを起動させようとすると以下のエラーが出たので備忘録

connection to server on socket "/tmp/.s.PGSQL.5432" failed: No such file or directory

ん〜どうやらポスグレに問題がありそうだ...

brew services restart postgresql

再起動してみたがエラーは治らず、以下のコマンドで調べてみるとどうやらバージョンがおかしいみたい

postgres -D /usr/local/var/postgres

そういえば最近rbenvのアップグレードをしようと思ってbrew updatebrew upgradeを実行した
それでポスグレのバージョンが一致していなくでエラーが出ていたようだ
なのでポスグレもアップグレードしてあげればよさそう

brew postgresql-upgrade-database

これで問題なくrailsアプリを起動させることができました!

参考

PostgreSQL DB のアップグレードは brew postgresql-upgrade-database が便利 - Qiita

欧州サッカーの試合結果配信サービスをリリースしました

はじめに

kaneko daichiと申します。現在、フィヨルドブートキャンプでRubyを中心にプログラミングを学習中です。

今回、最終課題である「Webサービスをリリースする」プラクティスで欧州サッカーの試合結果配信サービスであるEuro Foot Checkerをリリースしました!

 

euro-foot-checker.herokuapp.com

github.com

Euro Foot Checkerの紹介

Euro Foot Checkerは欧州サッカーリーグの試合結果を一覧で確認できるサービスです。

ユーザーは欧州5大リーグのチームから好きなチームを登録し、最新の試合結果を一覧で確認することができます。

以上の5つのリーグのチームから選択が可能です。

毎日7:30に試合結果を更新し、夜中に行われた試合を朝確認できます!

このサービスが解決すること

僕は欧州サッカーを見ることがとても好きで試合結果などをヤフースポーツなどで確認していました。

しかし、さまざまなリーグに所属する好きなチームの結果を確認しようとするとwebページを移動する必要があり、お気に入りチームが多い人は確認するのに手間がかかってしまいます。

このサービスはお気に入りチームを登録しておくと最新の試合結果を一覧で確認できページ移動の手間がかからなくなります。

サービスの使い方

1.アカウントを登録する

アカウントの登録の際にメール認証があるのでそちらを認証して登録しましょう!

2.試合結果が知りたいチームを登録する

アカウント登録が完了しログインすると、チーム登録ボタンがあるのでそこからチーム選択ページへいき、試合結果の知りたいチームを登録しましょう!

3.試合結果が一覧で確認する

試合結果の知りたいチームの登録が終わったらサービスロゴをクリックして試合結果一覧ページにいきましょう。

登録したチームの最新の試合結果が一覧で確認できます!

技術スタック

開発で大変だったこと

まず最初に開発で何が大変だったかと振り返ると正直全てが大変でした... 初めてやる事ばかりで最初は「どうすればいいんだ...」と言った気持ちでした〜

1からサービスを作るということで全て自分で決めていかなければならなく考えることがとても多かったな〜と思います。

サービスを考える

まずはサービスを考えるところから始めなければなりません。

自分の作るサービスがどんな問題を解決するのかの言語化が難しかったです。

また、最初に見た目をある程度決めるペーパープロトタイプの作成も初めてだったのでサービスの開発に着手する前にやることも結構多いんだな〜と感じました。

データベース設計

1からサービスを作るのでデータベース設計もやる必要があります。

自分のサービスのリソースを洗い出して設計していきました。

1度プラクティスでやっていたけど正規化が上手くできていなかったり、テーブル同士の関連付けだったりを考えるのが大変でした。

実際に開発作業に入る前に駒形さんにレビューをしてもらえたのはとてもありがたかったです!

どうやって実現するか

サービスでは試合結果のデータを取得する必要がありました。

最初はスクレイピングで実装していこうかと思ってましたがサッカーという世界的なスポーツだしAPIで何かないかな〜と思い調べたら結構たくさんのAPIがあって驚きました。

www.api-football.com

今回はこのAPI-FootballというAPIを使用しました。

外部APIを使うのは初めてでドキュメントを見ながらどんなデータが取れるのか調べて試行錯誤しながら進めました!

デザインを考える

サービスが大体完成に近づいてデザインをつけていくのですがシンプルに見やすくするにはどうしたらいいか考えるのは難しかったです。

登録してもらいやすくするために新規登録ボタンはログインボタンよりも強調したり、試合結果一覧ではスコアを大きくして結果がわかりやすくなるように修正したりしました。

デザインレビューを受けた際もデザインの抜けている部分が多く、もっと気を使ってデザインをあてていく必要があるな〜と感じました。

また、サッカーチームはどのチームもメインカラーを持っているためサービスのカラーはどのチームにも寄り難い黒系で統一しました!

開発を進める中でやって良かったこと

やることを書き出す

開発ではやることが多く自分は何からやればいいか考えすぎてしまうタイプなので考えることが多くなると紙に一旦書き出して整理するということを行いました。

問題があれば何が原因かどうすれば解決しそうかなどを書き出すと気持ちの整理もできてとても良かったです!

こまめにPRを出すこと

開発は途中で気持ちが下がってしまうこともよくあったので「やってる感」を出す意味でも大きいPRではなく小さくしてこまめに出していったのは良かったかな〜と思います!

質問タイムを活用する

正直これが一番大きいと思います〜

開発では分からないことや誰かに確認してほしいことが多くありました。

なので分からないことがあったら質問タイムに積極的に参加しました!

おそらく質問タイムに参加していなかったら完成できていないと思います...

また、現在はペアプロなんかも積極的に行われていてみんなでワイワイしながら進めれば気持ちも高く保ててとてもいいな〜と思います!

これからやってみたいこと

現在は欧州5大リーグのチームしか選択できませんが、マニアックなリーグも選択できるようにしてみたいです。

デザインについてもシンプルに見やすいようにしていますが改善できるとこはこれから出てくると思うのでリリースして終わりではなくちょっとずつでいいので良くしていければいいな〜と思います!

最後に

自作サービスを開発していく中でメンターや受講生の方にとてもお世話になったな〜と思います。

サービス案から設計などレビューしてくださった、駒形さん 町田さん、質問タイムでお世話になった梅本さんrihoさん、「サービス楽しみです」と声をかけてくださった受講生やメンターの方々、とても感謝しています!!!

gitでコミットメッセージをまとめる

4c161c0 hoge
a215c1f foo           
ef4e7a4 hoge
b11131c fuga

上のようなコミット履歴がありhoge同士を1つにまとめたいのでgit rebase -iを使っていく

git rebase -i HEAD~4

HEAD~4で4つ前のコミットまで編集できるようにする rebaseを実行するとエディターが開き以下のようになる

pick 4c161c0 hoge
pick a215c1f foo           
pick ef4e7a4 hoge
pick b11131c fuga

今回はhogeをまとめたいのでコミットの順番を変更しまとめたい箇所をpickからs(squash)に変更する

pick 4c161c0 hoge        
s ef4e7a4 hoge
pick a215c1f foo   
pick b11131c fuga

変更できたら:wqを押すとエディターが開きコミットメッセージの編集ができる

# This is a combination of 2 commits.
# The first commit's message is:

hoge

# This is the 2nd commit message:

hoge

コミットメッセージを編集する

# This is a combination of 2 commits.
# The first commit's message is:

hoge

ここで:wqで保存する
gitのログを確認すると以下のようになっている

fde0990 hoge
a215c1f foo           
b11131c fuga

もしリモートリポジトリにpushする場合はgitのコミットハッシュが変わるのでgit push --force-with-leaseを使ってpushする必要がある

参考

rebase -i でコミットをまとめる - Qiita

Selenium::WebDriver::Error::UnknownErrorについて

GitHub ActionsでCI環境構築をしている中で以下のようなエラーに遭遇したのでその備忘録です。 テストはRSpecを使用しています。

 Selenium::WebDriver::Error::UnknownError:
            unknown error: Chrome failed to start: crashed.
              (unknown error: DevToolsActivePort file doesn't exist)
              (The process started from chrome location /usr/bin/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
          # #0 0x55a53a5f3113 <unknown>
          # #1 0x55a53a0bb6d8 <unknown>
          # #2 0x55a53a0dea1c <unknown>

エラーをみるとChromeがクラッシュして失敗しているようだった。 RSpecはデフォルトではrack_testとなっており(ブラウザが起動する)これが原因だったみたい...
なのでテスト時のドライバーを以下のように修正

# rails_helper.rb
  config.before type: :system do
    driven_by :selenium_chrome_headless
  end

ヘッドレスクロームGUIを持たないモード
これで無事動くようになりました!

Vue3のchrome devtoolsを導入する

Vue.jsを使う上でchromeのdevtoolsを使う人はとても多いと思います。

Vue.jsでもVue3を使っている人向けのものになっています。

 

現在下記のVue.js devtoolsを使っている人は多いと思いますがこちらではVue3には対応していないため新しくdevtoolsを入れる必要があります。

chrome.google.com

 

Vue3向けのdevtoolsはこちら

chrome.google.com

 

使用する際は片方を無効にしてあげる必要があります。

f:id:knkdic:20211113222056p:plain

 

僕はVue2系から自作サービスを作成するにあたってVue3に変更しその際に少し詰まったのでメモとして書き残しました!

git pull と git pull --rebase の違いについて

git を使っているとgit pullだったりgit pull --rebaseを使うことが多いと思います。 この違いについて理解するためのアウトプットとして書いています。

git pull

git fetch + git mergeと同じ

git fetchはリモートブランチの内容をローカルにあるリモート追跡ブランチに持ってきます。 このリモート追跡ブランチというのはリモートブランチのコピーのようなもの。 そしてgit mergeでリモート追跡ブランチの内容を現在のブランチに反映させます。

git pull --rebase

git fetch + git rebaseと同じ

git fetchはgit pullと同様です。

git rebaseは持ってきたリモートブランチの内容を現在のブランチの分岐元に持ってきます。

  • rebaseする前
A ー B ー C --- リモートブランチ
      \
         D --- ローカルブランチ
  • rebaseした後
A ー B ー C --- リモートブランチ
           \
             D --- ローカルブランチ

rebaseした後はリモートにプッシュする際に--force-with-leaseが必要になります。

これはリモートとローカルでブランチの分岐もとが変わってしまうためです。