はじめに

こんにちは、梅雨です。

この記事では

バックエンドの開発を始めたいけど何から始めたらいいか分からない
なんとなくバックエンドの開発をしているけど、もう少し体系的に学びたい

といった人たちに向けて、TypeScript を用いてバックエンドを開発する流れを詳しく解説していこうと思います。

加えて、コードの書き方だけではなく Web の仕組みについても詳しく説明していきます。

バックエンドとは？

そもそも「バックエンド」とは何を指すのでしょうか？

我々が日々使っているパソコンやスマートフォンのような電子端末は年々進化を遂げており、今となっては万能なデバイスとして生活を潤してくれています。

しかし、電波の悪い地下などに入ってしまうとなかなかネットに繋がらずイライラした経験は皆さんも一度はあると思います。

これはパソコンやスマートフォンが「Web サーバ」と呼ばれるコンピュータと通信をしていることに由来しています。

この「Web サーバ」が、バックエンドの中心的な役割を担っています。

これらの Web サーバとは反対に、我々の手元にあるパソコンやスマートフォンのことを「クライアント」と呼びます。

バックエンドの具体的な役割は主に

クライアントからのリクエストを受け取る
必要なロジックを実行
クライアントにレスポンスを返却する

となっています。

このように、Web アプリケーションを構築する上で"裏方"のような働きをしてくれるのがバックエンドです。

Node.js とは？

それでは次に、JavaScript のランタイムである Node.js について説明していこうと思います。

そもそもランタイムとはなんでしょうか？

ランタイムはもともと、プログラムを実行している時間のことを指します。

プログラムはプログラミング言語によって記述されているため、これらのプログラムをコンピュータで実行するためにはそれぞれの言語ごとに異なるシステムが必要となります。

JavaScript で記述されたプログラムを実行するためには、JavaScript のランタイムシステムが必要であり、一般的にこのシステムのことを単に「ランタイム」と呼びます。

要するに、JavaScript を実行するためには Node.js が必要ということです。

JavaScript のランタイムには Deno や Bun などといったものも存在し、 Node.js がないと必ずしも JavaScript を実行できないというわけではないです。
とはいえ、Node.js が圧倒的なシェアを占めているため、Node.js をマスターしてしまえば困ることはありません。

Node.js はよくバックエンドのライブラリやフレームワークとして誤認されることがありますが、正式にはランタイムであることをぜひ覚えておきましょう。

Express とは？

先ほど述べたように、Node.js さえあれば Web サーバ（＝バックエンドサーバ）を開発することができます。

しかし、Node.js のみでバックエンドの開発を行うのはかなり大変です。

そこで、Node.js でのバックエンド開発を手助けしてくれるのがフレームワークです。

Node.js のフレームワークには

Express
Fastify
Koa.js
NestJS

などいくつか存在しますが、本記事では特に人気のフレームワークであるExpressを用いてバックエンドの開発を行なっていきます。

TypeScipt とは？

ここまで散々 JavaScript の話をしてきましたが、本記事では TypeScript という言語を用いて開発を進めていきます。

TypeScript は JavaScript の兄弟のような言語で、ほとんど同じ文法でプログラムを書くことができます。唯一異なる点は、TypeScript には「型」というものが存在するということです。

型の存在により、エラーを事前に検出したり、間違いに気付きやすくしたりすることができます。

TypeScript はほとんど JavaScript の上位互換といっても差し支えないので、開発では積極的に導入していきましょう。

バックエンドの開発に TypeScript を導入することに反対する人たちも一定数いますが、業務でバックエンドの開発を行う以外の場合は基本的に関係ないので気にしなくて大丈夫です。

ここまでをしっかり読んできた方は、Node.js は JavaScript のランタイムであり、TypeScript は実行できないのではないか？と疑問を持ったかもしれません。

これは正解です。

ではどのように TypeScript で書かれたプログラムを実行すれば良いのでしょうか？

ここで出てくるのがトランスパイルです。

