今回はNode.js Express QueryString（クエリストリング）の取得方法についてエントリーします。
req.query.xxx（xxxはリクエスト時に指定したパラメータ名）で取得できます。
http://localhost:xxxx/sample?num=10とした場合res.json(req.query.num);のeq.query.numには文字列の10が渡ってきます。
const express = require("express");
const app = express();
const PORT = process.env.PORT || 5000;
app.get("/sample", (req, res) => {
res.json(req.query.num);
});
app.listen(PORT, () => {
console.log(`Listening *: ${PORT}`);
});
Node.js Expressでパスパラメータの取得方法
http://localhost:5000/sample/123でパスパラメータの123を取得したい場合"/sample/:id"でエンドポイントを定義しreq.params.idで取得できる。また123は文字列なのでabc,1b3なども取得できる。ただし/sample/123/abcのように更に追加された場合はエラーとなる。
const express = require("express");
const app = express();
const PORT = process.env.PORT || 5000;
app.get("/sample/:id", (req, res) => {
res.json(req.params.id);
});
app.listen(PORT, () => {
console.log(`Listening *: ${PORT}`);
});
/sample/:idと違い名前付きオプションとなりhttp://localhost:5000/sample,http://localhost:5000/sample/も追加でundefinedで取得できる。
const express = require("express");
const app = express();
const PORT = process.env.PORT || 5000;
app.get("/sample/:id?", (req, res) => {
res.json(req.params.id);
});
app.listen(PORT, () => {
console.log(`Listening *: ${PORT}`);
});
"/sample/:id"に加えて/sample/123/abcのように更に追加されたケースでも取得できる（この場合は123が取得される）
const express = require("express");
const app = express();
const PORT = process.env.PORT || 5000;
app.get("/sample/:id*", (req, res) => {
res.json(req.params.id);
});
app.listen(PORT, () => {
console.log(`Listening *: ${PORT}`);
});
"/sample/:id(\\d+)"で数字のみ許可できる
const express = require("express");
const app = express();
const PORT = process.env.PORT || 5000;
app.get("/sample/:id(\\d+)", (req, res) => {
res.json(req.params.id);
});
app.listen(PORT, () => {
console.log(`Listening *: ${PORT}`);
});
今回はTypeScript + Express + ESLintの導入をしたので備忘録としてエントリーしたいと思います。
開発環境のみで利用するためnpmの場合は--save-dev、yarnの場合は-Dのオプションをつけます
npmの場合
npm install --save-dev eslint
yarnの場合
yarn add -D eslint
npx eslint --init
以下で設定しました
You can also run this command directly using 'npm init @eslint/config'. ✔ How would you like to use ESLint? · syntax ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · none ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · browser, node ✔ What format do you want your config file to be in? · JavaScript The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest ✔ Would you like to install them now? · No / Yes ✔ Which package manager do you want to use? · npm Installing @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest
カレントディレクトリに.eslintrc.jsが作成されていれば成功です。以下は作成されたものです。
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
}
}
ESLint公式のルールを的時追記していきます。
自分の環境では./src配下に./src/apiなど複数のディレクトリでアプリを配置しているためpackage.jsonのscript内に以下で設定しました。
"scripts": {
他の設定,
"lint": "eslint src/**/**/*"
},
APIを使わずにHTML「aタグ」で作成したリンクでGoogleカレンダーに予定を入れる方法
イベントページを作成した際にAPIを使わずにHTML「aタグ」のリンクで予定を入れれるのは便利なので是非マスターしましょう。
上の例をクリックすると以下のように自分のGoogleカレンダーの予定の登録画面になると思います
<a href="http://www.google.com/calendar/event?action=TEMPLATE&text=title-text&dates=20220101/20220102"target="_blank">正月の予定を登録</a>
http://www.google.com/calendar/event?action=TEMPLATE&text=title-text&dates=20220101/20220102を分解して解説していきます。
http://www.google.com/calendar/eventまず最初にこちらを指定します。このURLは固定です。このURLにクエリストリングでパラメータを追加していきます。
パラメータは以下になります。
| パラメーター | 必須 / オプション | 説明 |
|---|---|---|
| action | 必須 | TEMPLATE |
| text | 必須 | 予定の件名 |
| dates | オプション | 予定の日時 |
| location | オプション | 予定の場所 |
| trp | オプション | 外部向け表示 |
| add | オプション | 予定に招待するゲストのメールアドレス。複数指定する場合は、カンマ（,）で連結して指定します。 |
| src | オプション | カレンダーを指定する |
| details | オプション | 予定の詳細 |
今回はRustで開発する際に便利なツールcargo watchを紹介したいと思います。
cargo install cargo-watch
cargo watch -x run
簡単なWebアプリのサンプルコードで試してみました
main.rs
use actix_web::{get, App, HttpResponse, HttpServer, ResponseError};
use thiserror::Error;
#[derive(Debug, Error)]
enum MyError {}
impl ResponseError for MyError {}
#[get("/")]
async fn index() -> Result<HttpResponse, MyError> {
let response_body = "Hello";
Ok(HttpResponse::Ok().body(response_body))
}
#[actix_web::main]
async fn main() -> Result<(), actix_web::Error> {
HttpServer::new(move || App::new().service(index))
.bind("0.0.0.0:8484")?
.run()
.await?;
Ok(())
}
let response_body = "Hello";をlet response_body = "Hello World!";に書き換えセーブすると[Running 'cargo run']が出力され更新されます。更新後ブラウザをリロードすると変更された内容が出力されます。
今回はVSCodeを利用する際にあると便利なおすすめ拡張機能（Extensions）を紹介します。
簡易的なWebサーバです。HTMLを右クリックから「Open with Live Server」でVSCodeからブラウザにHTMLがレスポンスされ表示ができます（当然HTMLから呼び出しているJavaScriptやCSSも動作します）
Remote SSH / Remote container / Remote WSL をまとめて利用できる拡張機能です。ローカルで動作させてるDockerコンテナ、~/.ssh/configに設定したRemote SSH、Windowsユーザの場合WSLにVSCodeでログインし指定したディレクトリをVSCodeで開発ができます。
VSCodeのExplorerで表示するアイコンのテーマです。見た目も良いのでおすすめです。
今回はJavaScriptのスプレッド構文（Spread Syntax）と残余引数（Respt Parameters）について解説します。
配列、オブジェクトなどを展開できます。
const arr = [1,2,3,4,5] const newArr = [...arr,6] (6) [1, 2, 3, 4, 5, 6]
オブジェクトの展開は特定のプロパティを書き換えたい時に役立ちます。
const obj = {id:1,name:'taro',age:20}
const newObj = {...obj,age:21}
{id: 1, name: 'taro', age: 21}
関数の引数が不定の場合に役立ちます。
const func = (...args) => {
console.log(args)
}
func("A","B","C")
['A', 'B', 'C']
必須の引数を指定する場合は残余引数（Respt Parameters）を最後に記述します。
const func = (num,...args) => {
console.log(num,args)
}
func(10,"A","B","C")
10 (3) ['A', 'B', 'C']
