JavaScriptだけで
webアプリ構築するための基本

自己紹介

そもそもWebアプリケーショとは?

http://ebisu-js.com

webアプリケーションを開発するとは何を開発する事か

1. HTTP通信の処理部分(リクエストとレスポンス)
 リクエスト:ブラウザからの問い合わせ
 レスポンス:リクエストへ返す返答(HTMLなど

2. ブラウザ側での見た目と処理部分
 見た目:HTML、CSSなどの描画
 処理:テキスト入力やクリック、通信など

HTTP通信

JavaScriptだけで開発するとは?

HTTP通信の処理

バックエンド(サーバー側)

フロントエンド(ブラウザ側)

ブラウザ側での見た目と処理

HTML
(CSS)
(Image)
etc.

JavaScript

button

input
etc.

event 処理
click event
change event
etc.

HTTP通信処理

描画処理
クリックや通信結果を見た目に反映など

例えば、ブラウザのURLバーからhttp://ebisu-js.com へのアクセス

→ HTTP GET通信:該当ページ(HTML)のファイルをレスポンスとして返す

例えば、http://ebisu-js.com/contact から問い合わせフォーム内容を送信

→ HTTP POST通信:
フォーム内容をDBへ保存したり、受付結果を返す

JavaScriptだけで開発するとは?

バックエンド(サーバー側)

フロントエンド(ブラウザ側)

(必要なければJSやライブラリは必要なし)

(少なからず1つ以上のHTMLは必要)

JSライブラリやフレームワークを使う場合

(必要に応じてライブラリなど)

必要となる知識等

  • Node.jsまわりの基礎
    • Node.js
      • JSファイル実行
      • 他のファイル読み込み
      • ブラウザでのJSとの違い
    • NPM
      • CLIとサービス
      • package.json
  • webアプリ構築のための基礎
    • HTTP通信処理
      • ブラウザへのファイル送信
      • DB
    • デプロイ
      • 自前用意
      • サービスの利用
  • その他
    • ESNext
    • テスト
    • バンドラー
    • リンター
    • ビューティファイヤー
    • エディター
    • ライブラリ
    • etc.

Thank you

Made with Slides.com