トランスパイルとは、一般的にあるプログラミング言語を別の言語に変換することを指します。
今回の場合は、TypeScript で書かれたコードを JavaScript のコードに変換することを指します。

トランスパイルを実際に体験する

それでは、実際にコードを書いてこれまでの知識をより堅固なものにしていきましょう。

まずは任意のディレクトリで、プロジェクト用のフォルダを作成し、そのフォルダに移動します。

$ mkdir express-typescript-handson
$ cd express-typescript-handson

次に TypeScript のソースファイルindex.tsを作成します。

$ touch index.ts

index.tsには次のようなコードを書きます。

index.ts

const username = "Meiyu";
const age = 23;

const createSelfIntroduction = (name: string, age: number) => {
  return `My name is ${name}, I'm ${age} years old.`;
};

const selfIntroduction = createSelfIntroduction(username, age);

console.log(selfIntroduction);

この TypeScript のコードを Node.js で実行してみましょう。

$ node index.ts

すると、以下のようなエラーが発生するはずです。

const createSelfIntroduction = (name: string, age: number) => {
                                    ^

SyntaxError: Unexpected token ':'
    at wrapSafe (node:internal/modules/cjs/loader:1497:18)
    at Module._compile (node:internal/modules/cjs/loader:1519:20)
    at Object..js (node:internal/modules/cjs/loader:1709:10)
    at Module.load (node:internal/modules/cjs/loader:1315:32)
    at Function._load (node:internal/modules/cjs/loader:1125:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:216:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
    at node:internal/main/run_main_module:36:49

Node.js v23.1.0

これは、name の後ろにある string 型を JavaScript では扱うことができないために起こるエラーです。

さきほども述べた通り、Node.js は JavaScript のランタイムであり、TypeScript を実行することはできないからです。

それでは、トランスパイルを行なって TypeScript のコードを JavaScript のコードに変換していきましょう。

トランスパイルにはtscコマンドを用います。

$ tsc index.ts

Unknown command: tscとなって tsc コマンドが実行できない場合は

$ npm i -g typescript

を実行して環境に TypeScript をインストールする必要があります。

トランスパイルに成功すると、index.jsがフォルダ内にできているはずです。中身を確認してみましょう。

index.js

var username = "Meiyu";
var age = 23;
var createSelfIntroduction = function (name, age) {
    return "My name is ".concat(name, ", I'm ").concat(age, " years old.");
};
var selfIntroduction = createSelfIntroduction(username, age);
console.log(selfIntroduction);

先ほど書いたコードとほとんど変わりませんが、一部の型が無くなったり関数の書き方が少し変わったりしているのがわかります。

もう一度 Node.js で、今度は新しくできたindex.jsを実行してみましょう。
今度はエラーが起きずに実行され、自己紹介文が出力されます。

$ node index.js
My name is Meiyu, I'm 23 years old.

それでは、ageを以下のように23から"23"に変更するとどうなるでしょうか？

index.ts

const username = "Meiyu";
const age = "23";

const createSelfIntroduction = (name: string, age: number) => {
  return `My name is ${name}, I'm ${age} years old.`;
};

const selfIntroduction = createSelfIntroduction(username, age);

console.log(selfIntroduction);

画像のように、createSelfIntroductionを実行する段階でエラーが表示されるはずです。

また、tsc index.tsでトランスパイルを実行してもエラーが起きるはずです。

$ tsc index.ts
index.ts:8:59 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

8 const selfIntroduction = createSelfIntroduction(username, age);
                                                            ~~~


Found 1 error in index.ts:8

このように、TypeScript では開発中にコードの誤りに気付くことができます。

以上が TypeScript で開発を行い、JavaScript にトランパイルして Node.js で実行するための一連の流れとなります。

おわりに

この記事では、バックエンドとは何かから始まり、TypeScript でバックエンド開発を行うメリットについて学び、最終的には TypeScript のコードを Node.js で実行するところまで行いました。

次の記事ではいよいよバックエンドの開発に入っていきます。

分からないところや間違っていると思う部分があった方は、是非コメントしていただければと思います。

次回の記事