フロントエンドエンジニア向けチートシート / 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のチートシート
最近Nuxt3と一緒に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のショートカットがまとめられています。
Discussion