見出し画像
Photo by potto_de_ponto

【前提知識】フロントエンドをざっくりと。

payapaya

はじめに

こんにちは！😊
今回は、フロントエンド開発の歴史と技術について語ってみたいと思います。

この記事ではエンジニア初心者の方向けに、以下についてお話しします：

  • フロントエンドって？

  • 技術の進化の歴史

  • どうして複雑化してきたのか？

  • フロントエンドを学ぶための順序

さっそく見ていきましょう！

フロントエンドって？

「フロントエンド」とは、ユーザーが実際に目にするウェブサイトやアプリの部分を作る仕事のことです。
例えば、ボタン、フォーム、画像、そして画面全体の動きやデザイン。これらが私たちの目に映る部分であり、触れる体験そのものです。

主な役割

フロントエンド開発者は以下を担当します

  • 画面のレイアウト：HTMLでページの構造を作る

  • デザインの適用：CSSで美しい見た目やレイアウトを作成

  • 動きの追加：JavaScriptでインタラクティブな機能を実現

例えば、「ボタンを押すとダイアログが開く」や「スクロールするとアニメーションが動く」といった機能も、すべてフロントエンドの仕事なんです！

HTMLやCSS、JavaScriptといったものは、プログラミング言語だと理解してもらえればOKです。

HTML/CSS/JavaScriptを合わせたサンプルコードはこんな感じです。実際に作成される画面はサンプルコードの下に載せています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- HTML: ページの基本情報と構造を定義 -->
    <meta charset="UTF-8">
    <title>わくわくカラーチェンジャー</title>
    
    <!-- CSS: ページのスタイルを定義 -->
    <style>
        /* CSSここから */
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            transition: background-color 0.5s ease;
        }

        .container {
            text-align: center;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #colorDisplay {
            font-size: 2em;
            margin-bottom: 20px;
            color: #333;
        }

        #changeColorBtn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #changeColorBtn:hover {
            background-color: #45a049;
        }
        /* CSSここまで */
    </style>
</head>
<body>
    <!-- HTML: ページのコンテンツを定義 -->
    <div class="container">
        <h1>カラーチェンジャー</h1>
        <div id="colorDisplay">現在の色: #000000</div>
        <button id="changeColorBtn">色を変える</button>
    </div>

    <!-- JavaScript: ページの動的な動作を定義 -->
    <script>
    // JavaScriptここから
    // ボタンと色を表示する要素を取得
    const changeColorBtn = document.getElementById('changeColorBtn');
    const colorDisplay = document.getElementById('colorDisplay');

    // ボタンにクリックイベントを追加
    changeColorBtn.addEventListener('click', function() {
        // ランダムな色を生成
        const randomColor = Math.floor(Math.random()*16777215).toString(16);
        
        // 背景色を変更
        document.body.style.backgroundColor = '#' + randomColor;
        
        // 色を画面に表示
        colorDisplay.textContent = '現在の色: #' + randomColor;
    });
    // JavaScriptここまで
    </script>
</body>
</html>


実際はボタンを押すと背景色が変わるような動きをします（画像なので変わりませんが、、、）

フロントエンドの進化の歴史

フロントエンド開発の歴史をざっと見てみると、以下のような流れで進化してきました。

  1. 静的なページの時代 🛜
    最初のウェブサイトは、ただのテキストと画像が並ぶだけの静的なページでした。この頃は、HTMLだけで完結したシンプルなものでした。

  2. インタラクティブな動きの登場 💃
    1995年、JavaScriptが登場！ボタンをクリックしたり、メニューを開閉したりと、動きのあるウェブページが生まれました。
    JavaScriptが動きをつける役割でしたね。

  3. ライブラリの時代 📕
    2006年ごろ、jQueryなどのライブラリが普及。これにより、複雑な機能をシンプルなコードで実現できるようになり、開発効率が格段に向上しました。
    ※ライブラリとは、簡単にプログラミングができる便利ツールのようなものです。

  4. フレームワークの進化 🏠
    2010年代以降はReactやVue.js、Angularなどのフレームワークが登場。これらは大規模なアプリケーションの開発を可能にし、さらに進化が加速しました。
    ※ フレームワークは、ライブラリのさらに進化系です。
    　・ライブラリ＝ある機能を簡単に実装できるようにしたもの
    　・フレームワーク＝webアプリケーション全体を簡単に実装できるようにしたもの

  5. モダン技術の台頭  🛸
    現在ではTypeScriptやNext.jsなどが主流になり、より堅牢で効率的な開発が求められています。また、ユーザー体験を重視した技術が増え続けています。
    進化は止まるどころか、加速していると感じています。

なぜフロントエンドは複雑になったのか

昔はHTMLでシンプルなページを作るだけだったのに、どうしてこんなに複雑化したのでしょう？

理由を挙げると、以下のような背景があります。

  • ユーザーの期待の高まり
    速くて、見た目が美しく、操作しやすいサイトが当たり前に求められるようになったため。

  • デバイスの多様化
    PCだけでなく、スマートフォンやタブレットでも快適に動くサイトが必要になったため。

  • アプリ化の進行
    ウェブサイトが単なる情報提供から、業務アプリやゲームのような役割を持つようになり、複雑なロジックが必要になったため。

結果として、開発者が扱う技術やツールも増え続けています。
また、フロントエンド開発者が、新しいもの好きで勝手に進化していった点もあると思います。

フロントエンドを学ぶための順序

「フロントエンドを学びたいけど、どこから始めればいいのかわからない！」という方もいるのではないでしょうか？

1. 基礎をしっかり押さえる

まずは以下の3つの基礎を学びましょう

  • HTML：ウェブページの骨組みを作る言語

  • CSS：デザインやレイアウトを作る言語

  • JavaScript：動きや機能を実現する言語

簡単なページを実際に作ってみるのがおすすめです。

2. 小さなプロジェクトで練習する

学んだ知識を使って、小さなアプリを作ってみましょう。例えば

  • ToDoリスト

  • シンプルなゲーム

  • お天気アプリ

こうしたプロジェクトを通じて、実践的なスキルを磨けます！

3. フレームワークを使ってみる

基礎を身につけたら、ReactやVue.jsといったフレームワークにも挑戦してみましょう。
わかりやすさや、普及度合いから考えてReactをおすすめします

4. 最新技術を使ってみる

3と4のステップは一緒にしてしまってもいいですが、最後に最新技術を使ってみましょう。
以下がおすすめです。

  • TypeScript: JavaScriptに「型」がついた言語。JavaScriptよりも書き方に制約があり難しいが、主流になりつつある。

  • Next.js: Reactの派生系。フロントエンドだけでなくバックエンドも、このフレームワークだけで開発できる。独自のルールが多くて、ちょっと難しい。

まとめ

フロントエンド開発は、技術の進化とともに、どんどん可能性が広がっています。一見難しそうに見えるかもしれませんが、基礎を大切にして、一歩ずつ進んでいけば大丈夫です！

次からは、具体的な技術について１つずつ解説していきます！

いいなと思ったら応援しよう！