個人向けWebサイト作り方について

はじめに

プログラミング言語の基本構文などを学習し終わった後に、作ってみたいと思うものが、Webサイトやアプリケーションでしょう。実際にブログサイトやショッピングサイト、自分で考えたシステムなどを作っていくのは、プログラミングの技術向上にも繋がります。この記事では、そんな方々のためにWebサイトの作り方を説明していきます。実際に現場で使われている開発工程の説明を最初にし、その後に現場の開発工程になぞらえて個人向けのWebサイトの開発の仕方を解説していきます。

開発工程

ここでは、開発現場で使われている一般的な開発工程の説明をしていきます。
アプリケーションやWebサイト、業務システムを作るときは、「要件定義」→「設計」→「製造」→「テスト」の順番で制作を進めていきます。「要件定義」では、クライアントがどういうものを欲しているのかを聞き取りし、どのような要素を盛り込みたいかを明確にします。クライアントが提示した金額や納期など、クライアントの要求が妥当かどうか見極めプロジェクトを計画していきます。要件定義が終了したら、次は「設計」です。設計には「外部設計」と「内部設計」があります。「外部設計」では、画面など外見的な見た目を作るユーザーインターフェースを設計します。ユーザーにとって使いやすいシステムを作るための重要な工程です。「内部設計」では、プログラムの設計をします。外部設計はユーザー側からの視点で設計を行いますが、内部設計はプログラマーなど開発者側からの視点で設計を行います。次は、作成された設計書を基に「製造」を行っていきます。いわゆるプログラマーがプログラミングをし、システムを作っていく工程です。そして、最後に作成されたプログラムを「テスト」します。プログラムがきちんと仕様書通りに動くか、決められた値を返すかなどをテストしていきます。

個人向けのWebサイトの作り方

ここまで、大規模なプロジェクトの開発工程の解説をしてきました。ここでは、個人向けのWebサイトの作り方を開発現場でも使われる「要件定義」「設計」「製造」「テスト」になぞって説明していきます。

個人向けWebサイトの作り方〜要件定義〜

要件定義の作り方は、自分がどのようなシステムを作りたいかイメージをします。組み込みたい機能や画面遷移など、簡単に紙などに画面などの図を書きだすと考えやすいでしょう。そして、機能や処理などの要素をまとめます。

個人向けWebサイトの作り方〜設計〜

設計では、必要になるクラスやメソッド、関数などの使うものを考えていきます。この機能を実現するには、どんなクラスやメソッド、関数が必要になってくるか考え、その機能ごとにまとめます。そして、同じ処理が何度も出てきたり、他の場所でまた使えそうな処理は、メソッドや関数に切り分けると使用しやすいでしょう。そして、機能ごとにまとめた処理を設計書に起こします。

個人向けWebサイトの作り方〜製造〜

次に設計の工程で作成した設計書を基にシステムを製造していきます。前段階の設計で考えたクラスやメソッド、関数を使い、実際にシステムを構築していきます。全てが設計書どおりにいくことはまず少ないので、途中で変更したりしてプログラムを組み立てていきます。

個人向けWebサイトの作り方〜テスト〜

テストでは、期待した通りに動くか、期待した値が返ってきているかなど確認します。1つの処理ごとに確認した方が後からバグなどが発生したときに追跡がしやすいでしょう。例えばフォームの値が取得できているか、データベースにきちんと接続できているかなど1つの処理ごとにテストを繰り返しながら進めていきます。

要件定義・設計から始めるメリット

プログラミング言語の基本構文などを一通り勉強したら、何かWebサイトやアプリケーションを作ってみようと思う方が多いと思います。作り方についてやってしまいがちなのが、設計などの工程を抜かして、いきなり製造に取り掛かるということです。個人向けのWebサイトでも、設計をしないとフォルダの階層やクラス設計などグチャグチャになってしまいます。いろんなクラスで、同じ処理が何個も書かれていて保守性の低く、処理が乱雑なものが出来上がってしまい、修正するときに大変になってしまうなどということもあります。ですが、要件定義・設計からやると、あらかじめ機能ごとにファイルをまとめられたり、クラス設計がわかりやすくなったりし、同じ処理は、あらかじめ関数やメソッドにまとめておくということが可能で、後々修正するときもわかりやすいです。なので、Webサイトを作るときは、要件定義・設計から始めるのがオススメです。

まとめ

いかがでしたでしょうか。要件定義や設計は初心者には、少し難しいものかもしれませんが、早い段階からしておくと、より効率的に開発を進める力がつき、プログラミングへの理解も深まります。Webサイトの作り方をなんとなく理解できたら、できるところからでも実際の開発工程になぞらえて制作を進めていくと良いでしょう。