30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

nodebrewの再インストール

経緯

最近リリースされたnpm v5を試したくて、試行錯誤していた。
特にpackage-lock.jsonの挙動について、今までのnpm shrinkwrapと比較しながら勉強したかったので、$ npm i -g npm@4.0.0みたいな感じで、手元のnpmのバージョンをころころ変えていた。
そしたら、上手く動かなくなってしまった……。

Cannot find module 'safe-buffer'というエラーが出てしまい、npmを実行できない。

もともとnodebrewを使っていたので、$ nodebrew use x.x.xでNodeのバージョンを変えたりしたが、ダメだった。
バージョンによってはエラーが出なくなることもあったが、そうすると今度は、gulpを使ったビルドが上手くいかなくなる。
こんな感じでハマってしまい、もう面倒だったので、nodebrewそのものをインストールし直すことにした。

ネットに書いていることをそのままやっただけだが、また同じ状況になった時のために、書いておく。

削除

まず、nodebrewをアンインストールする。

ホームディレクトリ(/Users/UserName)の.nodebrewにインストールされているので、このディレクトリを丸ごと削除すればいい。

$ cd
$ rm -rf .nodebrew

インストール

これは、インストールの手順をもう一度行えばよい。
二行目はPATHの設定なので、PATHを削除していなければ必要ない。

$ curl -L git.io/nodebrew | perl - setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile && source ~/.bash_profile

後はnodebrewを使って、元々使っていたNodeを設定する。そうすればnpmも自動でついてくる。

これで、エラーも出ること無く、無事にnpmを実行できるようになった。
プロジェクトによっては上手くいかないこともあったが、$ rm -rf node_modulesディレクトリを削除してから$ npm iでnpmモジュールを改めてインストールすれば、解決した。

参考資料

ReactにFlowを導入して型チェックを行う

JavaScriptは動的型付け言語なので、型のチェックは行われない。
だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。

JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow
同じく型システムを実現するものとしてTypeScriptがあり、よく比較されるが、TypeScriptと違いFlowはAltJSではない。
通常のJavaScriptを拡張するような形で利用する。
そのため、既存のコードに段階的に導入していくことが出来る。

この記事では、Reactでの開発にFlowを導入する手順を書いていく。

Flowを導入するまで

いくつかの方法があるが、今回はビルドやコンパイルにはBabelとwebpackを使う。

以下の記事で説明した内容にFlowの設定を追加する、という流れ。

まず、Flowをnpmインストールし、それをnpm scriptに追加する。

$ npm i flow-bin -D
"scripts": {
  ...
  "flow": "flow",
  ...
},

この状態で$ npm run flow initを実行すると、.flowconfigが作成される。

次に、Flowを使うのに必要なプリセットやプラグインをインストールし、.babelrcを書き換える。

$ npm i babel-preset-flow babel-plugin-transform-class-properties -D
{
  "presets": ["es2015", "flow", "react"],
  "plugins": ["transform-class-properties"]
}

さらに、webpack.config.jsも書き換える。

  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            'es2015', 'flow', 'react',
          ],
          plugins: ['transform-class-properties'],
        },
      }],
    }],
  },

これで、Flowを使う準備は整った。
コードにFlowの設定を追加した状態で、$ npm run flowとすれば、型チェックを行ってくれる。
また、ビルドに不要なコードはBabelが除去してくれるので、webpackによるビルドも問題なく行われる。

ESLintの設定

Flowそのものは使えるようになったが、このままでは、ESLintが通らなくなる。
Flowによって型を定義した部分のパースが上手くいかず、エラーになってしまうため。
そのため、ESLintの設定も行う必要がある。

必要なパッケージを入れ、.eslint.jsonを編集する。

$ npm i -D babel-eslint eslint-plugin-flowtype
{
  "parser": "babel-eslint",
  "plugins": ["flowtype"],
  ...
}

これで、ビルド、Flow、Lintが全て問題なく動くようになった。
あとは、Reactで書いたコードにFlowを追加していき、$ npm run flowを実行すればいい。

参考資料