TypeScriptで作るサーバーサイドアプリケーション

株式会社Fusic

Urata Daiki

Twitter: @daiki7nohe

GitHub: @7nohe

なぜサーバーサイドをTypeScriptでやるのか？

  • 型がほしい
  • 最近のフロントエンドの流れに合わせたい
    • Vue + TypeScript
    • Angular

TypeScriptでサーバーサイドがかける良いフレームワークないか？

Nest.js

Nest

https://nestjs.com

A progressive Node.js framework for building efficient and scalable server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) heavily inspired by Angular 😻🚀

https://github.com/nestjs/nest

Angularに強く影響受けた

特徴

  • TypeScript

  • DIデザインパターン
  • Nest CLI
  • Express, Fastifyサーバーで動く

Angular

import { Injectable } from '@angular/core';
import { HEROES }     from './mock-heroes';
import { Logger }     from '../logger.service';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor(private logger: Logger) {  }

  getHeroes() {
    this.logger.log('Getting heroes ...');
    return HEROES;
  }
}

Nest

import { Injectable, Inject } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Photo } from './photo.entity';

@Injectable()
export class PhotoService {
  constructor(
    @InjectRepository(Photo)
    private readonly photoRepository: Repository<Photo>,
  ) {}

  async findAll(): Promise<Photo[]> {
    return await this.photoRepository.find();
  }
}

いろいろできる 😄

  • GraphQL

  • WebSocket

  • Microservices (Redis, MQTT, gRPCなど)

  • MVCパターン (hbsテンプレート)

ただ覚えることも多い 😅

  • Controllers
  • Providers
  • Modules
  • Middleware
  • Exception filters
  • Pipes
  • Guards
  • Interceptors
  • Custom decorators

Database

  • RDB(MySQL, PostgreSQL): TypeORM

  • MongoDB: Mongoose

DB Connection (TypeORM)

// database.provider.ts
import { createConnection } from 'typeorm';

export const databaseProviders = [
    {
        provide: 'DbConnectionToken',
        useFactory: async () => await createConnection({
            type: 'mysql',
            host: 'myhost',
            port: 3306,
            username: 'root',
            password: 'root',
            database: 'root',
            entities: [
                __dirname + '/../**/*.entity{.ts,.js}',
            ],
            synchronize: true,
        }),
    },
];

Entity (TypeORM)

// todo.entity.ts
import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Todo {
  @PrimaryGeneratedColumn()
  id: number;

  @Column({ length: 500 })
  title: string;

  @Column('text')
  description: string;

  @Column()
  archive: boolean;
}

Nest CLI

$ nest generate service users
# OR
$ nest g s users
  • class (alias: cl)
  • controller (alias: co)
  • decorator (alias: d)
  • exception (alias: e)
  • filter (alias: f)
  • gateway (alias: ga)
  • guard (alias: gu)
  • interceptor (alias: i)
  • middleware (alias: mi)
  • module (alias: mo)
  • pipe (alias: pi)
  • provider (alias: pr)
  • service (alias: s)

Docker Image🐳

$ docker pull nestjs/cli:5.3.0

まとめ

  • TypeScriptで型のある開発ができる

  • Angularライクに書ける (DIパターン, CLI)

  • 学習コストが高い (Angularをやってれば低い？)

  • まだまだ情報がない

  • Expressで動くので、そのままAngular UniversalでSSRできそう

Thank you 🙇