2021-01-01から1年間の記事一覧
参考にさせていただいたページ node.js - How to open a create-react-app from another computer connected to the same network? - Stack Overflow 概要 create-react-appで作成した開発中のローカル環境にスマホなどの別端末からアクセスできるようにしま…
参考にさせていただいたページ Deployment | Create React App 解決したい事象 以下の手順を実行したときにnetlifyが用意している404ページが表示されてしまいました。 yarn create react-app my-app --template typescript でreactアプリケーションをcreate…
参考にさせていただいたページ 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.…
参考にさせていただいたページ "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してアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…
参考にさせていただいたページ ElementやEventに型をつけよう 型定義と関数定義を別々にやる たぶんこんな感じ import { FocusEventHandler, ChangeEventHandler, CompositionEventHandler } from 'react'; type HandleBlur = FocusEventHandler<HTMLInputElement>; type Handl</htmlinputelement>…
参考にさせていただいたページ 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してアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…
参考にさせていただいたページ InputEvent#isComposing とIME有効/無効の検出 · GitHub たにしきんぐダム はじめに 以下のタイミングで任意の処理を実行したい。という動機から調査を始めました。 IMEを伴わない半角文字入力や文字削除などをしたときは即座…
参考にさせていただいたページ phpとpythonのcgi実行可能な簡易WEBサーバーの起動方法 - Qiita はじめに python2とphp7.3でサーバーが起動できることと、スマホのブラウザからindex.htmlの閲覧ができることを確認しました。 python3は動作確認していません。…
はじめに create-react-appしてアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…
参考にさせていただいたページ CSS Modulesについて 【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る - クモのようにコツコツと 2020年におけるCSS設計の暫定解 | foo-x CSS Modulesの型定義について TypeScript + CSS Modules をWebpackで…
参考にさせていただいたページ VS Code Extensionのインストール ESLint - Visual Studio Marketplace eslintのインストールと設定 主に「りあクト!（第3.1版）」という書籍の第6章を参照しました。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1…
参考にさせていただいたページ 最新版TypeScript+webpack 5の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA npmモジュールのインストール webpackとTypeScriptの関連モジュールをインストールします。 yarn add --dev webpack webpack…
参考にさせていただいたページ Create Next App | Next.js コマンド yarn create next-app --typescript 覚書 yarn create next-app --typescriptでプロジェクトを作成しました。 Next.jsはcreate-react-appしたときや、create nuxt-appしたときと違って、プ…
参考にさせていただいたページ とても参考になる入門と初級の記事です。 TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita はじめに 以下のページを読んで、Mapped Typesが理解できる人はこの記事を読む必要は全くありません。 TypeScriptの型入門 - …
参考にさせていただいたページ TypeScript 2.8 の Conditional Types について - Qiita TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita この記事について inferまじで何もわからない。という私のような人が少しとっかかりをつかむ超入門記事です。 …
はじめに ほんとに便利な型Tipsを公開してくださっている記事がいくつかあり、あとで見つからなくなったらつらいのでメモしておきます。 リンク TypeScriptで自作している便利型Tips 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) …
参考にさせていただいたページ TypeScriptの型入門 - Qiita 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) makeObj.tsに関数を定義する 以下のような関数を定義します。 type MyKeys<T extends string> = readonly T[] export default function makeO</t>…
参考にさせていただいたページ TypeScriptの型入門 - Qiita はじめに 関数を定義する段階では引数の型は決めずに、実行時に渡す引数の型によって決まってほしいときがあると思います。 そのようなときに便利な方法です。 関数の定義の仕方 ジェネリクスを使…
参考にさせていただいたページ TypeScriptの型入門 - Qiita TypeScript の構造的部分型とプリミティブ型について - 30歳からのプログラミング はじめに きっかけとなったのはこちら「TypeScriptの型入門 - Qiita」の入門記事であり、キーが多い方が少ない方…
オブジェクトの型を定義する 以下のように定義しました。 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…
参考にさせていただいたページ GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails はじめに webpackerよくわからなくてハマったときのメモです。 config/webpack/loaders/vue.js webpackであれば、webpack.config.jsの…
はじめに 以前書いた「Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う - Motomichi Works Blog」みたいな感じでimportしたアイコンを、例えば自分で作ったMyComponentに渡すときにMyComponentのpropsの型はどのよう…
参考にさせていただいたページ 《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。 - Qiita GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements! style-resources-module のインストール 「…
参考にさせていただいたページ typescriptのバージョンを確認する | mebee 確認方法 以下のコマンドで確認できると思います。 npx tsc -v
はじめに 検索すると、クラスベースで書いてデコレータを使う方法については多くヒットしますが、Vue.extend()で書いている場合の方法についてはあまりヒットしなかったのでこの記事を書いています。 特に変わったことは書いていませんが。 今日の開発環境 N…
参考にさせていただいたページ 関数の型 - TypeScript Deep Dive 日本語版 はじめに いくつか方法がありますが、少し書いてみます。 後日もう少し充実させていこうと思います。 例として、以下のような「引数が2つあってオブジェクトを返す関数」の型を定義…
参考にさせていただいたページ Template Literal Typesについて TypeScript: Documentation - Template Literal Types 配列を元にStringLiteralTypesの型を定義する方法について TypeScript array to string literal type - Stack Overflow はじめに 以下の…
参考にさせていただいたページ keyof typeofの使い方 [TypeScript] - Qiita TypeScriptの型入門 - Qiita Index signature（インデックス型） - TypeScript Deep Dive 日本語版 はじめに 注意して使用しましょう。 「キーが未確定なobjectを先に作って後から…
