JavaScriptドリル 第1回 JSON文字列を扱う

JavaScriptの基本的な文法を押さえたら、少しずつ「解法」のストックを増やしていきましょう。第1回目はJSON文字列から特定の情報を取り出すパターンを考えます。

発行

著者 中村 享介 Jamstackエンジニア
JavaScriptドリル シリーズの記事一覧

はじめに

JavaScriptを書けるようになるには、ある種の解決のパターン(解法)を覚える必要があります。解決のパターンにはさまざまな方法があり、どの方法でもたいてい目的の結果は得られます。しかし、その中でもシンプル、読みやすい、効率が良い、変更に強いといったきれいな解決方法は存在します。

このシリーズでは「ドリル」形式の問題を通して、さまざまな解決のパターンを学んでいきます。普段からJavaScriptを書いている方であれば簡単な、学習中の方でも解けるレベルの問題を想定しています。

ではさっそく今回の問題を見てみましょう。

JSON形式の文字列データの表示

問題

次のようなJSON形式の文字列データがあります。

var data = '[{"id":1,"name":"中村 享介"},{"id":2,"name":"高津戸 壮"},{"id":3,"name":"小山田 晃浩"},{"id":4,"name":"外村 和仁"},{"id":5,"name":"外村 奈津子"},{"id":6,"name":"德田 和規"},{"id":7,"name":"山田 順久"},{"id":8,"name":"小原 司"},{"id":9,"name":"山田 敬美"},{"id":10,"name":"坂巻 翔大郎"},{"id":11,"name":"中島 直博"}]';

JSONの構造は次のようにidnameというプロパティを持つオブジェクトの配列となっています。

[
  { "id":1, "name":"中村 享介" },
  { "id":2, "name":"高津戸 壮" },
  ...
]

このデータ構造からidに対応するnameをコンソールに表示するか、nameを返す、staffというfunctionを作成してください。もし、該当するidを持つ人がいない場合はnullを表示してください。

実行例

staff(1); // "中村 享介"
staff(5); // "外村 奈津子"
staff(999); // null

JavaScriptを勉強中の方も、すでに書ける方もぜひやってみてください*。

*注:問題のあいまいさ

「コンソールに表示するか、nameを返す」というあいまいな答えを求める問題になってしまっています。これはもともと「staff()で表示する」というあいまいな表現のまま問題を出してしまったことにより、社内の回答が揺れてしまったことが原因です。読者の方が混乱しないよう、回答に合わせた問題になっています。問題をやってみたい方は、あまり気にせず書いてみてください。

編集そとむらの回答

普段JavaScriptを書くことはない、しかしCodeGridを編集するため日々JavaScriptのコードを検証したりしているそとむら(@soto)に挑戦してもらいました。

