かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

2020-01-01から1年間の記事一覧

JavaScript で おしえて A to Z

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

JavaScript Object <---> Array の操作 Object.keys(), Object.values(), Object.entries(), Object.fromEntries()

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

コードで永遠を描いちゃぉ

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

Python3 クロージャやってみた

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

Python3 Class インスタンス変数とクラス変数・インスタンスメソッドとクラスメソット。それからスタティックメソッド

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

Python3 class の getter / setter のメモ

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

Git 直前のコミットメッセージを編集したい

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

Homebrew brew update で Error: homebrew-core is a shallow clone

開発環境アップデートしたからコマンド実行して〜って言われてやろうとしたら 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…

JavaScript 配列の要素を immutable に変更する方法を考えてみる

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

React v17 create-react-app で作ったアプリで ESLint に怒られまくった

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.…

JavaScript OS の判定をしたい

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

webpack v5 npx webpack-dev-server で dev server が動かないにハマる

久しぶりに 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-…

Express な API でエラーハンドリングするよ

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

Mac OS Catalina ターミナルで SSH 接続しようとしたら毎回パスフレーズをきかれるようになった

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

JavaScript 空オブジェクト {} かどうか判別したい。

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

mkdir 階層化したディレクトリを一発で作りたい。

存在しないディレクトリ内にディレクトリを作ろうとしたらエラーになる $ 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…

JavaScript margin 含めた width / height を取得したい

要素マージンを含めた 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, paeseFloat が NaN になるとき 0 を返したい

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

CSS Modules やっていき

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

webpack css-loader と style-loader の違いについて学んだ

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

Ruby GiHub のブランチをブランチを指定して gem で読み込ませたい

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>…

React create-react-app で作ったアプリの bundle サイズを確認したい

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

TypeScript で SCSS の変数を使いたい!にハマる 😇

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

React create-react-app したアプリで 開発時 (development) と build する時 (production) とで env を切り替えたい

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

Serverless で再 deploy したらエラーになった

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

Serverless でも DynamoDB を使いたい!

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

Serverless-layers で node_modules を Lambda にデプロイするパッケージから除く

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

TypeScript な Express を aws-seveless-express で Serverless にして AWS Lambda にデプロイするまでの記録

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

Mac Capslock を解除するショートカット

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

TypeScript Express 開発環境のテンプレート作った。

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