はてなブックマーク

何をするか？Web ブラウザーの SpeechRecognition API を使って、音声認識をしてみます。 ここでは Svelte アプリケーションとして作成しますが、単純な HTML + JavaScript の組み合わせでもほぼ同様のコードになると思います（参考: Svelte 関連メモ）。 デモ: https://p-bf4cpjx-svelte-speech-recognition.vercel.app/ソースコード: https://github.com/maku77/p-bf4cpjx-svelte-speech-recognition/プロジェクトの準備Svelte (SvelteKit) のプロジェクトがない場合は最初に作成しておきます。 プロジェクトの作成 $ npm create svelte@latest myapp (選択肢が表示されたら TypeScript

何をするかCloud Firestore は、Firebase サービス（あるいは GCP）が提供するサーバーレスな NoSQL データベースです。 Firestore データベースには様々な環境からアクセスできますが、ここでは Web サイトからアクセスすることを想定して、Firebase が提供する JavaScript SDK（クライアントサイド SDK）を使って Firestore データベースを操作してみます。 ☝️ Firebase と GCP の使い分け Firebase と GCP (Google Cloud Platform) の両方に Firestore の記載があるので混乱しますが、どちらのプロジェクトで作った Firestore データベースも内部的には共有されているようです。 Firebase プロジェクトも、GCP プロジェクトとして参照できるようになっています

Image コンポーネントの特徴Next.js が提供している Image コンポーネント (next/image) を使用すると、image 要素をそのまま配置するのに比べて次のような恩恵を受けられます。 遅延ロード (Lazy loading)Web ブラウザでその画像がビューポート内（画面内）に入って来たときに初めてダウンロードされるようになります。大きなページの末尾部分に配置された画像が、無駄にダウンロードされてしまうのを防ぐことができます。画像の最適化アクセスしてきたクライアントに応じて画像ファイルを最適化して配信します。例えば、圧縮効率のよい WebP フォーマットなどに変換してくれます。リクエスト時にサーバーサイドでオンデマンドで最適化するため、Image コンポーネントを使うことでビルド時間が伸びてしまうことはありません。外部サーバーの画像を間接的に表示する場合も最適化でき

URL のクエリ文字列（クエリパラメーター）というのは、上記のような URL の末尾の ? 以降の、sortby=title&order=asc の部分のことを指します。 この部分を参照する方法としては、主に次の 2 種類の方法があります。 クライアントサイド JS … useRouter フックを使うサーバーサイド JS … getServerSideProps に渡されるパラメーターを使うクライアントサイド JS からクエリパラメーターを参照する (router.query)Next.js の useRouter フック を使うと、上記のようなクエリパラメーター部分を簡単に抽出することができます。 次の例では、クエリパラメーターとして渡された sortby と order の値を取得しています。 値が省略された場合は、それぞれの値は undefined になります。 src/pages

ワークスペース設定ファイルワークスペースごとの設定は、プロジェクトのルートディレクトリの .vscode ディレクトリに保存されます。 <プロジェクトルート>/.vscode/settings.jsonワークスペース設定は、前述のユーザー設定よりも優先されます（同じ設定項目の値が上書きされます）。 .vscode ディレクトリを Git にコミットしておけば、チーム内で VS Code の設定を共有できます。 .vscode ディレクトリには、プロジェクトのタスク設定ファイル (tasks.json) なども格納されます。 設定ファイルのサンプルsettings.json ファイルの拡張子は .json ですが、JavaScript 形式のコメントを記述できるようになっています (JSON with Comments)。 settings.json の例 // Place your set

何をするか？Visual Studio Code に Python 拡張 を入れることで、Python コードの編集（自動補完など）ができるようになりますが、コードの自動フォーマットを行うには、フォーマッターを別途インストールしておく必要があります（いろんなフォーマッターがあるため）。 Python のフォーマッターとしては、autopep8 や yapf などもありますが、ここでは、最近人気がある Black を VS Code の自動フォーマッターとして設定します。 Facebook や Dropbox、Mozilla などでも導入されており、採用実績としては申し分なさそうです。 ☝️ 頑固なフォーマッター Black は自分自身を The uncompromising code formatter と説明しています。 ようするに、「私が定義する設定に従いなさい」という意味で、ユーザー

Web サイトを構築するにあたって、よく参照されるコンポーネントの分類手法として、Atomic Design と Presetational and Container Components があります。 Atomic Design … UI の粒度と具体性によって 5 レベルに分類するPresentational and Container Components … 「表示」と「振る舞い」の役割で分類するここでは、それぞれに関して概要をざっと眺めた上で、Next.js プロジェクトにどんな形で適用していけばいいかを考えてみます。 Atomic Design とはWeb デザインにおける UI コンポーネントの分割粒度の考え方として、Brad Frost 氏の Atomic Design があります。 Atomic Design - Brad Frost 氏のブログ記事Atomic Des

