Webアプリケーション作成のための10ステップ　2. フロントエンド開発

# この記事を書いたきっかけ

この記事では、Webアプリケーションエンジニアに必要なスキルを具体的に解説し、その学び方を示します。

Webアプリケーション作成に必要なスキルを10個にまとめ、一つずつ学ぶ目的と手段を整理したいと思います。今回は**フロントエンド開発**について書きます。

### この記事を書いた目的
- webアプリケーションエンジニアになりたい
- そのために、自分に足りないものは何かを知りたい
- すぐに行動に移すために、学ぶ目的と手段を具体化したい
- webアプリケーションエンジニアに必要なスキルを全て把握したい
- 今、自分はなんのために、何を学んでいるのか、見失わないようにしたい
***
こちらの記事が大変参考になります。

https://qiita.com/shimada_slj/items/75f719c25670e8ba14a1#:~:text=%E3%81%84%E3%81%8D%E3%81%BE%E3%81%99%F0%9F%AB%A1-,%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA%E3%81%AE%E6%A6%82%E8%A6%81,%E4%BD%93%E9%A8%93%E3%82%92%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

https://qiita.com/teradonburi/items/43c52d7cffc318e9b1e9

# Webアプリケーション作成のための10ステップ
1. プログラミング言語の習得
1. フロントエンド開発
1. バックエンド開発
1. バージョン管理
1. 開発ツールと環境
1. セキュリティ
1. デプロイメントとクラウド
1. テスト
1. アーキテクチャの知識
1. ソフトスキル

# 2. フロントエンド開発
フロントエンド開発では、**ユーザーが直接対話する部分を作成しています**。
## フロントエンド開発とは（What）
フロントエンド開発とは、ウェブサイトやウェブアプリケーションの見た目や動作を作成する作業です。ユーザーインターフェース（UI）を構築し、ユーザーが直接操作する部分を作ります。主な技術として、HTML、CSS、JavaScriptがあります。

### ユーザーインターフェース（UI）とは
UIは、ユーザーがデジタル製品やサービスを利用する際に直接触れる部分を指します。UIにはいくつかの要素があります。
#### 視覚的要素
ボタン：クリックすることで特定のアクションをトリガーします。
アイコン：視覚的に機能やアクションを示す画像や図形。
メニュー：複数のオプションを一覧で表示し、選択肢を提供します。
テキストフィールド：ユーザーがデータを入力するためのエリア。
ラベル：テキストで情報を表示する要素。
画像や動画：情報を視覚的に伝えるメディア要素。
#### インタラクティブ要素
フォーム：ユーザーが情報を入力し、送信するための要素。
スライダー：ユーザーが値を調整するためのドラッグ可能なバー。
チェックボックス、ラジオボタン：選択肢を提供するための選択要素。
#### ナビゲーション要素
ナビゲーションバー：ウェブサイトやアプリの主要セクションへのリンクを提供するバー。
パンくずリスト：ユーザーが現在の位置を理解し、上位の階層に戻るためのナビゲーションツール。
#### フィードバック要素
モーダル：ユーザーに重要な情報を表示し、アクションを促すポップアップウィンドウ。
ツールチップ：要素にマウスをホバーした際に追加情報を表示する小さなポップアップ。
通知：イベントやアクションに関する情報を提供するメッセージ。

私たちが端末の画面で操作するときによく見るものばかりです。これらを作成するのがフロントエンド開発の役割です。
## なぜフロントエンド開発を勉強する必要があるのか？（Why）
フロントエンド開発を学ぶことでユーザーエクスペリエンス（UX）を向上させることができます。ユーザーエクスペリエンスとは、ユーザーが製品やサービスを利用する際の体験を指します。魅力的で使いやすいウェブサイトやアプリケーションを提供することができれば、ユーザーの満足度が向上し、ビジネスの成功につながります。ユーザーが再度訪れたり、製品やサービスを他人に推薦したりするきっかけとなります。

### ユーザーエクスペリエンス（UX）を向上させるにはどこに注目したらいい？
**1. 使いやすい**
- ユーザーが簡単に操作できて、目的のタスクを迅速に完了できるようにする
- 直感的なナビゲーションとUIにして、ユーザーを混乱させないようにする

**2. 誰でも使える**
- すべてのユーザーが製品やサービスを利用できるようにする。視覚障害者や運動障害者も含め、誰でも使いやすいデザインを目指す

**3. かっこいいデザイン**
- 視覚的に魅力的で、ブランドイメージに合ったデザインを目指す
- 一貫したデザインと色使いにして、ユーザーが安心して使えようにする

**4. サクサク動く**
- ユーザーの操作に対するシステムの反応速度を高める
- ページの読み込みを速め、操作に対して即座にフィードバックを提供するようにする

**5. 双方向のやり取り**
- ユーザーとアプリケーションの間で双方向のやり取りができるようにする
- 例えば、フォームに入力するとすぐに確認メッセージが表示される、ボタンをクリックするとアニメーションが動作するなど、ユーザーの操作に対して即座に応答がある仕組みを作る。その結果、ユーザーはアプリケーションと対話している感覚を持つことができる。

