「Rust」cargo watchで変更を自動検知しホットリロード

今回はRustで開発する際に便利なツールcargo watchを紹介したいと思います。

GitHub

インストール

cargo install cargo-watch

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)

今回はVSCodeを利用する際にあると便利なおすすめ拡張機能(Extensions)を紹介します。

Live Server

簡易的なWebサーバです。HTMLを右クリックから「Open with Live Server」でVSCodeからブラウザにHTMLがレスポンスされ表示ができます(当然HTMLから呼び出しているJavaScriptCSSも動作します)

Live Server

Live Server起動

ブラウザに表示(JavaScriptが動作)

Remote Development

Remote SSH / Remote container / Remote WSL をまとめて利用できる拡張機能です。ローカルで動作させてるDockerコンテナ、~/.ssh/configに設定したRemote SSHWindowsユーザの場合WSLにVSCodeでログインし指定したディレクトリをVSCodeで開発ができます。

Remote Development

Material Icon Theme

VSCodeExplorerで表示するアイコンのテーマです。見た目も良いのでおすすめです。

Material Icon Theme

アイコン例

「JavaScript」スプレッド構文(Spread Syntax)と残余引数(Respt Parameters)

今回はJavaScriptのスプレッド構文(Spread Syntax)と残余引数(Respt Parameters)について解説します。

スプレッド構文(Spread Syntax)

配列、オブジェクトなどを展開できます。

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}

残余引数(Respt Parameters)

関数の引数が不定の場合に役立ちます。

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']

「JavaScript」Array.prototype.reduce()の利用例

今回はArray..prototype.reduce()の利用例についてエントリーしたいと思います。

足し算

1から5を足す計算例(initialValueとして0をaccに渡す)

const arr = [1,2,3,4,5]
const initialValue = 0
const result = arr.reduce((acc,cur) => acc += cur,initialValue)

15

ワンライナー

const result = [...new Array(6).keys()].reduce((acc,cur) => acc += cur)

配列から新しいオブジェクトを作る

配列からidをプロパティとして持つオブジェクトを格納する配列を作成する

const arr = [1,2,3,4,5]
const initialValue = []
const result = arr.reduce((acc,cur,index) => {
  acc[index]={id:cur}
  return acc}
,initialValue)


0: {id: 1}
1: {id: 2}
2: {id: 3}
3: {id: 4}
4: {id: 5}

「Rust cargo-edit」cargo add で featuresも指定する

Rustのcargo-editの機能でCargo.tomlにcrateの設定などができます。その際に併せてfeaturesの設定をしたい場合もあります。今回はその方法を解説していきます。

方法

reqwestを追加し併せてfeaturesblockingを追加する例

cargo add reqwest --features="blocking"    

Cargo.toml

~~~~ 省略 ~~~~

[dependencies]
reqwest = { version = "0.11.11", features =["blocking"] }

「JavaScript」文字列の中で特定の文字数を数える

今回はJavaScriptで文字列の中で特定の文字数を数えるプログラムを書いていきます。

サンプルデータ

今回はこのサンプルデータからaの文字数を数える

"azbdobkdlaac"

前準備

Array.fromを使い文字列を配列にする(以降arrを利用する)

const arr = Array.from("azbdobkdlaac")

['a', 'z', 'b', 'd', 'o', 'b', 'k', 'd', 'l', 'a', 'a', 'c']

Array.prototype.filter()

Array.prototype.filter()で特定の文字を抜き出しlengthで数える

const length = arr.filter(v => v === "a").length

3

完成形

const str = "azbdobkdlaac"
const arr = Array.from(str)
const length = arr.filter(v => v === "a").length

ワンライナー

const length Array.from("azbdobkdlaac").filter(v => v === "a").length

正規表現でカッコなどに囲まれた中身を抜き出す

今回は文字列に足してカッコ((),「」,【】,《》)などに囲まれた中身を正規表現を使って抜き出します。実装はJavaScriptで行なっています。

正規表現で抜き出す文字列(ここでは《》で文字列を囲んでいます)

const str = "aaa《hello》bbb"

ここでは《》を例に正規表現を組みます。正規表現/内に記述(/(?<=《).*?(?=》)/)

const regExp = /(?<=《).*?(?=》)/

String.prototype.match()正規表現regExpを渡し抜き出します。

const afterStr = str.match(regExp)

JavaScript String.prototype.match()ではArrayとして返ります。抜き出した値はindex 0に格納されています。

[ 'hello', index: 4, input: 'aaa《hello》bbb', groups: undefined ]