エンジニア向けチートシート集

## はじめに

今回はエンジニア向けのチートシート集のまとめを紹介していきます。

チートシートを利用することで

- 作業効率が上がる
- 概要が掴みやすい
- 学習にもなる

といった恩恵が得られます。

ただし前提として毎回コードを書くたびに「**チートシート集でカンニングすればええや**」と思うのではなく「**最初はチートシートでカンニングしつつ徐々に体で覚えていく**」ことを意識して使うことが大切です。

最終的にはチートシートは見ずに「**自分の使える技術**」として定着させるための道具だと思って使ってください。

## この記事の対象者

- エンジニア初心者~中級者
- 作業効率を上げたい人
- コードを書くテクニックを知りたい人

## [VsCodeチートシート](https://camo.qiitausercontent.com/8e7b0b88be526969f856b75f97e05b23516f0d72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38313534382f30353238666333382d376132312d353665622d313331612d3562636663643866363965312e706e67)

はじめに紹介するのはエンジニアなら必ず使うであろうVsCodeのショートカットチートシートです。

![スクリーンショット 2022-07-17 9.25.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/426df1e4-285f-9308-7f87-ba03cdd032cc.jpeg)

VsCodeのショートカットは大幅に作業効率を上げてくれます。そのため早い内からショートカットを使うことを心がけて、覚えていくことがおすすめです。

## [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

次に紹介するのはQiita公式が出しているMarkdown記法のチートシートです。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

Markdownもエンジニアは必ず使うといっても過言ではないものなので、早めに習得することをおすすめします。

Qiita公式が出しているということもあって非常に見やすいチートシートになっています。

こちらも最初はカンニングしつつ徐々に体で覚えていくことを意識して使ってみてください。

## CSS周りのチートシート集

この章ではCSS周りのチートシート集を紹介します。

### [CSSセレクターチートシート](https://webliker.info/css-selector-cheat-sheet/)

