いつもは Vue.js をやってるけど、たまには他のものも触ってみたい。 React も触ってるけど、もっといい感じのやつがほしい。 と思っていたところにいい感じのやつを発見（前から知ってたけど）。 SolidJS とは View ライブラリ。 React みたいに JSX を使う…

まえがき 仕事をしていく中で、「先週何やってたっけ」や「何か改善したかったんだけど忘れた」と思うことが多々あった。 そこで、「毎月振り返りをやる」というアクション案が出た。 個人でやったことを振り返り、思ったことなどをメモしておこうという作戦…

エンジニアとして仕事をする中で、ドキュメントを書くということが非常に重要であると度々感じていた。 これまでドキュメントライティングを学んできた中で役に立った記事や書籍、そしてキーワードとおすすめの学習順を紹介する。 キーワード ロジカルシンキ…

WCAG 2.1 を読んで超短縮してまとめたものです Abstract WCAG とは Web Content Accessibility Guidelines の略 このガイドラインには、ウェブコンテンツをよりアクセシブルにするための推奨事項が載っている なぜ WCAG があるのか このガイドラインに従うと…

フロントエンドのコードをいじるときは、だいたいこういう流れでやるとよさそうというのを書いたものです。 あくまで「自分はこう思う」という一例です。 特にフロントエンド開発をするとき固有の事情について記載してあります。 フレームワークは Vue.js で…

「英語の学び方」を学ぶ記事。 エンジニア向けに作ったけど誰にでも刺さる内容になってた。 いちばん大事なこと 楽しむ 「勉強」と捉えてしまうと楽しくない。 そして続かない。 後述するが、英語学習は日々のトレーニングが重要なので、モチベーションを保…

複数のプロパティをまとめて指定できるショートハンド。 自分も気軽に利用していたが、詳しく調べてみると気をつけなければいけない仕様が結構あり、なるべく使わないほうがいいのではないかと感じた。 対象 あらゆるショートハンドプロパティ。 all, animat…

