はじめに

こんな人が役に立つ記事

今回は、コーディングに役立つチートシートをまとめました。

VSCODEチートシート

エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！

HTMLに関するチートシートをまとめてみました。

HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、
PDFでダウンロードできます。

HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート

HTMLで使用する特殊な文字コードが一覧で見れるサイトで、とても分かりやすく表にまとめてくれています。
コピペで使えるのでとても便利。

CSSに関するチートシートをまとめてみました。

FlexBoxを理解できるチートシートになっています。並べ方を図などで解説しており、とてもわかりやすくまとまったチートシートの記事です。Webクリエイターボックスの無料ニュースレターへのご登録すれば、PDFでFlexBoxのまとまったチートシートがダウンロードできます。

メディアクエリに記述方法を解説してくれているチートシートになります。

こちらはPDFなのでダウンロードできて、パッと見てわかりやすいチートシート。

こちらはBootstrap5のデザインサンプル集になっているので視覚的に見やすいのでチートシートです。

TailwindCSSの書き方が分かりやすくまとまってい。、TailwindCSSを使用する際は必須のチートシート。

javascriptに関するチートシートをまとめてみました。

JavaScriptの機能に関するチートシートで、コメント、データ構造、演算子、関数と挙動など、詳しく載っているのでJavaScriptの学習にもなる記事です。

Web制作で使用されているjQueryの書き方を学ぶことができます。

最近では、React.jsやVue.jsが台頭してくる中で、jQueryに依存しない純粋なJavaScriptの書き方を覚えるために、jQuery -> Vanilla JSの対応関係をまとまったチートシートです。

型定義の基本文法から少し応用的な内容まで記載してあるチートシートです。
TypeScriptの基礎なことを理解するのにいいチートシートになります。

Reactのフックや状態管理方法などがまとまっているチートシートになっています。
https://www.freecodecamp.org/news/the-react-cheatsheet/#react-props

基本文法やオプションがコードブロックで表示されているのでコピペ実行できるので便利です。
https://korenarawakaru.com/tech/vue/cheatsheet/

PHPに関するチートシートをまとめてみました。

PDFで分かりやすくまとまっているチートシートです。

いかがでしょうか？
このようにチートシートをまとまっていれば、いざ困った時も、サッと解決できたりするので作業の効率を上げていきましょう！！