はじめに紹介するのはCSSセレクターの使い方がまとめられている[CSSセレクターチートシート](https://webliker.info/css-selector-cheat-sheet/)です。

![スクリーンショット 2022-07-17 9.30.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/4f605cf1-4e6d-4330-00d4-77c867866a4e.jpeg)

CSSセレクターチートシートではセレクターの使い方がまとめられているので初心者にはかなりおすすめのチートシートです。

また後半では擬似要素といった少し応用的な内容も紹介されているので勉強としても使うことができます。

コード解説と共に図による解説もされているのでイメージがつきやすいチートシートです。

### [CSSチートシート](https://korenarawakaru.com/tech/css/mediaquery-cheatsheet/)

次に紹介するのはCSSの実装法が体系的にまとまっている[CSSチートシート](https://korenarawakaru.com/tech/css/mediaquery-cheatsheet/)です。

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

プロパティーやメディアクエリやセレクターなどCSSで使う要素が幅広く掲載されています。

こちらもDOMツリーの図がついているので勉強もしやすいチートシートになっています。

### [FlexBoxチートシート](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

次に紹介するのはFlexBoxの実装法がまとまっている[FlexBoxチートシート](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
)です。

![スクリーンショット 2022-07-17 9.53.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d36c6df7-003a-7842-c4f5-11607c004f9a.jpeg)

初心者の最初の登竜門かつCSSを使う上で必須項目であるFlexBoxを体系的に学ぶことができるチートシートになっています。

並び方の図も掲載されているのでイメージを持って学習をすることができます。

FlexBoxに自信がない人や学び直したい人におすすめのチートシートです。

### [Sassチートシート](https://devhints.io/sass)

次に紹介するのは[Sassのチートシート](https://devhints.io/sass)です。

![スクリーンショット 2022-07-17 9.56.15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/1493f919-393e-b860-a876-d7624565ebe2.jpeg)

こちらのチートシートではSass記法について学ぶことができます。

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

CSS周りで最後に紹介するのは[Tailwind CSSチートシート](https://nerdcave.com/tailwind-cheat-sheet)です。

![スクリーンショット 2022-07-17 9.57.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/79e6c8d0-1f63-66b7-6d6f-042309a37acd.jpeg)

TailwindCSSの書き方が網羅的にまとまっているのでTailwindCSSの勉強をしている人には必須のチートシートになっています。

最初はこれを手元に置いて実装をし、徐々に体で覚えられるように意識して使うことがおすすめです。

## JavaScript周りのチートシート集

次にJavaScript周りのチートシートを紹介していきます。

### [モダン JavaScript チートシート](https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html)

まずはじめに紹介するのはモダンJavaScriptを学ぶことができる[モダン JavaScript チートシート](https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html)です。

![スクリーンショット 2022-07-17 10.06.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/6df44028-a3f7-6096-c590-e01a6a2b79b5.jpeg)

こちらのチートシートでは変数などの基本事項から始まり、非同期所理やクラスといった少し難しい内容も網羅しているチートシートになっています。

サンプルコードやMDNへのリンクも付いているため学習用としても使える構成になっています。


### [JavaScriptチートシート](https://javascript.pythoncheatsheet.org/)

次に紹介するのはJavaScriptの基本文法がまとまっている[JSチートシート](https://javascript.pythoncheatsheet.org/)です。

![スクリーンショット 2022-07-17 10.03.20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/2217b19b-d6aa-27d3-d4e2-2240ebd1a234.jpeg)

こちらは文法事項が具体的なコードと共にまとまられているので初心者でも勉強しやすい構成のチートシートになっています。


### [jQueryチートシート](https://qiita.com/anago1030/items/62da6bc05bca7a0bee55)

次に紹介するのjQuery特有の書き方を紹介している[jQueryチートシート](https://qiita.com/anago1030/items/62da6bc05bca7a0bee55)です。

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

Web制作で使われるjQueryの書き方を網羅的に学ぶことができます。

### [TypeScriptチートシート](https://www.typescriptlang.org/cheatsheets)

次に紹介するのはTypeScirptの公式から出ているチートシートです。

https://www.typescriptlang.org/cheatsheets

![スクリーンショット 2022-07-17 10.10.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3dda9c2c-cef3-fe96-3eed-807ca9b8991c.jpeg)

型定義の基本からジェネリクスといった少し応用的な内容まで網羅しているチートシートになっています。

TypeScriptの基礎学習や総まとめとして利用できるチートシートです。

### [The React Cheatsheet for 2022](https://www.freecodecamp.org/news/the-react-cheatsheet/)

次に紹介するのはReactの基本事項がまとまった2022年版のチートシートです。

https://www.freecodecamp.org/news/the-react-cheatsheet/#react-props

Reactのフックや状態管理方法などが網羅的にまとまっているチートシートになっています。

## [WordPressチートシート](https://more-field.co.jp/web/wordpress-cheatsheet/)

次に紹介するのはWordPressのタグがまとまった[WordPressチートシート](https://more-field.co.jp/web/wordpress-cheatsheet/)です。

![スクリーンショット 2022-07-17 10.55.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8b463cb0-60c7-e88d-d4df-b11bfce5f278.jpeg)

こちらのチートシートではWordPressで頻出の書き方が網羅的にまとまっています。

WordPressを実装する案件などでかなり重宝できるチートシートになっています。

またWordPressの学習を始めたい人も基礎から網羅的に学べるのおすすめのチートシートです。

## [Ruby-Cheatsheet](https://github.com/lifeparticle/Ruby-Cheatsheet)

次に紹介するのはRubyの文法が網羅的に掲載されている[Ruby cheat sheet](https://github.com/lifeparticle/Ruby-Cheatsheet)です。

https://github.com/lifeparticle/Ruby-Cheatsheet

こちらではRubyの基礎文法が簡易的なコードと共に掲載されているのでRubyの総復習として使えるチートシートになっています。

自分自身もRuby Silverの資格試験で文法を総復習する際に重宝しました。

## [Ruby on Rails Cheatsheet](https://gist.github.com/mdang/95b4f54cadf12e7e0415)

次に紹介するのは[Ruby on Rails Cheatsheet](https://gist.github.com/mdang/95b4f54cadf12e7e0415)です。

https://gist.github.com/mdang/95b4f54cadf12e7e0415

こちらはMVCモデルの解説から始まり、Railsの基礎を学ぶことができるチートシートになっています。

## 最後に

いかがだったでしょうか。

今回はエンジニア向けのチートシートをまとめました。

はじめにも言った通り、最初のうちはチートシートを使ってカンニングをし徐々に体で覚えていくことが大切です。

今回紹介したチートシートを使ってぜひ作業の効率を上げてみてください。

他にもいろいろな記事を出しているので読んでいただけると嬉しいです。

https://qiita.com/SMAC/items/e50c981e0518141be28f

https://qiita.com/SMAC/items/201c133d6eeaabf675a7

https://qiita.com/SMAC/items/f3268b311e11d5b821c0