Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

制作

Day.jsの使い方について

参考にさせていただいたページ Day.js公式 GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API Installation · Day.js その他 Day.jsの簡単な使い方 便利な日付操作ライブラリ parse '202…

Visual Studio Codeの静的解析を再実行する Restart TS server / Restart ESLint Server

参考にさせていただいたページ typescript - Where is VSCode's "Restart TS server"? - Stack Overflow コマンドパレットを開く 以下のキーでコマンドパレットを開きます。 Mac: Command + Shift + P Windows: Ctrl + Shift + P 再読み込みする restart と…

sshキーペア(公開鍵と秘密鍵)を作成する 2022年2月版

参考にさせていただいたページ お前らのSSH Keysの作り方は間違っている - Qiita SSH keyを4096bitで作成する - Qiita encryption - SSH key strength factor besides key length (say ed25519 vs rsa-4096) - Information Security Stack Exchange https://…

Macにhomebrewでnodenvをインストールして使う

参考にさせていただいたページ GitHub - nodenv/nodenv: Manage multiple NodeJS versions. GitHub - nodenv/nodenv: Manage multiple NodeJS versions. 今回の環境 macOS Monterey バージョン12.2 MacBook Air (M1, 2020) homebrewを使ってインストールと設…

M1のMacにHomebrewをインストールしてPATHを通す

参考にさせていただいたページ macOS(またはLinux)用パッケージマネージャー — Homebrew インストールする 公式ページ「 macOS(またはLinux)用パッケージマネージャー — Homebrew 」の通りにコマンドを実行します。 以下のコマンドでしたが、最新のコマ…

ReactとかVueで開発するときのディレクトリ構造について考えてみた

はじめに どこかにメモしておこうと思って一旦ここに書いてみました。 ディレクトリ構造 src ├── assets │ ├── css │ │ └── reset.css │ ├── img │ │ ├── example1.png │ │ └── example2.png │ └── scss │ └── base │ ├── default.scss │ └── global-variabl…

Vue CLIを使ってみる

参考にさせていただいたページ Vue CLIのインストールまたは最新化 Installation | Vue CLI Creating a Project Creating a Project | Vue CLI 今日の環境 macOS Monterey 12.1 node v16.13.1 npm 8.1.2 yarn 1.22.17 @vue/cli@4.5.15 グローバルにインスト…

ローカルのreact-appをスマホ端末から閲覧できるようにする

参考にさせていただいたページ node.js - How to open a create-react-app from another computer connected to the same network? - Stack Overflow 概要 create-react-appで作成した開発中のローカル環境にスマホなどの別端末からアクセスできるようにしま…

ローカルのreact-appをスマホ端末から閲覧できるようにする

参考にさせていただいたページ node.js - How to open a create-react-app from another computer connected to the same network? - Stack Overflow 概要 create-react-appで作成した開発中のローカル環境にスマホなどの別端末からアクセスできるようにしま…

create-react-appしてbuildしたアプリケーションをnetlifyにデプロイしてリロードしたとき404になるのを解決する

参考にさせていただいたページ Deployment | Create React App 解決したい事象 以下の手順を実行したときにnetlifyが用意している404ページが表示されてしまいました。 yarn create react-app my-app --template typescript でreactアプリケーションをcreate…

react 17.0.2 + storybook 6.4.9 でstorybookをビルドしてみる

参考にさせていただいたページ create react-appについて Adding TypeScript | Create React App storybookについて storybook/app/react at next · storybookjs/storybook · GitHub 今回使用したバージョン macOS Catalina 10.15.7 node v16.13.1 react 17.…

create-react-appが失敗する問題に対処した「You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 」

参考にさせていただいたページ "npx create-react-app my-app" stopped working in 4.0.3 · Issue #10601 · facebook/create-react-app · GitHub 失敗した操作 公式ページの「https://ja.reactjs.org/docs/create-a-new-react-app.html」にならって、以下の…

create-react-appしたアプリケーションでscssを使おうと思ったときにnode-sassのインストールに失敗した

はじめに create-react-appしてアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…

ReactのeventHandler関数の型を定義する

参考にさせていただいたページ ElementやEventに型をつけよう 型定義と関数定義を別々にやる たぶんこんな感じ import { FocusEventHandler, ChangeEventHandler, CompositionEventHandler } from 'react'; type HandleBlur = FocusEventHandler<HTMLInputElement>; type Handl</htmlinputelement>…

Reactのchildrenにpropsを渡す

