firebase firebase init で Error Failed to list Firebase projects. になる

久々に Firebase Hosting を使おうとしてしたら firebase init の Project Setup で 既にあるプロジェクトを使おうと思い Use an existing project を選択すると Error: Failed to list Firebase projects. See firebase-debug.log for more info. になってしまった。

$ firebase init
    ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

…

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project

Error: Failed to list Firebase projects. See firebase-debug.log for more info.

firebase-tools をアップデートしていたのが原因だった。

node.js を nodebrew でアップデートしたのに伴い firebase-tools を再インストールしていました。
再インストールした後も firebase login コマンドを実行したら既にログインされていると表示されたので問題ないと思っていたのですが、どうやらログインされている情報がアップデート前の firebase-tools での情報になっていて認証トークン無効になってるのが原因で正しく firebase からプロジェクトのリストを取ってこれなくなっているようでした。

firebase cli で再ログインすれば OK

$ firebase logout
$ firebase login

一度ログアウトして、再度 firebase login でアカウントにログインしたら問題なく既存のプロジェクトが選択できるようになりました！

今年こそちゃんと firebase に向き合っていこうと思います。

---

[参考]

• How do I solve: Error: Failed to list Firebase projects. See firebase-debug.log for more info - Stack Overflow

実践Firestore (技術の泉シリーズ（NextPublishing）)

【Amazon.co.jp限定】「Bloomy*スマイル/キラリ☆パーティ♪タイム」【アイカツプラネット! 盤】(メガジャケット付)

ちょろいオタクなのでアイカツプラネット！の響子先輩〜になってる。

Git 間違って rebase しちゃったのを元に戻したい

git rebase しくじった時。
私はよくしくじる！

git reflog を使う

git reflog で直近の変更がずら〜っと表示されるので、戻したい位置を選んでもとに戻すことができる

$ git reflog
94677f475 (HEAD) HEAD@{0}: rebase (continue) (finish): XXXXX
94677f475 HEAD@{1}: rebase (continue): XXXXXXX
6cd481228 HEAD@{2}: rebase (continue): XXXXXXX
b43e2b915 HEAD@{3}: rebase (start): XXXXXXX
cb0a55a4e HEAD@{4}: checkout: moving from XXXXX // <- rebase 開始前のココ戻りたい
…

戻りたい位置の HEAD@{n} を指定して --hard reset で履歴を戻すことができる
今回の場合は rebase 開始前の HEAD@{4} に戻したいので

$ git reset --hard HEAD@{4}

これで rebase 前の状態まで戻ることが出来ました！⸜(๑’ᵕ’๑)⸝ 　

--hard reset した時も git reflog から戻すことができる。
ただし、 git gc してしまうと reflog でみれるログが消えてしまって戻せなくなるっぽいので注意。

おわり

---

[参考]

• Git - git-reflog Documentation
• git reflog | Atlassian Git Tutorial
• 第7話 間違えて reset しちゃった？git reflogで元どおり【連載】マンガでわかるGit ～コマンド編～ - itstaffing エンジニアスタイル
• git rebase を undo したい | deadwood
• いざという時のためのgit reflog - Qiita
• `git reflog` についてまとめてみる · GitHub

サルでもわかるGit入門

北北西に曇と往け　１巻 (HARTA COMIX)

アイスランド行きたい

Webpack production mode の時だけ babel-preset-minify で console.log を消したい

開発中は console.log で色々確認したいけど、ESLint で console.log が残ってるとエラーになるようにしてると、特に雑でいい個人開発だと都度消してってのがメンドイので production の時だけ console.log を削除してしまいたかった。

webpack の uglifyjs-webpack-plugin で実現できていたみたいだけど、リポジトリが archived になっていたので、コレは使わず今回は babel の babel-preset-minify を使って console.log を削除するようにしてみた。

環境

• webpack ^5.6.0
• @babel/core ^7.12.10
• babel-loader ^8.2.2
• babel-preset-minify ^0.5.1

npm scripts

"scripts": {
  "start:dev": "webpack serve --mode development",
  "start:prod": "webpack serve --mode production",
  "build": "webpack --mode production"
}

