こんにちは。じゅに[@Jyu210_engineer[(https://x.com/Jyu210_engineer)です。
自己紹介でも書いてある通り、今までWebに触れてきていなかったので、基本からいきます。
ということでまずは、Webフロントエンドを構成する基本技術をおさらいしたいと思います。
いや、エンジニアからしたら一般常識やろ！というところはあるかと思いますが、私自身に腹落ちさせるためにアウトプットさせてください。
フロントエンドを構成する基本の3大技術
フロントエンド構成する基本の3大技術といえば、間違いなく以下の3つですね。
- HTML
- CSS
- JavaScript
この技術なくしてフロントエンドは成り立ちません。
フロントエンド開発をサポートしてくれる色々なライブラリやフレームワークがありますが、最終的にはこの3大技術にたどり着くことになります。
HTML（HyperText Markup Language）
HTMLは非エンジニアの方からしたらプログラミング言語と思われるかと思いますが、厳密にはプログラミング言語ではなくマークアップ言語になります。
マークアップとはHTMLのタグを使用してWebページの構造を記述することです。
テキストやリンクなどをマークアップすることで、Webページ内でそれらがどのような要素で、どのような意味を持つのかを指定します。
HTMLの例を以下の記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webページのタイトル</title>
</head>
<body>
<h1>見出し1 文章の大見出しを記載する</h1>
<p>段落。見出し内の文章などを記載する</p>
<ul>
<li>箇条書きの内容1</li>
<li>箇条書きの内容2</li>
<li>箇条書きの内容3</li>
</ul>
</body>
</html>
上記の例で使用されているマークアップは以下の通りです。
やなどの説明は省いていますが、このようなHTMLのタグを使用してWebページを組み立てていきます。 もちろん、例にあげたHTMLタグ（マークアップ）はほんの一部になるので、実際にはもっと様々なHTMLタグを使用することになります。マークアップを行うことで、コンテンツに意味を持たせ、分かりやすいWebページの作成こころがけましょう。
また、検索エンジンはHTMLのマークアップを元に、ページの内容を解釈し、検索エンジンの検索結果に反映します。
HTMLのマークアップが適切ではないと、検索エンジンも正しくページの内容を解釈しきれず、検索結果が上ららないという結果になるので注意しましょう。（SEO対策）
CSS（Cascading Style Sheets）
Webページの見た目（デザイン）を整えるスタイルシートを構成する言語です。
HTMLでマークアップした内容に対して、文字色やフォント、余白などを指定してビジュアル的に装飾していきます。
PCとタブレット、スマホ（画面サイズ）に合わせてデザインを調整するのもCSSの役割です。
CSSの記載例は以下のようなイメージになります。
h1 {
color: blue;
font-size: 24px;
}
p {
margin-bottom: 10px;
}
上記の例だと、
HTMLのh1タグ（見出し1）の文字色を青、フォントサイズを24pxに指定し、pタグ（段落）の下側に10pxの余白をつけるといった内容になります。
これもHTMLタグと同様にたくさんのスタイルがあるので、多少覚えることも必要ですが、「こういう装飾がしたいなぁ」と思った時にググったり、AIに聞いたりして正しい装飾方法を探し出すことができることが大事です。
CSSの記載方法は3種類あります。
インラインCSS
これはHTMLタグの中で直接スタイルを指定する方法です。
<h1 style="color: blue; font-size: 24px;">見出し</h1>
この記述のstyle="color: blue; font-size: 24px;"の部分がCSSになります。
スタイルが記載されたh1タグのみ文字色を青、フォントサイズを24pxに設定しています。
特定のタグのみにスタイルを指定でき、適用範囲が明覚であることがメリットとしてあげられますが、その分メンテナンス性が低く、HTMLファイル自体のサイズが大きくなり、ページの読み込み速度が遅くなる可能性があります。
基本的には特定の要素のスタイルを一次的に変更したい時、テストやデバッグ時に簡易的にスタイル調整を行う時に使用されます。
内部CSS
HTMLの
タグを使用してCSSを記載する方法です。HTMLファイル内にスタイルを記述するので、別にCSSファイルを用意、読み込みすることが不要になります。
内部CSSの例は以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>内部CSSの記載方法の例です</p>
</body>
</html>
HTMLの
タグ内がCSSになります。この例では
タグの文字色を青、フォントサイズを18pxに指定しています。
前述したインラインCSSとは異なり、HTMLファイル上の全ての
タグにスタイルが適用されます。
同じHTMLファイル内の複数の要素に一括でスタイルを適用できるため、ページ全体で統一されたデザインを作りやすいことと、外部ファイルを必要としないことがメリットです。
しかし、HTMLファイルが複数ある場合など、HTMLファイルごとにスタイルを記述する必要があるため、複数HTML（複数ページ）へのスタイルが大変で、HTMLファイルのサイズが大きくなり、ページの読み込み速度が低下する恐れがあるのが注意点です。
外部CSS
外部CSSはHTMLファイルとは別のファイルにCSSを記述し、HTMLからそのファイルを読み込む方法です。
HTMLのhead＞タグ内にタグを使用してCSSファイルを読み込みます。
まずはHTMLファイルの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>外部CSSでスタイル指定されています。</p>
</body>
</html>
それに対し、CSSファイル（style.css）を作成します。
p {
color: blue;
font-size: 18px;
}
この例だと外部CSSを読み込んだHTMLファイルの全ての
タグの文字色が青、フォントサイズが18pxに指定されます。
一つの外部CSSを複数のHTMLファイルで読み込むことにより、スタイルを一括で管理できるので、サイト全体のスタイル統一がしやすいです。
また、外部CSSを修正するだけで、外部CSSを読み込んでいるHTMLファイル全てに変更が反映されるのでメンテナンス性も高いのが特徴になり、HTMLとCSSをファイルを分けて管理できるので、ファイルが整理されて管理もしやすくなります。
デメリットとしては、外部CSSを読み込むために、ページ読み込み時に外部CSSを読み込むためのHTTPリクエストが発生するため、外部CSSのファイルサイズが大きいとページの表示速度に影響する可能性があります。
さらには、外部CSSの内容が多岐に渡るとデバッグや特定のスタイルの調整が難しくなる可能性もあります。
CSS記載方法の使い分け
- インラインCSS：小規模なページやテストなどで使用
- 内部CSS：単一ページサイトやテスト用ページで使用
- 外部CSS：大規模なサイトで複数ページを持つもので使用
となりますが、基本は外部CSSで記載し、テスト的な修正を行う場合にインラインCSSを使用するというのが現実的だと思います。
JavaScript
HTMLでマークアップし、CSSで装飾したWebページに動きをつけたり、ユーザーとインタラクティブ（対話的）にやり取りするためのプログラミング言語です。
ちなみにインタラクティブとは「双方向のやりとりがある」という意味で、Webやアプリ、ゲームなどで使用される用語になります。
「双方向のやりとりがある」にやりとりがあるということは、システム側からの一方通行ではなく、ユーザーの操作に応じてシステムが反応する（変える）ことです。
例えばドラゴンクエストで勇者が仲間に「魔王を倒しに行くよな？」と聞かれた時に、「はい」or「いいえ」を選択するシーンがあったと思いますが、あれもユーザーの操作に応じてシステムが反応するインタラクティブな要素点になります。
（ドラゴンクエストが分からない方には伝わらないかもしれませんが・・・）
もう少し具体的に言うとJavaScriptでは、ボタンを押すとメッセージを表示したり、画像が自動で変わるスライドショーを表示させたりと、Webページの「動き」や「反応（イベント）」を作り込みます。
バックエンドで使用されるプログラミング言語であるJavaやC#、Ruby、Pythonなどと同じように変数を使用でき、関数も作れて条件分岐や繰り返し処理なども作成することが可能です。
一つ注意点としてはJavaやC#などの変数の型をあらかじめ宣言し、コンパイル時に型のチェックが行われる静的型付け言語ではなく、RubyやPythonのように変数の型は宣言せずに、実行時に変数の型が決まる静的型付け言語になります。
JavaScript動的型付け言語はコードシンプルになり、拡張がしやすいなどのメリットがありますが、実行するまで型のエラーが分からないので、可読性や保守性が低くなりがちというデメリットもあり、どちらかといえば小規模開発向けと言われるのが一般的です。
動的型付け言語、静的型付け言語について深掘りすると話しの本筋からズレてしまうので、これぐらいにしておきます。
JavaScriptの一番の特徴といえば、DOM操作（HTMLの要素を動かす）ができることになります。
これにより、Webページでボタンを押された事によるイベントで処理を実行したり、Webページのテキストなどを動的に書きかえたりといったことが可能です。
このJavaScriptには色々なフレームワークやライブラリがたくさんあるので、それらを使用すればより便利、簡潔にJavaScriptを作成できたりします。
これらのフレームやライブラリについての全ては無理ですが、どこかで取り上げていければと思います。
（最終的に個人開発を目指しているので、それに使用するものは記事にしたいです）
まとめ
Webのフロントエンドを構成する基本の3大技術は
- HTML
- CSS
- JavaScript
になります。
これらの3つを使用すればWebのフロントエンドの開発は行えますが、現在は多くのフレームワークやライブラリがあり、それらを使用することでより効率良く開発を行うことができるようになります。
とはいえ、小規模なサイトやLPぐらいであれば、フレームワークやライブラリを使用しなくても問題なく開発は可能です。
（大規模であっても開発できないことはありません）
むしろフレームワークやライブラリを使用しなくても開発できるぐらいのスキルを身につけておくのはすごく大事な事です。
基本をきっちりと理解しておくことで、よりフレームワークやライブラリの内容も理解し、使いこなすことができるので、しっかりと押さえておきましょう。