# はじめに

## はじめに

このサイト(以降、マニュアル)にご興味を持っていただき、ありがとうございます。このマニュアルではWebにおけるフロントエンド制作をこれからやりたい(あるいは既にやっている)方を対象に、基礎的な話から実践的な技術までをご紹介します。

## 対象となる読者

対象となる方はこんな方です。

* Webプログラマとして基礎的な素養をお持ちの方
  * プログラミングスクールを卒業した。
  * [Railsチュートリアル](https://railstutorial.jp/)を独学でやりきった。
  * 各種プログラミング学習サイトで、基礎的なものを一通りやってみた。
* 実務でこれからWebフロントエンド開発を始める為に、教材を探している方。

## フロントエンドエンジニアって？

さて、今回題材としている **Webフロントエンド開発** とは主にWebでの[GUI](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%82%AB%E3%83%AB%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9)を開発する業務を示します。Wikipediaの [Front-end Web開発(英)](https://en.wikipedia.org/wiki/Front-end_web_development) にはこのように定義されています。

> フロントエンドWeb開発とは、データをHTML/CSS/JavaScriptを利用してGUIへと変換する作業を指す。そうすることによってユーザはデータの編集が可能となる。(意訳)

実際には後述のSSR(Server Side Rendering)といった仕組みでサーバ側でコンテンツを生成したり、より複雑な動きを必要とする場合はSPA(Single Page Application)と呼ばれる仕組みを利用することで、Webページ(もしくはWebサイト/Webアプリケーション)を開発していきます。

## 目次

このマニュアルでは、以下の順にフロントエンド開発に必要な知識を学んでいきます。まずは基本的な仕組みをおさらいしつつ、より実践的な内容に踏み込んでいくものとします。

1. おさらい
2. 実例から作り方を学ぶ(基礎)

## おまけ

### 著者

* [株式会社ミックスソフト 齊藤 駿太](https://mix-soft.com/) - メインの執筆者です。今後このコンテンツを利用したプログラミング研修事業を考えています。執筆の経緯は [コチラ](https://mix-soft.com/news/frontend-manual_ja) にまとめました。

### マニュアルの読み方

* このマニュアルに記載されている内容はなるだけ正確な記載(あるいは関連する出典の掲載)を心がけていますが、誤記等もあるかもしれません。他の書籍・サイトなどの情報も交えてチェックするようにしてください。（お気づきの点・不明瞭な点があればご指摘ください！）
* **本編** を一通り読んだうえで、コラムについても後から読んでいただく事で理解が深まるかと思います。コラムには知らなくてもどうにかなるけど、知っておくと役立ちそうなことを書いてあります。
* 各ページの末尾にある **おまけ** には、情報の出典や、参考資料を載せます。