Web開発覚え書き

はじめに

今時のWeb開発はわからないことだらけなので、調べたことをまとめた

2016年にJavaScriptを学ぶとこんな感じ – Medium Japan – Medium

まさにこんな感じ

目次

  1. SourceMapとは
  2. npxとは
  3. npm run
  4. expressとwebpack-dev-server
  5. ES6とかES2015とは
  6. CommonJSとは
  7. importとrequire
  8. ES Moduleとは

1. SourceMapとは

// webpack.config.js
module.exports = {
  ...
  devtool: 'inline-source-map'
}
// tsconfig.json
{
  "compilerOptions": {
    ...
    "sourceMap": true
  }
}
  • 上のようにすると使える
参照

SourceMapとは何なのか - コンパイラかく語りき

Development

2. npxとは

  • ローカルのnpmパッケージを実行するコマンド
  • 昔はnpx webpackのように楽に実行できなかったらしい
参照

npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう - Qiita

3. npm run

  • npm run-scriptの略
  • package.jsonのscriptsに書いてあるコマンドを実行する
// package.json
{
  ...
  "scripts": {
    "echo": "echo 'hoge'"
  }
}
  • 上のはnpm run echoecho hogeが実行される
  • node_modules/.binにパスが通っているので、モジュールを使うときは"build": "webpack"のようにする
参照

run-script | npm Documentation

4. expressとwebpack-dev-server

  • 結論としてはexpress使う
  • webpack-dev-serverはhot-redeployできるのが利点らしい
  • hot-redeployは自動リロードみたいなもん
  • そもそもwebpack-dev-serverがexpress使ってるらしい
  • webpack-dev-middlewareやwebpack-hot-middlewareを代わりに使えばいいというのもあった
  • hot-redeployするならnodemon入れればよさそう
参照

node.js - Do I need webpack-dev-server if I am using a node server like express - Stack Overflow

node.js - Running a node express server using webpack-dev-server - Stack Overflow

5. ES6とかES2015とは

仕様 実装されたもの
ECMAScript javascript
参照

ES2015(ES6) 入門 - Qiita

先取り!未来のJavaScript - ECMAScriptとJavaScriptの関係 | CodeGrid

6. CommonJSとは

  • サーバーサイドの標準API仕様だったもの
  • javascriptの機能がしょぼすぎたので作られた
  • しかし今後はes6がモジュールを扱えるようになるので、あんまり見なくなっていくと思われる
仕様 実装されたもの
CommonJS Node.js
  • Node.jsはもうCommonJSのことは眼中にないみたい
参照

JavaScriptのモジュールシステムに関するまとめ - Qiita

JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog

Node.jsとCommonJSについて - 自分の感受性くらい

7. importとrequire

  • 結論としてはimportつかう
CommonJS es6
require import
  • es6までは標準でモジュール読み込む方法がなかったらしい
  • 現時点ではまだrequireは広くつかわれてる
参照

importとrequireどちらを使おう…。 - もっく日記

ES Modules と Node.js について - from scratch

Node.jsのES Modulesサポートの現状確認と備え - teppeis blog

8. ES Moduleとは

  • es6から使えるimportでモジュールを読み込める機能
  • exportを書かないと他のファイルから参照できない
// hoge.js
export function echoHoge() {
  console.log("hoge");
}
// main.js
import { hoge } from './hoge.js';

echoHoge();
参照

ブラウザで覚えるES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA

ES Modules(import/export)ことはじめ