【Web開発の基本】初心者が知るべき重要な概念

はじめに

こんにちは、エンジニア2年目の嶋田です。
まずは、この記事を開いていただきありがとうございます！

Web開発は多くの要素から成り立っています。
未経験でエンジニアになり開発をして2年、まだまだではありますが基本は理解しているかなと思っています。
勉強したので大まかにではありますがWeb開発の基本について初心者にも分かりやすく解説してみようと思います。

この記事の最後には、参考サイトのリンクを掲載していますので、ぜひチェックしてみてください。

目次

• インターネットの基本
• フロントエンドとバックエンド
• HTML/CSS/JavaScriptの役割
• レスポンシブデザインの理解
• サーバーとデータベース
• バージョン管理システム
• 最後に
• 参考文献

インターネットの基本

ここではインターネットの基本、仕組み、IPアドレスとドメインについて解説しようと思います！

インターネットの仕組み

internetは「inter(中間、間、相互)」「net(網、網目上の〜)」という言葉の組み合わせで、「コンピューターの(間)を張り巡る(網)」という意味になります。
「世界中に網のように張り巡っていてそれぞれつながり合っている」ということです！

この「インターネット」という網を使ってデータを送ったり受け取ったりします。私たちが普段使っているメールや動画配信サービスも基本は「インターネットを使ったデータのやり取り」で成り立っています。

まとめると…

インターネットは、世界中のコンピューターが相互に接続された巨大なネットワークです。
このネットワークを通じて、人々は情報を共有し、通信することができます。

ウェブサイトへのアクセスが一例で、以下のステップがあります​​​​。

1. ユーザーがブラウザを使用してURLを入力します。
2. ブラウザは「リクエストメッセージ」を作成し、WebサイトのIPアドレスを特定します。
3. ブラウザはリクエストメッセージとIPアドレスを組み合わせて「パケット」を作成します​​​​。
4. このパケットはインターネットを通じてサーバーに送信されます​​。
5. サーバーはパケットを受け取り、要求された情報をユーザーに返送します​​。

ちなみに「パケット」とは、「リクエストメッセージ」と「IPアドレス」が一緒になった荷物のようなものです！

視覚的に捉えられたらと思い、DALLE-3で上記の流れを伝え、イラスト作成してもらいました。
(が、あまりわかりやすくなった気がしていません…可愛いからいっか…😅)

IPアドレスとドメイン

• IPアドレス

「IPアドレス」の言葉を分解すると、Internet「コンピューターの(間)を張り巡る(網)」、protocol「インターネット上のルール、規格」、address「宛先、住所」という言葉の組み合わせらしいです。
この言葉を繋げて解釈すると「世界中につながっている網（Internet）の中の何語で話すのか（protocol）住所（address）はどこなのか」ということになります。

この言語や住所などをまとめた情報を総称して「IPアドレス」と言い、この住所をコンピューターの中では「192.168.1.1」といった4つの数字の塊で管理しています。
この並びの数字が出てきたら「IPアドレスだ！」と思ってください。
基本的にはPCなどの機器1つ1つを識別するために必ず1台ずつ「192.168.1.1」のような「IPアドレス」を持っています。

• ドメイン
  上記で説明した「IPアドレス」はPCなどの機器を識別するための住所とご説明しましたが数字ばかりで覚えられないですよね…
  そんな問題を解決するのが「ドメイン」です。
  インターネット上のあるWEBサイトやサーバーがどこにあるかを示す住所の役割としてドメイン名が使用され、人々が容易に覚えられる名前（例: "www.example.com"）が割り当てられます。
  WEBサイトがPCやスマホの画面に表示されているのはこの「ドメイン」という「インターネット上の住所」に「WEBサイト見せて！」と問い合わせているからです。

フロントエンドとバックエンド

ここではフロントエンドとバックエンドについて説明させていただきます。
恥ずかしながら、入社したての時は何を指しているのかわからず線引きもわからず…
この話の時はニコニコしていました。もう話に参加できるよ！ということでまとめていきます🫡

フロントエンド開発の概要

フロントエンドとは、Webサイトやアプリケーションの「顔」の部分です。つまり、ユーザーが直接見て触れるすべての部分を指します。ここでは、HTML、CSS、JavaScriptなどの技術を使用して、見た目やユーザー体験をデザインします。この分野には、コーディングをする「コーダー」や「フロントエンドエンジニア」、UI/UXに特化した「UI/UXエンジニア」、そして「Webデザイナー」などが関わっています。

バックエンド開発の概要

一方、バックエンドはユーザーから見えない部分で、主にサーバー、データベース、アプリケーションのロジックを扱います。ここでは、Webサーバーやデータベースサーバーからデータを取り出し、フロントエンドに情報を提供します。ユーザー認証や顧客情報管理、オンライン決済などもバックエンドの範疇です。バックエンドとサーバーサイドはほぼ同じ意味で使用され、これにはJava、Ruby、Pythonなどのプログラミング言語が利用されます。

開発の流れと必要なスキル

• フロントエンドの開発流れ: デザイン、UI設計から始まり、HTML/CSSでのマークアップ実装、JavaScriptやTypeScriptでの実装が進みます。
• バックエンドの開発流れ: こちらはシステムエンジニアリングに近く、要件定義から始まり、基本設計、詳細設計、開発、テスト、リリースと続きます。

フロントエンドエンジニアに必要なスキル

• HTML、CSS、JavaScriptの基礎知識
• ウェブデザインとUI/UXの理解
• レスポンシブデザインの技術

バックエンドエンジニアに必要なスキル