npm script でそれぞれの場合にあった mode をオプションで指定して実行するようにした。

babel-preset-minify で console.log を削除する

webpack.config.js

module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
}

babel.config.json

{
  "presets": [
    "@babel/env",
    [
      "minify",
      {
        "removeConsole": {
          "exclude": [ "error", "info" ]
        }
      }
    ]
  ]
}

これで console.log が削除されるようになりました。
JavaScript の minify は --mode=production の時のみ実行されるみたいなのですが、console.log の削除は mode に関係なく production でも development でも削除されてしまいました。
これでは 開発中 (--mode=development) のとき困るので、production の時のみ removeConsole のオプションを付けるように修正する必要があります。

production mode の時だけ removeConsole オプションを付けて console.log を削除する

babel 設定は JavaScript なら Config Function API を使って色々と設定を取り出して設定を変更することができるようです。

module.exports = function(api) {
  return {};
};

cf. [https://babeljs.io/docs/en/config-files#config-function-api:title]

Config Function API の api.env() を使うと NODE_ENV の値を利用することができます。babel.config.json を babel.config.js にリネームして NODE_ENV が production の時のみ removeConsole を使うように変更します。

babel.config.js

module.exports = (api) => {
  const prodMode = api.env('production');

  return {
    "presets": [
      "@babel/env",
      [
        "minify",
        prodMode && {
          "removeConsole": {
            "exclude": ["error", "info"]
          }
        }
      ].filter(Boolean)
    ]
  }
};

これで --mode=production の時だけ console.log が…となるつもりでしたが babel.config.js に渡ってくる api.env が常に development になっていて意図したとおりに動作しません。

これは npm script で設定してある webpack serve --mode production の モードは process.env.NODE_ENV に設定される訳ではないので、babel の設定内で取れる api.env() はデフォルトの development になってしまっていたという事でした。
npm script に NODE_ENV= のオプションを付けても良いのですが、--mode と二重になってしまってあまりイケてない気がしたので babel-loader を通じて babel を呼び出す webpack の設定で --mode から NODE_ENV を設定するようにします。

webpack.config.js で --mode オプションを使う

webpack の設定内でコマンドから渡されるオプションを取得するには (env, argv) => { return {/* webpack.config */} } の形にすることで argv 引数を使って値を取得することができます。

webpack.config.js

module.exports = (env, argv) => {
  const prodMode = argv.mode === 'production';
  // --mode=production の時、NODE_ENV を設定する
  if (prodMode) {
    process.env.NODE_ENV = 'production';
  }
  
  return {
    // …
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        },
      ],
    },
  };
}

webpack で NODE_ENV が設定されてから babel が呼び出されるので、これで --mode=production の時のみ babel の babel-preset-minify のオプションが切り替わり console.log を削除できるようになりました！
₍ ᐢ. ̫ .ᐢ ₎ ﾔｯﾔﾈ!

所感

昔やった気がする…って思ったらやっぱり書いてた。
この時は uglifyjs-webpack-plugin と同じような動きをする terser-webpack-plugin を使う方法を書いてた。
今見ると config 見づらいし、今回は webpack の --mode オプションを使って babel の設定を分岐させられるようにする学びが合ったのでヨシ！

2021年最初だし去年読んでよかった本とか買って良かったものとか書こうかと思ったけど、本全然読めてなかったし特に買ったものもなかった… 去年何してたんだろう… 虚無か？

それでは今年も Eigðu góðann dag〜 ; )

---

[参考]

• GitHub - webpack-contrib/uglifyjs-webpack-plugin: [deprecated] UglifyJS Plugin
• babel-preset-minify · Babel
  • Config Files · Babel
• GitHub - webpack-contrib/terser-webpack-plugin: Terser Plugin
• UglifyjsWebpackPluginが非推奨になったので乗り換えた - Satoryu’s Website
• Babel 7 を試す - アカベコマイリ

フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装

アイカツ! あかりGeneration Blu-ray BOX1

今年もサムネのためにアイカツ！を意味もなく貼っていくぞ！