まずは基本中の基本である「Webページの3要素」の役割を整理します。
これら3つを理解する際、よく「人間」に例えて説明されます。
それぞれの役割と、なぜ使い分けが必要なのかを紐解いていき、「なんとなく知っている」を「React開発で迷わない知識」に変えていきましょう！
HTML – ページの「骨組み・構造」 –
HTMLは「HyperText Markup Language」の略です。人間でいうところの「骨格」にあたります！
- 役割
どこが「見出し」で、どこが「本文」なのかといった情報の意味をブラウザに伝える。 - 特徴
デザインの機能は持たず、あくまで「内容」を記述することに特化している。
ここで大切なのは、HTMLはあくまで「構造」だということ。骨組みがしっかりしていないと、あとでどれだけ着飾っても崩れてしまいます💦
CSS – ページの「見た目・装飾」 –
CSSは「Cascading Style Sheets」の略です。人間でいうところの「服」や「メイク」にあたります！
- 役割
文字の色、サイズ、背景、要素の配置（レイアウト）などを指定する。 - 特徴
同じHTMLでも、CSSを変えるだけで「スマホ風」にも「PC風」にもガラッと印象を変えることができる。
「中身は同じなのに、見た目が違うだけでこんなに使いやすくなるんだ！」という驚きを作るのがCSSの役割です。
Webを「ただの文書」から「デザインされたサイト」に変える重要な要素になります！
JavaScript – ページの「動き・知能」 –
JavaScriptは、人間でいうところの「脳」にあたり、状況を判断して指令を出し、体を動かす役割を担います！
- 役割
ボタンを押した時にメニューが開く、計算をする、データを保存するといった「動き」や「ロジック」を与える。 - 特徴
ユーザーの操作に応じて、リアルタイムに画面を書き換えることができる。
ReactはこのJavaScriptをより効率的に、かつ強力に扱うための道具になります。
つまり、JavaScriptの理解がReact習得の最短ルートに直結するんです！
アニメーションはCSSでもできるけど、なぜJavaScriptが必要なの？
最近のCSSは進化しており、フワッと要素が出るようなアニメーションはCSSだけでも作れます。では、なぜJavaScriptを使うのでしょうか？
結論から言うと、CSSは「決まった動き」を再生し、JavaScriptは「状況に合わせた動き」を作り出すものだからです。
CSSアニメーションが向いていること
ずっとクルクル回る、ホバーで色を変えるなど、「単純な繰り返し」。
ブラウザの負担が少なく、滑らかに動くのが強みです。
JavaScriptが必要になる場面
一方でJavaScriptは、「条件によって動きを変えたい時」に力を発揮します。
例えば、
- 入力内容に応じてエラーメッセージを表示する
- ボタンを押した後に、計算結果を画面に反映する
- データの取得が完了したタイミングで画面を更新する
などなど……
このように、
ユーザー操作・計算結果・データ状態などに応じて動きを変える処理は、JavaScriptの得意分野なのです！
見た目の変化だけなら「CSS」、
「状況（データ）の判断」を伴う複雑な動きなら「JavaScript」というのが使い分けのポイントです。
ちなみに、私たちがこれから作っていく「Webアプリ」開発では、過度なCSSアニメーションはあまり使いません。CSSでの派手な演出は、どちらかというと広告用のLP（ランディングページ）や企業サイトのメインビジュアルなどで活躍するものです。
React開発においては、まずは「JavaScriptによる論理的な動き」を優先してマスターしましょう！
まとめ
Webサイトがどんな仕組みで動いているのかの全体像がつかめてきたかと思います。
＼＼ 今回のまとめ ／／
・ HTMLは「骨格」、CSSは「服」、JavaScriptは「脳」。
・ 簡単なアニメーションはCSS、条件付きの複雑な動きはJavaScript。
HTML・CSS・JavaScriptの役割を分けて考えることで、
「どの技術で何をするのか」が整理でき、Webページの仕組みがぐっと理解しやすくなります！
ここからは少し視点を変えて、「そもそもなぜフロントエンドが必要になったのか？」を、
Webの進化の歴史とともに見ていきましょう♬*°
コメント