【フロントエンド入門演習】プログラム設計してみよう!HTML/CSS/JSで作る動きのあるWebページ!

プログラム設計

本記事では、Webシステムのプログラム設計方法を解説していきます。

自動販売機をWebページで作成する演習を例にプログラム設計を行います。

本記事で学習できる内容は以下になります。

学習できるスキル

① プログラム設計の知識
② プログラム設計の実施方法
③ 実装タスク一覧の作成方法

実装タスク一覧とは、実装(コーディング)する必要がある機能や処理を一覧にまとめたものです。
この実装タスク一覧から作業時間を算出したり、仕様認識の齟齬が判明したり、多くのことが見えてきます。

目次

プログラム設計とは?

プログラム設計とは

はじめに、プログラム設計とは何かを説明します。

プログラム設計とは、コーディング(パソコンにプログラミング言語を入力すること)に入る前に、コーディングする内容を前もって決めておく作業のことです。

実際の業務では、いきなりコーディングから入ることは少ないです。
まずは、設計書の仕様を整理して、どのような処理を作成する必要があるか検討します。
初めは大まかに処理の内容を考えて、徐々に詳細に落とし込んでいくのが一般的です。

仕様を整理 ⇒ 処理の作成方法を考える ⇒ コーディングする

上記のような流れでコーディングに入っていきます。

処理の作成方法を考える部分をプログラム設計と言います。

プログラム設計もどこまで詳細にやるかケースバイケースですね。
※プログラム設計をしない(できない)こともあるのですが、絶対した方がよいです。

具体的にプログラム設計ですることは以下になります。

・ 機能(処理)を挙げ出す
・ 機能(処理)の開始から終了までに発生する出来事を列挙する(動きを言語化する)
・ 実装タスクの一覧を作成する

他にもありますが、私は新入社員に上記のことをプログラム設計として教えています。

プログラム設計が必要な理由

プログラム設計がなぜ必要なのか解説したいと思います。

プログラム設計をしないと、コーディングするときに悩みます。迷います。
それも、1回や2回だけでなく、たくさん。

コーディングするときに悩むこと

・何から作り始めようか悩む
・途中で残りは何を作ればいいのか迷う
・共通化できる処理を見落とす
・役割が明確な関数を作成できない
・共通化や関数化ができないため、自分の作ったソースが把握できていない
・全体の作業量が把握できず完成の見通しが立たない

↑こんな感じのことで悩みます。

しっかりとプログラム設計をすると、コーディングするときにはほぼほぼプログラムが完成しています

理想は、何も考えずにプログラム設計した内容をプログラミング言語に置き換えるだけという状態ですね。

実際は、そこまで考え抜くことは難しいと思います。
が、この機能はこういう処理の流れで作るとか、こういう関数が必要だということは整理しておく必要があります。

プログラム設計をしないでコーディングすると、複雑で難解で誰が見ても読みにくいプログラムが完成してしまう危険性があります。

そうならないためにも、しっかりとプログラム設計をできるようになりましょう!

プログラム設計:コーディングする内容を前もって決める!

それでは、プログラム設計をやっていきましょう。

機能(処理)を挙げ出す

最初に、自動販売機システムの機能(処理)を挙げ出します。

機能(処理)を挙げ出すコツは、実際に自動販売機を利用する様子をイメージすることです。

皆さんは、自販機を利用するときに、どんな行動をするでしょうか?

それでは、自販機を利用するときをイメージしてみましょう。

自販機の前にやって来ました。

まずは、①自販機にお金を入れます。

次に、②商品を購入します。

そうするとジュースが取出口に出てくるので、③ジュースを取出口から取り出します。

最後に、残っているお金を返してもらいたいので、④おつりを取り出します

機能(処理)の一覧

① お金を入れる
② 商品を購入する
③ 購入商品を取り出す
④ おつりを取り出す

ここで挙げたものは、自販機に対して働きかける動作の一覧です。

この働きかける動作は、自販機が備えている機能(処理)を動かすためのきっかけになっています。

プログラミングでは、このきっかけのことをトリガーと呼びます。

機能(処理)の開始から終了までに発生する出来事を列挙する


次は、さきほど挙げ出した機能(処理)をさらに詳しく考えていきます。

具体的に何をするかと言うと、各機能(処理)の開始から終了までに発生する出来事を考えます。

例えば、お金を入れる処理は「お金を入れる」で終わりではなく、自販機がお金が入ったことを認識します。
すると、おつりを表示するディスプレイに入れた金額が表示されます。※出来事①
さらに、入れた金額に応じて商品の購入ボタンが点灯します。※出来事②

お金を入れる」ことをきっかけにして、いくつかの出来事が順々に発生していきます。

各機能(処理)で発生する出来事を挙げ出してみましょう。

①お金を入れると、おつりの表示欄に入れた金額が表示されます。
商品の購入ボタンが点灯します。

