Web制作の楽しさ　〜基礎から学べるHTML研修を受けて〜

はじめに

はじめまして！26卒新入社員の西 歩人です。

本記事では、研修で学んだHTMLの基礎（合わせて基礎を学んだJavaScriptを含む）を中心に、得た学びやWeb開発について感じたことをご紹介していきます。

Web制作・開発は楽しい！

早速ですが、結論です。

私は在学中にWebの技術を学んでいましたが、学習を始めてから今に至るまでに感じていること
それは“Web制作・開発は楽しい！”です
そう思える要因には、以下のようなWeb開発・アプリの特徴があると思います。

• 開発において変更がすぐに反映される
  →結果が返ってくる速さはものづくりの楽しさに直結すると思います
• どんな端末でも動く
  →PCやスマートフォンなど、あらゆる環境で動作し多くのユーザーに直接届けられるという点は、Web開発ならではの大きなやりがいや達成感に繋がっています

他にもWebアプリの特徴として“ブラウザでコードが確認できること”があると思います。
Webサイト・アプリはブラウザの開発者ツールを開けば、誰でも簡単に裏側を覗くことができます。（バックエンドのコードは確認できません）
学習を始めたばかりの私はただの便利機能としか考えていませんでしたが、なぜコードが確認できるのでしょうか？

なんでブラウザでコードが確認できるの？

ブラウザでコードを確認することができる理由・・・

それはサーバーからクライアント(ブラウザ)に対して、HTMLやCSS、JavaScriptといったファイルがコードのまま送信されているからです。ブラウザは受け取ったコードを組み立てて表示しているため私たちはその元となるコードを確認することができます。

このような特徴からWebサイト・アプリを勉強する上では、教材代わりになるHPなどがインターネット上に無数にあり、勉強に活用できるためWeb技術は学びやすいと思います。

では実際に私が学習した中で特にむずかしいなと感じた内容について触れていきます。

formタグ

HTMLには数多くのタグがありますが、中でも私が難しいなと感じたのは formタグとinputタグです。

上記の例ではactionやname、methodなど様々な属性がありますが、特にnameについて学んだ時に難しいなと感じました。

name属性とは

name属性とは入力欄にユーザーが入力した値をサーバーに送信するときに、その値のキーを指定する属性です。

私は当時Pythonなどでデータベースに値を保存する等のプログラムを書いたことがなくアプリケーションのデータの流れを理解していなかったため、「フォームに入力された値がそのままデータベースに送信される」と勘違いしていました。

しかし実際はデータを受け取るのはサーバーで動作しているバックエンドのプログラムです。
サーバー側のプログラムは、name属性で指定されたキーを頼りに送られてきたデータを見つけ出し、それをデータベースに保存するという役割を担います。

話がHTMLから脱線してしまいましたが、HTMLの属性にはこのようにアプリケーションの流れを知らないと理解がしにくいと感じる部分がありました。

method属性

method属性も同じくプログラムやアプリ開発になじみがない人は理解が難しいかもしれません。
method属性の値として、主に“GET”と“POST”が使われます。
それぞれ何が違うのでしょうか。

まずGETについてです。
値としてGETを指定すると
`https://example.com?name=日本太郎`
のように先ほどのname属性で指定したキーとユーザーが入力したデータがURLの末尾に追加されます。
そのためECサイトでの商品の検索などに適しています。
URLを使って商品のページをブックマークに保存するときや他人に共有するときなど、URLにデータが含まれているからこそ、同じ画面を再現できるのです。

次にPOSTについてです。
POSTの特徴としては下記があげられます。

• URLにデータが含まれない
• 送れるデータの量にほぼ制限がない など

そのためアカウントの登録・ログインなど、サーバーに重要な情報を送ってデータベースに書き込みをしたいときなどに適しています。
パスワードなどの情報がURLに含まれたら大変ですよね。
（POSTで通信する場合でも、パスワードのような機密情報を送る際はサーバー側でハッシュ化などの適切な処理とHTTPSによる通信の暗号化などセキュリティ対策が不可欠です）

formタグのまとめ

ここまでformタグやその属性について触れてきました。
「HTMLは画面の見た目を作るもの」というイメージが強かったのですが、実際はデータをサーバーに送る役割も担うことがあります。

しかし実際のWebアプリ開発では、この“データをサーバーに送る”という処理はJavaScriptを使って実装することもあります。
ではHTMLだけではなくJavaScriptを組み合わせることでどのようなことができるのでしょうか？

JavaScriptと組み合わせると何ができるの？

JavaScriptはプログラミング言語なのでHTMLやCSSと組み合わせてWebアプリを開発することで様々な機能を実装することができます。

動的なWebページが作成できる

例えばパスワードのバリデーションチェックです。

上記の例ではパスワードを入力するときに8文字以上でない場合に
”パスワードは8文字以上で入力してください。”という警告が出るようになっています。

このようにJavaScriptを組み合わせることで動的なWebページを作成することができます。

まとめ

本記事では
・なぜブラウザでコードが確認できるのか
・formタグとその属性
・JavaScriptと組み合わせると何ができるのか
についてまとめました。

しかしHTMLタグにはformタグ以外にもたくさんのタグがあります。
またWebアプリを構築している技術には、見た目やアニメーションを実装できるCSSもあります。
JavaScriptにおいてもReactなどのライブラリを用いることでよりモダンなアプリを開発することができ、Pythonなどのプログラミング言語でバックエンドのソースコードを作成するとより本格的なWebアプリを開発することができます。

このようにWebアプリを構成している技術はまだまだたくさんあります。
私はこれらの技術を学んでいくごとに、どんどんとWebアプリの開発が楽しくなっていきました。

これからも様々な技術に挑戦し、楽しみながら開発に取り組んでいきたいです。
最後まで本記事を読んでいただいてありがとうございました！