【2022年5月】技術系 記事まとめ
1ヶ月間で読んだ技術系の記事の中からいくつか厳選して毎月まとめています。
CSS
- Styling `select` elements for real - Microsoft Edge Blog
- 【CSS】CSSの擬似クラス :toggle()を使ってToggle Switchを作る - Qiita
JavaScript
- &&・||「ウチらってさぁ。よく誤解されんだよね…」【JavaScript】 - Qiita
- JavaScriptの上限・限界値 - Qiita
- import * as 構文とパフォーマンス最適化 - Qiita
- JavaScriptのコードには、こんな書き方もある
React
- The Complete Modern React Developer 2022 - DEV Community
- 【React】Function Componentsに型をつけるときFCを使う?それともJSX.Elementを使う? - Qiita
- なぜReactは標準でComponentをmemo化しないのか?
TypeScript
フロントエンドほか
- React + Typescript の現場で初心者からよくあった質問とか小技的なのを書いてく - Qiita
- 【React/Vue.js】コンポーネント設計の(個人的)ベストプラクティス | Offers Tech Blog
ブラウザ
- New in Chrome 101 - Chrome Developers
- What's New In DevTools (Chrome 102) - Chrome Developers
- New WebKit Features in Safari 15.5 | WebKit
Web系ほか
デザイン / UI / UX
Python
プログラミング / 開発
ツール / サービス
- GoogleI/O 2022で発表されたFirebaseの新機能をまとめてみた。 - Qiita
- [速報]マイクロソフト、ArmネイティブなVSCode、.NET、WSLなど投入へ。Python、Node.jsなどのArm対応も進行中。Microsoft Build 2022 - Publickey
- GitHubがMarkdown内で数式表記をサポート、TeX/LaTeX構文で記述 - Publickey
- [速報]マイクロソフト、開発環境をまるごとクラウドPCとして用意できる「Dev Box」を発表。Microsoft Build 2022 - Publickey
- Visual Studio CodeがMarkdownのサポートを強化。ファイルのドロップでリンクを自動作成、見出しへの参照一覧など。Visual Studio Code 1.67(April 2022) - Publickey
Next.js + TypeScript 環境構築メモ
Next.js (+TypeScript) の環境構築
create-next-app のインストール
npm i -g create-next-app
プロジェクトの作成
npx create-next-app@latest --typescript
実行
npm run dev
ESLint の設定
パッケージのインストール
npm i -D eslint
設定
npx eslint --init
質問に答える
How would you like to use ESLint? To check syntax, find problems, and enforce code style What type of modules does your project use? JavaScript modules(import/expoer) Which framework does your project use? React Does your project use TypeScript? Yes Where does your code run? Browser How would you like to define a style for your project? Use a popular style guide Which style guide do you want to follow? Standard What format do you want your config file to be in? JavaScript Would you like to install them now with npm? Yes
Prettier の設定
パッケージのインストール
npm i -D prettier eslint-config-prettier
.eslintrc.js に Prettier の項目を追加する
module.exports = { extends: [ "prettier", ], };
emotion の設定
パッケージのインストール
npm i -D @emotion/react @emotion/babel-plugin @emotion/styled
.babelrc の設定
{ "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } } ] ], "plugins": ["@emotion/babel-plugin"] }
tsconfig.json の設定
{ "compilerOptions": { "types": ["@emotion/react/types/css-prop"], } }
【2022年4月】技術系 記事まとめ
1ヶ月間で読んだ技術系の記事の中からいくつか厳選して毎月まとめています。
HTML
CSS
- 最近のWebサイトで見かける! フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ | コリス
- CSSの:has()疑似クラスの便利な使い方を徹底解説 | コリス
- これまでとは異なるCSSフレームワークが登場! 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props | コリス
- 知っておくと便利! CSSでUIデザインを微調整する時短テクニックとプロセスを解説 | コリス
- これならコピペで簡単! HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball | コリス
- Don't use 100vh for mobile responsive - DEV Community
- いざという時に使える13のHTML&CSS Tips集 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
JavaScript
- .toLocaleString, one of the most underrated JavaScript features - DEV Community
- だいたいのJS処理系で console.log の this が不要になっていた件 - Qiita
- エープリルフールなのでJavaScriptの信じがたい話をします - Qiita
- JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と - Publickey
- V8エンジンによる内部変換コードでasync/awaitの挙動を理解する
- Denoのフロントエンド開発の動向【2022年春】
React
- React 18 - New Features & Improvement Strategies - DEV Community
- React Refs: The Complete Story - DEV Community
- ⚛️ ReactJS folder structure + Boilerplate. - DEV Community
- React v18.0 – React Blog
- Code-Splitting – React
- React 18正式版リリース。コアとなるレンダリングモデルに並行処理を導入、レンダリング速度、サーバサイドレンダリング速度の向上などを実現 - Publickey
- 保守性の高いReact hooksコードの指針
TypeScript
- TypeScript におけるモジュール関連オプションの整理. TypeScript 4.7 で “module” という名前で始まる… | by Yosuke Kurami | May, 2022 | Medium
- 同値型を判定する型 | uraway
- イベントループと TypeScript の型から理解する非同期処理
フロントエンドほか
- Nested Components in a Design System | CSS-Tricks - CSS-Tricks
- 「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開 - Publickey
- 少しのコードで実装可能なHTML小技集 | Webクリエイターボックス
- フロントエンドエンジニアが知るべきキャッシュを理解する
ブラウザ
- What's New In DevTools (Chrome 101) - Chrome Developers
- New to the web platform in April
- New WebKit Features in Safari 15.4 | WebKit
- Windows最速のブラウザはChrome。最下位は? | ライフハッカー[日本版]
Web系ほか
プログラミング / 開発
ツール / サービス
- Web制作にすごい役立つ! コードの軽量化や整形・ファビコンやQRコード作成・PDF変換など、便利ツールが一箇所で利用できる -ToolsOcean | コリス
- VSCode Extensions I'm in LOVE with - DEV Community
- 個人開発を黒字にする技術 - k0kubun's blog
- 2023年には新規アプリの60%がローコード/ノーコードで開発される、IDC Japanが予測。過去1年で国内の導入率は4倍超に - Publickey
- Google、ノーコード開発ツールのAppSheetに新機能「Apps Script connector for AppSheet」。Apps Script経由でのGoogle Workspaceとの連携処理が容易に - Publickey
SEO / マーケティング
- 個人開発したWebアプリに基本的なSEOを実践したので全部書く - Qiita
- SEOコンサルタントが必死で止める、間違ったSEO施策 |SEO Japan by アイオイクス
- SEOに効果的な「canonical(カノニカル)」の使い方 |SEO Japan by アイオイクス