Stereo Type Breaker

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんなものを作ってみました。

アプリはこちら

ランダムに修飾語と名詞が組み合わせられるアプリです!

About Production〜Stereo Type Breaker編〜

JavaScript ランダム

1 作ろうと思ったきっかけ

目新しいものやバズるものを観察すると、既存の価値や偏見にとらわれないものばかりです。

平たく言えば、「こんなものあるわけない。」と思われるものが突然トレンドになったりするということです。

例えば、「携帯電話」。もともと固定電話しか無い時代に、「持ち運べる電話」と聞くと、世間からは「そんなものあるわけない。」と言われるでしょう。

しかし、今や携帯電話を一人一台持つのが当たり前になっています。

この例から、新しいトレンドとなるもの、つまりイノベーションは、「持ち運べる」「電話」のように、ひとつの修飾語とひとつの名詞の組み合わせが種となって起きるものではないか、と考えました。

ランダムに修飾語と名詞が組み合わせられるアプリがあるとイノベーションを起こすことができると思い、このWebアプリを作りました。

2 コードについて

このアプリで学習したのはこの部分です。

『配列にある言葉をランダムに表示する』

const rnd = Math.floor( Math.random() * textLists.length);
textArea.textContent = textLists[rnd];

詳しく説明していきます。

Math.random()は0以上1未満の数をランダムに生成してくれます。これがランダム部分の根幹を担っています。

見た目上は『Math.random()』という文字ですが、この文字列で一つの数を表しています。

Math.random() * textLists.lengthはランダムに生成した0以上1未満の数と配列の個数を掛け算しています。

例えば、Math.random() = 0.6 , textLists.length = 10 の場合、掛け算をするので、Math.random() * textLists.length = 6 になる。

この計算結果がのちに表示する配列の番号になる。

なお、配列について復習すると Lists = [みかん, リンゴ, メロン]という配列があるとすると、

それぞれの要素の番号は、「みかん」・・・0、「リンゴ」・・・1、「メロン」・・・2というように、要素に番号があてがわれています。

ですので、Lists[1] となると、配列の中の「メロン」を意味します。

このように配列にあてがわれた数をランダムに生成するのですが、このままでは一つ問題があります。

Math.random()は0以上1未満の数なので0.123456…となり、Math.random() * textLists.lengthの結果は
整数にはならないという問題が発生します。平たく言うと、配列の長さを掛け算しても整数にはならないということですね。

先ほど記述したように、配列Lists[○] のように○の中には、要素にあてがわれた番号が入ります。

番号ということは、整数である必要がありますね!

そのために行うのがMath.floorです。

Math.floor(○)は○に入る数の最大整数を生成します。例えば、Math.floor(8.5678)の場合、「8」を表します。
平たくいえば、これによって小数点以下を切り捨て、整数を作っています。

この一連のコードでランダムに整数を生成しているのですね!

生成した数を rndというものに格納します。

これが配列に当てがわれた番号を表しているのですね。rndは文字列ではなく数(value)です。

あとは、textArea.textContent = textLists[rnd]という形で、表示させたい場所(textArea)に配列の中の要素をtextContentで表示させればよいのですね。

個人的には、配列の長さに0以上1未満の数を掛け算することによって、配列の要素の番号を全てカバーできるという点に感動します!

でも、よく考えてみると、単に全体に割合をかけているので、全体以下を表せるのは当然ですね(^^;

3 展望

今回はwebサイトの作成した人のみが「修飾語」と「名詞」のリストを登録したが、Railsを使って、思いついた言葉をだれでも追加できるようにすると面白いものになるなと思いました。

また、企画会議に使うこともできると思います。修飾語を好きなように決めて、名詞の部分を自社商品にすると、何か大きな発見が得られると思います!

4 参考

コードを載せておきます(^^)誰かの参考になれば幸いです。

全コードはこちら(Github)

最後まで読んでいただき、ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

コメント

Comments are closed.