Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@standard-software

JavaScript 変数名と値を文字列として取得する

JavaScriptじゃない記事ですが次の記事を見ました。

デバッグ時はprintではなく、Icecreamを使うと便利 - Qiita
https://qiita.com/purun/items/c7aca300b970344214cf

JavaScript でも、変数名と値を同時出力したいと以前から思っていました。

const a = 10;
console.log(`a:${a}`); // a:10

開発時にデバッグログとして、こんな感じに出力するコード書くときがよくあります。
この時、変数名が1文字とかなら問題ないですが、きれいなコードを書こうとするとぼちぼち変数名は長くなる時は多くあります。その時に、変数名を2回書くのがだるいわけです。

なので、どうにか解決したいかなと思って、次の関数を書いてみました。evalを使えばできます。

const varNameValue = (name) => {
  return `${name}:${eval(name)}`;
}

const a = 10;
console.log(varNameValue('a')); // "a:10"

これは確かにできるのですが、eval は、いろいろセキュリティとか考える必要があったりなかったりしそうでやっかいそうなので使うのを避けたいところ。

MDNでも酷評されている感じですし、いろいろ怖いです。使い方に注意しておけばそれほど問題ないとも思いますけれども、念の為なるべくevalは避けたい。

eval() を使わないでください! - eval() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval!

MDNでは、eval の回避方法として、Function 使え、とあるけれども、今回の場合には当てはめられそうにないです。

こういうときはどうしたら効果的なコード書けるかな、と思ってたところに、タイムリーに、mizdra's blog で紹介されていました。

JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
https://www.mizdra.net/entry/2021/05/03/000139

簡単なのはこういうことなんですね。

const a = 10;
console.log({a});
// {a: 10}

オブジェクト生成の省略記法でオブジェクトをconsole.logに渡せば、ブラウザやnodeの表示側で変数展開してくれるわけですね。なるほどなるほど。

この仕組みを使えば自前で変数名と値を展開して文字列として取得できるよな。そういえば。
ということで、ヒントにさせていただいて気がつけましたので、console.logにわたす前に変数名と値を展開して文字列として取得するにはこういうことすればいいなとわかりました。

const varNameValues = (args) => {
  const result = [];
  for (const [key, value] of Object.entries(args)) {
    result.push(`${key}:${value}`)
  }
  return result;
}

const a = 10;
console.log(varNameValues({a})); // ["a:10"]

const b = 20;
console.log(varNameValues({a, b})); // ["a:10", "b:20"]

これで、変数名と値とを同時に文字列取得し出力することができました。console.logだけじゃなくてログファイルに記載するときや、localStorageに値を保持するときもわかりやすいかもしれません。

mizdra's blog にすごく感謝です。ありがとうございます。

追記

varNameValues なんての作らなくても、こっちの方がシンプルでいいかも。逆変換もできるし。

const a = 10;
const b = 20;
console.log(JSON.stringify({a,b})) // {"a":10,"b":20}
1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
standard-software
JS便利関数ライブラリ Parts.js 作ってます。npmで公開しています。 ゴミ屋敷みたいになった汚いコードの山をきれいに整理整頓するのを専業にしています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?