参考にさせていただいたページ React で this.props.children に新しい Props を渡す - 無駄と文化 reactjs - How to assign the correct typing to React.cloneElement when giving properties to children? - Stack Overflow サンプルコード import { clon…

create-react-appしたアプリケーションでscssを使おうと思ったときにnode-sassのインストールに失敗した

はじめに create-react-appしてアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…

IME確定判定 2021年10月版 (IME確定時に任意の処理を実行する)Compositionイベント

参考にさせていただいたページ InputEvent#isComposing とIME有効/無効の検出 · GitHub たにしきんぐダム はじめに 以下のタイミングで任意の処理を実行したい。という動機から調査を始めました。 IMEを伴わない半角文字入力や文字削除などをしたときは即座…

phpまたはpythonでlocalhostを簡易的に起動して、スマホで動作確認する

参考にさせていただいたページ phpとpythonのcgi実行可能な簡易WEBサーバーの起動方法 - Qiita はじめに python2とphp7.3でサーバーが起動できることと、スマホのブラウザからindex.htmlの閲覧ができることを確認しました。 python3は動作確認していません。…

create-react-appしたアプリケーションでscssを使おうと思ったときにnode-sassのインストールに失敗した

はじめに create-react-appしてアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…

webpack5 + React 17.x + TypeScript 4.x その0003 CSS Modulesでscopedな感じのCSSを書く

参考にさせていただいたページ CSS Modulesについて 【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る - クモのようにコツコツと 2020年におけるCSS設計の暫定解 | foo-x CSS Modulesの型定義について TypeScript + CSS Modules をWebpackで…

webpack5 + React 17.x + TypeScript 4.x その0002 VS Code Extensionとeslintでコードを自動整形する

参考にさせていただいたページ VS Code Extensionのインストール ESLint - Visual Studio Marketplace eslintのインストールと設定 主に「りあクト!(第3.1版)」という書籍の第6章を参照しました。 りあクト! TypeScriptで始めるつらくないReact開発 第3.1…

webpack5 + React 17.x + TypeScript 4.x その0001 最低限の環境構築とビルドまで

参考にさせていただいたページ 最新版TypeScript+webpack 5の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA npmモジュールのインストール webpackとTypeScriptの関連モジュールをインストールします。 yarn add --dev webpack webpack…

Next.js 11.x + TypeScript 4.x その0001 Next.jsをTypeScriptで始めてみる

参考にさせていただいたページ Create Next App | Next.js コマンド yarn create next-app --typescript 覚書 yarn create next-app --typescriptでプロジェクトを作成しました。 Next.jsはcreate-react-appしたときや、create nuxt-appしたときと違って、プ…

TypeScript学習日記 その0012 とてもやさしいMapped Types入門

参考にさせていただいたページ とても参考になる入門と初級の記事です。 TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita はじめに 以下のページを読んで、Mapped Typesが理解できる人はこの記事を読む必要は全くありません。 TypeScriptの型入門 - …

TypeScript学習日記 その0011 とてもやさしいinfer入門

参考にさせていただいたページ TypeScript 2.8 の Conditional Types について - Qiita TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita この記事について inferまじで何もわからない。という私のような人が少しとっかかりをつかむ超入門記事です。 …

TypeScript学習日記 その0010 便利な型Tipsメモ

はじめに ほんとに便利な型Tipsを公開してくださっている記事がいくつかあり、あとで見つからなくなったらつらいのでメモしておきます。 リンク TypeScriptで自作している便利型Tips 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) …

TypeScript学習日記 その0009 readonlyな文字列の配列をキーとしてオブジェクトを作成する関数

参考にさせていただいたページ TypeScriptの型入門 - Qiita 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) makeObj.tsに関数を定義する 以下のような関数を定義します。 type MyKeys<T extends string> = readonly T[] export default function makeO</t>…

TypeScript学習日記 その0008 引数の型が決まっていない関数を定義する(関数実行時に引数の型が決まる関数を定義する)

参考にさせていただいたページ TypeScriptの型入門 - Qiita はじめに 関数を定義する段階では引数の型は決めずに、実行時に渡す引数の型によって決まってほしいときがあると思います。 そのようなときに便利な方法です。 関数の定義の仕方 ジェネリクスを使…

TypeScript学習日記 その0007 構造的部分型について学習する

参考にさせていただいたページ TypeScriptの型入門 - Qiita TypeScript の構造的部分型とプリミティブ型について - 30歳からのプログラミング はじめに きっかけとなったのはこちら「TypeScriptの型入門 - Qiita」の入門記事であり、キーが多い方が少ない方…

TypeScript学習日記 その0006 オブジェクトの型を複数定義して|で合わせたり&で合わせたりしてみる(union型とintersection型)

オブジェクトの型を定義する 以下のように定義しました。 type MyObjA = { a1: string; a2: string } type MyObjB = { b1: string; b2: string } type MyObjC = { c1: string; c2: string } type MyObjUnion = MyObjA | MyObjB | MyObjC type MyObjAnd = MyO…