ブラウザ上のURLの書き換え

ブラウザのURLバーに表示されているURLを書き換えが必要になったので調べたところ、Javascriptの下記メソッドが使える事が分かった。便利なメソッドなので活用していきたい。

history.pushState()

history.pushState

history backの履歴に書き換えたURLを追加する。

state
pushStateで生成された履歴に紐づくJavascriptのオブジェクトを指定する。

unused
歴史的な理由で残されており、省略不可である。
空文字 '' を指定すれば良い。

url
そのものずばり履歴に記録するURLである。 現在のURLと、Same Originな関係のURLだけしか指定できないので注意。

history.replaceState

Typescript: クラス

Typescriptのクラスについて。

class Item {
    // (1)
    public name: string
    public price: number
    private id: number

    // (2)
    constructor(name: string, price: number, id: number) {
        this.name = name
        this.price = price
        this.id = id
    }
    
    // (3)
    info(): string {
        return `name: ${this.name}, price: ${this.price}`
    }
}

プロパティの宣言 ... (1)

ここではプロパティの宣言を行なっている。 宣言は次のフォーマットで記述する。

アクセス修飾子 プロパティ名: 型

アクセス修飾子の種類は、一般的なオブジェクト指向の言語と同じように、下記の3つが指定できる。

• public ... クラス外からアクセス可能
• private ... クラス内部からのみアクセス可能
• protected ... サブクラス内部からのアクセスのみ可能

アクセス修飾子を省略した場合は、デフォルトで public に設定される。

コンストラクタ ... (2)

インスタンス生成時に実行する処理を記述する。
ここで、プロパティへの代入を行う。

メソッド ... (3)

インスタンスメソッドの宣言。
例では、publicなメソッドとして宣言している。

フォーマットは次の通り。

アクセス修飾子 メソッド名(メソッドの引数...): 返り値 { .... }

プロパティの宣言を省略する

冒頭でに掲載した例では、プロパティの宣言を別個で行なっているが、これらの宣言をコンストラクタにまとめることもできる。

記述の仕方は次の通り。

class Item {
    constructor(public name: string, public price: number, private id: number) {}
    // ...    
}

プロパティの宣言と代入を省略する事ができる。

まとめ

クラスについてはまだまだ学習途中なので、学んだ事があれが随時記事を更新していく予定。

Typescript: 関数のオーバーロード

Typescriptには関数をオーバーロードする事できる。

最初にオーバーロードを使わず個別に関数を定義してみる。

function multipleValue(value: number): number {
    return value * 2
}

console.log(multipleValue(5))

function multipleValue2(value: string): string {
    return value + value
}

console.log(multipleValue2('Hello'))

次に関数のオーバーロードで実装してみる。

function multipleValue(value: number): number
function multipleValue(value: string): string

function multipleValue(value: any): any {
    if (typeof(value) === 'number') {
        return value * 2
    } else if (typeof(value) === 'string') {
        return value + value
    }
}

console.log(multipleValue('Hello'))
console.log(multipleValue(22))

シグネチャーの宣言と実装を別々に定義する。
そして、個々のパラメーターの判定は関数の内部で行う。

個人的には関数の実装内部でパラメーターを判定して分岐させる必要がある点が気持ち悪く感じる。他の言語の関数のオーバーロードはこんな風にややこしい書き方はしていないと思う。

Typescriptの記事まとめ

Typescriptについて書いた記事のリンクをまとめたみた。

型

• Typescript: 型
• Typescript: 型エイリアス
• Typescript: 関数のオーバーロード

基礎文法

• Typescript: クラス

勇者一行から追放される系統の物語に感じる違和感

勇者一行から無能扱いされて、勇者のパーティーから追放されるパターンのお話を漫画やラノベでよく見かけるけど、結構な違和感を感じません？

そもそも、パーティーメンバーのスキルを正確に見定められないような勇者に一体何ができるのだろう？ってなもので。

メンバーのスキルを正確に把握しないような人間に戦略なぞまともに立てられるわけもないだろうし、そんな状況で魔王討伐なんか行ってみたら、ぼこぼこにやられるのがオチだろう、という風に思えてしまう。

『勇者から追放される』という設定を無理やり使っているだけで、その設定の現実味が薄く感じるお話が多いように思う。

React18を学習する

最近React18を勉強している。 とりあえず、学習メモとして学んだことの概要だけ書き出してみる。

• props はコンポーネントに値を渡す（immutable)
• state はコンポーネントが持つ状態を管理する (mutable)
• Function Component での定義が推奨されている
  • Class Component は今は推奨されていない模様
  • vue.js の Compositionに近い？
• Hooks にはいろいろある
  • useState
  • useEffect
  • useReducer
  • useMemo
  • useContext
  • useRef
  • useCallback
  • useTransition
  • useDeferredValue
• vue.jsよりは記述が複雑、に感じる

PHP8.1: nullableではない組み込み関数にnull値を指定するとDepricatedが出る。

PHP8.1になり、nullableではない組み込み関数にnullを指定すると、Depricatedエラーが出るようになった。

www.php.net

null値の可能性がある変数などを、 nullable ではない引数に指定する時は値の変換が必要になる。

例えば trim関数を使用する時は、特に意識せずに null値が代入されている変数を指定していたと思う。

trim(string $string, string $characters = " \n\r\t\v\x00"): string