【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ

# はじめに

こんな人が役に立つ記事
* コーディング業務の効率を上げたい。
* コーディングに関するチートシートを知りたい。
* 打つのもめんどいからコピペでなんとかしたい（笑）

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

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

<a href="https://camo.qiitausercontent.com/8e7b0b88be526969f856b75f97e05b23516f0d72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38313534382f30353238666333382d376132312d353665622d313331612d3562636663643866363965312e706e67"><img width="500" src="https://camo.qiitausercontent.com/8e7b0b88be526969f856b75f97e05b23516f0d72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38313534382f30353238666333382d376132312d353665622d313331612d3562636663643866363965312e706e67"></a>



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

### [HTML5 タグチートシート](https://atmarkit.itmedia.co.jp/fdotnet/chushin/cheatsheet_02/cheatsheet_02_01.html)
HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、
PDFでダウンロードできます。
<a href="https://atmarkit.itmedia.co.jp/fdotnet/chushin/cheatsheet_02/cheatsheet_02_01.gif"><img width="500" src="https://atmarkit.itmedia.co.jp/fdotnet/chushin/cheatsheet_02/cheatsheet_02_01.gif"></a>

### [HTML5 入れ子チートシート](https://yoshikawaweb.com/element/)

HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート
![html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821479/ae1ea23e-c751-2796-0a74-4da8e30173ed.png)

### [特殊文字一覧：HTMLで使える文字コードの一覧表](https://weblan3.com/html/special-character)

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

![スクリーンショット 2022-09-02 23.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821479/25deb374-8fec-573a-1853-d5b7e9dc8aca.png)

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

### [FlexBoxチートシート](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)
FlexBoxを理解できるチートシートになっています。並べ方を図などで解説しており、とてもわかりやすくまとまったチートシートの記事です。Webクリエイターボックスの無料ニュースレターへのご登録すれば、PDFでFlexBoxのまとまったチートシートがダウンロードできます。

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet


### [【CSS】メディアクエリチートシート](https://korenarawakaru.com/tech/css/mediaquery-cheatsheet/)

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


https://korenarawakaru.com/tech/css/mediaquery-cheatsheet/


### [SASSチートシート](http://www.corcoranstudio.com/documents/corcoranstudio_sasscheatsheet.pdf)

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

http://www.corcoranstudio.com/documents/corcoranstudio_sasscheatsheet.pdf


### [Bootstrap5チートシート](https://bootstrap-guide.com/sample/cheatsheet)

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

https://bootstrap-guide.com/sample/cheatsheet

### [Tailwind CSSチートシート](https://nerdcave.com/tailwind-cheat-sheet)

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

https://nerdcave.com/tailwind-cheat-sheet


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

### [JavaScriptチートシート](https://jsprimer.net/cheatsheet/)
JavaScriptの機能に関するチートシートで、コメント、データ構造、演算子、関数と挙動など、詳しく載っているのでJavaScriptの学習にもなる記事です。

https://jsprimer.net/cheatsheet/


### [jQueryチートシート](https://qiita.com/anago1030/items/62da6bc05bca7a0bee55)
Web制作で使用されているjQueryの書き方を学ぶことができます。

https://qiita.com/anago1030/items/62da6bc05bca7a0bee55

### [jQuery -> Vanilla JSの変換](https://web-cheatsheet.com/jquery-to-vanillajs)
最近では、React.jsやVue.jsが台頭してくる中で、jQueryに依存しない純粋なJavaScriptの書き方を覚えるために、jQuery -> Vanilla JSの対応関係をまとまったチートシートです。

https://web-cheatsheet.com/jquery-to-vanillajs

### [TypeScriptチートシート](https://www.typescriptlang.org/cheatsheets)
型定義の基本文法から少し応用的な内容まで記載してあるチートシートです。
TypeScriptの基礎なことを理解するのにいいチートシートになります。

https://www.typescriptlang.org/cheatsheets

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

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

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

### [PHP基本文法チートシート](https://qiita.com/igayamaguchi/items/78a8ac41baf5b453c698)
PHP基本文法書いてあるPHPの基本が記載してあるチートシートです。

https://qiita.com/igayamaguchi/items/78a8ac41baf5b453c698

### [Laravelマイグレーションのチートシート](https://qiita.com/kamome_susume/items/22fe17935bbd1760b7f7)
Laravelのマイグレーションのコマンド一覧が掲載されていおり、マイグレーションファイルの作成などもの掲載してるチートシートです。

https://qiita.com/kamome_susume/items/22fe17935bbd1760b7f7

### [日本語版 WordPressチートシート](https://more-field.co.jp/web/wordpress-cheatsheet/)
WorePressのテーマカスタマイズ時に使用する基本的なタグをまとまっており全てコピペで使用できるので、便利なチートシートです。

https://more-field.co.jp/web/wordpress-cheatsheet/


## 正規表現チートシート
PDFで分かりやすくまとまっているチートシートです。

http://yoshikawaweb.com/w/wp-content/uploads/regex-cheat-sheet.pdf



## まとめ

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