CDK コードに外部パラメーターを与える方法AWS CDK による CloudFormation スタックの構築時に、外部からキー＆バリューの形でパラメーターを設定したいときは、主に次の 3 つの方法があります（クラウド上に値を保存するパラメーターストアなどは対象外とします）。 Context values （コンテキスト・バリュー）Environment variables （環境変数）CloudFormation parameters （CloudFormation パラメーター）S3 バケットの名前をパラメーター化したり、デプロイターゲットを staging と production の間で切り替えたりするときに使えます。 Context values（コンテキスト・バリュー）コンテキスト・バリューは、CDK 特有の仕組みで、cdk deploy 実行時のコマンドライン引数や、cdk

Node.js で環境変数を参照するためのオブジェクト process.env の型情報は、@types/node で次のように文字列型ディクショナリ Dict<string> として定義されています。 node_modules/@types/node/process.d.ts（抜粋） declare module "process" { global { var process: NodeJS.Process; namespace NodeJS { interface ProcessEnv extends Dict<string> {} //... } } export = process; } この型定義は @types/node モジュールをインストールするだけで簡単に使用できるようになるのですが、具体的なキー名（環境変数名）が定義されていないので、Visual Studio Cod

何をするか？ここでは、CDK アプリとして作成した CloudFormation スタック内に、TypeScript で実装した Lambda 関数 を追加してみます。 Lambda 関数のビルドもデプロイ時に自動で行われるようにします。 以降の説明では、CDK プロジェクトの作成自体は済んでいるものとします。 参考: AWS CDK 入門: cdk コマンドのインストールから Hello World までTypeScript で Lambda 関数を実装するLambda 関数のコードは、プロジェクトのルートに lambda ディレクトリを作成して、そこに配置していくことにします。 myapp/ +-- bin/ ... CDK の App コンストラクト (.ts) +-- lambda/ ... ラムダ関数の実装コード (.ts) ★これを追加 | +-- index.ts +-- l

SWR とはuseSWR フックSWR (useSWR) は、Next.js を開発している人たち (Vercel) が開発したデータフェッチ用の React フックライブラリです。 React アプリでデータフェッチを真面目に実装しようとすると、大体最後にこのライブラリに行き着きますので、最初からこれを使いましょう（GraphQL の場合は Apollo Client がありますが）。 SWR - React Hooks library for data fetchingReact コンポーネント内から Web API などを呼び出してデータフェッチを行う場合、標準の仕組みだけで実現しようとすると、useEffect フックなどで fetch 関数を呼び出したりすることになります。 useEffect による不完全なデータフェッチ実装 function Page () { const [

children の型定義TypeScript で React の関数コンポーネントを定義するときには、下記のような React.FC (React.FunctionComponent) を使用します。 type FC<P = {}> = FunctionComponent<P>; interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; propTypes?: WeakValidationMap<P> | undefined; contextTypes?: ValidationMap<any> | undefined; defaultProps?: Partial<P> | undefined; displayName

Next.js アプリ内での環境変数の振る舞いprocess.env の振る舞いNode.js の process.env による環境変数の参照が有効なのは、基本的には次のようなサーバーサイドで実行されるコード内のみです。 ビルド時あるいはアクセス時に呼び出される getStaticPaths や getStaticProps必ずアクセス時に呼び出される getServerSideProps必ずアクセス時に呼び出される API ルートのハンドラ関数 (handler)src/pages/sample.tsx export const getStaticProps: GetStaticProps<PageProps> = async context => { // このコードはビルド時に実行されるので環境変数を参照できる console.log(process.env.VAR_NAME) r

何を説明するか下記は、TypeScript を使った React アプリ実装用に用意した ESLint 設定ファイル (.eslint.yml) の例です。 トップレベルのプロパティとして、env や extends などがありますが、これらが何を意味しているかをざっと説明します。 .eslint.yml（例） root: true env: browser: true es2021: true parser: '@typescript-eslint/parser' parserOptions: ecmaVersion: 2021 project: ./tsconfig.json plugins: - react - react-hooks - '@typescript-eslint' extends: - eslint:recommended - plugin:react/recomme

Prettier とは？Prettier は、TypeScript や JavaScript などのソースコードを自動フォーマットするためのツールです。 HTML や CSS など様々なファイルに対応していますが、主に TypeScript や JavaScript のフォーマッターとして使用されています。 実際にどのようにフォーマットされるかは、Playground のページ で試すことができます。 特徴と思想Prettier の一番の特徴は、Opinionated（独断的な） コードフォーマッターであることを標榜していることです。 これは、ユーザーに自由なカスタマイズを許さず、「Prettier 自身が定義しているスタイルに強制的にフォーマットするよ」ということです（セミコロンの有無など最低限の設定はできます）。 これにより、コーディングスタイルに関する 不毛な議論を避ける ことができ

ESLint とはESLint は JavaScript/TypeScript 向けの Lint ツール（静的解析ツール）です。 プロジェクト内のソースコードに対して eslint コマンドを実行することで、コーディングルールに従っていない部分や、不具合の原因になりそうな部分を検出してくれます。 ☝️ eslint vs tslint もともと TypeScript 用には tslint という Lint ツールが提供されていましたが、Microsoft の TypeScript チームが eslint への統合を 公式に発表 してから（2019年以降）は、TypeScript においても eslint が事実上の標準 Lint ツールとなっています。参考: TypeScript の ESLint 対応プロジェクト ESLint のインストールeslint コマンドは npm でインストー

何をするか？AWS Lambda で実行する関数は、ZIP ファイルの形でデプロイすることになります。 ここでは、Node.js で関数を実装しているという前提で、npm スクリプトで簡単にデプロイ用の ZIP パッケージを作成する方法を説明します。 Lambda 関数用の ZIP パッケージを作成するときは、次のようなことを考慮する必要があります。 実行時に必要な node_modules 以下のモジュールを含める（逆に devDependencies で指定したモジュールは含めない。例えば typescript とか eslint とかは含めない）AWS SDK (aws-sdk) は含めない（Lambda の実行環境にインストールされている）TypeScript を使っているのであれば、ビルド後の .js ファイルのみを含める（例えば、src/*.ts は含めず、build/*.js

ダイナミックルーティングとはNext.js では、pages/books/[id].tsx のようなファイル名でページを作成すると、1 つのファイルで、 /books/001/books/002/books/003のようなパス (URL) によるアクセスをハンドルできます。 これを ダイナミックルーティング (Dynamic Routes) 機能と呼びます。 Next.js のページコンポーネント (/pages/xxx.tsx) は、そのページのエントリポイント（ルートコンポーネント）となるため、通常の React コンポーネントとは違って、上位のコンポーネントから props 情報を渡すことができません。 そこで Next.js では、ページコンポーネントの実装ファイル内で getStaticProps という関数を定義することで、ページコンポーネントに渡す props 情報を生成でき

何をするか？create-next-app コマンドで Next.js プロジェクトを生成するときに --typescript (--ts) オプションをつけて実行すると、TypeScript 対応したプロジェクトを生成することができます。 $ npx create-next-app myapp --typescript # ただ、こっちのテンプレートを使う方法の方が若干洗練されてる気はする $ npx create-next-app myapp --example with-typescript

クラスの箱を描く基本クラスの箱を描くには、class キーワードを使用します。 他にも、interface でインタフェース、abstract で抽象クラス、enum で列挙型を定義することができます。

概要electron-builder を使用すると、Electron アプリを Windows、macOS、Linux 用の配布用バイナリとしてパッケージングすることができます。 各 OS 用のインストーラはもちろん、ポータブルな zip パッケージを作成することもできます。 electron-builder公式サイトのドメイン名が electron.build っていうのがかっこいいですね。 electron-builder のインストールNode.js のパッケージ管理ツールとして、npm よりも yarn を使うことが strongly recommended されているので、まず yarn をインストールしてから yarn で electron-builder をインストールすることにします。

問題プロキシ環境下で、Electron (9.0.5) をインストールしようとしたら、まぁいろいろとエラーになってハマりました。 どうも、node install.js の実行がうまくいっていないようです。 D:\sandbox> npm install electron --save-dev > core-js@3.6.5 postinstall D:\sandbox\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" > electron@9.0.5 postinstall D:\sandbox\node_modules\electron > node install.js RequestError: read ECONNRESET at ClientRequest.<anonymous> (

アンビエント宣言とはTypeScript の アンビエント宣言 (Ambient Declarations) を行うと、既存の JavaScript ライブラリに型情報を付加することができます。 この仕組みを利用すると、 サードパーティ製の JavaScript ライブラリ（npm パッケージ）や、自作の JavaScript ライブラリ（ただし TypeScript 化はしたくないもの）を TypeScript コードから使用するjQuery などのブラウザ上でロードされるライブラリを TypeScript コードから使用するといったことが可能になります。 ようするに、TypeScript トランスパイラに対して、このオブジェクトはこういう型のものとして外から提供されているので、型チェックエラーを出さないでね、と知らせることができます。 さらに、VisualStudio Code などの

シーケンス図は相互作用図 (interaction diagram) の代表的なダイアグラムです。 シーケンス図は、特定のユースケースに関するオブジェクトの典型例と、オブジェクト間のメッセージを示します。 要素の並び順の制御 (participant)必須の定義ではないですが、participant であらかじめ要素を列挙しておくと、その後のメッセージ定義の順序に関係なく、participant に並べた順に左から要素が配置されます。 @startuml participant Class1 participant Class2 participant Class3 Class3 -> Class1 Class2 -> Class3 Class1 -> Class2 @enduml

はじめにTypeScript は Microsoft が開発している言語で、同じく Microsoft が開発している IDE である Visual Studio Code（以下 VS Code）が TypeScript コードの編集に適しています。 VS Code による TypeScript の開発環境を構築するには、下記をインストールする必要があります。 Visual Studio CodeNode.js（npm コマンド）TypeScript（tsc コマンド)開発環境をインストールするVisual Studio Code のインストールVS Code は下記からインストーラーをダウンロードしてインストールできます。 Download Visual Studio CodeTypeScript のソースコード (.ts) ファイルは、単純なテキストエディタでも編集できますが、この V