Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Node.js勉強中に出会ったJavaScriptコードたち解読

More than 1 year has passed since last update.

よく使い方を忘れるので、必要な時にサッと読み返せるように超完結にまとめておきます。

勉強中の関連記事まとめ
自分用の勉強記事をまとめた目次 ~擬似知識体系~

この記事の用途

Node.jsのフレームワークを勉強するとき、公式チュートリアルのサンプルコードをコピペしてlocalhost接続して動作確認する。その後でコードの意味を分析するためにはJavaScriptが読めなくてはならない。でも0から勉強し直すほど心の余裕もないので、出会ったコードの意味から理解していこうという企画。

Express.jsで出会った

app.js
const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

参考文献
Hello World の例

【サンプルコード解読】const

定数宣言。定数なので値の更新はできない。

const 定数名 = ;

expressのサンプルコードでは、expressという名の定数にexpressという名のjsモジュールを読み込んでいる。

const express = require('express')

ちなみに、モジュールとはシステムを構成する機能的にまとまった部分を意味するもので、つまりは外部ファイルを読み込むこと。

【サンプルコード解読】require

モジュール化されたJavaScriptファイルを読み込む。通常はjsライブラリを読み込むには<script>タグでHTMLに記述するが、サーバーサイドでjsを実行する際は<script>タグが使えない。そこで、jsファイルをモジュール化してrequireで読み込んで実行するという手法を取る。

const 定数名 = require( モジュール名 );

requireの引数にモジュール名を指定する。読み込んだモジュールが定数に格納される。jsのインスタンスを作成する感覚に近い。

【サンプルコード解読】express()

const app = express()

requireで読み込んだexpressという名のjsモジュールをappという名の定数に格納している。

【サンプルコード解読】app.get()

app.get('パス', ミドルウェア関数)

JavaScriptのget()メソッドとは、サーバーと通信して任意のデータを取得するメソッド。

定数appには定数expressの中に入れたexpressモジュールが入っていて、

参考文献
【jQuery入門】get()の使い方とデータを取得する方法!

【サンプルコード解読】'/'

このルートパスは、これが記述されているファイルからの相対パスのこと。つまりindex.jsの中で記述されている場合はhttp://localhost:3000/のこと、about.jsの中で記述されている場合はhttp://localhost:3000/sboutのことを指す。

参考文献
Node.js + ExpressでREST API開発を体験しよう[作成編]

【サンプルコード解読】(req, res)

【サンプルコード解読】=>

アロー関数。functionのリテラルを省略したもの。

var v = function(f){
  return f + 1;
};

{}を省略し、アロー関数で書き直す。

var v = (f) => 

つまりExpressのサンプルコードの

app.get('/', (req, res) => res.send('Hello World!'))

app.get(`/`, function(req, res){
  res.send("Hello World!");
}

というコードを省略しているということになる。

よって、定数appに入っている定数expressに入っているexpressモジュールのルートパスにある...
get()メソッドで取得している。

参考文献
【JavaScript】アロー関数の書き方

【サンプルコード解読】res.send('Hello World!'))

send()はサーバーにHTTP応答を送信するメソッド。bodyパラメータを渡す。

res.send([body])

リクエストに対してHello Worldという文字列を渡している。

参考文献
4.x API - res.send([body])

【サンプルコード解読】app.listen()

listenメソッドは、サーバーを待ち受け状態にしてクライアントからリクエストがあれば受け取って処理するためのもの。第一引数にはポート番号を渡す。第二引数にはコールバック関数などを渡す。

app.listen(ポート番号, コールバック関数)
app.listen(3000, () => console.log('Example app listening on port 3000!'))

参考文献
4.x API - app.listen(path, [callback])
Node.jsのスクリプトの基本を覚えよう (1/5)

【サンプルコード解読】app.jsに記述されていること意訳

app.js
const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))
  1. expressモジュールを定数expressに格納してapp.js内で利用できる状態にする。
  2. 定数appexpressモジュールを格納する。 ???
  3. console.logの内容をポート3000で待ち受ける状態にする。
oekaki-hoho-ron
理屈で絵が描けることを証明する「お絵描きホーホー論」
https://note.mu/oekaki_hoho_ron
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away