Webエンジニアに必要な技術をコードで解説!!Unix,PHP,HTML/CSS,MySQL

Webエンジニアに必要な技術について

以前の記事では、Webエンジニアになるために身につけておく必要のある技術について解説しましたが、この記事ではそれを実際にサンプルアプリケーションを用いて、コードベースでそれぞれの技術について解説していきます。

この記事を読むにあたってはWebアプリケーションの仕組みの記事を読んでおくと理解しやすくなると思うので、こちらもあわせて読んでいただけるとスムーズに記事の内容を理解頂けるかと思います。

今回は概要を解説する記事ですのでコードについてなど細かい部分を理解する必要はありません。

Webエンジニアとして必要な以下6つの技術がそれぞれどのタイミングでつかわれてどのようなものなのか具体例を見ながら理解して頂ければと思います。

HTML
CSS
JavaScript
PHP(Ruby)
データーベース
UNIXコマンド ( CUI操作 )

※今回の例では、サーバーサイドの言語としてPHPを使用しています。

※この記事では、実際にデーターベースには接続しません。

サンプルアプリケーションについて

今回解説に使うアプリは以下のようなフォームがあって、名前とパスワードを入力してSubmitを押すと、フォームが送信されてマイページが表示されて、「Welocome to <フォームで入力した名前>」と表示されるものです。

こちらがその画面で

送信後の画面です。Welcome to webnariとフォームに入力した名前が表示されているのがわかります。

このアプリケーションを構成するファイルは以下の通りです。下記のようにファイルの拡張子を見て頂けると、それぞれなんの技術を使ったファイルなのかがわかるかと思います。

ページの構造を記述する | HTML

では、早速中身をみていきましょう。

今回使用するHTMLはindex.htmlとして作成します。index.htmlはページの先頭を意味するためindexという任意の名前にしてあります。

その中身をみてみると以下のようになります。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Your Application</title>
  <!-- cssを読み込み -->
  <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
  <div class="container">
    <div class="content">
      <h2>Welocome!</h2>
      <form id="form1" method="post" action="/app/server.php">
        <div class="row">
          <label class="label">Name :</label>
          <div class="form-group">
            <input type="text" name="name" class="form-control" />
          </div>
        </div>
        <div class="row">
          <label class="label">Password :</label>
          <div class="form-group">
            <input type="password" name="password" class="form-control"/>
          </div>
        </div>
        <div class="form-group">
          <input class="btn" type="submit"/>
        </div>
      </form>
    </div>
  </div>

  <!-- javascriptを読み込み -->
  <script type="text/javascript" src="/js/function.js"></script>

</body>
</html>

HTMLは構造を記述する言語で<html></html>というタグの中にきめられたタグを書き込んでいくことで文章の構造を表現します。

構造の具体的な例でいうとheadタグやbodyタグは必須のタグでheadタグは「ページのタイトル（ブラウザのタブに表示される）を定義」したり「外部のcssファイルを読み込む」という定義をしたりします。

そして、bodyタグには、h1タグなどを使って、文章の見出し、pタグで段落などを使って実際のサイトを表現していきます。

このサンプルでは、ログインフォームを実装しているため、inputタグと呼ばれるタグで入力フォームや、送信ボタンを定義し、それらを囲う形でFormタグを定義します。

注意が必要なのは、HTMLはあくまで文章の構造を表現するもので、ページをきれいに使いやすく表示するためのものではありません。あくまでも「ここが見出しです」「ここが段落です」など文章内での意味を表現することが主な目的になります。

Webエンジニアとしては、これらをタグの意味や使いどころを理解して使いこなせるようになることというのがまず必要になる技術になります。

CUIベースでの操作 | UNIXコマンド

これ以降は実際にサーバーを起動させて見ていきます。

Macでは、Spotlight Searchなどでターミナルを検索して画面を開きます。

windowsではコマンドプロンプトにあたりますが、プログラミングを始めるとこのようなCUIと呼ばれるコマンドによりコンピュータを制御することが多くなります。

今回はターミナルからコマンドを打ってサーバを起動していきます。phpにはデフォルトでwebサーバを起動する機能を持っているのでこれを利用してサーバー起動します。

コマンドは以下の通りです。

php -S 0.0.0.0:8888

このコマンドをindex.htmlが置かれているディレクトリで実行すると、Webサーバーが立ち上がり、ブラウザでhttp://127.0.0.1:8888にアクセスするとindex.htmlが表示されます。今回はさきほどとは違いcssが読みこまれているので、最初に示したスタイルの適用されたページが表示されるはずです。

ページが表示されたらUNIXコマンドの説明に戻りますが、UNIXコマンドの簡単な例を示すと、

cd [ファイルパス] ・・・ ディレクトリを移動
ls              ・・・ カレントのファイルを表示
rm [ファイルパス] ・・・ ファイルを削除
mv [ファイルパス] [ファイルパス]・・・ファイルを移動

のようになります。

実際にwebの開発ではこのようにローカル開発環境の構築やサーバー作業などの多くでこれらのコマンドを多用します。これは初心者の方にはあまりしられておらず、地味につまずくところなのでweb開発を勉強する前に意識しておけると良いでしょう。

ページを装飾する | CSS

CSSは先ほどの画面のようにページを装飾してくれます。

サーバーを起動する前の画面を見てわかるように、CSSのないHTMLはブラウザに標準で搭載された最低限のスタイルでしか画面に表示されません。CSSをHTMLに適用するには、そのページのHTML内でCSSを読み込むことが必要です。

先のindex.htmlのソース内にもありますが、このように書くことで、 http://127.0.0.1/css/style.cssに配置されたcssファイルを読み込むことができます。

<link rel="stylesheet" type="text/css" href="/css/style.css">

実際のCSSコードは以下です。

css/style.css

*,*:after{
  box-sizing: border-box;
}

.container{
  width: 100%;
  color: brown;
}
.content{
  width: 30%;
  text-align: center;
  margin: 50px auto;
  border: 2px solid brown;
  border-radius: 2rem;
  padding: 30px;
}

.row{
  margin-top: 20px;
  text-align: left;
}
.form-group{
  margin-top: 10px;
}

.form-control{
  padding: 10px;
  width: 100%;
}

.form-control:focus{
  outline: none;
  opacity: 0.8;
}

.label{
  font-weight: bold;
}

.btn{
  display: inline-block;
  padding: 10px;
  background: white;
  font-weight: 400;
  background: brown;
  color: white;
  font-size: 1rem;
  width: 100px;
  border-radius: 2rem;
  text-decoration: none;
}
.btn:focus{
  outline: none
}

コード全体は以上ですが、下記のように詳細を見るとcssはスタイルを当てる先を「.btn」のように指定して、[ color: <カラーコード> ] のように、プロパティを指定することでスタイルを当てていきます。

.btnというスタイルを当てる先のクラスはhtmlのclass属性で指定されています。

.btn{ // btnクラスにスタイルをあてる
  display: inline-block; // 要素の表示形式を指定
  padding: 10px;         // 余白を指定
  font-weight: 400;      // フォントの太さを指定
  background: brown;     // 背景の色を指定
  color: white;          // 文字色を指定
  font-size: 1rem;       // フォントサイズを指定
  width: 100px;          // 要素の幅を指定
  border-radius: 2rem;   // 角を丸く
  text-decoration: none; // テキストの装飾をキャンセル
}

繰り返しますが、ここではコードの内容は覚える必要はなく

CSSはHTML内でCSSを読み込む記述をしておいて、htmlのクラスなどに対してスタイルをあてていくという感じだけ掴んでいきましょう。

リクエストの内容を取得して結果を返す | PHP

webの仕組みを解説する記事でも解説しましたが、PHPやRubyなどのサーバースクリプトはリクエストをうけたらパラメータを取得して、結果をHTMLとして返します。

これをコードを見ながら説明すると以下のようになります。

server.php

<?php

# リクエストのパラメータを取得
$name = $_POST['name'];
$password = $_POST['password'];

# テンプレートファイルを取得して表示
include('view/mypage.php');

view/mypage.php

<!DOCTYPE html>
<html>
<head>
  <title>Your Application</title>
  <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
  <div class="container">
    <div class="content">

      <h2>Login Successfully !!</h2>

      <p>Welcome to <?php echo $_POST['name']; ?></p>

      <a class="btn" href="/index.html">戻る</a>
    </div>
  </div>
</body>
</html>

サンプルのアプリケーションでは、Submitボタンを押すと入力したリクエストが送信され、次のページで「Welcome to ○○」として表示されます。

HTMLの仕様として、formタグ内にあるname属性の値がパラメータのキーとして送信されます。そのため、このコードではname属性に設定されたnameとpasswordを取得して、$nameという変数に格納されたデータをmypage.php内で使用して次のページを表示しています。

ここでは、リクエストの取得しかやっていませんが、実際のWebアプリケーションでは、ここの段階でデータベースからデータを取得してきたり、ユーザの見やすいようにデータを整形したり、計算をおこなったりしています。

