VSCodeのパッケージ不適合によるエラー解決までの道のり（Byebug編）
この記事はフィヨルドブートキャンプ Part 2 Advent Calendar 2022 - Adventarの22日目の記事です。昨日のエントリーは、
Part 1がobregonia1さんの業務未経験からWEBエンジニアに転職して一年弱経ちました | Code Rules Everything Around Me
Part 2がyamabe009さんのフィヨルドブートキャンプで学習する2児ワーママのとある一日 - やまべのブログ でした。
フィヨルドブートキャンプの今年のアドベントカレンダーは以下の通りです。
フィヨルドブートキャンプ Part 1 Advent Calendar 2022 - Adventar
フィヨルドブートキャンプ Part 2 Advent Calendar 2022 - Adventar
はじめに
2021年の春より、フィヨルドブートキャンプにてプログラミングを学習しているのですが、学習を進めていく中でByebugというRubyのデバッグツールを使う機会がありました。その際、エラーによりByebugを使うことができず、解決までに数日かかってしまいました。
エラーの原因なのですが、なんとVSCodeをインストールした際に発生していました。
今回はByebugで起こったエラーについて、事の顛末を書いていこうと思います。
自分の場合はByebugでエラーが発生しましたが、今はByebugはあまり使われていないようです。しかし、原因がByebugに由来していないため、他のgemなどでも発生する可能性があるかもしれません。
また、エラーに遭遇したのは昨年ですが、まだエラーが発生する可能性が考えられるため備忘録という形で残しておきたいと思います。
エラー発生時のバージョンについて
パソコンおよびruby、インストールを試みたByebugのバージョンは以下の通りです。
- パソコン：MacBook Air (M1, 2020)
- パソコン内のチップ：Apple m1
- バージョン：Mac OS Big Sur バージョン11.4
- ruby：ruby 2.7.3p183 (2021-04-05 revision 6847ee089d) [arm64-darwin20]
- Byebug：byebug-11.1.3
結論
使用していたVSCodeのパッケージが、使用しているMacに適していなかったため。 チップが「Apple M1」の場合、VSCodeをインストールする際は「Apple Silicon」を選ぶ。
解決までの経緯
エラーの発生
フィヨルドブートキャンプにて、rubygemsに関する学習を行っていたときのことです。 byebugによるデバッグを体験するために、gemコマンドを使用してbyebugをインストールしました。
% gem install byebug Fetching byebug-11.1.3.gem Building native extensions. This could take a while... Successfully installed byebug-11.1.3 Parsing documentation for byebug-11.1.3 Intalling ri documation for byebug-11.1.3 Done installing documentation for byebug after 8 seconds 1 gem installed
インストール自体はできたのですが、byebug -vでバージョンを確認しようとすると、以下のエラーが発生します。
% byebug -v
Traceback (most recent call last):
9: from /Users/hoge/.rbenv/versions/2.7.3/bin/byebug:23:in `<main>'
8: from /Users/hoge/.rbenv/versions/2.7.3/bin/byebug:23:in `load'
7: from /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/exe/byebug:4:in `<top (required)>'
6: from /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:83:in `require'
5: from /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:83:in `require'
4: from /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/lib/byebug/runner.rb:5:in `<top (required)>'
3: from /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/lib/byebug/runner.rb:5:in `require_relative'
2: from /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/lib/byebug/core.rb:4:in `<top (required)>'
1: from /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:83:in `require'
/Users/hoge/.rbenv/versions/2.7.3/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:83:in `require': dlopen(/Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/lib/byebug/byebug.bundle, 9): no suitable image found. Did find: (LoadError)
/Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/lib/byebug/byebug.bundle: mach-o, but wrong architecture
/Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/lib/byebug/byebug.bundle: mach-o, but wrong architecture - /Users/hoge/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/byebug-11.1.3/lib/byebug/byebug.bundle
解決策を調べていたのですが、インターネット上では見つけることができなかったため、フィヨルドブートキャンプ内のQ&Aに質問を投稿しました。すると、メンターの@jnchitoさんから回答をいただき、一緒に解決策を考えていただけることになりました。
Rubyを最新版にする（解決せず）
はじめにrubyをエラー発生時の最新版である2.7.4に変更し、byebugをもう一度インストールして実行するよう提案いただきました。 Ruby2.7.4をインストール後、Byebugをインストールしバージョンを確認しましたが同じようなエラーが出ました。
byebugインストール時にplatformを指定する（解決せず）
次にbyebugを一度アンインストールした後gem install byebug --platform=rubyでインストールするよう提案いただきました。
platformがrubyであることを指定する形です。
guides.rubygems.org
提案いただいた方法でインストールをします。インストール自体は成功したように見えます。
% gem install byebug --platform=ruby Fetching byebug-11.1.3.gem Building native extensions. This could take a while... Successfully installed byebug-11.1.3 Parsing documentation for byebug-11.1.3 Installing ri documentation for byebug-11.1.3 Done installing documentation for byebug after 8 seconds 1 gem installed
しかし、バージョンを確認すると最初と同じエラーが発生しました。
brew doctorの実行
ここから@jnchitoさんと1on1でデバッグ作業を行い、エラーの解決を試みることになりました。
まず、brew doctorを実行しました。
% brew doctor Please note that these warnings are just used to help the Homebrew maintainers with debugging if you file an issue. If everything you use Homebrew for is working fine: please don't worry or file an issue; just ignore this. Thanks! Warning: Your Homebrew's prefix is not /usr/local. Some of Homebrew's bottles (binary packages) can only be used with the default prefix (/usr/local). You will encounter build failures with some formulae. Please create pull requests instead of asking for help on Homebrew's GitHub, Twitter or any other official channels. You are responsible for resolving any issues you experience while you are running this unsupported configuration.
「Warning: Your Homebrew's prefix is not /usr/local.」と書かれているため、Homebrewに問題があるのではないかとの仮説が立ちました。/usr/local配下にHomebrewがインストールされていない可能性がありそうです。
which -aとbrew configを実行
次に、homebrewについて同じような状況になっている人のissueを参考に、which -aとbrew configを行うことになりました。
github.com
whichは実行コマンドのフルパスを表示するコマンドで、aオプションをつけると環境変数PATHにある全ての実行ファイルを表示することができます。また、brew configではHomebrewの構成を確認することができます。
atmarkit.itmedia.co.jp
自分と@jnchitoさんはMacBookの機種以外ほぼ同じ環境だったのですが、brew configを行った際に、macOSとRosetta 2の部分がそれぞれ異なっていることが分かりました。
Rosetta 2は以下の記事によると、「従来のIntel Mac用のバイナリをArmベースのM1 Macでも動くようにさせるためのエミュレーションソフト」とのことです。
blogs.itmedia.co.jp
自分はmacOS: 11.4-x86_64、Rosetta 2: trueだったのですが、@jnchitoさんはmacOS: 11.4-arm64、Rosetta 2: falseでした。ここで、Homebrewに設定されたmacOSのCPUアーキテクチャがx86_64になっていることがエラーの原因かもしれない、という話になりました。
GCCのバージョンを確認する
次にgcc --versionを実行し、GCCのバージョンを確認していきます。
GCCとは、「GNUプロジェクトが開発および配布している、さまざまなプログラミング言語のコンパイラ集」とのことでした。
% gcc --version Configured with: --prefix=/Library/Developer/CommandLineTools/usr --with-gxx-include-dir=/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/4.2.1 Apple clang version 12.0.5 (clang-1205.0.22.11) Target: x86_64-apple-darwin20.5.0 Thread model: posix InstalledDir: /Library/Developer/CommandLineTools/usr/bin
ここでも、本来arm64から始まるはずのTargetの部分が、Target: x86_64-apple-darwin20.5.0になっていました。
Xcode Command Line Tools の再インストール（解決せず）
次にXcode Command Line Toolsの再インストールを行い、brew configやgcc --versionを実行した時にそれぞれmacOSとTargetが arm64と付く形になるかどうか確認していきました。
Xcode Command Line Toolsの再インストールに関しては、以下の記事を参考にしました。
blog.hgrs.me
再インストールが済んだ後、gcc --versionを実行しましたが、Target: x86_64-apple-darwin20.5.0のままでした。
uname -mを実行
次に、uname -mを実行しました。
unameは「カーネルの名前やバージョン、ハードウェア名などを表示するコマンド」で、mオプションを付けることでハードウェア名を表示させることができます。
% uname -m x86_64
m1チップを搭載したパソコンの場合、本来はarm64と表示されます。しかし実行結果はx86_64でした。
ここでTerminalを実行する際に、x86_64を基にしてByebugなどのプログラムが実行されていることがエラーの要因だと把握できてきました。
Macのターミナルでbrew configを実行
今まではVSCodeのターミナルを使ってコマンドを実行してきましたが、一応Macに元々付いているターミナルでbrew configを実行してみました。
すると、macOS: 11.4-arm64、Rosetta 2: falseと適切な設定になっています。不思議に思いつつ試しにbyebug -vを実行しました。
% byebug -v Running byebug 11.1.3
問題なくバージョンが表示されています。
ここで原因はhomebrewではなく、VSCodeにあるのでは？となり、VSCodeのバージョン情報を確認しました。
OSの部分が「Darwin x64 20.5.0」になっています。
ついにエラーの原因が、「パソコンのCPUアーキテクチャ（arm64）と不適合なVSCodeのパッケージを使用していたため」だったことが分かりました。
VSCodeを再インストール（エラー解決につながる）
x64が使われているVScodeをアンインストールし、以下のリンクよりApple SiliconパッケージのVSCodeをインストールしました。
「Apple silicon」（画像の丸がついている部分）をクリックしダウンロード・インストールを行います。
※以下のページによると、デフォルトのダウンロードはすべてのMacで動作するUniversalパッケージになっているとのことです。大きなボタンになっている箇所をクリックすると、Universalパッケージでインストールされると思われます（未検証）。
以前どのボタンを押してインストールを行ったか失念していたため、念の為「Apple Silicon」を選択しています。
インストール完了後にバージョン情報を確認すると、OSの部分がarm64に変わっていました。
byebug -vを実行する（解決）
gem uninstall byebug、gem install byebugを実行し、Byebugのアンインストール&再インストールを行いました。
その後、VSCodeのターミナルでbyebug -vを実行しました。
% byebug -v Running byebug 11.1.3
エラーは発生せず、VSCodeのターミナルでもバージョン情報が表示されました。
終わりに
今回Byebugで起こったエラーは、VSCodeが自分のパソコンと適していないパッケージだったことが原因で発生しました。意外なところにエラーの原因が潜んでいる場合があることを身をもって知った形です。エラーの根本的な原因が解決できていなかったら、他のツールを実行した場合もエラーが発生していたのかもしれません。
また、エラー解決のために様々な策を提案してくださった@jnchitoさんがいたことで、エラーを解決することができたと思います。ありがとうございます！
明日はPart 1がはるぐち ゆうまさん、Part 2がwataさんになります。楽しみです！
LT会に初登壇するまでの振り返り
久しぶりの更新になりました。
現在、Fjord Boot Campにてプログラミングに関する学習をかれこれ１年ほど続けています。
そんな中、2022年の7月30日（土）に『⚡️初めてのLT会 Vol.12』がFjord Boot Camp内でオンラインにて開催され、自身も発表を行いました。
今回は発表までの準備やどんなことを考えていたかなどについて書いていければと思います。
ちなみにLTとは、5分程度の短いプレゼンを指します。
発表までに準備したこと・考えていたこと
登壇を決めるまで
自分が入会してから何回かLT会は行われていたのですが、毎回当日に仕事があり参加を断念していました。
一度は参加してみたいなと思いながら時は流れて6月下旬。ついにLT会の開催案内が流れてきました。この時は勤めていた会社を退職していたため、日程も特に問題なさそうです。
一度もLT会に参加したことがない人間がいきなり登壇するのはどうだろうか、とも考えましたが、チャンスがある時は手を挙げたほうがいいと思い、登壇を表明しました。
登壇者が多すぎると抽選になるのかなとも考えていましたが、抽選にならない程のちょうどいい人数におさまり、無事登壇が確定しました。
この時、本番まで大体３週間でした。
登壇を決めた理由
登壇しようと思った理由としては、「自分のやってきたことを言語化して発表を一度しておきたかった」「コミュニティ内で自分を知っている人を増やしたかった」の2点が挙げられます。
1つ目に関しては、退職してなかなか人前で何かを発表する機会が少なくなっていると感じたことがきっかけでした。2つ目に関してはかなり俗っぽいですが、様々な方とコミュニケーションを取るきっかけを今後つかみやすくなるのではという気持ちがありました。
登壇２週間前までにしていたこと
発表するテーマを決める
発表するテーマが決まらなければ、スライドも作れません。
今回のLT会のテーマが「Let's TRY」であるため、Fjord Boot Campに入会してから挑戦したことについてまず考えていきました。
候補として、「学習習慣の改善」と「Railsガイドを毎日読む」の2つを絞り出しました。他の方からも意見をいただき、最終的に自分の言葉で一番話しやすい「学習習慣の改善」について発表することに決めました。
発表内容をまとめる
テーマが決まったら、発表の準備を進めていきます。最初からスライドを作ると途中で詰まってしまう可能性が高かったため、まずはメモアプリに学習習慣の改善について思いつくことを箇条書きにしていきました。
箇条書きにする際にまず「テーマ」と「誰に向けて話すか」を書き、その後起承転結に沿った形で箇条書きで思いついたことを挙げていきました。
起承転結に関しては、「起（なぜそのテーマに決めたか）」「承（テーマについて実行したこと）」「転（テーマを実行したことで起こった変化）」「結（テーマに関するまとめ）」という形にしています。
メモの分量がある程度溜まったら、深堀りできそうな話題に関しては追記していき、箇条書きに肉付けをしていきます。
肉付けがある程度終わったら、そのメモをもとに発表の流れを考えていき、見出しをつけていきました。また、テーマと関わりが薄い箇所やあまりに細かくなりすぎている箇所（使っているアプリに関する説明など）は削っていきました。
このあたりでスライドに載せる内容が固まってきました。
この作業が落ち着いたあたりで、発表までは残り2週間を切っていました。
登壇1週間前までにしていたこと
スライドを作成する
ある程度まとまったメモをもとに、スライドを作成していきました。スライドはKeynoteで作成し、テーマは『Azusa 3』を使用しました。
スライドを作成する際は以前登壇された方やFjord Boot Campのメンターの方が書いてくださった記事を参考にしました。
フィヨルドブートキャンプ第10回LT会で登壇しました - ryo1024の日記
⚡️初めてのLT会 Vol.10で登壇しました！！ - セットプチフォッカ
発表でうまく話すためには （富山Ruby会議01のPRをかねて） #toyamark - give IT a try
個人的にスライドを作る際に気をつけたポイントは「文字のサイズを大きめにする」「文章は一行でおさめる」の2点です。
「文字のサイズを大きめにする」に関しては、スクリーンを全画面表示にしなくても認識できるサイズの文字になるように心がけました。
「文章は一行でおさめる」に関しては、どの記事に書いてあったかは失念してしまったのですが、「文章をできるだけ一行におさめている」と書かれていたため実践しました。個人的には複数行にした時に比べてスライドの読みやすさが結構変わってくるような気がします。これは働いていた時に知りたかったですね……。
また、一行でおさめるためには簡潔に書かなければならないため、スライドの文章が冗長にならない効果もありそうです。
原稿を作成する
スライドを作り終えたら、原稿を作成していきました。
原稿に関してはKeynoteの発表者ノートに書いていきました。
画像を見ていただくと分かる通り、自分は話し口調で原稿を書いています。理由としては、箇条書きなどにすると箇条書きの内容をつなげるときに「えーと」が多くなったり、つなげ方が雑になったりする可能性をなるべく排除したかったためです。
登壇前日までにしていたこと
コロナウイルスに感染
「登壇前日までにしていたこと」ではありませんが、登壇1週間前あたりに同居している両親がコロナウイルスに感染してしまいました。
感染しないように部屋やトイレ、衛生用品を分けたり、換気などを定期的に行いましたが、登壇3日前の夜から喉の調子が悪くなり、2日前の夜に発熱してしまいました。
発表前日の朝に発熱外来に向かい、抗原検査の結果コロナウイルスに自分も感染していることが分かりました。
登壇を辞退することも考えましたが、喉の痛みはあるものの病院で薬を貰ってから熱があまり上がらなかったことや、せっかく作ったスライドや原稿がもったいないという気持ちもあり、最終的には登壇することに決めました。
発表の練習を行う
原稿が一通りできたら、発表の練習を行いました。
原稿に沿って通しで発表し、タイマーを使って発表時間を計測しました。5〜7分程度が目安と主催者の方からは伝えられていたのですが、最初に練習をした時は9分かかってしまいました。
時間を少しでも詰めるために、スライドの項目や原稿を一部削りました。また、言いにくかったり言い回しがしっくりこなかったところも修正しました。
今回はコロナウイルスに感染してしまった影響で3、4回しか通しでの発表練習ができませんでした。その影響もあってか時間も7分半くらいまでしか練習では詰められませんでした。
発表の練習を行うときは、普段より喋るスピードを遅くしておいた方が本番の発表時間との差が少なくなるかと思います。個人的な感覚ですが、一人で発表練習をしていると時間にばかり意識が向いて、早口になるような気がします。
オフラインのイベントの場合は原稿の内容をしっかり覚えておく必要がありますが、オンラインの場合はある程度原稿を見ながら話すことが可能なため、その部分に関してはかなり気分的には楽でした。
リハーサルを行う
前日の夜に主催者の方に時間をとっていただき、リハーサルを行いました。
その際に発覚したのですが、今回会場として使用されたRemoの場合、画面の一部を共有する機能が無いため、スライドを再生した状態で共有すると発表者ノートが表示されません。
自分の場合は事前に発表者ノートに書いた原稿をGmailにコピペして、スマホで見られるようにしていたため事なきを得ましたが、Keynoteを使ってRemoで発表する方は対策をとったほうが良さそうです。
今回、自分の場合は画面共有や音声などに関して問題はありませんでしたが、「画面が共有できない」「音声が聴こえない / こちらの声が相手に聴こえない」という問題も発生する可能性があるため、リハーサルは可能な限り実施した方が当日のトラブルも少なくなるかと思います。
リハーサルでは聞き取りやすいスピードに意識が向きすぎた結果、発表時間を2分ほどオーバーしてしまいました。主催者の方から時間に関してはあまり気にしすぎなくて大丈夫と言っていただきましたが、当日までに原稿やスライドを調整する必要がありそうでした。
リハーサルが終わった後あたりから喉の痛みがひどくなったため、不安を抱えながら就寝しました。
登壇当日に行ったこと
当日起きたときは喉の痛みがひどく、辞退も一瞬頭をよぎりましたが、朝食を食べた後は痛みが緩和されたため、本番まではのど飴を定期的になめることで気を紛らわせていました。
スライド・原稿の調整
昨日のリハーサルを受け、スライドの文章を若干修正し、原稿もリハーサル時より分量を削りました。声を出さず原稿を何回か読み、言い回しも調整しました。
Speaker Deckにスライドをアップする
他の登壇者の方が続々とSpeaker Deckにスライドをアップしていたため、自分も完成したものをアップしました。
アップロードの手順は、主催者の方から教えていただいた記事を参考にしました。
発表する
いよいよ本番になり、発表の出番になりました。
出番は1番手でした。M-1グランプリなら不利な出順ですが、発表に関してはいち早く緊張感から解放されますし、他の方の発表と比較されないため個人的には好きな順番です。
意識したことと言えば、「早口にならないこと」と、「話すスピードにメリハリをつけること」、「スライドとスライドの間は少しだけ間をあけること」の3つです。
個人的に伝えたいフレーズに関しては、話すスピードをさらに落としました。また、スライドの内容を話し終えてすぐ次のスライドに進むと、急いでいる雰囲気になりそうだったため、少しだけ間をあけました。
発表時間は10分程度とリハーサルより時間が長くなってしまったことは反省点ですが、伝えたいことはある程度伝わったかなと、後日いただいたアンケートの回答などから個人的には判断しています。
ちなみに発表したスライドは以下の通りです。タイトルは「自分に合った学習習慣を目指して」になります。
登壇を終えて
登壇を終えた後は懇親会でコメントをいただいたり、プロフィールに関する話が広がったりと、様々な方と話をする機会がありました。
懇親会終了後は気が緩んだのか一気に喉が痛くなり、夜はフジロックの配信をぼんやりと見ながら嵐が過ぎ去るのをひたすら耐え忍ぶような気持ちでした。自分はせっかく作ったスライドと原稿がもったいなかったため発表を行いましたが、本当は体調が悪いときは無理をしないほうが正解だと思います。
後日いただいたアンケートではとても暖かいコメントをいただき、参加してよかったという気持ちになりました。発表に関するフィードバックをいただけるのも、LT会の良いところだと思います。
LT会を終えて2週間近く経ちましたが、挑戦してよかったと思います。自分の考えていたことをまとめる良い機会にもなりましたし、人前で発表する経験を積むこともできました。また、発表に関する反省点も見つけることができました。
もしLTなど発表に関する募集がかかっていて、少しでもやってみようかなという気持ちがあるときは、とりあえず手を上げてみてもいいのかなと思います。手を上げることが一番勇気がいるので、後は案外なんとかなると思います。
今回、貴重な経験をする機会を提供してくださった主催者の方をはじめとする、ご協力・ご参加いただいた皆さまに、この場を借りてお礼申し上げます。
今回は学習全体に関する話だったため、次回また登壇する機会があった際は、プログラミングに関するテーマに挑戦できればと思います。
プログラミング勉強日記6(2/15-21)
プログラミングの勉強をし始めてから6週目になった。
【2/15-21】
週勉強時間：9時間21分
月合計勉強時間：31時間29分
合計勉強時間：65時間8分
先週よりは勉強時間が減少してしまった。「Web開発パス(Ruby on Rails)」が9割5分終わったが、抜けたり忘れたりしている部分もあるので、2周目を行っていこうと思う。
2/15
次の日が休みで気が抜けてしまい、作業を行わなかった。テンションが下がってしまうので気を付けたいところ。
2/16
「Ruby on Rails5 道場コース IV」の1周目が完了。「Ruby on Rails5 学習コース IX」の2周目をすすめる。
「投稿に『いいね』をつける」「『いいね』をつけた投稿を一覧で表示させる」で苦戦した。
以下メモ。
・self
インスタンスメソッド内で、selfはそのインスタンス自身を指す。
2/17
「Ruby on Rails5 学習コース IX」「Ruby on Rails5 学習コース X」の2週目を進める。
以下メモ。
・「いいね」を付ける/「いいね」を取り消す
①createアクションを用意する/destroyアクションを用意する
②createアクションへのリンクを用意する/destroyアクションへのリンクを用意する
・「いいね」を付けた投稿を1つずつ表示する
each文を用いて、「いいね」に紐付いているpostをfind_byメソッドで表示させる。
2/18
「学習コース Ruby on Rails5 XI」「道場コース Ruby on Rails5 IV」の2周目を進める。
2/19
引き続き「道場コース Ruby on Rails5 IV」の2周目を進める。
「いいねボタン」をつける課題を進めた際の間違いをメモする。Likeコントローラー内に作成したコード。
対して、模範解答のコード。
paramsの中身やURLが違っている。
投稿詳細ページに作成したコード。
対して、模範解答のコード。
いいねのハートを付ける位置がまず間違っている。これは確認不足。URLが間違っていたり、{method: "post"}が抜けていたりとボロボロだった。
それでもなんとか「道場コース Ruby on Rails5 IV」の2周目を終わらせる。また少し経ったら復習したほうが良さそうだ。
その後は「Rubyの開発環境を用意しよう！」や、復習のために「Ruby 学習コース I」の2周目を進める。
2/20
「Rubyの開発環境を用意しよう！」を進める。10分しかできなかった。
2/21
「Rubyの開発環境を用意しよう！」が完了し、「Webアプリ開発に挑戦してみよう」を進める。
「何をつくるのかを考える→作るものの全体図を作成する」という部分が大事なのは、色々な作業で必要になってくる。プログラミングもそうだし、趣味の創作活動も同じだ。
プログラミング勉強日記5(2/8-14)
プログラミングの勉強をし始めてから5週目になった。
【2/8-14】
週勉強時間：11時間12分
月合計勉強時間：22時間8分
合計勉強時間：55時間47分
先週よりは勉強時間を確保することができた。
もう少しでProgateのRuby on Rails5が終わるので、HTMLやRubyの復習も今後行っていきたい。
以下は日々の進捗具合や気づきのメモである。
2/8
「学習コース Ruby on Rails5 VIII」を進める。
2/9
「学習コース Ruby on Rails5 VIII」を引き続き進める。
スペルの打ち間違いでうまく動かない場合があり、意外に見落としていて作業に時間がかかってしまう要因になる。コードの内容が間違っていないのに動かない際はチェックを忘れないようにしたい。
また、画像をデータベースに保存する部分で躓いた。メモなどを見ながら進める。
以下メモ。
・ユーザー登録時に初期画像を保存する
(例)@user = User.new(image_name: "default_user.jpg")
2/10
「Ruby on Rails5 道場コース III」を進める。途中、クリア扱いになったが適切ではないコードを書いたことに気づく。
左が自分の書いたコードで、右が答えだ。
ログインができなかったときに、メールアドレスとパスワードのフォームに初期値が入るようにコードを書かなければならないのだが、自分のコードではログインできた状態でも初期値が入ってしまう。
以下メモ。
・各投稿に「どのユーザーがその投稿を作成したか」という情報を持たせる
postsテーブルにuser_idというカラムを用意。
2/11
Progeteの「Ruby on Rails5 学習コース IX」を進める。10分ほどしか作業ができなかったが、少しでも手を付けたため精神的ダメージを少しだけ抑えることができた。
以下メモ。
・integer（データ型）
整数
・user_idからユーザー情報を取得する
@post.user_idを用いる
2/12
「学習コース Ruby on Rails5 X」「学習コース Ruby on Rails5 XI」を進めた。
以下メモ。
・ある条件に合致する複数のデータを取得する
whereメソッドを用いる
（例）posts = Post.where(user_id: 1)
※find_byメソッドは、ある条件に合致する1件だけデータを取得する
・どのユーザーがどの投稿をいいねしたかを記録する（準備）
データベースに「user_id」と「post_id」2つのカラムを持つlikesテーブルを用意する。
・HTML要素に対してlink_toメソッドを使う
<%= link_to(URL) do %>と<% end %>の間にHTML要素を書く。
※<% end %>を忘れない。
・likesテーブルからデータの件数を取得する
countメソッドを用いる。
・記述したバージョンのgemをインストールする
gemfile内に「gem 'gemの名前', 'gemのバージョン'」と記述する。
（例）gem 'rails' '5.0.3'
※バージョンを記載しない場合、最新のバージョンがインストールされる。
・bcryptのインストール
「gem 'bcrypt」'を追加する。
その後、ターミナルで「bundle install」というコマンドを実行すると、書かれたgemをインストールすることができる。
※bcrypt：パスワードをハッシュ化する。
・has_secure_password
bcryptをインストールすると使用できる。また、passwordが存在するかどうかを自動的にチェックしてくれる。
・カラムを削除する
remove_columnを使用する。
・authenticateメソッド
渡された引数をハッシュ化し、password_digestの値と一致するかどうかを判定する。
2/13
ほとんど時間をとることができなかったが、少し進めることができた。
2/14
「Ruby on Rails5 道場コース IV」を進める。Twitterのように投稿一覧を表示させるページがあったが、表示がおかしくなってしまう。
divが1つ抜けていたのが原因だった。
プログラミング勉強日記3(1/25-31)
プログラミングの勉強をし始めてから3週目になった。
【1/25-31】
週勉強時間：12時間4分
合計勉強時間：33時間40分
休みの日が多かったため、先週より勉強時間を確保できた。1週だけだと理解が追い付いていない部分もあったため、Progateの学習コース1週目→道場コース1週目→学習コース2週目→道場コース2週目という進め方をすることで、頭の中に定着するようになった。
来週は休みの日がほぼないため、いかに仕事が終わった後に時間を確保できるかがカギになってくる。
以下は日々の進捗具合や気づきのメモである。
1/25
勉強を行わなかった。仕事休みの前日の夜はどうしても気が抜けてしまう。ネットサーフィンの時間をどう削れるかが問題。
1/26
引き続きProgateを進めていく。
以下メモ。
・ルーティングとアクションを追加するには
ルーティングには以下のコードを追加。
（例）aboutページを作成する場合：「get "about" => "home#about"」
コントローラーには以下のコードを追加。
（例）aboutページを作成する場合
def about
end
ビューを追加する場合はファイルを追加する。
・画像を追加する
public に保存。調べてみるとapp/assets/imagesに保存する場合もあるとのこと。publicはファイル名の前に/が必要だが、app/assets/imagesは画像ファイル名だけで問題ないらしい。その他にも違いがある。以下の記事も確認。
・HTMLファイルの中にRubyのコードを記述する
erb形式のファイルでは、<% %>で囲むことでRubyのコードを記述することができる。
・Rubyコードをブラウザに表示する
<%= %>を用いる。
・変数の定義
一般的にはアクション内で定義する。
・アクションで定義した変数をビューで使用する
変数名を「@」で始める。
・テーブルについて
縦の列がカラム、横の列がレコード。
・マイグレーションファイルの作成
（例）rails g model Post content:text
→contentはカラム名、textはデータ型で長い文字列をデータとして入れるときに使用。
・データベースに変更を反映する
rails db:migrateを実行する。
・モデル
ApplicationRecordを継承したクラス。
・rails console
・テーブルにデータを追加する方法
① new メソッドで Post モデルのインスタンスを作成
② posts テーブルに保存
・テーブルにある最初のデータを取得する
firstメソッドを使用する。
・テーブルに保存されている全てのデータを取得する
Post.allを使用する。
・共通のレイアウトをまとめる
「views/layouts/application.html.erb」に共通のHTMLを書くことができる。各ビューファイルは、「views/layouts/application.html.erb」内にある<%= yield %>の部分に代入され、application.html.erbの一部としてブラウザに表示される。
・link_toメソッド
<a>タグを作成することができる。
(例)<%= link_to("About", "/about") %>
Aboutの部分が第一引数、/aboutの部分が第二引数。第一引数に表示させる文字、第二引数にURLをそれぞれ記載する。
・特定のidの投稿を取得する
find_byメソッドを使用する。
「モデル名.find_by(カラム名: 値)」とすることで、その値を持ったデータをデータベースから取得することができる。
・URLにidを含める
ルーティング
get "posts/:id" => "posts#show"
コントローラー
def show
end
「posts/:id」というルーティングは「posts/index」より下に書く。ルーティングは合致するURLを上から順に探す。「posts/index」よりも上に書くと、「localhost:3000/posts/index」というURLは「posts/:id」というルーティングとマッチしてしまう。
・paramsについて
Railsで送られたきた値を受け渡しするメソッド
params[:id]とすることで、ルーティングで設定したURLの「:id」の値を取得することができる。
1/27
間違いがあったが動いてしまった。
この状態だと、日付順で並ばなくなってしまう。こういった適切なコードではないのに求めている結果が出てしまうことに気を付けないといけない。
以下メモ。
・フォームの値を受け取る
ルーティングで「post」を使用する。
（例）post "posts/create" => "posts#create"
・フォームに入力されたデータを送信する
form_tagメソッドを用いる。「form_tag(送信先のURL) do」という形で送信先のURLを指定する。
<textarea>タグにname属性を指定する。
※実際には送信先に対応するビューと投稿を保存する設定を行わないとフォームとして使えない。
※name属性はinputの場合も同様
・他のURLに転送する
redirect_toメソッドを用いる。「redirect_to(URL)」という形で転送することが可能。
・フォームに入力されたデータを受け取る
変数paramsで受け取る。paramsは<textarea>タグのname属性に設定した文字列をキーとしたハッシュになっている。
・取得したデータを並び替える
orderメソッドを用いる。「order(カラム名: 並び替えの順序）」という形で並び替えの順序を決める。順序は昇順（:asc）と降順（:desc）で指定可能。
・投稿一覧ページからリンクで投稿詳細ページへ移動する
（例）link_to(post.content, "/posts/#{post.id}")
・投稿を編集する
①編集したい投稿を取得
②その投稿のcontentの値を上書き
post.content = "新しい値"とすることで、上書きが可能。
③データベースに保存
・投稿を削除する
①データベースから削除したい投稿を取得。
②destroyメソッドを用いて投稿を削除。
（例）post.destroy
・投稿編集ページを作成する
投稿編集ページのURLに、編集したい投稿のidを入れる。
（例）get "posts/:id/edit" => "posts#edit"
・フォームに初期値を用意する
<textarea>タグの場合、「<textarea>初期値</textarea>」のようにタグで囲んだ部分を初期値として設定可能。
・投稿内容を更新する
①URLに含まれたidを用いて、データベースから投稿データを取得。
②フォームから編集内容を受け取り、投稿データを更新。
フォームから送信された値をparams[:content]で受け取り、@post.content = params[:content]で投稿データの内容を更新する。
★getとpostの使い分け
get：データベースを変更しないアクション
post：データベースを変更するアクション
・post用のリンクを作る
link_toの第三引数に「{method: "post"}」を追加する。
・バリデーションの書き方
「validates」を用いてカラム名と内容をモデルにて指定する。
（例）空の投稿を防ぐ場合
validates :content, {presence: true}
※バリデーション：不正なデータがデータベースに保存されないように、データをチェックする仕組み。バリデーションで検証する内容はハッシュとなっているため、コンマ( , )で区切ることで、複数指定することができる。
※presenceメソッド：オブジェクトが存在すればそのオブジェクトを返し、オブジェクトが存在しなければnilを返すメソッド。
・文字数のバリデーション
「length」を用いて{maximum: 数値}を指定することで、最大文字数を設定することができる。
（例）validates :content, {length: {maximum: 140}}
→最大文字数が140字になる。
・別のアクションを経由せずに、直接ビューを表示する
renderメソッドを用いる。render("フォルダ名/ファイル名")のように表示したいビューを指定する。
1/28
「Ruby on Rails5 学習コース V」を進める。
間違いがあったがクリアになってしまった。
<% end %>の位置が違うため、途中で処理が終了してしまい、送信ボタンを押しても投稿一覧ページにいかない。
以下メモ。
・フラッシュ
ページ上に1度だけ表示されるメッセージのこと。Railsでは変数flashが該当する。
（例）flash[:notice]
1/29
勉強ができなかった。次の日が休みだと仕事の疲れと緊張からの解放でだらけてしまう。こういう日があると自己嫌悪に陥ってしまうので、勉強を続ける習慣を体になじませていきたい。
1/30
Progateを進めていく。復習をしていると見たことの無い表示に出くわした。
調べてみると、name属性の値が適切でなかったことで起こった現象だった。name属性の値が送信されるハッシュのキーになるため、キーが一致しないと上記のような形になるのだろう。
上のように、name属性の値をいじると表示がおかしくなる（もともとはname="content"だった）。
以下メモ。
・エラーメッセージを配列で取得する
errors.full_messages
1/31
「道場コース Ruby on Rails5 II」の2週目をクリア。前回より理解が進んでいるため、詰まっている時間が少なくなった。
しかし、「Ruby on Rails5 学習コース VI」に入ると1つ1つに時間がかかるようになった。前の単元で習ったことを用いながら行う必要があり、知識として一部曖昧なところがある。これは手を動かしながら覚えていくしかない。それでも、覚えているところがあるとうれしくなる。
以下メモ。
・モデルとテーブルの作成（2つのデータを持たせる）
（例）rails g model User カラム:データ型 カラム:データ型
string：短い文字列
※データベースに変更を反映させる：rails db:migrate
・バリデーション（値の重複に関するチェック）
「uniqueness: true」を用いる。
・フォームの初期値
<input>タグでは、value属性の値が初期値となる。
プログラミング勉強日記4(2/1-7)
プログラミングの勉強をし始めてから4週目になった。
【2/1-7】
週勉強時間：10時間56分
月合計勉強時間：10時間56分
合計勉強時間：44時間36分
休みの日が1日しかないことも影響し、先週より勉強時間を確保することができなかった。
毎日同じだけ勉強時間は確保できないが、少しでもいいから進めるということを大事にしたい。全くできない日があるとメンタルが落ちてくる原因にもなるため、自分のメンタルを安定させながら勉強時間を確保していきたい。
以下は日々の進捗具合や気づきのメモである。
2/1
体調不良で一日中寝込み、勉強ができなかった。この事実はメンタルを落ち込ませるので、自分で調整していきたい。
2/2
Progateの「Ruby on Rails5 学習コース VI」「Ruby on Rails5 学習コース VIII」を進める。
クリア扱いになったが、コードが適切でない箇所があった。
inputの初期値を設定する際、name属性を使ってしまっている。本来はvalue属性を使うべきところである。
以下メモ。
・マイグレーションファイルのみを作成する
コマンド「rails g migration ファイル名」を用いる。
→既に存在するテーブルの情報に変更を加える際に使用。
・マイグレーションファイルを編集する
テーブルに変更を加えるためには、マイグレーションファイルにあるchangeメソッドの中に変更内容を書く必要がある。
「rails db:migrate」コマンドはchangeメソッドの中身を実行するためのコマンド。
カラムを追加する場合は、「add_column :テーブル名, :カラム名, :データ型」を用いる。
・ビューに画像を表示する
HTMLの<img>タグを用いる。Rubyのコード部分は<%= %>で囲む必要があることに注意。
src属性の値は、「/フォルダ名/ファイル名」にする。
・画像の送信
<input>タグに「type="file"」を追加する。
form_tagに{multipart: true}を追加する。
・Rubyのコードでファイルを作成する
Rubyのコードでファイルを扱うには、Fileクラスを用いる。
ファイルを作成するためには、Fileクラスのwriteメソッドを使用する。「File.write(ファイルの場所, ファイルの中身)」
・ファイル名をデータベースに保存する
値を上書きする。ファイル名は「ユーザーのid.jpg」のようにする。
・画像の保存
File.binwriteを用いる。
File.binwrite("ファイルの場所", ファイルの中身※)
※readメソッドを使用する。
・パスワード用のフォームを追加する
inputタグのtype属性をpasswordにする。
・ログインするユーザーを特定する（メール・パスワード）
フォームに入力されたメールアドレスとパスワードはparams[:email]とparams[:password]で受け取ることができる。
・ログイン処理について
ページを移動してもユーザー情報を保持し続けるには、sessionという特殊な変数を用いる。
(例)session[:user_id] = @user.id
・ログアウト
session[:user_id]にnilを代入することで、session[:user_id]の値を空にすることができる（=ログアウトすることができる）。
・getとpostの使い分け（補足）
get：データベースを変更しない場合に使用
post：データベースを変更する場合、sessionの値を変更する場合に使用
2/3
引き続き「Ruby on Rails5 学習コース VIII」を進める。少し複雑になってきたような気がする。道場コースでどこまで定着できているか。
以下メモ。
・アクション側で共通の変数を定義する
各コントローラの全アクションで共通する処理がある場合には、before_actionを使う。before_actionを用いることで、アクションが呼び出される際に必ずbefore_actionの処理が実行される。
全てのコントローラで共通する処理はapplicationコントローラにまとめることができる。
・ログインしていない場合のアクセス制限
authenticate_userメソッドを作成する。
※authenticate_user：「ユーザーを認証する」という意味
・before_actionを特定のアクションのみで実行する
onlyを用いる。
(例)before_action :authenticate_user, {only: [:edit, :update]}
・ログインユーザーがアクセスできないページを作成する
forbid_login_userメソッドを作成する。
※forbid_login_user：「ログインユーザーを禁止する」という意味
・ユーザーの編集を制限する（アクション）
ensure_correct_userメソッドを作成する。
※ensure_correct_user：「正しいユーザーかを確かめる」という意味
・文字列を数値に変換する
to_iメソッドを用いる。
（例）if @current_user.id != params[:id].to_i
※「!=」は等しくないという意味の比較演算子。
2/4
「道場コース Ruby on Rails5 III」を進める。忘れている部分もあるため、道場コースを終えたら該当する箇所を復習していきたい。
2/5
「道場コース Ruby on Rails5 III」をクリア。しかし、大体は学習コースのスライドやメモを見てクリアしたので、もう一度復習として「学習コース Ruby on Rails5 VI」を進めることにした。
2/6
「学習コース Ruby on Rails5 VI」を進める。
2/7
「学習コース Ruby on Rails5 VII」を進める。
ユーザー名およびメールアドレスをoからaに変更しようとすると、以下のような画面が表示される。
なぜか空欄になってしまった。
原因はビューファイル内にある<input>のname属性が抜けていたためだった。
また、ユーザーの詳細ページに画像を表示させる課題でもミスがあった。
一見問題がなさそうに見えるが、コードに問題があった。
9行目のファイル名を記載する部分で、そのままファイル名を書いてしまった。デフォルトの画像しか表示されなくなってしまう。本来は「<img src="<%= "/user_images/#{user.image_name}" %>">」が正しい。
以下メモ。
・ユーザー登録時に初期画像を保存する
newメソッドの引数としてimage_nameを追加する。
・画像を保存する処理の実行
画像を保存する処理は、画像データが送信された場合だけ実行する。
プログラミング勉強日記2(1/18-24)
プログラミングの勉強をし始めてから2週目になった。
【1/18-24】
週勉強時間：10時間3分
合計勉強時間：21時間36分
何とか先週より勉強時間を確保できた。1回だけでは理解が追い付いていない部分があったため、2週目を行う部分もあった。
来週は休みが少し多いので、勉強時間をしっかりと確保していきたい。Ruby on Railsについても少しずつ知識を深めていければと思う。
以下は日々の進捗具合や気づきのメモである。
1/18
「学習コース Ruby IV」の11. initializeメソッド（１）を修了。特に引っかかる部分はなかった。
復習したら、先週つまづいた「10. クラスとインスタンスの復習」が理解できた。躓いてしまった部分は後でおさらいしておくといいのかもしれない。
1/19
「学習コース Ruby IV」「学習コース Ruby V」「Webについて知ろう！」「Webアプリケーションについて知ろう！」を修了。
「学習コース Ruby V」の「15. クラスメソッドの呼び出し」で少しつまづく。
「get_total_priceメソッドの中で、以下の条件のif文を作成」という課題だ。
「引数countが1以上、かつMenu.is_discount_day?の結果がtrueである」という条件で、今考えればかなりシンプルなコードであるが、trueの文字に引っ張られすぎてしまい23行目に「Menu.is_discount_day? == true」と記述してしまった。
画像では見えていないが、下でMenu.is_discount_day?を定義しているのだから、わざわざ「==true」にする必要がない。つけた状態でもOKが出たが、本当にOKだったのだろうか。
1/20
Progateの「学習コース Ruby on Rails5 I」を修了。「学習コース Ruby on Rails5 II」を14個目まで進める。
Ruby on Rails5では様々なファイルを行ったり来たりするため、まだ頭の中で消化しきれていない気がする。
今日の失敗。4行目を<a href="/top">TweetApp</a>にしていた。topページにアクセスするのだからtopをつけたほうがいいのだろうと考えてしまったためだ。
明日もRuby on Rails5について学習していきたい。
1/21
Progateの「学習コース Ruby on Rails5 II」「学習コース Ruby on Rails5 III」を修了。
Twitterのようなツールの投稿詳細ページと、新規投稿ページの作成を進めていった。ただ投稿フォームを作っても、投稿されるわけではない。フォームとして機能させるためには「createアクションに対応するビューを用意する」「投稿を保存する」必要がある。当たり前なのだが、理屈を聞くとなるほどなと思う。
明日からは説明に沿って作っていた投稿サービスを、実際に作っていきたい。
1/22
Progateでツイートアプリを作成する課題。1回学習していてもなかなか使いこなすことができない。
以下メモ。
・コマンドは1回しか使えない
→TOPページをコマンドで使った後、Aboutページも同じ手法で作ろうとしたら以下の画面になる。
上書きしようとしているのだろう。もう一度スライドを読み直し、ルーティング・アクション・ビューの追加を行うことを確認。
・共通のレイアウトをまとめる
→application.html.erbには、<%= yield %>というコードがある。
各ビューファイルは<%= yield %>の部分に代入され、application.html.erbの一部としてブラウザに表示されるとのこと。
ヘッダーなどを<%= yield %>の上に記述することで、共通のレイアウトを作成することができる。いちいちページごとにヘッダーを書く必要がないため、簡潔になる。
・データベースにpostsテーブルを追加
①データベースに変更を指示するためのファイル（マイグレーションファイル）を作成。
→「rails g model Post content:text」でマイグレーションファイルの作成が可能。textは長い文章を表す。
②マイグレーションファイルの内容をデータベースに反映させる
→コマンド「rails db:migrate」を実行。
・テーブルにデータを保存する
①rails consoleでコンソールを立ち上げる。
②Postモデル（Postクラス）からPostインスタンスを作成。newメソッドを用いる。
（例）post = Post.new(content: "うどん")
③saveメソッドを使う
（例）post.save
うどんがテーブルに保存される。
※最後はquitで終了する。
1/23
「道場コース Ruby on Rails5 I」を引き続き進める。
以下メモ。
・Post.all
→全てのデータを取得できる
・orderメソッド
→取得したデータを並び替えることができる。昇順（:asc）と降順（:desc）のいずれかを指定する
(例)order(カラム名: 並び替えの順序）
・昇順と降順
→日付や数字が古い/小さいほうから並ぶのが昇順。対して、日付や数字が新しい/大きいほうから並ぶのが降順。
1/24
「道場コース Ruby on Rails5 I」を修了。抜け落ちている部分が多かったため、「学習コース Ruby on Rails5 I」をもう一度行う。
仕組みが理解できてくると、理解度も変わってくるような気がする。2週目のほうがやはり知識を飲み込みやすい。
以下メモ。
以下メモ
・新しいrailsアプリケーションを作成する
→「rails new アプリケーション名」
・サーバーの起動
→コマンド「rails server」を実行。
・Topページの作成
→「rails generate controller ファイル名 ページ名」
(例)「rails generate controller home top」
実行すると以下のような画面に。
・Rails でページを表示するには、「ビュー」「コントローラー」「ルーティング」が必要。
・ビューとは、ページの「見た目」を作るためのHTMLファイルのこと。
・ページを表示するとき、コントローラを経由してビューをブラウザに返す。コントローラーが仲介の役割を持っている。
・コントローラ内のメソッドのことを「アクション」と呼ぶ。
・ブラウザとコントローラを繋ぐ役割を受け持っているのがルーティング。ページが表示する際、ルーティング→コントローラ→ビューという順で処理される。
・ルーティングは「get "URL" => "コントローラー名#アクション名"」で表記される。
昨日よりも理解が深まるように、日々学習していきたい。
