プロダクトをつくるとき，いきなりコードを書き始めるのは悪手である．
本記事では，日本語で考えることの重要性と関数の活用の仕方を解説する．
プロダクトを作るときの流れ
- 完成図を具体的にイメージする．
- 処理を細分化し，実装する機能・処理を明確にする（重要）．
- コードを書く．
イメージ
全体像をイメージしておく．イメージできないものは実装できない．
- 画面には何が表示されているか．
- 各ボタンなどをクリックしたら何が起こればよいのか．
- 各動作によって，全体の目標が達成されるかどうか．
方法は何でも良い．なにかのツールを使っても良いし，紙に手書きでも良い．
細分化する
細分化の目的は以下あたりだろうか．
- やるべきことを整理する．
- 実装の難易度を下げる．
- ググりやすくする．
「細分化」で重要なのは日本語（母国語）の運用能力である．
例えば，HTML・CSS・JavaScript を使ってじゃんけんゲームのプロダクトを考える場合「じゃんけんをする処理」ではどんなコードを書けばよいのか明確ではない．明確でないコードを書くことは困難（というより無理）である．
では「じゃんけんをする処理」を細分化してみよう．グーチョキパーをそれぞれ 0, 1, 2 で管理するようなルールとし，以下のように考える．
じゃんけんをする処理
├── 画面に「グー」「チョキ」「パー」ボタンを表示する
├── ボタンをクリックしたら指定の処理を動かす処理
├── プレイヤーが選択した手を取得する処理
├── 敵の手を定めるためにランダムな数値を発生させる処理
├── 数値をじゃんけんの手に変換する処理
├── プレイヤーと敵の手から勝敗を算出する処理
└── 結果を画面に表示する処理ここでのポイントは「できるだけ細かくすること」である．各処理を見てそのままコードが書ける状態にしておくことが理想である．
そして，細分化する際には「入力と出力を明確にする」のがオススメである．上記の例に対して入力と出力を加えると下記のようになる．
じゃんけんをする処理
├── 画面に「グー」「チョキ」「パー」ボタンを表示する
├── ボタンをクリックしたら指定の処理を動かす処理
├── プレイヤーが選択したボタンの値を取得する処理
├── ⭐ 最小値と最大値を入力するとその間のランダムな数値を出力する処理
├── ⭐ 数値を入力するとじゃんけんの手を出力する処理
├── ⭐ プレイヤーの手（数値）と敵の手（数値）を入力すると勝敗を出力する処理
└── 結果を画面に表示する処理コードを書く
首尾よく細分化できたらコードを書く．コードを書くときは「関数」を意識する．
関数を活用することのメリットは以下だろうか．
- 関数は入力値と出力値が定まるため，動作検証がしやすい．
- 細分化されているため各関数はよりシンプルなコードになる．
- 各関数で動作検証を行っておけば，関数を組み合わせた場合でも問題なく動作する．
関数のポイントは「入力値（引数）」と「出力値（戻り値）」である．考えるときは必ずこの 2 点を意識すること．
前項で細分化した文を見ながら式を書けば良い．各関数を作ったら合わせて動作検証もしておく．
// 最小値と最大値を入力するとその間のランダムな数値を出力する関数
const generateRandomNumber = (min, max) => ~~(Math.random() * (max - min + 1)) + min;
console.log(generateRandomNumber(0, 2));
// 数値を入力するとじゃんけんの手を出力する関数
const generateJankenHand = (index) => ['グー', 'チョキ', 'パー'][index];
console.log(generateJankenHand(0));
console.log(generateJankenHand(1));
console.log(generateJankenHand(2));
// プレイヤーの手（数値）と敵の手（数値）を入力すると勝敗を出力する関数
const generateResult = (player_hand_index, computer_hand_index) => [
['draw', 'win', 'lose',],
['lose', 'draw', 'win',],
['win', 'lose', 'draw',],
][player_hand_index][computer_hand_index];
console.log(generateResult(0, 1));
console.log(generateResult(1, 1));
console.log(generateResult(2, 0));あとは動作検証した関数をまとめて処理を実装すれば良い．
const janken = (e) => {
// プレイヤーが選択したボタンの値を取得する処理
const player_hand_index = e.target.value;
// 最小値と最大値を入力するとその間のランダムな数値を出力する処理
const computer_hand_index = generateRandomNumber(0, 2);
// 数値を入力するとじゃんけんの手を出力する処理
const player_hand = generateJankenHand(player_hand_index);
const computer_hand = generateJankenHand(computer_hand_index);
// プレイヤーの手（数値）と敵の手（数値）を入力すると勝敗を出力する処理
const result = generateResult(player_hand_index, computer_hand_index);
// 結果を画面に表示する処理
document.getElementById('player_hand').innerText = player_hand;
document.getElementById('computer_hand').innerText = computer_hand;
document.getElementById('result').innerText = result;
}
// ボタンをクリックしたら指定の処理を動かす処理
document.getElementById('buttons').addEventListener('click', (e) => e.target.tagName === 'BUTTON' ? janken(e) : false, true);全体のコードは以下．
まとめ
今回はプロダクトを実装する際の手順を「日本語」「関数」に焦点を当てて解説した．
- 全体のイメージをつくれ！
- 処理を細分化せよ！細分化する際は「入力値」「出力値」を意識せよ！
- 各処理を関数でつくれ！関数ができたら組み合わせよ！
以上だ( `･ω･)b