②購入ボタンを押すと、取出口に購入した商品が出てきます。
おまけ抽選が始まって、あたりかハズレか確定します。
おつりの表示欄に残りの金額が表示されます。
商品の購入ボタンが点灯します。

③取出口の商品を取り出すと、取出口に商品がなくなります。

④おつり返却ボタンを押すと、おつりの表示欄に何も表示されなくなります。
商品の購入ボタンが消灯します。

それでは、ここまでに出てきた機能(処理)を実装タスク一覧にまとめてみましょう。

機能(処理)トリガー詳細
お金を入れる財布のお金を押す・おつり表示欄に入れた金額を表示する。
・購入可能な商品の購入ボタンを点灯する。
商品を購入する購入ボタンを押す・取出口に購入した商品を表示する。
・抽選を行い、あたりかハズレか確定する。
・おつり表示欄に残りの金額を表示する。
・購入可能な商品の購入ボタンを点灯する。
購入商品を取り出す取り出しボタンを押す・取出口の商品を取り出す。
おつりを取り出すおつり返却ボタンを押す・おつり表示欄に何も表示しない。
・商品の購入ボタンを消灯する。
実装タスク一覧

基本設計の仕様を反映する

基本設計の仕様を確認して実装タスク一覧に反映させましょう。

プログラムの場合、現実世界にはない動作や機能もあるので、自分の思い込みだけで作るのではなく、きっちりと設計書の仕様に合わせる必要があります。
※自分が作りたいものを作るのではなく、ユーザーが求めているものを作るという大事なやつですね。

以下、基本設計の仕様を反映させた実装タスク一覧です。
※赤色の文字は基本設計の仕様を反映させた部分
※青色の文字は共通化できそうな処理

機能(処理)トリガー詳細
自動販売機を表示する初期表示・商品を整列して表示する。
・商品画像を表示する。
・在庫数を表示する。
  1. 在庫ありの場合は、在庫数と同じ数の「■」を表示する。
  2. 在庫なしの場合は、「売切」を表示する。
・商品金額を表示する。
お金を入れる財布のお金を押す・おつり表示欄に入れた金額を表示する。
・購入可能な商品の購入ボタンを点灯する。
  1. 抽選であたり状態のとき
  2. 投入金額が商品の金額以上 かつ 商品の在庫数が1以上のとき
商品を購入する購入ボタンを押す・取出口に購入商品が6本ある場合は、メッセージを表示して購入不可とする。
 「6本まで購入できます。(改行)取り出しボタンを押してください。」

・取出口に購入した商品を表示する。
  1. 購入商品は、上から下に落ちてくるように表現する。
  2. 左から購入した順番に表示される。
・抽選を行い、あたりかハズレか確定する。
  1. 抽選中の演出を表現する。
  2. あたりの場合は、あたり表示欄に「あたり」を表示する。
    ハズレの場合は、あたり表示欄に空白(ブランク)を表示する。

・おつり表示欄に残りの金額を表示する。
・購入可能な商品の購入ボタンを点灯する。
購入商品を取り出す取り出しボタンを押す・取出口の商品を取り出す。
 取り出した後は、商品取出口に購入商品がない状態となる。
おつりを取り出すおつり返却ボタンを押す・おつり表示欄に何も表示しない。
・商品の購入ボタンを消灯する。
実装タスク一覧

このくらいまで実装タスクを考えれば、コーディングするときにスムーズに進めることができます。

まとめ:プログラム設計をして質の良いプログラムを作る準備をしよう!

本記事では、プログラム設計について解説しました。

プログラム設計についてまとめておきましょう。

プログラム設計は、

コーディングする内容を前もって決めておく作業のこと

そして、プログラム設計で具体的に実施することは、

・ 機能(処理)を挙げ出す
・ 機能(処理)の開始から終了までに発生する出来事を列挙する(動きを言語化する)
・ 実装タスクの一覧を作成する

なぜ、プログラム設計が必要かと言うと、

・コーディングするときに、悩んだり迷うことが少なくなる
・そのため、考えが整理されたプログラムが作成できる

経験の浅いプログラマーにとって、プログラム設計は非常に大事な作業です。
※もちろん経験があってもプログラム設計します!

プログラム設計をすることで、実装方法が整理できた状態でコーディングに入れます。
これは、わかりやすいプログラムを作成するための重要な要素です。

また、先輩などのプログラミングを補助してくれる人がいる場合は、「自分はこんな考えでプログラミングする予定です」と伝えることができます。
仕様の認識齟齬や実装方法の間違いなどに気づくことができて役立ちます。

このようにプログラム設計は、多くの場面で非常に役に立ちます。

しっかりとプログラム設計できるようになりましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SE歴16年。
システム開発会社で開発部長をしています。

【主な仕事内容】
 ・Webシステム開発
 ・新入社員育成
 ・社員採用

IT業界が好きで、プログラミングが好きです。
社内の新入社員育成に情熱を注いでいます。

コメント

コメントする

CAPTCHA


目次
閉じる