データベースを使ったWebサイト制作に挑戦してみよう

「Webサイトを作りたいと思ったときに参考になる情報5選」という記事では、まずはHTML + CSSで簡単なページを作ってみることを前提として解説していました。

しかし世の中のWebサイトやWebサービスを見渡してみると、ユーザーが投稿した情報を表示させるようなものが多く見られます。ユーザー投稿型の口コミサイトTwitterなどもそうですね。

そういったものを作る場合、データベースについて理解し、連携させるような仕組みを作る必要があります。ちなみに以前の開発コラムで紹介したWordPressは、MySQLというデータベースから情報を出力するという仕組みをもっており、WordPressでCGM要素のあるWebサービスを作ることも可能です。例えばWordPressを使ってSNSを作りたいのであれば、WordPressには様々な機能を追加するうえで、プラグインが準備されているので、BuddyPressというプラグインを使えば作れてしまいます。ですので、最初にWordPressを勉強の教材として使うのはいいと思います。

データベースを使ったWebサイトを作るうえで費用な知識をいくつか要素分解すると次のようになります。

1. データベースに関する概念の理解

基本的には、Excelはほとんどの人が使っているかと思うので、Excelのファイルの中にいくつかのシートがある状態をイメージして頂いて、ちょうどExcelのファイルにあたるものがデータベース、その中にある複数のシートがテーブル、シートの列をフィールド(カラムと呼ぶこともあります)、Excelの行のことレコードと呼ぶと考えてもらうと理解が早いと思います。

もしこの説明ではよくわからない場合には、こちらの記事がデータベースの概念を学ぶうえで図も交えて解説しているのでわかりやすいかと思います。

2. データベースの設定に関する理解(ex. 文字コードの設定方法など)

データベースを使用するうえで、最低限設定しなければならない項目が存在します。MySQLという最もよく使われているデータベースを例に挙げれば、my.cnfというファイルにその設定を書きます。設定の書き方に関してはここを見ておくとよいでしょう。

3.データベースを操作するうえで必要な言語SQLの習得

SQLとは、データベースを操作するための言語になります。実際にはSQLを使うことなく、クライアントソフトからデータベースを直接いじるツールとして、phpmyadminSequel Pro,MySQL Workbenchなど様々あるのですが、SQLに関して知っておく必要があるでしょう。

Twitterを例に考えてみましょう。

仮にあなたがツイートしたとします。すると、そのツイート情報がテーブルにインサート(挿入)されます。そのツイートはあとでみても見れるようになっていますよね?あとでそのツイートを見たいというときにはこれをSQLのSELECTというコマンドでとってきて、みれるようにしているのです。

SQLについて学習するにはここが参考になるかと思います。

4. データベースから取得した情報をブラウザ上に出力する方法を知る

データベースからとってきた情報をブラウザに出力するところまでを実現する必要があります。まずは、一番検索して情報もたくさんひっかかってくる PHP + MySQLの組み合わせで、この部分のノウハウを学ぶといいでしょう。参考になるサイトはこちら

5. 最後にCSSで見た目を整える

ここに関しては、データベースに格納されていた情報を出力しようが、もともと自分でHTMLとして作っておいたテキストをそのまま表示させていようが、CSSで見た目を調整する部分はまったく変わりありません。この部分のノウハウについては、「Webサイトを作りたいと思ったときに参考になる情報5選」の記事を見ながら学習してみてください。

ちなみにデータベースからデータをとってきて生成するWebページのことを、動的なページとよび、もともとHTMLとしてテキストを準備してブラウザに表示させているだけのWebページのことを静的なページと言います。よく技術書を読んでいるとこの言葉が出てくるのですが、最初のうちは何をいっているのかよくわかりませんので、実際にデータベースをいじってみることを薦めます。

インターン先や新卒採用決定後の勤務では、静的なページだけではなく、動的なページを作る機会が数多くあります。静的なページだけで済むことはほとんどありません。ですので、今回この記事を読んで頂き、是非データベースと連携したWebサイトの作り方を習得して頂ければと思います。

インターンに挑戦したい学生の方はこちら

おすすめの記事