Webの仕組みの記事でサーバーがリクエストをうけてレスポンスを返すとは説明しました。具体例がないとなかなか理解しづらいですが、このコードを見て実際にサンプルを動かしてみるとリクエストの送信とレスポンスが少しは理解しやすくなるのではと思っています。

ボタンを押してページがリロードされた瞬間がまさにリクエストを送っている瞬間で次のページが表示された瞬間がレスポンスが返ってきた瞬間です。

まあわざわざサンプルを動かさなくても他のサイトのいたるところにこの仕組みがあるのでそこで確かめてみても良いかもしれません。

クライアントサイドで処理を行う | JavaScript

JavaScriptはクライアントサイドで動く言語と言われますが、初心者の方には幾分理解しづらいものであるでしょう。

クライアントに対する言葉がサーバーですが、サーバースクリプトの仕事は上で説明しました。サーバーはページをリロードしている間に処理を行なっていますが、クライアントでは、ページリロードなどページをまたがずそのページ内で動作します。

入力フォームなどでは、入力が不正だとエラーメッセージが画面に表示されたりしますが、そこを制御するのがまさにJavaScriptです。

今回のサンプルでも名前やパスワードを空にして、送信ボタンを押すとポップアップが出てきてエラーメッセージが出てきます。

実際のコードは以下になります。

// フォームが送信されるときに実行される。
document.querySelector('#form1').addEventListener('submit',function(e){
  // フォームの値を取得
  var name = document.querySelector("input[name='name']").value
  var password = document.querySelector("input[name='password']").value

  if( name == '' || password == ''){
    alert('passwordあるいはNameが不正です。')
    e.preventDefault() //値が不正だったら送信させない。
  }
})

簡単にコードを説明するとコード自体は、フォームのボタンが送信された時に発火するイベントを登録しています。そして、今回は入力フォームをチェックするために入力値を取ってきて空かどうかをチェックしています。

JavaScriptもcssと同様HTMLでファイルを読み込む必要があり、bodyタグの一番下で読み込みます。

<script type="text/javascript" src="/js/function.js"></script>

色々と説明しましたがここでもJavaScriptができることに焦点を当てて理解していきましょう。JavaScriptは先にも言ったようにクライアントサイドで動く（基本的に）スクリプトなのでページをリロードせずに画面を変化させたりすることができます。

また最近ではAjaxなどページをリロードせずにサーバーと通信を行う術もあるのでajaxでサーバーと通信しながらユーザーのアクションに対してリアルタイムに画面を変更するということもできるようになっています。

JavaScriptもPHPやRubyと同じプログラミング言語ではありますが、得意とする分野があることを理解しましょう。

まとめ

ここまでWebで使用する技術をコードも交えながら説明してきましたがいかがだったでしょうか？

データーベースも重要な技術のひとつですが今回は詳細の説明は省きました。データーベースはサーバー側で使われるもので、サーバーの処理内でデータを取得したり、保存しておくことに使われます。

Web開発の勉強にも全体像を知らないと見えてこない部分もあると思うので今回はこような記事を書きました。

こちらの記事と合わせてWebアプリケーションの仕組みを知っていただけると嬉しいです。

サンプルのアプリケーションは

https://github.com/webnari/web-sample-application

こちらからダウンロード（クローン）できます。gitのコマンドを使用してインストールする場合は、READMEにあるように以下のコマンドで

brew install git
git clone https://github.com/webnari/web-sample-application.git

のようにインストールしたあとに

cd web-sample-application/
php -S 0.0.0.0:8888

でサーバを起動すると

http://localhost:8888

にアクセスして確認できるようになります。

Webエンジニアに必要な技術をコードで解説!!Unix,PHP,HTML/CSS,MySQL

Webエンジニアに必要な技術について

サンプルアプリケーションについて

ページの構造を記述する | HTML

CUIベースでの操作 | UNIXコマンド

ページを装飾する | CSS

リクエストの内容を取得して結果を返す | PHP

クライアントサイドで処理を行う | JavaScript

まとめ

サイト管理人

サイト管理人

カテゴリ

タグ

アーカイブ

Webエンジニアに必要な技術をコードで解説!!Unix,PHP,HTML/CSS,MySQL

Webエンジニアに必要な技術について

サンプルアプリケーションについて

ページの構造を記述する | HTML

CUIベースでの操作 | UNIXコマンド

ページを装飾する | CSS

リクエストの内容を取得して結果を返す | PHP

クライアントサイドで処理を行う | JavaScript

まとめ

サイト管理人

関連記事

サイト管理人

カテゴリ

タグ

アーカイブ