var dataJson = data.replace(/'/g, "");
// console.log(dataJson);
var staffsData = JSON.parse(dataJson);
// console.log(staff[0].id);
// console.log(staff.length);
var staffNumber = staffsData.length;
function staff(id){
    if (id &gt;= 1 &amp;&amp; id &lt;= staffnumber){ console.log(staffsdata[id-1].name); } else { console.log('null'); } }&lt; pre&gt;<p>このコード*、実行してみると、一応問題の条件をほぼ満たしているように動作しますが、いくつか問題があります。</p><cg-note>
    <h3>*注:コードのコメント</h3>
    <p>コードにはコメントアウトされた<code>console.log()</code>が残っていますが、あえて回答時のまま掲載しています。</p>
  </cg-note><h3>必要のない処理が入っている</h3><p><code>var dataJson = data.replace(/'/g, "");</code>という行があります。元のデータから<code>'</code>を全置換して削除しているようですが、そもそも元のデータである<code>[]</code>内には<code>'</code>はありません。確認したところJavaScript上文字列を表現するための<code>'</code>がデータにも入っていると思ったそうです。</p><h3>配列の順番によって名前を取り出している</h3><p>この例のデータの場合は、たまたま配列の順序とidの番号が<code>+1</code>するだけで一致しています。そのため問題なく動作しますが、これだとデータ内のidに欠番が発生した場合、また、順番が変わっているだけでも間違ったデータが取り出されてしまいます。配列の7番目にいる人と、IDが7番の人は違うのです。</p><h3>いなかった場合のnullが文字列</h3><p>問題ではユーザーが見つからなかった場合に返ってくる値は<code>null</code>を想定していましたが、文字列の<code>'null'</code>が返ってきています。ここで想定しているのは文字列ではなく、値としての<code>null</code>です。</p><p>問題もそうですし、実際の案件でも仕様書に日本語で書かれていることが多く、間違えるのも無理はないと思いますが、こういった部分がバグにつながるので、気を付けて実装するとよいでしょう。</p><p>なお、仕様によっては文字列として返すのが正しい場合もあったりするので、注意が必要です。</p><h2>制御構文で解決する</h2><p>そとむらがエンジニアからヒントをもらいつつ、修正したものが次のコードです。</p><pre class="code javascript">var staffData = JSON.parse(data);
var staffNumber = staffData.length;
// console.log(staffNumber);
function staff(id){
    var memo;
    for (var i = 0; i &lt; staffNumber; i++){
    // console.log('id :' + staff[i].id + 'name:' + staff[i].name);
        if ( staffData[i].id === id ){
            console.log(staffData[i].name);
            memo = staffData[i].name;
        } 
    }
    if (memo == undefined){
        console.log('null');
    }
}</pre><p>制御構文を利用したコードとしては一般的な方法で、<code>memo</code>という一時変数を使い、そこに対応するidの人がいれば一時保存します。こうすると、変数memoに何も入っていなかった場合(undefinedの場合)は、対応するidの人がいなかったという判定に利用できます。</p><p>ひとつ問題を指摘するとすれば、<code>memo</code>という変数名が、何を意図しているのかわかりづらいのが難点です。<code>staffName</code>など、この変数に入ってくる内容に合わせた名前にしたほうがよりわかりやすいコードになります。</p><p>JavaScriptの入門の本に載っているのは、このような方法が多いでしょう。for文、if文、変数の組み合わせでたいていの問題は解決できます。しかし、複雑な問題になればなるほど読みづらく、処理がわからなくなりがちです。</p><p>ほかのスタッフの回答も見てみましょう。</p><h2>配列の項目をチェックする</h2><p>山田 順久(<a href="https://twitter.com/ykhs">@ykhs</a>)の回答です。</p><pre class="code javascript">var staff = function (id) {
  var called = JSON.parse(data).some(function (person) {
    if (person.id === id) {
     console.log(person.name);
     return true;
    }
  });
  if (!called) {
    console.log(null);
  }
}</pre><p>JSONをパースした配列に対して<code>some</code>を使っています。<code>some</code>は引数に渡された関数によってテストした判定結果(true, false)を返す配列のメソッドです。</p><p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some">MDN | Array.some</a></p><p>これを使い、staffの引数で渡されたidが、dataの中に含まれているかを判定し、含まれていれば合わせて名前を出力しています。</p><h2>文字列として処理する</h2><p>坂巻(<a href="https://twitter.com/GeckoTang">@GeckoTang</a>)の回答です。</p><pre class="code javascript">function staff(id) {
    var reg = new RegExp('"id":'+id+',"name":"([^"]*)"',"i");
    var match = data.match(reg);
    console.log( match ? match[1] : null );
};</pre><p>データをJSON.parseせず、文字列のまま処理しています。正規表現部分で文字としてidのマッチを行い、その直後のnameの値部分にマッチした文字列を表示しています。</p><p>JSONデータの場合は、そこまでパフォーマンスが問題になることはないと思います。しかし、HTMLを処理する場合、DOM操作がパフォーマンス的に問題になると、文字列で処理することで改善できる場合があるので、このような方法も知っておくとよいでしょう。</p><p>nullの出し分けは三項演算子を使っています。このような簡易な条件分岐では三項演算子を使うとスッキリ書くことができます。</p><h2>扱いやすいオブジェクトを生成する</h2><p>外村(<a href="https://twitter.com/hokaccha">@hokaccha</a>)の回答です。</p><pre class="code javascript">var mapById =  JSON.parse(data).reduce(function(map, item) {
  map[item.id] = item;
  return map;
}, {});

function staff(id) {
  return mapById[id] ? mapById[id].name : null;
}

console.log(staff(1));</pre><p>まず<code>mapById</code>というオブジェクトをJSONをパースした配列からreduceを使って生成しています。<code>reduce</code>はデータを累積して単一の値にする配列のメソッドです。</p><p>reduceの動作は解説されたWebページが多くありますので、そちらも参照してください。</p><p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">MDN | Array.prototype.reduce</a></p><p>reduceに第二引数を指定すると、その値を初期値として順番に配列の値を処理していくことができます。生成されたオブジェクトは、次のようなidをプロパティ名としたオブジェクトになります。</p><pre class="code javascript">{
  1: { id: 1, name: "中村 享介" },
  2: { id: 2, name: "高津戸 壮" },
}</pre><p>このような形式になっていると、staff関数内でやっているように対応するidのデータを特定することが簡単になります。</p><p>また、あらかじめオブジェクトを作っておくことで毎回JSONをパースする必要がなくなるので、その分の処理が軽く済みそうです。</p><h2>フィルターした結果を表示する</h2><p>問題を作成した筆者(<a href="https://twitter.com/kyosuke">@kyosuke</a>)も回答を用意しました。</p><pre class="code javascript">function staff(id) {
  var person = JSON.parse(data).filter(function(v){
    return v.id === id
  })[0];
  return person ? person.name : null;
}</pre><p>配列の<code>filter</code>は渡された関数を使って、条件判定し、trueだったデータのみの新たな配列を作るメソッドです。これを使ってidが一致するものを抽出し、最初のものを使って判定を行っています。</p><p>実務では、このような配列に対する操作がある場合はUnderscore.js*を使うことが多いですが、この回答の考え方は同じです。</p><cg-note>
    <h3>*注:Underscore.js</h3>
    <p>Underscore.jsに関しては「<a href="https://app.codegrid.net/entry/underscorejs-method">おすすめライブラリつまみ食い | Underscore.js:メソッド</a>」や「<a href="https://app.codegrid.net/entry/underscorejs-functions">おすすめライブラリつまみ食い | Underscore.js:Functions</a>」などを参照してください。</p>
  </cg-note><pre class="code javascript">function staff(id) {
    var person = _.findWhere(JSON.parse(data), {id: id});
    return person ? person.name : null;
}</pre><p><code>_.findWhere</code>は条件としてオブジェクトを渡し、マッチしたものの最初の1つを返す関数です。処理の流れは先ほどの<code>filter</code>を使った場合と同じように、対応する人のみにフィルタしてその結果を元に判定しています。</p><h2>配列の新しいメソッドを使う場合の注意</h2><p>今回ご紹介した<code>some</code><code>reduce</code><code>filter</code>はIE9以降でしか対応していません。</p><p>最近は古いブラウザ対応の必要ない場合も多くありますが、注意が必要です。筆者の回答例で少し紹介した、Underscore.jsに含まれている<code>_.some</code><code>_.reduce</code><code>_.filter</code>を使うと古いブラウザにも対応できます。</p><p>また、それ以外にも<code>_.findWhere</code>*といった、配列操作に関する便利な関数を使うことができます。</p><cg-note>
    <h3>*注:<code>_.findWhrere</code></h3>
    <p>指定したキーと値の組み合わせにマッチしたもののうち、最初の値を返します。詳しくはドキュメントの「<a href="http://underscorejs.org/#findWhere">_.findWhere</a>」を参照してください。</p>
  </cg-note><h2>まとめ</h2><p>同じ問題でも複数の解決方法があり、どの方法もメリットとデメリットがあります。きれいな解決方法もひとつではないのです。今回紹介した方法以外にもよい解決方法があると思います*。</p><cg-note>
    <h3>*注:よい解決方法</h3>
    <p>ほかのよい解決案があればgistやjsfiddleなどにコードを置き、#codegridハッシュをつけてTwitterで教えてください。</p>
  </cg-note><p>多くの方法を知ることで、実際のプログラム時に適切な方法を選ぶことができ、きれいなコードを書くことができるようになります。プログラムが書ける人は、多くの解決方法の中から適切な方法を選んでいます。</p><p>問題の解決パターン(解法)を多く知り、そしてそれを場面に応じて使い分けられるために、少しでもお役に立てば幸いです。</p><p>このシリーズでは今後も現場で遭遇しそうな簡単な問題と解決方法について、解説していく予定です。</p><!--=-->
中村 享介
PixelGrid Inc.
Jamstackエンジニア

2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。
多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。
Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。

現在の興味はWeb Componentsを使ったマークアップの改善とJAMstack。

著書に『WebクリエイティブのためのDOM Scripting』(単著:毎日コミュニケーションズ、2007年)など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。

この記事についてのご意見・ご感想 この記事をTweet