【現場で当たり前に使う知識】コーディング/開発/テスト・デバッグ編

「学習サイトや参考書と同じやり方でコーディングできるのかな？」

「テストのやり方とか詳しく知らないけど大丈夫かな？」

独学だとこのような不安も出てくると思います。

この記事を読めば、開発でまず何をやるべきなのか、根本的なテストの考え方などがわかります。

１．コーディング

確定したデザインを基に、html/cssでのwebサイト実装を行います。

大きく分けて3つの工程があります。

・デザインファイルからの素材切り取り

photoshopなどデザイナーが作ったデザインファイルから、例えば1つのボタンや1枚の写真など、htmlの要素単位で画像を切り分けていきます。

この切り取り作業はデザイナーさんがやってくれる場合もあります。

(余談ですが個人的には全作業でここが一番面倒です…笑)

・htmlで大まかなブロック作成

デザインを参考にしながらタイトル・メニュー・メインコンテンツ部分などのブロック単位を大まかに分けてhtmlを書いていきます。(詳しくは過去記事もご参照ください)

・cssを入れながら全体調整

htmlが大まかに書けたらcssを少しずつ書いて、デザイン通りにブラウザ上での見た目を合わせていきます。

レスポンシブデザインならこの段階でスマホでも確認をしていきましょう。

２．開発

設計がしっかりできていれば、基本的には日本語をプログラム言語に置き換えるだけです。

慣れるまではコメントで何をしたいのかを細かいステップで書いていくと良いです。

例えば会員登録フォームの入力画面とかなら下記のようになるでしょう。

//入力画面表示

//フォームの値をリセット

//確認画面から戻ってきた場合は入力された値をセット

//入力値をチェック

//確認画面用にsessionに保存

//確認画面の処理を呼び出す

上記を基に、コメントの日本語をプログラム言語に置き換えていく感じです。

今は分からなくても大丈夫、文法がわかってきたらこの流れは自然と出来てきます。

３．テスト・デバッグ
実装したプログラムが設計通りに動作するかの確認をし、不具合があれば修正します。

大きく分けて2つの視点があります。

正常系：自分が書いたコードが想定通りに動くかどうかを確認します。

異常系：想定外の動作をされた時、例えば画面入力の途中でブラウザリロードをされたらどうなるか？などを確認します。

また、テストの範囲で分ける手法もあります。

単体テスト：１つの画面毎にテストを行います。

結合テスト：「新規会員登録」など１つの機能をテストします。

総合テスト：「新規会員登録」「カートに入れる」「支払い・決済」などすべてのテストを行います。

開発者やチームですべてのテストが完了後、お客様に実際に操作してもらう「受け入れテスト」があります。

あくまで最終確認なので、バグが出ることはないようにしておく必要があります。

まとめ

・コーディング

・開発

・テスト/デバッグ

未経験からのwebプログラミング攻略サイト