デザイナーが学ぶJavaScript ―ロボット プログラミング部 番外編―

こんにちは、デザイナーの小高です。デザインエンジニアの方の、「子供のころにプログラミングができるレゴブロックを作っていた」というエピソードを聞いたきっかけで、ロボット好きエンジニアSさんとはじめた「ロボット プログラミング部」の活動もリモートワーク中でちょっとお休みぎみ。

前回の記事、ロボット工作編はこちらになります。

デザイナーが学ぶロボットプログラミング工作部_JavaScriptで動く子供向けロボット 工作編

さてさて、今回はいよいよロボットを使ったプログラミング編に移ろうとしていましたところ…。

登場人物

デザイナーK： UIデザイナー。 プログラミングレベル JavaScript★☆☆☆☆、 工作レベル ★★☆☆☆
エンジニアS： WEBよりもロボット系が好きなエンジニア。マイ半田ごてを会社に持ってきて、アマチュアIoT部を勝手に設立。
---

デザイナーK：  「Sさん！私が今回、ブログの担当になったんですが、テレワーク推奨期間に入る前にロボットを持って帰るのを忘れて、会社のキャビネット内に置きっぱにしてしまいました！！（ごめんよロボ）」

エンジニアS： 「😱」

デザイナーK： 「ロボットがなくても、私と同じようなJavaScript初心者が興味を持ってもらえそうな事を書ければと思ってるんですが…」

エンジニアS： 「…。この前、UML図や情報設計を勉強してるって言ってたじゃないですか。」

デザイナーK： 「はい！この前、プロジェクトでオブジェクトベースのUI設計する際に、UML図のような形で設計をチームで考えました。情報設計もっと深堀りしていきたいと思ってて。でも、JavaScriptとどう結びついて？😶」

エンジニアS： 「プログラミングする時に、『人と機械が読みやすい形』へ情報設計する。この時、連想配列が候補の一つとしてあげられますね。」

デザイナーK： 「おおお！なるほどです。連想配列ってなんとなくでしか使いこなせてないです。もやもやを理解したいです！」

エンジニアS： 「じゃあ、拾ってきた情報でサンプル書いてみますね。ちょっとお待ちください！」

デザイナーK： 「ありがとうございます！！（Sさん、プロマネでもありアシアルに新入社員が入った時のメンターなどもしていて。やさしくて面倒見のよい方です）」

エンジニアS： 「簡単にサンプル考えました。テーマは『人口密度の情報設計』です。」

1. 情報を用意する
   今回はこのデータを使います。（事実とは異なるデータです）

デザイナーK： 「全国47都道府県の人口密度ランキング。データベースのサンプルですね」

2. この情報を人と機械が読みやすい形に設計する。

エンジニアS： 「通常の配列だと、0は東京、 1は大阪、2は… と定義していっても、例えば24は何県になるのか、というのはちゃんと伝えないと伝わらないと思います。」

エンジニアS： 「そこで連想配列を利用して、tokyoは東京, osakaは大阪, 2は… と定義していくと、例えばokayamaが岡山であることは言わなくても伝わると思います。」

エンジニアS： 「この時、順位情報は0, 1, 2 などの値では表せなくなりますが、それぞれに入っている値を比較することで、一応順位情報を知ることはできます。」

エンジニアS： 「何より、24は何県ですかとか、43は何県ですかとかの問い合わせは無くなるはずだから、この場合だと連想配列であれば、受け取り手が扱いやすいと思われます。」

デザイナーK： 「連想配列を採用する過程になりますね。わかりやすいかも！」

3. コードに起こす

let todofukenMitsudo = {
  "tokyo": 5678.90, "osaka": 4567.89, "kanagawa": 3456.78, "okayama": 234.56, "shimane": 123.45
}

という流れが、情報設計してプログラムまで書いているプロセスになると思われます。今回は都道府県を全て入れるのは大変なので、上記五つの都道府県を連想配列にいれました。

元データの数字には、大きな桁数なので3桁ごとにカンマで区切ってありますが、そのままその数字を入れてしまうと" Uncaught SyntaxError: Unexpected token ',' "（意訳としては、文法エラー: 使えないところで ' , ' が使われました）と出ちゃうので気をつけてください。

デザイナーK： 「じゃあこれを、Chromeのコンソールに入れて試してみます！」

Chromeの右クリックでメニューを出し、検証からConsoleタブにてこのプログラムが動くか試してみます。 無事に実行することができ、それぞれの値を参照できるように作れているようです。

デザイナーK： 「デザイナーは、情報設計時にユーザーへ意図を伝達させるために情報の強弱・関係や、配置の意図など考えますが、対象がコンピューターと制作者に変わっても根幹は同じですね。」

デザイナーK： 「連想配列って、初心者向けJavaScriptの教本ででてきて、一通りやるし、データベースからグラフとか表組みとか作るときに採用するみたいに、ふんわりしか認識できてない感じだったので、今回の話でだいぶピンときました。」

エンジニアS： 「ロボット使いながらっていうのもいいですが、デザイナーや初心者向けに基礎的なとこをきちんと向き合うっていいかもしれませんね」

デザイナーK： 「工作部も、テレワークが続いても形を考えて、時間つくってやりたいです！アシアルに入ってプログラミング初級の私が、自身でJavaScriptを書く機会はほとんどないし、エンジニアのみなさんはプロの仕事ですごくて。自分で書けなくてもいいや…って思う日もあるのですが…。知識レベルでいいから少しずつ学んでいきたいです。それをWebに関わるデザイナーや初心者向けに発信していけたら。あまりに初心者すぎて申し訳ないレベルですが。w」