| 前 | 次 |
|---|---|
| part1 | 未定 |
注意
この記事は進捗報告のようなものです。アプリが完成するかは未定です。
記事は見栄えがよくなるように書いていますが、実際の作業には手戻りもあったりしたので、コミット履歴とちょっと食い違ったりします。
設計の続き
前回設計した仕様を実現するために、どういう構成にすればいいか考えてみました。
- プラットフォーム: Node.js
- フロントエンド: React, Bootstrap
- バックエンド: Express, MySQL
プラットフォームはJavaScriptの経験が活かせるNode.jsにしました。実はJavaScriptの経験があると言ってもNode.jsで開発するのはこれが初めてです。お手柔らかにお願いします。
フロントエンドはReactとBootstrapにしました。フレームワークをReactとVueで迷いましたが、シェアが多いReactに決めました。潰しが効きそうなので。レイアウトは楽な方がいいのでBootstrapを付けます。
バックエンドにサーバとしてExpress、データベースとしてMySQLを採用します。MySQLは授業で使ったので、Expressはちょっとググって良さそうだったので決めました。
開発開始
それでは開発をはじめます。とりあえず、サーバを立てるところから。
| 目標 | サーバが動くこと |
|---|
ExpressとTypeScriptをインストール
https://expressjs.com/ja/starter/hello-world.html
https://qiita.com/pochopocho13/items/79a4735031ce11a91df7
上記を参考にしました。
# リポジトリを作成$ mkdir zaiko
$ cd zaiko
$ git init
$ git remote add
$ npm init # entrypointはapp.jsに指定# Expressをインストール$ npm i --save express
# TypeScriptをインストール$ npm i --save-dev typescript @types/node ts-node
ここで、$ npm run tscでコンパイルできるように、package.jsonに以下を追加しておきます。
"scripts":{"tsc":"tsc"}# TypeScript初期化$ npm run tsc ----init$ npm run tsc ---v
Version 3.8.3
helloworldプログラムを書く
ようやくプログラムまでたどり着きました。富士山で言うなら山梨県の県境です。
importexpressfrom'express'constapp:express.Express=express()app.get("/",(req,res)=>res.send("Hello, world!"))app.listen(3000,()=>console.log("Example app listening on port 3000!"))TypeScriptはいつかやってみたいと思っていまいた。ようやくできました。
初ビルド＆実行
では実行してみます。
$ npm run tsc
$ node app.js
Example app listening on port 3000!
http://localhost:3000/にアクセスしてみると、Hello, world!と表示されました。