Webフロントエンド開発 🔰(WIP)
  • はじめに
  • 本編
    • おさらい
      • Webページが表示されるまで(と業務の境目)
      • Webページを構成する要素
    • 実例から作り方を学ぶ(基礎)
      • Button(ボタン)
      • Modal(モーダル)
      • Tab(タブ)
    • AJAX通信とUI更新
    • 入力フォーム(Form)の実装
      • FormタグのSubmit機能を使った送信
      • Formの各入力要素からJSでデータを取得したうえで、AJAXを使って送信
      • 高度なFormの実装(データバインディング)
    • アプリを作る(基礎)
      • Counter(カウンター) App
      • Todo(タスク管理) App
  • コラム
    • SSR vs SPA
    • MVVMとは
      • MVVMの実装例
    • SSR vs Ajax(+ PushState)
    • 開発者ツールの基本
    • Formatting
GitBook提供
このページ内
  • はじめに
  • 対象となる読者
  • フロントエンドエンジニアって?
  • 目次
  • おまけ
  • 著者
  • マニュアルの読み方

役に立ちましたか?

はじめに

次へおさらい

最終更新 5 年前

役に立ちましたか?

はじめに

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

対象となる読者

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

  • Webプログラマとして基礎的な素養をお持ちの方

    • プログラミングスクールを卒業した。

    • を独学でやりきった。

    • 各種プログラミング学習サイトで、基礎的なものを一通りやってみた。

  • 実務でこれからWebフロントエンド開発を始める為に、教材を探している方。

フロントエンドエンジニアって?

さて、今回題材としている Webフロントエンド開発 とは主にWebでのを開発する業務を示します。Wikipediaの にはこのように定義されています。

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

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

目次

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

  1. おさらい

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

おまけ

著者

マニュアルの読み方

  • このマニュアルに記載されている内容はなるだけ正確な記載(あるいは関連する出典の掲載)を心がけていますが、誤記等もあるかもしれません。他の書籍・サイトなどの情報も交えてチェックするようにしてください。(お気づきの点・不明瞭な点があればご指摘ください!)

  • 本編 を一通り読んだうえで、コラムについても後から読んでいただく事で理解が深まるかと思います。コラムには知らなくてもどうにかなるけど、知っておくと役立ちそうなことを書いてあります。

  • 各ページの末尾にある おまけ には、情報の出典や、参考資料を載せます。

- メインの執筆者です。今後このコンテンツを利用したプログラミング研修事業を考えています。執筆の経緯は にまとめました。

Railsチュートリアル
GUI
Front-end Web開発(英)
株式会社ミックスソフト 齊藤 駿太
コチラ