プログラミングのコツ：パーツ(処理)の組み合わせを意識する

こんにちは、プログラミングの世界へようこそ！今日は、新人エンジニアの皆さんに、ちょっとしたコツをお教えします。

処理を書くときに何から書き始めたらいいのか困ってしまうことはありませんか？

また、書いているときに何がしたかったか見失ってしまうときはありませんか？

そんな時に効果的なプログラミングの進め方についてのアドバイスをします。

「小さい処理から大きな処理へ、迷ったときはコメントから書いてみよう」です。

プロジェクトを小さなピースから構築することで見失わずにコーデイングすることができます。

それでは、見ていきましょう！

小さい処理を書いてその組み合わせで大きな処理を完成させる
できた構文をコメントでまずは配置してみる
まとめ

小さい処理を書いてその組み合わせで大きな処理を完成させる

プログラミングするときはまず、変数の宣言、簡単な算術演算、そして IF文やループ文、文字列結合、分割のような単純な操作などの基本的な制御構造を書くことから始まります。この処理をパズルのように組み合わせることでより複雑な処理ができるようになります。

例えば：

ログイン機能を作ろうとしたとき「ユーザ情報とパスワードを入力して確定したら認証してログインができ、ログインした人の情報が表示される」とイメージして早速コーディングに入ろうとしたときベテランさんならササっとイメージできるかもしれませんがプログラミングを触ったばっかりの人や何から入っていいかわかりません。

その時はまず自分のわかりやすい単位まで細か分けてみましょう。

ログイン情報を入力をさせる
入力させた情報で認証させる
認証された情報を表示する

さらに「1.ログイン情報を入力をさせる」細かく分ける

ユーザ情報「メールアドレス」を入力させる
「パスワード」を入力させる。
「メールアドレス」「パスワード」が入力されたかチェックする

ここまで細かくすると何をしないといけないか見えてきますよね！

②さらに細かくしてみる

ログイン情報は何を入力したらいいのか大体わかりましたね。

でも入力されたものをさらにどうしたらいいかわからないってこともあると思います。

そこでさら「パスワード」の処理についてさらに細かくしていくのです。

パスワードを入力できる
「＊＊＊＊＊」のように通常時で見えないようにする。
目のアイコンを押したら「＊＊＊＊＊」のところにパスワードの文字列が見えるようにする。
パスワードが入力されたら「大文字と小文字と記号」が混合で入っていることを確認する。

パスワードでやることをイメージして処理を細かく分けるだけでもさらにやることが明確になりましたね！

しかしここでもまだ「大文字と小文字と記号」が混合で入っていることを確認する。がイメージできずに何したらいいか困ってしまう人もいるかもしれません。

そしたらさらに細かくするのです。

③さらにさらに細かくする

「大文字と小文字と記号」が混合で入っていることを確認する。を細かく分けてみましょう。

大文字が入っていることをチェック
小文字が入っていることをチェック
記号が入っていることをチェック
すべてのチェックがOKだったら混合ではいいているのでOKとする

どうでしょうか？だだ文章を分けただけなのにやることがさらに明確になっていませんか！

ここまで来たらプログラム始めたばかりの人でも「文字列の中に大文字が入っていることを確認する」という処理はがんばったら作れそうではないでしょうか！

しかしこの処理からコーディングするイメージがもう少し足りないかもっという人はちょっとプログラミングっぽく置き換えてみましょう。

最初に言っていた「変数の宣言、簡単な算術演算、そして if 文、文字列結合、分割のような単純な操作などの基本的な制御構造を書くことから始まります。」というように、プログラムで出てきそうな構文の表し方から入るとプログラミングっぽくなります。

「文字列の中に大文字が入っていることを確認する」をさらに細かくしてみましょう！

文字列を一文字ずつに分ける
分けた文字を1個ずつチェックする
チェックした文字で大文字があったらカウントして合計何個あったか数える
３で大文字が1個以上見つかったらOKとするそれ以外はNG

どうでしょうちょっとプログラミングの構文が裏で見え隠れしませんか？

プログラミングの文法に置き換えてみる

そういうことでこれをプログラムで使用する基本の構文に置き替えてみると・・・・

※ 変数:メールアドレスの文字列:mailaddress, 大文字の個数：upperCount

文字列を一文字ずつに分ける→[mailaddress.split()]→[変数:mailaddressSplitに入れる]
分けた文字を1個ずつチェックする→[mailaddressSplit]をループ文で回して一つずつ文字を取り出す→文字一つを[変数:mailaddressChar]に入れる
チェックした文字で大文字があったらカウントして合計何個あったか数える
→[mailaddressChar]が大文字かチェック「mailaddressChar.match(/^[A-Z]+$/)」
大文字なら[upperCount]にプラス「１」
３で大文字が1個以上見つかったらOKとするそれ以外はNG
→「upperCount」が1以上ならOK,それ以外ならNG

ちょっと構文を入れることでさらにプログラムの処理のイメージがついてきたのではないでしょうか？

できた構文をコメントでまずは配置してみる

細かく分けて一つの処理が理解できて来たでしょうそれをプログラム上にコメントとして配置してみましょう。

※上記の細かく分けた方法のわかりやすい段階の分け方をコメントに起こしてみる

/**
 * メールアドレスに大文字が1つ以上含まれているかチェックする
 * @param {string} emailAddress - チェックするメールアドレス
 * @returns {boolean} - 大文字が1つ以上含まれていればtrue、そうでなければfalse
 */
function emailAddressCheck(emailAddress) {
  // 文字列を一文字ずつに分ける


  // 分けた文字を1個ずつチェックし、大文字のカウントを行う


  // 大文字が1個以上見つかったらOKとする

}

コーディングしてみると

/**
 * メールアドレスに大文字が1つ以上含まれているかチェックする
 * @param {string} emailAddress - チェックするメールアドレス
 * @returns {boolean} - 大文字が1つ以上含まれていればtrue、そうでなければfalse
 */
function emailAddressCheck(emailAddress) {
  // 文字列を一文字ずつに分ける
  const emailAddressSplit = emailAddress.split('');

  // 分けた文字を1個ずつチェックし、大文字のカウントを行う
  let upperCount = 0;
  for (const emailAddressChar of emailAddressSplit) {
    // チェックした文字で大文字があったらカウント
    if (emailAddressChar.match(/^[A-Z]+$/)) {
      upperCount += 1;
    }
  }

  // 大文字が1個以上見つかったらOKとする
  return upperCount > 0;
}

まとめ

プログラミングは、複雑なプロジェクトでも、基本的な構成要素から始めることが鍵です。新しい機能を開発する際は、まずは小さなタスクに分割しましょう。

例えば、ログイン機能を構築する場合、ユーザー入力の受け取り、認証処理、そして結果の表示というステップに分けることができます。これらの各ステップをさらに細かく分解することで、プログラムの流れがはっきりとし、何をするべきかが明確になります。

特に、初心者の方々がよく直面する「何から手をつけたらいいかわからない」という問題に対しては、このアプローチが特に有効です。大きなタスクを小さな部分に分けることで、一つ一つのステップに集中し、確実にタスクを進めることができます。

最終的に、これらの小さなタスクを組み合わせることで、複雑なプログラムを構築できるようになります。プログラミングは、小さな成功を積み重ねることで、大きな成果につながる道のりです。初心者の方々も、一歩一歩確実に前進していけば、いずれは大規模なプロジェクトにも対応できるようになるでしょう。

今日のポイントは、「小さい処理から始めて、徐々に大きな処理に取り組む」ということです。この方法を取り入れて、プログラミングのスキルを着実に向上させていきましょう！