はてなブックマーク

概要 社内勉強会の資料。 ReactのContextの考え方と、使い方について。 ちなみにここでは、有用性を伝えるというよりは実際の使い方を感じとってもらうというのがメインの目的です。 通常の使い方に加えて、Hooksでの使い方も合わせて記載します。 React.createContextとReact.useContextって何が違うの？って思ったら、対象読者です。 React Contextって？ Reactでは、基本的にコンポーネントがコンポーネント外から動的に値を受け取る方法はpropsのみです。 Reduxを使用する場合でも、react-reduxなどによってStoreの値をprops経由でコンポーネントに渡しますね。 Contextは、propsとは別の方法でコンポーネントに動的に値を渡す、React純正のAPIです。 Contextの存在意義 Contextは、propsのバケ

概要 Webページでアニメーションを実装しようとしたときに、どんな方法があるのかまとめる。 今回は「実装したい特定のアニメーションにとって良い方法とは」ではなく、Webのアニメーション全般に対する知見を深める目的。 このアニメーションどうしようかなと思ったときに見返せるように。 方法 参考リンク 特徴のコメント 実際の例 などを書く構成になっています。 パッとググって出てくるライブラリは網羅したはず。 ライブラリの細かい使い方についてはそれぞれ紹介している記事がいっぱいあるので、ここでは特徴をメモ程度に。 スター数や最終更新日は執筆時点のもので、こまめに更新する予定はありません。 目安程度で実際の値は実際にGitHubをご確認ください。 パフォーマンスについてはスコープ外です。 アニメーションの調査方法について 既存サービス/サイトのアニメーションに何が使われているか調べる方法としてChr

概要 Next.js 9.3から getServerSideProps という仕組みが導入されました。 上記がそのドキュメントですが、これを読んで感動した私はつい語りたくなってしまいました、私情が多分に含まれております、ああそういう視点もあるんだくらいに見ていただければと思います。 僕自身は、SEOをあまり気にしないいわゆるSPAっぽいWebページのNext.jsでの開発を1年ちょいくらい業務でやっていて、今もNext.jsユーザーです。 「getServerSidePropsって何が良いの？なんで生まれたの？」 「なんでgetInitialPropsは非推奨なの？」 「Vercel製のSWRってライブラリあるけど、あれ何？」 「てかgetServerSidePropsとSWRって関係あるの？」 この辺の疑問をお持ちのNext.jsユーザーの方は是非ご一読ください。 ※過剰な煽りタイトルで

社内勉強会のメモ CSSセレクタの詳細度とは 仕様 仕様にもある通り、「詳細度」というのは selector's specificity なので、「セレクタの詳細度」のこと。 詳細度は計算できる。 MDN 詳細度Specificityは、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。 「ちゃんとプロパティを書いてるのに適用されない！」みたいになってDevToolsを開いてみたら、実際に当てたいプロパティに打ち消し線が入っている、みたいなことが起きうる原因。 ※以下の文章の引用は、注釈が無い限りこちらのページからの引用となります。 基本 単品で比べた時のプロパティの優先度の高さの順番は以下の通り （ここで「詳細度」と書いていないのは、厳密に言えば!imp

概要 社内勉強会の資料。 TypeScriptのtsconfig.jsonにはオプションが色々とあるので、それらの意味や用途を理解する目的です。 tscのバージョンは3.7.2を使用します。 VSCodeのバージョンは1.40.1を使用します。 公式のドキュメント：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 公式ドキュメントの和訳：http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json また、各項目の詳しい説明はdetailsタグを使ってデフォルトで非表示にしています（全部デフォルトで表示するとめっちゃ長いので）。「詳しく」の部分をクリックすると展開されます。 2020年5月24日追記 公式のtsconfig.j

経緯 WebアプリケーションのDBとしてMySQLを使っている中で、タイムゾーンが問題となる場面にでくわしたのですが、datetime型とtimestamp型のタイムゾーン的な違いを明確に説明できなかったので、その他のことも含めてこの二つの型の違いを調べてまとめました。 また、O/Rマッパー（ActiveRecordとSequelize）のタイムゾーン設定の挙動もまとめました。 tl:dr すごく長くなりました。先にまとめを見た方が良いです。 => まとめ 前置き 2018/02/01現在、5.7の日本語リファレンスは無いようです。この投稿での実行環境は5.7ですが、5.6と5.7に違いがないものは日本語の方（5.6のリファレンス）を引用します。 違いを説明する際に必要となるMySQLのこと SQLモード関連 現在のSQLモードの確認 PaaSとか使うとSQLモードの設定は結構最初から色々