古いRailsアプリの開発環境を構築し直したらバージョンの組み合わせで躓いた話
古いRailsチュートリアルのサンプルアプリのソースコードを他のPCにコピーし，開発環境を構築し直したところでトラブルに見舞われた．原因は，package.jsonに書かれたWebpackerのバージョンがNode.jsのバージョンとかみ合わず，node-sassのインストールができていないことだった．package.jsonを書き換え，Webpackerのバージョンをアップグレードしたところ，問題は解決した．
環境
エラー発生の経緯
Railsの環境構築をしようとする
ソースコードの移動先のPCにて，以下Qiita記事を参考に環境構築を行おうとした．
上の記事に従って，SQLite3などの必要ツールとRubyをインストールした．
上の記事に従って，Railsのインストールを行った．
node-sassがインストールできない
順調に進んでいるかと思ったが，最後にbundle exec rails sでアプリを立ち上げようとした段階で以下のエラーを吐いた．
error Couldn't find an integrity file error Found 1 errors. ======================================== Your Yarn packages are out of date! Please run `yarn install --check-files` to update. ========================================
前のPCからRailsアプリのリポジトリをそのままコピーしてきたからこのエラーが出てきたのかと思い，言われるがままパッケージのアップデートを行おうとする．
$ yarn install --check-files
しかし，今度は次のようなエラーが出てくる．
yarn install v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... [-/2] ⠁ waiting... error /home/yuritani/rails/sample_app/node_modules/node-sass: Command failed. Exit code: 1 Command: node scripts/build.js Arguments: Directory: /home/yuritani/rails/sample_app/node_modules/node-sass Output: Building: /usr/local/bin/node /home/yuritani/rails/sample_app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= gyp info it worked if it ends with ok ...以下省略
原因の調査
これによると，インストールするnode-sassがNode.jsとバージョンが合わないときに出てくるらしい．
Node.js 16.16.0に対応するのはnode-sass 6.0らしい．これに従い，node-sass 6.0インストールしようとしたが，エラーに見舞われインストールできなかった．
では，本当の原因はnode-sassのバージョンではなく，node-sassがインストールできない何かしらであるということか?
原因
原因は，package.jsonに記載されていたWebpackerのバージョンが，依存関係にあるnode-sassやNode.jsのバージョンと噛み合っていないことだった．
原因を探るうちに，同じようなエラーに見舞われている以下のQ&Aで気になる記述を見つけた．
I am running Rails 6 and for some reason it was pulling webpacker 4.3.0 which was pulling node-sass 4.3.0 rather than 6.0.0 which is the latest as of the date of this post.
意訳 Rails 6を走らせているが，訳あって この投稿時点で最新のnode-sass6.0.0ではなくnode-sass4.3.0に依存するwebpacker4.3.0が使われている
package.jsonを確認したところ，使用しているWebpackerのバージョンは4.3.0だった．
つまり，今回のエラーの発生状況は以下のようになる．
- Webpacker 4.3.0はnode-sass4.3.0に依存
- node-sass4.3.0はNode.js 16.16.0に非対応
- 私の環境はNode.js 16.16.0を使用しているため，node-sassをインストールできずにエラー発生
対処
参考にしたQ&Aサイトの通り，package.jsonの内容をとりあえず5.3.0書き換え，アップグレードした．
{ ... "dependencies": { ... "@rails/webpacker": "5.3.0", ... } ... }
あとは，再び yarn install --check-filesを行い，参考のQiita記事のとおりに bundle exec rails sしたところ，正常にアプリが起動した．webpackerの最新バージョンは2022年8月15日現在で6.0.0なので，できればもっと新しいほうがいいかもしれない．
備考
node-sassはdeprecatedらしい．ということで，今回の問題が解決したとしてもnode-sassの置き換えを考えなければいけない．サンプルアプリだからやらないかもしれないが…
初心者がAndroidの学習記録を記事にすることにした
初心者が技術記事を書こうと思った理由
きっかけはPBLでのAndroidチーム開発
現在大学3年生の私は大学のPBL (Project Based Learning)科目にて，チームでスマホアプリを開発することになりました．目標は，「リリースできる水準のアプリを作ること」です．1年生のころに課外活動でAndroid開発チームにいたことがある私は，Android開発班のとりまとめ役を引き受けることになりました．当初は「まあ本読みながら学習すれば大丈夫でしょ」と高をくくっていたのですが，いざ学習を始めてみると私自身全然わからん…という状態に陥ってしまいました．今回のチーム開発は，遅くとも2021年中(記事執筆時2021年8月末)に完成させなければならないのですが，期限まであと4か月しかありません．少しでも学習効率を高めて開発を始められるように，今回学習記録を記事にすることにしました．
Kotlin初心者な私
私のAndroid開発レベルは，入門書のJavaで書かれたサンプルコードを切り貼りしながらアレンジして簡単なTodoアプリを作れるくらいのレベルです．一通りAndroid開発のLayoutやActivityといった言葉の意味をざっくり理解することはできますが，何も見ずにコーディングすることはできません．料理でいうと，レシピを見ながら作る状態です．しかも読んだことのある入門書はJavaで書かれたものばかりなので，Kotlinの書き方はほとんどわかりません．今回の学習では，Androidアプリ開発で必要な概念だけでなく，Kotlinの文法にも慣れる必要があります．
このシリーズの目的
このブログに書く学習記録の目的は以下の通りです．
- 大学のPBL科目でのチームメンバーと知識を共有すること
- 自分用の備忘録とすること
- 自分の学習を固めるための振り返りとすること
なぜブログ記事なのか
今回学習記録をブログとして書こうと思った理由は以下の通りです．
- 文章をMarkdown形式で記述できるため読みやすい．
- 自分の学習内容を振り返ることができる．
- インターネット上どこからも参照できるので，すぐに誰にでも共有できる
本当にこれらの効果が得られるのかどうかは，これから記事を書いて確かめていこうと思います．
初心者があえて記事を書く理由
正直に言ってしまえば，自分の学習記録を残すことで，自分の学習を確かなものにすることが狙いです．初心者の低質な記事をネット上にばらまいてしまう事にもつながるという懸念はありますが，ブログにはいいね機能があるので，私の記事が変なことで人気にならなければ，おそらくさほど迷惑にはならないかと思います．もし私自身学習を進めるうえで明らかに間違ったと思ったことは後から訂正いたします．見苦しい記事かもしれませんが，それでも良いという方はどうかお付き合いをお願いいたします．
