2020年最後なのでネタ投稿です。 charCodeAt を使って A-Z の文字コードを作る charCodeAt() メソッドは、指定された位置にある UTF-16 コードユニットを表す 0 から 65535 までの整数を返します。 cf. String.prototype.charCodeAt() - JavaScript | MDN 'A…

Object.keys() オブジェクトのキー一覧が配列で取れる const Idols = { 'cute': ['Ichigo', 'Sakura', 'Akari', 'Madoka', 'Maria'], 'cool': ['Aoi', 'Yurika', 'Shion', 'Sumire', 'Seira'], 'sexy': ['Ran', 'Mitsuki', 'Hikari', 'Juri', 'Sora'], 'pop'…

アイカツ！を見ておけば幸せになれるので、 アイカツ！を終わらないコンテンツにするために永遠のデータについて考えてみました。

アイカツ！の放送日を Python でフォーマットしてました

インスタンス変数とクラス変数 インスタンス変数 … self.variable の形で定義する クラス変数 … クラスブロック直下に書かれた変数はクラス変数になる class User(object): # クラス変数 name = 'User' def __init__(self, name): # インスタンス変数 self.n…

また Python を少し触っています。 private 変数 のおさらい __ 始まりで作成された変数はインスタンスからしかアクセスできない private 変数になる class User(object): def __init__(self, name): self.__name = name def hi(self): print(f'Hi, {self.__…

typo の達人なので git commit --amend $ git commit --amend 修正するコミットメッセージを直接渡したいときは $ git commit --amend -m "message" amend … 修正する 英語ちから is 無 だからすぐ忘れる… おわり わかばちゃんと学ぶ Git使い方入門作者:湊川…

開発環境アップデートしたからコマンド実行して〜って言われてやろうとしたら brew update でエラーになった。 $ brew update Error: homebrew-core is a shallow clone. To `brew update` first run: git -C "/usr/local/Homebrew/Library/Taps/homebrew/ho…

よくあるオブジェクトが要素のリストでオブジェクトの内容を変更したい。 そして配列は immutable に扱いたい。 interface Idol { id: number; name: string; type: string; unit?: string; }; const data: Idol[] = [ { id: 1, name: 'Hosimiya Ichigo', ty…

npx create-react-app で React のアプリを作ったら v17 系になっていました。 今までのプロジェクトで使っていた ESLint の設定を持ってきたらエラーになる部分があったのでメモ react 17.0.1 react-scripts 4.0.1 eslint 7.14.0 eslint-plugin-react 7.21.…

ショートカットの案内を表示するのに Mac, iPhone, iPad なら ⌘ それ以外は Ctrl を表示したい。という要望でクラアンと側で OS の判定をしたメモ navigator.userAgent / navigator.platform を使う MDN のドキュメントには navigator.userAgent, navigator.…

久しぶりに webpack 環境を作っていて web-pack-dev-server を動かそうとしてハマったのでメモ package.json "devDependencies": { "webpack": "^5.6.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" }, Error: Cannot find module 'webpack-…

TypeScript な Express でAPI作ってエラーを返す処理を都度書いているとめんどいので、エラーハンドリングして返すようにしたメモ エラーハンドリングのミドルウェアはルーティングより後に書く 上から順番にルーティングにマッチしていくか見ていって、該当…

Mac のアップデートがあって再起動してからターミナルで GitHub などに push や pull しようとする度にパスフレーズを尋ねられるようになってしまいました。 $ git pull origin master Enter passphrase for key '/Users/<username>/.ssh/id_rsa': 毎回入れるのはメン</username>…

空オブジェクト {} は true になるので空オブジェクトで場合分けしたい判別方法のメモ Boolean({}); // => true Object.keys().length と constructor で判定する const isEmptyObject = (val) => { return val.constructor === Object && Object.keys(val).…

存在しないディレクトリ内にディレクトリを作ろうとしたらエラーになる $ mkdir .github/workflows mkdir: .github: No such file or directory p オプションを使う $ mkdir -p .github/workflows $ ls -a -n ... drwxr-xr-x 3 501 20 96 11 4 04:06 .github…

要素マージンを含めた width / height を取得するのがちょいと大変だったのでメモ。 html { font-size: 16px; } .div { margin: 0.3rem 0.2rem; // 4.8px 3.2px 相当 border: .3rem solid #000; // 4.8px 相当 width: 6.2rem; // 99.2px 相当 height: 6.2rem…

JavaScript の parseInt, parseFloat は 10px とか単位がある文字列でもいい感じに数値変換して返してくれますが、空文字列 "" の時 NaN が返されます。その後の計算でエラーになることも多いので NaN の代わりに 0 を返したいときのメモ 空文字や undefined…

CSS Modules とゎ？ ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…

CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…

Gemfile で読み込んでいる GitHub のリポジトリをPR出してるブランチで問題ないか確認したい Gemfile gem 'aikatsu', git: "git://github.com/<username>/aikatsu.git" branch: <branch_name> で指定すればOK Gemfile gem 'aikatsu', git: "git://github.com/<username>/aikatsu.git", branch:</username></branch_name></username>…

SPA の速度カイゼンやパッケージやファイルのサイズを可視化してみたい事が多々あります。 今回は create-react-app で作成したアプリでバンドルサイズを可視化してみたのメモ。 create-react-app v3 以降は --stats オプションが廃止され webpack bundle an…

SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…

create-react-app で作った React アプリで yarn start での開発時と yarn build でビルドした時に使う環境変数を切り替えたい。 .env のファイル名で自動的に切り替わる create-react-app で作られたファイルにある .gitignore を見ると次のように設定され…

一度 AWS に deploy してた Serverless 化したアプリを再デプロイしようとしたらエラーになってしまったのメモ。 $ sls deploy で再デプロイしようとしたらエラーになってロールバックされてしまった。 $ sls deploy # … Serverless Error -----------------…

前回までのあらすじ TypeScript な Express を aws-serverless-express で Serverless 化して AWS Lambda にデプロイしました。 データベースを使えるように AWS の DynamoDB に接続できるようにしてみたメモ。 serverless.yml に DynamoDB の設定を追加する…

前回までのあらすじ TypeScript な Express アプリを aws-severless-express で Serverless 化して AWS にデプロイする所までできました。 しかしデプロイしたパッケージ (zip) には node_modules のファイルが含まれており、サイズが巨大なものになっていま…

TL;DR AWS も Lambda も自分で調べて〜なレベル感なのでなんも分かってません。 とりあえずガチャガチャやってみて、動いてるんじゃね？となったので、そこまでもプロセスをまとめただけのエントリーになります。なので、たぶん超長い記事になってると思いま…

Fn + Tab で Capslock / Capslock の解除が出来る。 Fn + Tab おわり。 使ってるお安い HHKB が時々 Capslock になった状態で Shift キーが押されたままになってしまう症状が出る。 Shift が押されたままの状態が解除できないから Capslock も解除できなくて…

はい。 Setup $ npm install # dev 用環境変数ファイル $ cp .env/.env.sample .env/.env.dev # prod 用環境変数ファイル $ cp .env/.env.sample .env/.env.prod Development /src 内の TypeScript を監視してホットリロードする開発モードです。 $ npm run …