【おっさん開発】npmでcreate-react-appをインストールしようとしたけどエラーになる

先日ついにMacBook Proが来た。

開発の師匠に教わりながら初期設定を進めた。

そしていよいよ開発に入るぞと。なったわけなんです。

その時に出たtodoがこちら。

1. ページフレームを作る
  a. header
  b. footer
2. SignUpページを作る
3. SignInページを作る

まぁその、やることは文字としてはわかる。それぞれね、作っていくんだっていうね。ページフレーム、うん作りたい。Sign Upページもね、作りたい。完全に同意。

でもね。ただなんていうんだろうな、そのね、
どこから何をすれば良いのかが全くわかりませんって日本語でなんていうんだっけな。あもう言えてるね?

おす。さっぱりわからんぞと。いっかい落ち着こ。

まずここまでやってきたこと、おさらいね。

この半年でやってきたこと

①ProgateでJS、Python、Reactのカリキュラムを終えてる(5億年前)
②ER図作った
③ユーザーストーリー作った
④XDでデザインのイメージも起こした
⑤MacBook買った
⑥Iterm2いれた
⑦oh-my-zashいれた
⑧WebStorm契約した
⑨githubアカウント作った
⑩git入れてローカルにボイラーテンプレートのクローン作成した
⑪homebrew入れた
⑫nodebrew入れた
⑬pyenv入れた
⑭ごにょごにょしてなんかPATHは繋がったっぽい
⑮emacs入れた
⑯Node.js入れた

順番がずれてるのもあるかもしれないけど、ざっとこんな感じ。それぞれの過程は録画してはいるけど、見ても本当によくわからん。ここまでいかに、言われたとおりにやってきただけかっていうことだと思うんだけど、今はそこは仕方ないのかなとも思ったり。

理解が追いつくのはもっともっと先で、今は体で覚えることが大切なんじゃないかなと。お前そのスタイルで30代も走るの?っていう気もしますけどね。でもやっぱり量が大切よね。特に今はさ。

というわけで改めて本題。ここからは実際に開発に入るとのことなんですが、さっきのtodoがわからなかったら、ReactとReduxのチュートリアルをこなしてねっていう指示がきました。これ。

電卓アプリで学ぶReact/Redux入門(実装編)

todoに手がつけられないと思ったので、一目散にチュートリアルにいきました。

その冒頭で出てきたのがcreate-react-appのインストールなんですが、これがインストールできない。

エラーがこんな感じで出てる

➜  ~ npm install -g create-react-app

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shinobudaisuke/.npm/_logs/2020-06-17T15_12_21_920Z-debug.log

おーよしよし。わかるぞ。なんのことかサッパリわからないということだけはしっかりわかる

だもんで、師匠〜これなんです?って聞いてしまった。その時の師匠からの指示はこう

「エンジニアとして成長する最も大きな基礎が検索力です」

もうほんとに恥ずかしかった。仰るとおり。怠ってんじゃねーよと。いつのまにそんなことも自分で調べようとしない人間になったのか。そんな自分とは金輪際ご無沙汰しようそうしよう。

というわけで調べてみた。

どうもエラーの内容はちゃんと書かれているっぽい。エラーの文章から理由っぽいところを抜粋してみた。

The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

日本語に訳すとこう

操作はオペレーティングシステムによって拒否されました。
現在のユーザーとしてこのファイルに
アクセスする権限がない可能性があります。
これが権限の問題であると思われる場合は、
ファイルとそれに含まれるディレクトリの権限、
または実行してみます
root / Administratorとしてコマンドを再度実行します。
この実行の完全なログは、次の場所にあります。

なんか、ファイルにアクセスする権限がないっぽい?

師匠にエラーの内容を確認してみたところ「unix系のファイルシステムにはファイルやフォルダごとにアクセス権が設定されています」とのこと。

ということは、アクセス権限を付与すればよいのかなと。

そのあたりをもうちょっとググってみます。