🔎

## Web開発の第一歩：フロントエンドの技術と未来への展望

に公開
frontend
JSX
tech

はじめに

こんにちは。これまでMCPの学習を続けてきましたが、今回はWeb開発の基礎に立ち返り、『PythonでつくるWebアプリのつくり方』を読み進めました。この記事では、Webアプリの見た目や動きを司る「フロントエンド」の技術に焦点を当て、特にJSXやReactといった新しい概念について、自身の学習記録としてまとめます。

Web開発の技術は多岐にわたりますが、一つずつ着実に習得していきたいと思います。

1. Webフロントエンドの基本技術

Webアプリのフロントエンドは、以下の3つの基本技術で成り立っています 。

  • HTML (Hyper Text Markup Language): Webページの骨組みを作る言語です。
  • CSS (Cascading Style Sheets): Webページの見た目やデザインを装飾する言語です。
  • JavaScript: Webページにインタラクティブな動きを加えるプログラミング言語です。

これらの技術は、主要なWebブラウザで動作するように標準化されています。

2. フロントエンドを拡張する技術：ReactとJSX

基本的な技術に加えて、フロントエンド開発を効率化するための様々な技術が登場しています。

フロントエンドの技術

ここでは、代表的なフロントエンド技術をまとめてみました。

  • React :
    UIを構築するJavaScriptのライブラリー。UIを小さなコンポーネントに分割して再利用可能な部品として管理できます。反方向のデータフローやJavaScriptの中にHTMLを記述できるJSXをサポートしている。FaceBookが開発したオープンソースのライブラリーで幅広く使われている。
  • Vue.js / Angular / Svelte :
    上記のReactと同じくUIを構築するためのフレームワークやライブラリー。それぞれに特徴があるものの、いずれもUIをコンポーネントとして再利用可能にしている点が共通。
  • Saas / LESS / Stylus :
    CSSの上位互換として使用されるプロセッサ。変数やネスト、ミックスインなどの機能を提供し、CSSの記述を効率化する技術。
  • CSSフレームワーク :
    複雑化するCSSの指定において、あらかじめ定義されたスタイルやコンポーネントを提供することで、デザインの一貫性を保ちながら、迅速な開発が可能になる。
  • Node.js :
    JavaScriptの実行エンジンでありフロントエンドの多くの技術を補助するのにも利用。

React と JSX に注目

特に、UIを構築するJavaScriptライブラリであるReactに注目しました 。

Reactの大きな特徴は、UIを小さな部品（コンポーネント）に分割して再利用できる点です 。そして、このコンポーネントを作る上で不可欠なのが、JSXという書き方です。

JSXとは何か？

JSXは、JavaScriptのコードの中に、HTMLのような見た目を直接書けるようにした記法です。これにより、**見た目（HTML）と動き（JavaScript）**を一つのファイルにまとめて記述できます。

例えば、自己紹介カードをWebページに表示する際、以前はHTMLとJavaScriptの2つのファイルを編集する必要がありました。しかし、JSXを使えば、データと表示ロジックを1か所にまとめられるため、コードの管理が圧倒的に楽になります。これは、Webアプリケーションが複雑になるほど、開発のスピードと品質に大きなメリットをもたらします 。

ステップ1：JSXって何だろう？（基礎知識）

JSXを理解するために、ちょっと料理に例えてみましょう🍳

  • HTML: 料理の「完成形」や「材料リスト」です。「パンケーキが1枚、その上にバターが乗っている」というような、見た目の構造を定義します。
  • JavaScript: 料理の「レシピ」や「調理手順」です。「卵を2個割って、牛乳と混ぜて、焼く」というような、**ロジック（動き）**を担当します。

昔のWeb制作では、この「材料リスト(HTML)」と「レシピ(JavaScript)」は別々のファイルに書くのが当たり前でした。でも、Webアプリがどんどん複雑になってくると、この2つを行ったり来たりするのが大変になってきたんです。

そこで登場したのがJSXです！

JSXは、「レシピ(JavaScript)」の中に「完成形(HTML)」を直接書けるようにした魔法の書き方、だと思ってください。

// これはJSXの例です
const myPancake = (
  <div>
    <h1>今日の朝食</h1>
    <p>ふわふわパンケーキ</p>
  </div>
);

見てください！JavaScriptの変数に、HTMLそっくりのコードが直接入っていますよね。これがJSXです。

なんでJSXが必要なの？

一番のメリットは、関連するコードが1か所にまとまることです。

例えば、「『いいね！』ボタン」を作るとします。

  • ボタンの見た目（ハートの形とか） → HTMLの役割
  • ボタンがクリックされたら、数を1増やす → JavaScriptの役割
    JSXなら、この見た目とロジックを1つのファイルにまとめて書けるので、コードがどこにあるか探す手間が省け、とても管理しやすくなるんです。まさに、レシピと完成図が一体化したようなものですね！

3. 次の一歩：これから学びたいこと

今日の読書記録をアウトプットしたブログでした。「PythonでつくるWebアプリのつくり方」第1章を引き続き読み進めています。
今日の範囲は、Webアプリをつくるために必要な技術について簡潔にまとめてある節でした。『PythonでつくるWebアプリのつくり方』を読む中で、ReactやVue.js、Node.jsといったフロントエンド技術への興味がさらに高まりました。
特に、以前挫折してしまった「スクレイピングデータを可視化するWebアプリ」のテーマを、FlaskとJavaScriptを組み合わせて再挑戦したいという目標を達成するための強力なツールを知ることができたと感じています。

Web開発の世界は奥深く、覚えるべきことがたくさんあると感じています。しかし、今回の学習で得た知識と、MCPの学習を通じて身につけた全体像を捉える力を活かし、一つずつ着実にスキルを習得していきたいです。

参考文献

「Pythonでつくる Webアプリのつくり方」　著）クジラ飛行机、 杉山 陽一、遠藤 俊輔　
https://www.socym.co.jp/book/1496

Discussion