基本的にほとんどコピペで動くようになっているはず Slack に Webhook 通知する const sendWebhook = (webhookUrl, payload) => { const options = { method: 'post', contentType: 'application/json', payload: JSON.stringify(payload), } UrlFetchApp.fe…

BFF（Backend for Frontend）という言葉を気軽に使っているが、結局なんなのか分かってなかったので、ちゃんと本を読んで理解してみた。 読んだ本 マイクロサービスアーキテクチャ 第2版 雑な要約 「14 章 UI」の「14.8 制約」以降のまとめ。 前提 デスクト…

国語の教科書のように最初から最後まで本を読んでいると、一冊読むのに凄まじい時間を消費してしまう。 そんなことをせず、効率的に本を読んで知識を仕入れるための方法を解説する。 忙しい人は「TL; DR」だけ読んだらいいけど、全部読んだほうが時短できる…

本 【この1冊でよくわかる】 ソフトウェアテストの教科書 [増補改訂 第2版] https://www.amazon.co.jp/dp/481560875X TL; DR ソフトウェアテストの目的 ソフトウェアの欠陥を取り除く ソフトウェアがユーザーの要求を満たせるようにする ソフトウェアが顧客…

シェル芸（シェルコマンド）の使い方を覚えるための課題を作ってみた。 内容は「自分はこんな感じで学んでいったような気がする」という完全なる主観。 課題 ファイル一覧を出す ls とよく使うオプション a, l, t, 1 ls のヘルプを見る ls --help, man ls ls…

iTunes で複数の関連する CD を取り込んだのだが、曲のタイトルが統一されていなかった。 具体的には、「[CD 番号]-[トラック番号]」みたいになってほしかったのに、1 つの CD だけ「トラックxx」みたいな形式でインポートされてしまった。 ファイル名を変え…

Temporal とは JavaScript で日付を扱うための新しい API。 github.com ポリフィルが 2 つあって、1 つはブラウザでポリフィルが試せる。 www.npmjs.com 現在のステータスは stage 3 なので、普通はいくつかのランタイムで実装されれば stage 4 になり、晴れ…

FILE_PATH="ファイルパス"; echo 'javascript:(async () => {' "$(deno bundle ${FILE_PATH} | egrep -v '^// ' | tr -d '\n' | gsed -r -e 's/ +/ /g')" '})()' | pbcopy TS をコンパイルするときは // @ts-nocheck をつけてあげれば型チェックを無効にでき…

これまで「伝える」ということについて自分が学んだことをまとめた すべてできているわけではないし、これが 100% あっているというわけではないし、メッセージの種類によってもポイントは違ってくる 不足しているものがあるはずなので追記していきたい ポイ…

読んだ本 技術者のためのテクニカルライティング入門講座 https://www.amazon.co.jp/dp/B07JHZMH9C 以前読んでまとめていたものがあったのでブログに投下。 本の要約 読みやすい文章を書くために 読みづらい文書になる要素 一文が長い 自分視点で書いている …

こちらのツールを使用すると、Next.js で作ったアプリを Firebase に公開するのがめちゃめちゃ簡単にできました。 github.com Google 社員が管理しているものの、Firebase 公式ツールではないし現時点では experimental なので、理解した上で利用してくださ…

一言に「npm」って言っても実はいろんな意味があるのでまとめた そもそもなんの略？ Node Package Manager Node.js のパッケージを管理するやつ パッケージ？ 使い回せるようにしたコード 誰かが作って公開している関数とかクラスとかそういうやつ Node.js …

自己終了タグとは、<タグ名 /> のように、/> で終わっているタグのこと。 ……だと思っていた。 ふとしたタイミングで「自己終了タグが書けるのはどの HTML タグなんだろう」と疑問に思ったので調べてみた。 仕様を調べてみる HTML のシンタックスはこちらに記…

以前にこの本を読んで感想を簡単にまとめていたのを発掘したので、ここにも載せておこうかなと思います 「自立したチームに権限を与えて信頼する」文化 これが「ユニコーン企業のひみつ」 プロジェクトよりミッション プロジェクトは意味がないこと（納期や…

git rebase をした時、ファイル内容が同じなのにコンフリクトしてしまうことがある。その現象の理由を説明し、コマンドで簡単に解消する方法を解説。

Vue.js 3.0 で最も大きい変更である Composition API を使えるので使ってみたので、その感想をまとめてみた。

前置き Vue.js + JavaScript 環境に TypeScript を導入しようとしたときの話です。 コンポーネントを TypeScript 化してコンパイルはでき、テスト（Jest）が通るか確かめたときの話です。 前置き やったこと バージョン エラー内容 なぜこのメッセージが表示…

タイトルのとおりで、TypeScript をある程度やっている人なら当然のことかと思いますが。 interface の拡張 TS の interface って拡張できるじゃないですか。 interface Foo { bar: string } interface Foo { baz: number } /* // 結果 Foo: { bar: string b…

はじめに 「JavaScript ではなく TypeScript で書け」と、去年くらいからかなり言われています。 私も JavaScript と TypeScript を使っているので、それにすごい共感します。 しかし、実際に型付けするときには結構困ることがあると思います。 そこで、つい…

タイトルどおりなのですが、TypeScript の社内勉強会を開催しました！ 勉強会で使用した資料 https://gitpitch.com/tee-talog/try-typescript 今回は GitPitch を利用してスライドを作成しました。 簡単にスライドが作れるので、それほどデザインにこだわら…

お気持ち表明（いわゆるポエム）です。 前置き 現在関わっている JavaScript プロジェクトには Prettier が入っていません。 また、ESLint は入っていますが（Standard）、--fix をしていない状況です。 そして、Vue.js を利用してしますが、eslint-plugin-v…

TL;DR body { scroll-padding-top: <ヘッダーの高さ + α>; } 前置き 下の記事では、ヘッダー・フッターは position: fixed; より Flexbox とか CSS Grid とかで作ったほうがいいのでは、的な話をしました（個人の感想です）。 www.tee-talog.com そうはいっ…

TL;DR eslint-plugin-vue を導入してから Prettier を入れないと、変な風にフォーマットされることがあるよ。 TL;DR 背景 Prettier を導入したい！ 導入方法 1. Prettier を実行してから ESLint を実行 2. ESLint と同時に Prettier を実行 地獄 どうしてこ…