構築

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

nvm list
nvm install 16.10.1
npm -v

npm install -g yarn
yarn -v

npm init -y

npm install --save-dev @babel/core @babel/cli @babel/preset-env

touch .babelrc

{
  "presets": ["@babel/preset-env"]
}

{
  "scripts": {
    "build": "babel src -d dist"
  }
}

// テンプレートリテラル
const name = 'John Doe';
const message = `Hello, ${name}!`;

// アロー関数
const add = (x, y) => x + y;

// デフォルトパラメーター
function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

// 分割代入
const person = {
  firstName: 'John',
  lastName: 'Doe'
};

const { firstName, lastName } = person;

// スプレッド演算子
const arr = [1, 2, 3];
const arrCopy = [...arr];

// クラス
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

npm run build

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
// テンプレートリテラル
var name = 'John Doe';
var message = "Hello, ".concat(name, "!");

// アロー関数
var add = function add(x, y) {
  return x + y;
};

// デフォルトパラメーター
function greet() {
  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'World';
  console.log("Hello, ".concat(name, "!"));
}

// 分割代入
var person = {
  firstName: 'John',
  lastName: 'Doe'
};
var firstName = person.firstName,
  lastName = person.lastName;

// スプレッド演算子
var arr = [1, 2, 3];
var arrCopy = [].concat(arr);

// クラス
var Person = /*#__PURE__*/function () {
  function Person(firstName, lastName) {
    _classCallCheck(this, Person);
    this.firstName = firstName;
    this.lastName = lastName;
  }
  _createClass(Person, [{
    key: "getFullName",
    value: function getFullName() {
      return "".concat(this.firstName, " ").concat(this.lastName);
    }
  }]);
  return Person;
}();

npm install --save-dev webpack webpack-cli
npx webpack --version

touch webpack.config.js

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
};

{
  "scripts": {
    "build": "webpack"
  }
}

function greeting(name) {
  return 'Hello ' + name;
}

module.exports = greeting;

var greeting = require('./sample_es5');

console.log(greeting('ES5'));

npm run build

node ./dist/bundle.js

class Greeting {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(`Hello ${this.name}`);
  }
}

export default Greeting;

var greeting = require('./sample_es5');
console.log(greeting('ES5'));

var greet = require('./sample_es6');
var g = new greet.default('ES6');
g.say();

npm run build

node ./dist/bundle.js

npm install --save-dev babel-loader

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
  target: ['web', 'es5'],
};

npm run build

node ./dist/bundle.js

npm install --save-dev typescript

npx tsc --init

npm install --save-dev @babel/preset-typescript @babel/plugin-proposal-class-properties typescript

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

class Greeting {
  constructor(public name: string) {}
  say() {
    console.log(`Hello ${this.name}`);
  }
}

import { Greeting } from "./sample";

const greeting = new Greeting("TypeScript");
greeting.say();

npx babel src --extensions '.ts,.tsx' --out-dir dist

node ./dist/index.js

npm install --save-dev ts-loader

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ],
  },
  target: ['web', 'es5'],
};

npm run build

node ./dist/bundle.js

npm install --save-dev ts-node

npx ts-node src/index.ts

npm install --save-dev webpack-dev-server

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

npx webpack serve

npm install --save-dev html-webpack-plugin

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>App</title>
  </head>
  <body>
    <h1>アプリケーション</h1>
  </body>
</html>

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...他のWebpack設定

  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
};

{
  // ...他の設定
  "scripts": {
    "start": "webpack server --config ./webpack.config.js --open"
  }
}

npm start

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const env = process.env.NODE_ENV || "development";
const isDevelopment = env === "development";

module.exports = {
  mode: env,
  devtool: isDevelopment ? "source-map" : false,

{
  "compilerOptions": {
    "sourceMap": true
  }
}

npm install --save-dev jest

{
  "scripts": {
    "test": "jest"
  }
}

...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts"
    ],
    "testMatch": [
      "**/**/*.test.js",
      "**/**/*.test.ts"
    ]
  }
}

npm install --save-dev @types/jest ts-jest

"module": "es2020",

export function sum(a, b) {
  return a + b;
}

import { sum } from './app.js';

test('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);
  expect(result).toBe(3);
});

export function sum(a: number, b: number): number {
  return a + b;
}

import { sum } from './app';

test('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);
  expect(result).toBe(3);
});

npm test

    "test": "jest --coverage"

npm install --save-dev prettier

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

npx prettier --write .

{
  "scripts": {
    "format": "prettier --write ."
  }
}

npm install --save-dev @k2works/full-stack-lab

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>App</title>
  </head>
  <body>
    <h1>アプリケーション</h1>
    <div id="app"></div>
    <div id="app-dev"></div>
  </body>
</html>

console.log('app.js: loaded');
export class App {
  constructor() {
    console.log('App initialized');
  }
}

export function sum(a, b) {
  return a + b;
}

import { App } from './src/app.js';
const app = new App();

import { render } from '@k2works/full-stack-lab';
const contents = `
## 機能名
## 仕様
## TODOリスト
`;

const uml = `
abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection
List <|-- AbstractList
Collection <|-- AbstractCollection
Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList
class ArrayList {
  Object[] elementData
  size()
}
enum TimeUnit {
  DAYS
  HOURS
  MINUTES
}
annotation SuppressWarnings
`;

const erd = `
' hide the spot
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
entity "Entity01" as e01 {
  *e1_id : number <<generated>>
  --
  *name : text
  description : text
}
entity "Entity02" as e02 {
  *e2_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}
entity "Entity03" as e03 {
  *e3_id : number <<generated>>
  --
  e1_id : number <<FK>>
  other_details : text
}
e01 ||..o{ e02
e01 |o..o{ e03
`;
render({ contents, uml, erd });

...
  entry: './index.js',
...

npm start