【2021年1月】今月読んだ良記事
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。
CSS
- CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス
- Web制作者が知っておくと便利なCSSの小ネタ | コリス
- コピペで簡単!ボタンやテキストリンク、アイコンで使えるCSSのさまざまなアニメーション -CSSeffectsSnippets | コリス
- Tailwind CSSが私には合わなかった理由 | コリス
- aspect-ratio | CSS-Tricks
- caret-shape | CSS-Tricks
- caret | CSS-Tricks
- margin-block | CSS-Tricks
- How to Play and Pause CSS Animations with CSS Custom Properties | CSS-Tricks
- FlexBox Cheat Sheets in 2021 || CSS 2021 - DEV Community
- グラスモーフィズム?CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP
- Centering in CSS
- 垂直方向のマージンにはmargin-topを優先的に使う理由 - Yuhei Yasuda
JavaScript
- State of JS 2020
- Animating with Lottie | CSS-Tricks
- Custom Properties as State | CSS-Tricks
- Theming and Theme Switching with React and styled-components | CSS-Tricks
- Optional Chaining Operator - DEV Community
- 7 Unique APIs for your next project - DEV Community
- 10 Awesome Free Courses for Devs by Devs - DEV Community
- 【Node.js】開発に必要な基礎知識まとめ - Qiita
- JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
- とにかくJavascriptで同期処理 - Qiita
- ちょっと高度なJavaScriptの話 - Qiita
- webpackの基本だけどハマりやすいentryの設定と[name] - Qiita
- リーダブルテストコード - Qiita
- State of JavaScript 2020:いちばん利用率の高いJSフレームワーク、フロントエンドがReact、バックエンドはExpress、テストにはJest。2万4000人の調査結果 - Publickey
React
- Video Chatting and Screen Sharing with React, Node, WebRTC(peerjs) - DEV Community
- Push Notifications in ReactJS with OneSignal - DEV Community
- What is useCallback hook in React? - DEV Community
- Next.js公式examples集を分類(2021年1月版) - Qiita
- [React] ReduxもMobXも合わなかったので状態管理ライブラリを自作してみた話 - Qiita
- React入門!!の前に知っておきたいNode.jsとJavaScriptの知識 - Qiita
- Reactアプリのデバッグ方法 - Qiita
- あなたが知っておくべき最高のReactデザインパターン - Qiita
- React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
- 今からでも遅くない!誰も教えてくれなかった React とアクセシビリティーの世界
TypeScript
- TypeScriptの導入にあたって考慮すべきメリットとコスト - LINE ENGINEERING
- まだTypeScriptのTypeGuard関数を手動で書いてるんですか!? - Qiita
- TypeScript:関数の引数に同じ長さの配列を渡したい - Qiita
- TypeScript 4.1で密かに追加されたintrinsicキーワードとstring mapped types
フロントエンドほか
- 各CSSフレームワークやJavaScriptフレームワーク等のデータを比較してグラフ化している・「Moiva.io」 | かちびと.net
- Are These the Most Interesting Front-end Developer Tools for 2021? - DEV Community
- フロントエンド開発者のための便利なオンラインツール11選 - Qiita
- フロントエンドコーディング時によく利用するジェネレーターサイト(随時更新) - Qiita
- 【React+TypeScript】Netflixのクローンを作るチュートリアル - Qiita
ブラウザ
- Chrome 88のここに注目!CSSのaspect-ratioプロパティでアスペクト比が簡単に、別窓はデフォルトでnoopenerに | コリス
- Apple、Windowsユーザー向けのChrome拡張機能「iCloudパスワード」をリリース | 気になる、記になる…
- Big Sur搭載のSafariはWebP画像を標準サポート、AVIFもサポートしてくれるかも | 海外SEO情報ブログ
Web系ほか
- 2021年版、フロントエンドとバックエンドのデベロッパーに必要なスキルやツールをまとめたロードマップ | コリス
- The Complete Full Stack Web Developer Roadmap 2021 - DEV Community
- GoogleやMicrosoftなどIT大手連合が「Open Web Docs」を発表 - GIGAZINE
- 2021年のウェブ標準とブラウザ:新春特別企画|gihyo.jp … 技術評論社
- VS CodeのAdobe XD用拡張機能が登場!デザインシステムにもとづきコード出力と補完が可能に - ICS MEDIA
- React を Azure Static Web Appsでホスティングする開発・本番環境を作る - Qiita
- Google、マイクロソフトらが設立、「Open Web Docs」を発表。MDNなど支援、Web技術のドキュメント化を推進 - Publickey
- WebAssemblyをWin/Mac/Linuxで実行可能なランタイム「Wasmer 1.0」正式リリース。事前コンパイルによる高速起動やクロスコンパイルなどにも対応 - Publickey
- Webエンジニアとしていま知っておきたいWebアクセシビリティ
デザイン / UI / UX
- デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
- Webデザインの出来を左右する「コンポジション」の重要性 | アドビUX道場 #UXDojo | Adobe Blog
- 最近のロゴのデザインに使われている、2021年に注目しておきたいトレンドのまとめ -Logo Design Trends 2021 | コリス
- 任天堂「Wii」のロゴの没案が発見される - GIGAZINE
- ダークモードにまつわる誤解を解いておく - Qiita
- 2021年に流行するWebデザインの最新トレンド12個まとめ | Web Design Trends
機械学習・AI
- 「バイクに乗るピカチュウ」「アボカドの椅子」など言葉から自動でイラストや写真を生成するAI「DALL・E」 - GIGAZINE
- 無料で読める統計学・機械学習周辺のチュートリアル論文や講義ノート10本 - Qiita
開発 / インフラ / ツール
- さまざまなオープンソースライセンスをまとめてみた。 - 紺屋高尾
- 3Dモデリングソフト「Blender」の操作を0から学べる1,400ページの解説書が無償公開 - 窓の杜
- コミットはスナップショットであり差分ではない - GitHubブログ
- テスト駆動開発(TDD)の利点に関する統計と研究(翻訳)|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社
- PythonやR対応の統合開発環境「JupyterLab 3.0」正式リリース。ビジュアルデバッガー搭載、レスポンシブ対応でモバイルデバイスの狭い画面でも使いやすく - Publickey
- 現代のオブジェクト指向の class の割れ窓化と宣言的プログラミング
SEO / マーケティング
その他
- 【2021年予想】5のスタートアップトレンドと注目サービス25選 デザイン会社 ビートラックス: ブログ
- プログラマがなりたい職業第1位になった話とか、昨今のプログラミングスクール問題とか - give IT a try
- 最近見かける新しいライセンスについて - Kengo's blog
- A list of actually useful Nocode tools and I am not talking about site builders. - DEV Community
- 65 Things I wish I knew when I started to Code 🌱🚀 - DEV Community
- “YouTube”がPWAに対応 ~PCやモバイル端末にインストールして利用できる - 窓の杜
- Twitter・Slack・Discordなどのチャットサービス統合アプリ「Beeper」が登場、WindowsやAndroidでもiMessageを利用可能 - GIGAZINE
- エンジニア採用で絶望する瞬間【面接官の本音】 - Qiita
- ポートフォリオのアプリを公開したらイタズラされまくった話 - Qiita
- Qiitaのいろいろランキング2020 - Qiita
- 技術的なハマりパターンを分類・オサレに命名し、パターン毎に解決策(エンジニアのググり方・質問の仕方)を明示してみた - Qiita
- ITエンジニアが投票した「ITエンジニア本大賞2021」ベスト10発表。「オブジェクト指向UIデザイン」「Clean Agile」「思考法図鑑」など - Publickey
- エンジニアの幸せを奪いがちな7つのこと
ブレークポイントの決め方
今回は個人的なブレークポイントの決め方を共有してみようと思います。
- 1. iPhoneの最大サイズを調べる
- 2. iPadの最小サイズを調べる
- 3. SPデザインを切り替えるブレークポイントを決定する
- 4. タブレットのデザインを用意するか否か
- 結論
- 感覚的な決め方
- さいごに
1. iPhoneの最大サイズを調べる
まずはiPhoneの最大サイズを調べます。
日本ではiPhoneのシェアが大きいのでiPhoneを基準として、iPhoneで一番大きいサイズまではSPデザインとします。
現時点では iPhone 12 Pro Maxの 428px が一番大きいようです。
2. iPadの最小サイズを調べる
次にiPadの最小サイズを調べます。
現時点では iPad mini の 768px が最小。
3. SPデザインを切り替えるブレークポイントを決定する
1 と 2 で調べたサイズの間、iPhoneの最大サイズとiPadの最小サイズ (428px~768px) でPCとSPを切り替える、というのがひとつの基準になるかと思います。
基本的にはiOS端末基準で決めてしまって大丈夫だと思いますが、Androidも考慮する場合、GoogleのPixelや、SonyのXperia、SumsungのGalaxyあたりが基準にしやすいかと思います。
「[デバイス名] viewport」とかで検索するとCSSのサイズが出てきます。
大抵のスマホは411pxぐらいまでで, 450pxは超えていないイメージです。
重要なのは、どの端末を基準にするか と、どの端末でどのデザインを表示したいか だと思います。
4. タブレットのデザインを用意するか否か
タブレットのデザインを用意せず、1つのブレークポイントでPC, SP切り替える場合は 768px に近いほうがバランスが良いです。(PCデザインを縮めすぎずに済むため。)
なのでキリよく 750px ぐらいでいいかなぁと個人的には思っています。
4-1. タブレットのデザインを用意する場合
逆にタブレットのデザインを用意する場合は、SPとタブレットのブレークポイントは 428px に近くていいと思います。
またしてもiPadを基準にブレークポイントを決めていきます。
細かく言うと、iPadのどのサイズまでをタブレット表示とするか、を決めます。
- スマホで横向きでページを見る人は少数だと思うので考慮しなくていいと思いますが、タブレットでは横向きでも見られることを考慮する必要があります。
- iPadの横向きは 1000px を超えてくるが、それぐらいになってくるとノートPCのサイズにもなってきて、タブレットで見られるよりPCで見られることが増える
と、この他にも考慮すべき点は多くあります。
個人的には、横向きは一旦無視してiPad Pro (12.9 inch)の縦画面サイズ 1024px以下 をタブレット表示でいいのかなという気がしています。
これだとだいたいのタブレットの横向きはPC表示になります。
結論
- PC / SP のブレークポイント1つで切り替える場合
- 428px ~ 768px ぐらいの範囲で 768px に近い場所
- PC / タブレット / SP のブレークポイント2つで切り替える場合
- 428px ~ 768px ぐらいの範囲で 428px に近い場所と、
- 1024px 付近の場所
こんな感じ。
感覚的な決め方
上記では主に端末のシェアを考慮しながらブレークポイントを決定してきましたが、感覚的な話をすると、
- PCサイズのまま縮めてみてバランスが悪くなるタイミング
- SPサイズのまま広げてみてバランスが悪くなるタイミング
という風にバランスを見て決定しても良いかと思います。
さいごに
割とiOSデバイス基準で考えてしまっていますが、個人のプロジェクトであればこの程度で良いかと思いますし、
自分は"バランスが悪くなったタイミングで〜"のパターンでブレークポイントを決めちゃうことも多いです。
他にも考慮すべき点は多々ありますので、他のブログ記事などで紹介されている決め方も参考にしながら考えると良いかと思います。
個人のプロジェクトではなく、会社の業務などで決める際は、Google Analytics のデータなどがあれば、そちらを参考に決定するのもいいと思います。
【2020年12月】今月読んだ良記事
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。
CSS
- CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト | コリス
- 2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど | コリス
- CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説 | コリス
- justify-items | CSS-Tricks
- mask-clip | CSS-Tricks
- CSS Individual Transform Properties in Safari Technology Preview | CSS-Tricks
- How to Add Text in Borders Using Basic HTML Elements | CSS-Tricks
- The 3 CSS Methods for Adding Element Borders - DEV Community
- Create Beautiful Images in CSS to Buff Up Your Portfolio - DEV Community
- メタプログラミング Sass - 柔軟なウェブデザインを実現する方法 - ペパボテックブログ
- 2020年度末のCSS総まとめ!有用でオススメな覚えておくべき新仕様をコードと画像付きで解説 - Yahoo! JAPAN Tech Blog
- Centering in CSS
JavaScript
- GitHubのトレンドで振り返る2020年のJavaScript | WEB EGG
- Give Users Control: The Media Session API | CSS-Tricks
- How One Developer Recreated AirDrop Using Just JavaScript - DEV Community
- A Guide to Securing Node.js Applications - DEV Community
- Build a Simple Chess AI in JavaScript - DEV Community
- async/await は Promise を置き換えない - Okapies' Archive
- package.json dependencies メンテの仕方 最短ルート - Qiita
- Promise のキャンセルについて - Qiita
- async/await は Promise を置き換えることは出来ると思う - Qiita
- Node+TypeScript+ExpressでAPIサーバ構築 - Qiita
- JavaScriptの非同期処理を制御する方法 - Qiita
React
- 正しく使えていますか? ReactのHooks APIおさらい(応用編) - ICS MEDIA
- React の Concurrent Mode を使ってみる(2020年12月版) - 30歳からのプログラミング
- 知っていると捗るcreate-react-appの設定 - Qiita
- [初心者向け]Reactの基礎を徹底解説してみた - Qiita
- React 17 で改良された JSX Transform はどのようなものか
TypeScript
- TypeScript で querySelector メソッドを使うときに型引数を指定する - Hatena Developer Blog
- TypeScriptのunsafeな操作まとめ | Tkr Blog
- TypeScriptでclassじゃないものを継承する - Qiita
- 7万行のJavaScriptコードをTypeScriptに移行した話 - Qiita
- TypeScriptで | を使わずにユニオン型を得る方法大全 - Qiita
- TypeScriptでMapped Typesを使ってきれいなインターフェースを作る話 - Qiita
- 0歳娘「パパ、型を作る関数はないの?」 - Qiita
- 5歳娘「パパ、型はドキュメントだよ?」 - Qiita
- TypeScriptにはanyが4種類、undefinedが3種類、……
フロントエンドほか
ブラウザ
- ウェブブラウザにバグ報告をするときにやること - ぱすたけ日記
- 34 Must have Chrome Extensions for Web Developers and Designers - DEV Community
- ChromeのアップデートでGoogleフォントがページ読み込みのボトルネックになるという指摘 - GIGAZINE
- Chrome・Safari・Firefoxで比較!クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能(パフォーマンス編) - ICS MEDIA
Web系ほか
- 2020 Roundup of Web Research | CSS-Tricks
- Converting and Optimizing Images From the Command Line | CSS-Tricks
- 50 free tools and resources you're gonna love - DEV Community
- Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング
- Web制作の時短に!2020年の便利オンラインツール・ベスト100選 - PhotoshopVIP
デザイン / UI / UX
- 2021年のトレンドカラーは2色!太陽の輝き「イルーミネイティング」と信頼の「アルティメットグレー」 | コリス
- 【総まとめ】2020年公開のすごいPhotoshopチュートリアル、作り方厳選まとめ - PhotoshopVIP
- 「UI悪すぎじゃない?」ハンバーガーのオンラインオーダーでオプションを選択していったらパテと玉ねぎ2本だけのバーガーが届いた話 - Togetter
- 8の倍数ルールでデザインする理由とメリット・デメリット | Blog | Yuya Kinoshita
PHP
Python
機械学習
開発 / インフラ / ツール
- 技術選定/アーキテクチャ設計で後悔しないためのガイドライン - Qiita
- 僕が考える最強のコミットメッセージの書き方 - Qiita
- GraphQLはサーバーサイド実装のベストプラクティスとなるか - Qiita
- Google Apps Script の新しい IDE の機能、変更点まとめ - Qiita
- GitHub Hacking ~GitHubを容量無制限のクラウドストレージとして使用する試み~ - Qiita
- GitHub、自動でマージが実行される「Pull request auto-merge」機能を発表。GitHub Universe 2020 - Publickey
SEO / マーケティング
- 【順位向上に貢献する】2021年にSEOを改善するための10の方法 |SEO Japan by アイオイクス
- 【決定版】ランディングページ最適化(LPO)ガイド |SEO Japan by アイオイクス
iOS / Android
その他
- TwitchやFacebookに続き、YouTubeがオープンソースのライブ配信アプリOBS Studioを開発している「OBS Project」のPremier Sponsorに。 | AAPL Ch.
- 僕らはいつまでUSB Type-Cケーブルを選ぶのに迷うのだろう…もう間違えないための覚え書き - Magnolia Tech
- GitHubが2020年のユーザー数やリポジトリ数、人気の高いプログラミング言語やトピックなど使用状況を詳細にまとめたレポート「The State of the Octoverse 2020」を公開 - GIGAZINE
- 知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA
- 新卒1年目が荒れ果てた開発環境に1年間でCIを導入し単体テストを布教した話 - Qiita
- 初プルリクで心がボロボロにならないためのセルフチェック観点をまとめてみた - Qiita
- エンジニアの評価制度を考える - Qiita
- 単一責任原則で無責任な多目的クラスを爆殺する - Qiita
- エンジニアとデザイナーが幸せに協働するための6つの処方箋 - Qiita
- 1年半のソフトウェアエンジニア長期インターンで出会ったオススメ本をたくさん紹介します - Qiita
- GitHub、最も使われている言語はJavaScript、TypeScriptも急上昇。パンデミック後にGitHubの利用が急増。年次レポート「The 2020 State of the Octoverse」発表 - Publickey
- [速報]SalesforceがSlackを買収で合意。正式発表 - Publickey