フロントエンドエンジニア向けチートシート / Tipsまとめ

前書き

フロントエンドエンジニアの初心者から中級者の方や業務効率をUPしたい方向けに私が個人的に活用しているチートシートとTipsをまとめました。私も下記を活用して業務の中で「迷ったらチートシートとTipsを見て記述する」を繰り返して少しずつ覚えていっています。特に最近話題のChatGPTを使用したペアプロTipsは非常に勉強になったためぜひ最後まで目を通していただけると幸いです。

CSS関連のチートシート/Tips

ここでは、画面実装の効率を挙げられるCSS周りのチートシート/Tipsを6つご紹介します。

CSS FlexBox チートシート

横並びにして均等配置やスマホの場合は縦に変更など、幅広い場面で活用されるFlexBoxについてまとめられています。

CSSセレクタのチートシート｜37パターンを一覧で解説

セレクタについてはどのように指定するかを忘れてググることが多いので、一発で確認できるのはありがたいです。

CSSショートハンドのチートシート

CSSに慣れるとショートハンドで記述していくことになると思うので重宝しています。

Web code tools

CSS Generatorで直感的にstyleを生成できるお役立ちサイトです。HTMLやmetaタグについても生成できるのも◎

Can I use

CSSプロパティのブラウザの対応状況を分かりやすく示してくれます。HTMLやJSについても検索可能です。

Tailwind CSSのチートシート

最近Nuxt３と一緒にTalwind CSSを使用した時に活用しました。

JavaScript関連のチートシート/Tips

ここでは、JSのチートシート/Tipsを5つご紹介します。

Codecademy JavaScript チートシート

Codecademyの解説とコード例付きJSチートシート。

モダン JavaScript チートシート

基礎を理解した状態でモダンJS(React,Vueなど)を学んでいる人におすすめのチートシートです。

Typescript - チートシート

TypeScriptの基本や型定義、アサーションなど実装に必須の記述がわかりやすくまとめられています。

TypeScript Cheat Sheets

TypeScriptが公式で出しているチートシート。PngとPdfとしてダウンロードも可能です。

【JS・TS】コーディングTips集

JS・TSのコーディングにおけるTips(変数をオブジェクトのキーとして利用する方法やnullとundefinedの両方を確認する方法など)がまとめられています。

その他汎用的なチートシート/Tips

ここでは、フロントエンドに限らずエンジニアとして役立つチートシート/Tipsを4つご紹介します。

ChatGPT AIペアプロでのTips

実装でわからない点をChatGPTに相談しながら進めることが多く、今後はそれが当たり前になるのではないかと思うため知っていて得するTipsです。

Markdown記法 チートシート

Qiitaの公式が出してくれているMarkdownのチートシート。BacklogやgithubなどMarkdownを書く機会は多くあると思うので役立つと思います。

Gitチートシート

SourceTreeなどのGUIだけでなく、プロジェクトによってはgitコマンドを打つ場面が必ず出てくるため、知っておくべきです。

VSCode ショートカット チートシート

VSCodeのショートカットがまとめられています。