### どうやってユーザーエクスペリエンス（UX）の高いユーザーインターフェース（UI）を作成する？
**1. 視覚的なデザインとレイアウトの構築**
HTMLとCSSを使って、ウェブページの構造とデザインを作成します。

**2. 動的な機能の追加**
JavaScriptを使って、ユーザーの入力に応じて動的にコンテンツを変更したり、インタラクティブ（双方向）な機能を追加します。

**3. ユーザーインターフェースの最適化**
フレームワークやライブラリを使うことで、効率的に高品質なUIを開発できます。フレームワークは開発時間を短縮し、保守性を向上させることができる優れものです。

## どのようにフロントエンド開発を習得していけばいいのか？（How）
### HTMLの習得
**基本文法**： 公式ドキュメント（[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web)など）や入門書を使用して、HTMLの基本文法を学びます。
**練習問題**： 簡単なウェブページを作成しながら練習します。

### CSSの習得
**基本文法**: CSSの公式ドキュメント（[CSSリファレンス](https://developer.mozilla.org/ja/docs/Web/CSS/Reference)）や入門書を使用して、CSSの基本的な使い方を学びます。
**練習問題**: レイアウトの練習をします。

### JavaScriptの習得
**基本文法**: JavaScriptの公式ドキュメント（[JavaScriptリファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)）や入門書を使用して、JavaScriptの基本文法を学びます。
**練習問題**: [Codecademy](https://www.codecademy.com/)や[FreeCodeCamp](https://www.freecodecamp.org/)での演習問題に取り組みます。

### フロントエンドフレームワーク/ライブラリの習得
**React**: [公式ドキュメント](https://ja.react.dev/)や[チュートリアル](https://ja.react.dev/blog/2023/03/16/introducing-react-dev)を使用して、Reactの基本を学びます。
**Vue.js**: [公式ガイド](https://ja.vuejs.org/guide/introduction)や[Vue Mastery](https://www.vuemastery.com/)のチュートリアルを使用して、Vue.jsを学びます。
**Angular**: [公式ドキュメント](https://angular.jp/)や[オンラインチュートリアル](https://angular.jp/tutorial/first-app)を使用して、Angularを学びます。

#### プロジェクトを通じた実践
小さなプロジェクトを作成し、学んだ技術を実際に使用してみます。例えば、簡単なToDoリストアプリやポートフォリオサイトを作成するといいと思います。

## 実際に勉強したこと（Try）
**HTMLとCSS**
- Progate([HTML & CSSコース](https://prog-8.com/courses/html))で勉強した後、練習として簡単なポートフォリオサイトやブログのレイアウトを作成した。
- paizaの講義（[HTML/CSS入門編](https://paiza.jp/works/html/primer)）を視聴した。
- 書籍を見ながらWebアプリを作成している間に、だんだんわかるようになっていった。

**JavaScript**
- paizaの講義([JavaScript入門講座一覧](https://paiza.jp/works/search_courses/2205))でJavaScriptの基本文法を学んだ
- Webアプリの作成時、JavaScript（jQuery）のデザイン本を参考にしてUIを作成した（書籍：[動くWebデザインアイディア帳](https://www.amazon.co.jp/%E5%8B%95%E3%81%8FWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%B8%B3-%E4%B9%85%E4%BF%9D%E7%94%B0%E6%B6%BC%E5%AD%90/dp/4802612281/ref=asc_df_4802612281/?hvpos=&hvpone=&hvptwo=&hvdvcmdl=&hvlocint=&psc=1&mcid=8395ea3a28d233b0aff774dd34e47e78)）

**フロントエンドフレームワーク**
- 書籍を参考に少しReactに触れてみただけ（書籍：[実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン](https://www.amazon.co.jp/%E5%AE%9F%E8%A3%85%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%95%E3%83%AB%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AFWeb%E9%96%8B%E7%99%BA-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E8%A6%96%E9%87%8E%E3%81%A8%E7%9F%A5%E8%AD%98%E3%82%92%E5%BA%83%E3%81%92%E3%82%8B%E3%80%8C%E4%B8%80%E6%B0%97%E9%80%9A%E8%B2%AB%E3%80%8D%E5%9E%8B%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%83%88%E3%83%BC%E3%83%B3/dp/4798179337)）

# まとめ
フロントエンド開発は、ユーザーインターフェースを構築するための重要なスキルです。HTML、CSS、JavaScriptの基本をしっかりと学び、フレームワークを活用することで魅力的なウェブアプリケーションを作成することができます。ただ、フロントエンドエンジニアを目指しているわけではないのなら、HTML、CSSの学習にあまり時間をかけなくてもいいかもしれません。

それでも、基本的なスキルを身につけておくことで、バックエンド開発との連携がスムーズになり、全体的な開発への理解が深まります。