初心者向け学習方法一覧はこちら
はじめに
前回は、
サンプルコードをVisual Studio Code（VSCode）で実行する手順は、
JavaScriptで頻繁に利用する基礎的なメソッドの紹介
配列・文字の連結（concat）
concatは文字や配列を連結するメソッドです。
サンプルコードでは2箇所のテキスト入力欄（frontとdomain）に入力した文字列を＠を挟んで連結しています。
※読み込めない場合はRun Penをクリックしてください。
concatで連結するときは.concat()で連結するものを指定します。＠は変数ではない単純な文字列なので”（ダブルクォーテーション）で囲みます。
domainは変数なので、変数名をそのまま記述します。concatは繰り返し使用することで2つ以上の文字列を連結できます。サンプルコードではconcatを2回使用することで3つの文字列を連結しています。
VSCodeから実行した結果はこのようになります。
配列の操作（push、join）
同じような要素をまとめて管理したい場合に使用できるのが「配列」です。配列ではpushやjoinなどのメソッドを使用して、各要素を管理します。
pushは配列に要素を追加するメソッドです。joinは配列の要素を取り出して連結する際に使用します。
サンプルコードではarrayという名前の配列の変数にpushで要素を追加した後に、joinで要素を1つずつ取り出して連結しています。
※読み込めない場合はRun Penをクリックしてください。
pushは「要素を追加する配列の変数名.push(”xxx”);」という形で指定します。呼び出すたびに配列の最後の要素として追加されていきます。
サンプルでは3つ追加したので、array[0]がりんご、array[1]がじゃがいも、array[2]がキャベツになっています。
JavaScriptの配列の番号は0から始まるということも覚えておきましょう。joinは「要素を連結する配列の変数名.join(区切り文字);」という形で指定します。concatと異なり区切り文字を定義可能です。サンプルでは(” と “)を区切り文字にしていますが、何も指定しない場合は,（カンマ）で区切ります。
VSCodeから実行した結果はこのようになります。
ランダムな要素を取得する（Math.random）
Mathは数学的な関数や定数を利用できるオブジェクトです。様々なメソッドやプロパティが含まれています。Math.randomは0以上1未満の疑似乱数を返します。
乱数というのは決まった結果の範囲内で等確率にそれぞれの結果が得られるものです。よく言われるのがコイントスの結果やサイコロの出目です。コイントスは表か裏の2パターンがおおよそ1/2の確率で出現します。Math.randomを使うことで擬似的にコインの表裏が1/2ぐらいの確率で発生する様子を再現できます。
サンプルコードではサイコロの結果をランダムで表示しています。
※読み込めない場合はRun Penをクリックしてください。
サイコロの出目は1から6までなのでMath.randomで発生した疑似乱数に6をかけます。
とても小さい値が出てしまうと6をかけても結果が1未満になってしまうため、1を足すことで最小でも1を超える値になるようにしています。疑似乱数にかける数を変えることで12面サイコロや20面サイコロなども実装が可能です。
VSCodeから実行した結果はこのようになります。
おみくじを作ってみましょう
JavaScriptのメソッドとして紹介したpushとMath.randomを使用しておみくじを作ってみましょう。
配列におみくじの結果を用意して、ランダムな数値を元にすべての結果が均等な割合で出現するようにします。
※読み込めない場合はRun Penをクリックしてください。
Math.randomの結果にarray.lengthをかけていますが、こちらは変数名がarrayという配列の要素数を表しています。
サンプルコードではpushで追加したおみくじの結果が5つあるのでarray.lengthの値は5となります。 サイコロの値をランダムに求める際は結果に+1をすることで最小の結果が1以上となるようにしていましたが、配列の番号は0から始まるため今回は+1をしていません。
pushする回数を増やせば自動でarray.lengthも増えていくので配列の要素数がいくつになったのか意識せずとも大丈夫です。
他の結果も追加してみましょう。
もし、大吉がでる確率を高くしたいという場合はpushでもう1つ大吉を追加しましょう。 単純に大吉が出る確率が高くなります。
VSCodeから実行した結果はこのようになります。
まとめ
今回はJavaScriptの成り立ちやバージョンの遷移について詳しくなりました。ES6の登場でJavaScriptが潜在的に抱えていた様々な問題を解消できるようになってきました。
まだまだJavaScriptの進化は続いていきます。基礎をしっかりと学びながら新しくて便利な要素も取り入れていきましょう。
また、実際にコードを記述する際によく使われているメソッドの紹介もしました。文字の連結1つでも自分で最初から作り出すのは大変です。すでにあるメソッドなどを活用して簡潔でわかりやすいコードが書けるように挑戦してみてください。
次回はブラウザで使用するJavaScriptのライブラリである「jQuery」について解説していきます。
プログラミングスクールの選び方
転職を検討中の方向け
フリーランス・副業で活躍したい方向け
教養・キャリアアップしたい方向け
給付金について詳しく知りたい方向け
学習方法一覧
- はじめに
- JavaScriptで頻繁に利用する基礎的なメソッドの紹介
- 配列・文字の連結（concat）
- 配列の操作（push、join）
- ランダムな要素を取得する（Math.random）
- おみくじを作ってみましょう
- まとめ
- プログラミングスクールの選び方
- 学習方法一覧
