2023年 | ページ 6 | 上尾市のWEBプログラマーによるブログ

「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」の感想・備忘録1

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発posted with ヨメレバ手島拓也/吉田健人/高林佳稀技術評論社 2022年07月25日頃楽天ブックスAmazonKindle 点数 80点感想前半はTypeScript、React、Next.jsについてわかりやすく説明されていてとても良かった。しかし、後半のサンプルアプリの開発はわかりづら...

2023.07.16

React(書評)

Node.js

[Node.js] Error: Cannot find module ‘../scripts/start’の解決方法

概要 Node.jsを使っているプロジェクトのディレクトリーをコピーまたは移動すると、npm startを実行してもError: Cannot find module '../scripts/start'となってしまうことがある。解決方法 node_modulesディレクトリを削除し、npm installを実行する。ディレクトリのコピー・移動でnode_modles配下のシンボリックリンクが...

2023.07.14

Node.js

Macでメール送信を取り消す方法

概要 Macの標準アプリ「メール」では、メール送信後に送信を取り消すための設定がある。設定を変更することで、送信後の一定時間内（10秒 or 20秒 or 30秒）は送信を取り消すことが可能となる。手順 1. メインメニューの「メール」⇒「設定」を選択 2. 「作成」⇒「送信」 3. 取り消すまでの時間を選択 4. メールを送信すると、左下に「送信を取り消す」が表示されるようになる

2023.07.12

Mac

サーバ

[MySQL][Postgres]外部キーがあるテーブルをTRUNCATEする方法

概要データベースで外部キーがあるテーブルをTRUNCATEしようとするとエラーとなってしまう。例えば、MySQLの場合はCannot truncate a table referenced in a foreign key constraintとなり、TRUNCATEすることができない。解決方法一時的に外部キー制約を無効化することで、TRUNCATEすることができる。 MySQLの場合 se...

2023.07.08

サーバ

[TypeScript]関数の型定義

関数の定義引数のみアノテートし、戻り値は型推論を使う。 const add = (a: number, b:number) => a + b オプションパラメータとデフォルトパラメータ引数名の後ろに?を付けると省略可能なオプションパラメータとなる。省略時はundefinedとなる。引数名=値とするとデフォルトパラメータとなる。デフォルト引数は型推論を使う。 const print = (a:...

2023.07.06

TypeScript

[TypeScript]enum(列挙型)の使い方

数値列挙の場合 const enum Color { Red, Blue, Green } console.log(Color.Green) // 2 文字列列挙の場合 const enum Color2 { Red = "#f00", Blue = "#00f", Green = "#0f0" } console.log(Color2.Green) // "#0f0" 「型名は大文字で始まる単数...

2023.07.04

TypeScript

[TypeScript]オブジェクトの型定義

オブジェクトリテラルによる型推論 TypeScriptでオブジェクトリテラルを使うと型推論が行われる。通常はこの記法を使うべきである。 const obj = { id: 1, } obj.id="1" // エラーアノテーションによる型定義省略可能プロパティや読み取り専用プロパティを定義したい場合は、アノテーションを使って明示的に型を宣言する。 const obj2: { id: numbe...

2023.07.02

TypeScript

「REMOTE HOST IDENTIFICATION HAS CHANGED」の解決方法

概要 SSHでサーバ側のホストキーが変更されると、SSH接続を試みた際に以下のようなエラーとなり接続することができなくなる。 GitHubやBitbucketのホストキーが更新されることがあり、ある日突然リポジトリへpushなどができなくなるのはこれが原因である。解決方法 SSHクライアント側の.ssh/known_hostsファイルにある古いホスト情報が残っているのが原因であるため、それを削除...

2023.06.30

サーバ

[Next.js] getStaticPaths関数とは

概要 .tsxのようなダイナミックルーティングを行うページでgetStaticProps関数を使用する場合は、getStaticPaths関数を使用して「生成されるパスのリスト」を定義する必要がある。 getStaticPaths関数はgetStaticProps関数の前にコールされ関数で、パスの組み合わせpathsとフォールバックfallbackをreturnする。例 import { Nex...

2023.06.28

React

[Next.js] getStaticProps関数とは

概要 Next.jsのページコンポーネントにて、「SSG（StaticSite Generator）させたい=ビルド時に実行したい」処理はgetStaticProps関数の中に記述する。例 import {useEffect, useState} from 'react' import {GetStaticProps, NextPage} from 'next' type SsgProps = ...

2023.06.24

React