LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

@n0bisuke(Sugawara Nobisuke)

ジーズアカデミー Node.js授業 1日目

Last updated at Posted at 2017-01-05
作成: Lab2期 2016/12/9
更新: Lab3期 2017/7/20

授業チュートリアル

  • 基本記事ベースです
  • 事前に公開できる場合はします
  • 毎回、宿題を考えてくるので宿題をやってみましょう
  • わからないことは https://www.facebook.com/sugawara.ryousuke まで(基本G's生限定)

自己紹介

のびすけ

関連資料

Node.jsの調べ方

基本

誰を追えばいいのか

まずは会長情報をウォッチしよう

その他情報の調べ方

その他、技術調べるときによく使うサイト

Webの仕組み

- Webシステム
- クライアントとサーバー
- IPアドレス
- HTTP/HTTPS/HTTP2
- GET/POST

Node.jsとは


- c10k問題
- ノンブロッキングI/O
-

環境構築

インストールとハローワールド

curl -L git.io/nodebrew | perl - setup
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> .bash_profile
source .bash_profile

最新版インストール

最新版の確認 https://nodejs.org/ja/

現時点2017/

nodebrew install-binary 8.2.0
nodebrew use 8.2.0
node -v
v8.2.0

はじめかた

npm init -y
app.js
'use strict'

const http = require('http');
const PORT = 3000;

http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
  res.end('Hello Node.js\n');
}).listen(PORT);

console.log(`Server running at http://localhost:${PORT}`);

終わるときはcontroll+c

たぶんこの辺から午後

ルーティングについて

app.js
'use strict'

const http = require('http');
const PORT = 3000;

console.log("こんにちは");

http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});

  console.log(req.url);
  if(req.url === '/kodama'){
    res.end('せかいをかえるぎーくに\n');
  }else if(req.url === '/kuribayashi'){
    res.end('JSさいこー！\n');
  }else{
    res.end('Hello Node.js\n');
  }

}).listen(PORT);

console.log(`Server running at http://localhost:${PORT}`);

変数、演算子、制御構造

npmについて

npm init --yes

npm i request

フォーム利用

ハンズオン

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>ログイン</title>
</head>
<body>
    <form method="post" action="/post">
        <p>ユーザID:<input type="text" name="userid"></p>
        <p>パスワード:<input type="password" name="password"></p>
        <p><input type="submit"></p>
    </form>
</body>
</html>
  • フォームを表示させた時点のコード
app.js
'use strict'

const http = require('http');
const PORT = 3000;

http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
  res.end(`<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>ログイン</title>
</head>
<body>
    <form method="post" action="/post">
        <p>ユーザID:<input type="text" name="userid"></p>
        <p>パスワード:<input type="password" name="password"></p>
        <p><input type="submit"></p>
    </form>
</body>
</html>`);
}).listen(PORT);

console.log(`Server running at http://localhost:${PORT}`);
  • server.js
server.js
'use strict'

const http = require('http');
const PORT = 9999;

http.createServer((req, res) => {
    console.log(req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('hello');
}).listen(PORT);

console.log(`Server running at http://localhost:${PORT}`);

宿題

ログイン用のテキストフォームに情報をいれて送信すると、サーバー側で情報を受け取って表示ができる状態にしましょう！

expressをつかっても使わなくてもok

アンケートです！

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin