Windowsでcreate-react-appを実行しようとしたらパスが通っていなくて使えなかったので、パス通さないで使おうとしてみた。

はじめに

フロントエンド初心者が急にreactを触ってみようと思ったら、いきなり躓いたので自分用にメモしています。
ついでにQiitaの記事投稿の練習。お作法が全く分からない。

起こったこと

適当な環境構築の記事を参考にしつつcreate-react-appをyarnでインストールして使おうとしたらパス通ってなくて使えませんでした。

> yarn global add create-react-app
---省略---
> create-react-app my-app
'create-react-app' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

先に解決策

yarn create-react-app my-app

これで出来ました。
とりあえずreact使ってみたいだけなのでパス解消しなくても良いかな。

やってみたこと・調べてみたこと

yarnのbinのパス

以下のコマンドでyarnのbinのパスが確認できます。

> yarn global list (グローバルのbinフォルダを調べたい場合)
> yarn list        (ローカルのbinフォルダを調べたい場合)

今回はグローバルにインストールしているので、グローバルのbinフォルダにパスを通してあげれば使えそう。
でもこのコマンドのためだけにパス通すのがなんか嫌。

適当に実行してみる

色々試していたら「yarn create-react-app my-app」で実行できました。なんでだ。
ちなみにyarnの書式は以下。

  Usage: yarn [command] [flags]

[command]を省略すると普通「install」が実行されるらしいのですが、どうも実行されている挙動が違う。

yarn run

調べてみたらどうも「yarn install」だけでなく「yarn run」もコマンドを省略して実行されるケースがあるようでした。

yarn run test -o --watch
---省略---
このコマンドでも run を省略することができ、各スクリプトは名前を渡すことで実行されます。
https://classic.yarnpkg.com/ja/docs/cli/run

引数を指定しないで「yarn run」をすると実行できるスクリプトの一覧が確認できるそうなので、確認してみます。

>yarn run
yarn run v1.22.4
info Commands available from binary scripts: create-react-app, create-react-app.cmd, envinfo, envinfo.cmd, mkdirp, mkdirp.cmd, node-which, node-which.cmd, rimraf, rimraf.cmd, semver, semver.cmd
error There are no scripts specified inside package.json.
Done in 0.07s.

少し分かりにくいですが、「create-react-app」が存在しています。

結論

ということで実際には「yarn run create-react-app my-app」が実行されていたということでした。

時間かかった割にショボい結果でした。
前提となる知識が全くない状態なので色んなことが省略されていると、ほぼ理解できずに進んでしまう。

新しいことを知るのは楽しいですね！