• Java、Python、Rubyなどのプログラミング言語
• データベース管理とSQLの知識
• WebサーバーとOSに関する基本的な知識

HTML/CSS/JavaScriptの役割

ここでは先ほどフロントエンドの話で出てきた3つについてお話しします！
Web開発におけるHTML、CSS、JavaScriptはそれぞれ独自の重要な役割を持っています。
これらの役割についてさらっとみていきましょう。

HTMLでのページ構造の作成

• HTML（HyperText Markup Language）はWebページの骨組みを作ります。
• ページの基本的な構造と要素（テキスト、画像、リンクなど）を定義します。
• Webブラウザにページの表示方法を指示する役割を持ちます。

CSSでのスタイリング

• CSS（Cascading Style Sheets）は、HTMLで作成されたページを美しく装飾します。
• ページの色、フォント、レイアウトなどのスタイルを定義します。
• デザイン的な要素を通じて、ユーザー体験を向上させます。

JavaScriptでのインタラクティブ性の追加

• JavaScriptは、ページに動的な要素やインタラクティブ性を加えるプログラミング言語です。
• ユーザーのアクションに反応する要素（ボタンやスライダー）を実装します。
• 静的なWebページを動的なものに変化させ、ユーザーとの対話を可能にします。

HTMLとCSSに関しては過去に少し記事も書いているので気になった方がいたら読んでみてください！

レスポンシブデザインの理解

タブレットやPC、スマホなどさまざまな機器が流通しています。そこで開発の際に大事になってくることがレスポンシブデザインです。
異なるデバイスや画面サイズに対して、Webサイトが適切に表示されるようにするためのデザイン手法です。
以下に、レスポンシブデザインの主要な概念を紹介します！

メディアクエリの使用

• メディアクエリは、CSSの機能で、特定の条件（例えば画面サイズや解像度）に基づいて異なるスタイルを適用します。
• これにより、デバイスごとに異なるスタイルを適用し、ユーザー体験を最適化します。

フレキシブルなレイアウトの設計

• フレキシブルなレイアウトでは、固定ピクセル値ではなく、パーセンテージやビューポート幅（vw/vh）などを使用して要素のサイズを定義します。
• このアプローチにより、レイアウトは異なる画面サイズに対して自動的に調整され、デバイスに関係なく一貫した見栄えを保ちます。

サーバーとデータベース

サーバーとデータベースはバックエンド開発に欠かせない知識です。
見えない部分になってくるので、私自身苦手意識があります…
概念として理解できるようにまとめますので少しでもお役に立てたら幸いです！

サーバーサイドの言語

サーバーサイドの言語は、ウェブアプリケーションのバックエンド、すなわちサーバー上で動くプログラムを作成するために使用されます。これらの言語は、サーバーとクライアント（ユーザーのデバイス）間の通信、データ処理、APIの実装などに重要な役割を果たします。

• DBMSの例:
  • Python (Django, Flask)
  • Ruby (Rails)
  • Java (Spring Framework)
  • その他にもPHP、JavaScript (Node.js) など

フレームワークの役割とメリット

• コードの再利用：共通機能の事前実装により、開発者は同じコードを繰り返し書く必要がなくなります。
• 効率的な開発：標準化されたコード構造を提供し、開発プロセスを加速します。
• セキュリティの強化：セキュリティ対策がフレームワークに組み込まれており、安全なアプリケーションを構築しやすくなります。
• メンテナンスの容易さ：一貫したコーディングスタンダードにより、コードの保守・拡張が容易になります。

データベース（DB）の基本

• データベースの必要性:
  • 情報の永続的保存：ユーザー情報、ブログ投稿、注文履歴などを保存し、アクセス可能にする。
  • 効率的なデータ処理：大量のデータを迅速かつ効率的に整理し、管理します。
• 位置:
  • 物理的には「サーバー」の中にあり、データベース管理システム（DBMS）によって機能します。

データベースの構造

• テーブル:
  • データベースは複数のテーブルで構成されています。各テーブルには特定の情報が保存されます。
• カラム:
  • テーブル内の各行には複数の「カラム」があり、データの属性を記録します。
• リレーション:
  • テーブル間の関係（リレーション）により、複数のテーブルを連携させてデータを管理します。
• 例:
  • MySQL, MariaDB, PostgreSQL

バージョン管理システム

ここではGitについて軽く触れたいと思います。

Gitの概念と役割

• 分散型バージョン管理システム: ソースコードの変更履歴を追跡し、複数の開発者が同時に作業できるようにします。
• バージョン管理: プロジェクトの進行に伴う変更点を管理し、必要に応じて以前の状態に戻すことができます。

Gitの基本的な機能

• コミット: プロジェクトの特定の状態を記録します。
• ブランチ: 異なる機能や修正を並行して開発するための独立した作業領域を提供します。
• マージ: 異なるブランチの変更を統合します。

Gitの使用方法

1. リポジトリの初期化: git init コマンドで新しいリポジトリを作成。
2. ファイルの追加: git add コマンドで変更をステージング領域に追加。
3. コミット: git commit コマンドで変更をリポジトリに記録。

Gitのメリット

• 履歴の追跡: プロジェクトの進行に伴う変更を容易に追跡できます。
• コラボレーションの促進: 複数人でのプロジェクト作業を簡単かつ効率的に行えます。
• エラーの最小化: 以前の安定したバージョンに容易に戻すことができ、エラーの影響を最小限に抑えます。

最後に

ここまでお付き合いいただきありがとうございます。
少しでもお役に立てたら幸いです。私自身まだまだ勉強中ですので
何か間違いがありましたら、コメントの方でご指摘よろしくおねがいいたします。

参考文献