【エンジニア向け】生産性を上げるチートシートまとめ

## はじめに

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

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

- 作業効率が上がる
- 大枠を掴める
- 学習になる

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

ただし、毎回コードを書くたびに「**チートシート集でカンニングすればええや**」と思うのではなく、「チートシートを使う中で徐々に体で覚えていく」ことが重要です。

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

## この記事の対象者

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

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

![スクリーンショット 2023-12-03 10.36.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d8dc6d6f-2e62-ba63-425c-21d0b3948da6.jpeg)

## [ChatGPTに関するチートシート](https://zenn.dev/nameless_sn/articles/chatgpt_cheat_sheet)

プロンプト集がまとめられています。

https://zenn.dev/nameless_sn/articles/chatgpt_cheat_sheet

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

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

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

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

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

## マークアップ系

### [HTML5チートシート](https://qiita.com/saboriman/items/b7461f0ab5526845a0a5)

HTMLのタグが整理されている。

https://qiita.com/saboriman/items/b7461f0ab5526845a0a5

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

![スクリーンショット 2023-12-03 10.40.15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/e62c9815-80d4-dbc3-2d04-a69e4ca827cc.jpeg)

https://webliker.info/css-selector-cheat-sheet/

### [css3-cheat-sheet](https://www.kobzarev.com/wp-content/uploads/cheatsheets/css/css3-cheat-sheet.pdf)

![スクリーンショット 2023-12-03 10.41.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/34980c06-2717-3f7f-cea0-86c2f2c66d69.jpeg)

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

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

![スクリーンショット 2023-12-03 10.42.05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/5b32e606-825c-2533-6380-e420cf10d3a6.jpeg)

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

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

![スクリーンショット 2023-12-03 10.42.46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/c066baae-1cd3-647c-fadf-5042b438cf5c.jpeg)

## フロントエンド系

### [JavaScriptチートシート](https://jsprimer.net/cheatsheet/)

![スクリーンショット 2023-12-03 10.43.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/4f3e4e1f-f0f9-9ef1-acf1-5c469f3285a4.jpeg)

MDNへのリンク先も付与されているので総整理としてかなり重宝できる。

https://jsprimer.net/cheatsheet/

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

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

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

![スクリーンショット 2023-12-03 10.45.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8d43182d-5a54-7226-4587-ef385dfb4c4d.jpeg)

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

### [React TypeScript Cheatsheets](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup)

ReactとTypeScriptの基本文法がまとめられている

https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

### [NextJs Cheat Sheet](https://blog.wrappixel.com/nextjs-cheat-sheet/)

https://blog.wrappixel.com/nextjs-cheat-sheet/

### [TypeScript Cheat Sheets](https://www.typescriptlang.org/cheatsheets)
TypeScriptの公式が公開しているチートシート

https://www.typescriptlang.org/cheatsheets

## WordPress

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

WordPressの記法が簡潔に整理されている。

![スクリーンショット 2023-12-03 10.48.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/4fe58c0d-f222-7b97-d613-d8981b345e38.jpeg)

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

### [実務で使うワードプレスのチートシート](https://renkosaka.com/wordpress-cheatsheet/)

実務現場で使えるWordPressの記法がまとめられている。

https://renkosaka.com/wordpress-cheatsheet/

## バックエンド

### [Python Cheatsheet](https://www.pythoncheatsheet.org/)

文法がまとめられている。

https://www.pythoncheatsheet.org/

### [Python初学者のためのPolars100本ノック](https://qiita.com/kunishou/items/1386d14a136f585e504e)

https://qiita.com/kunishou/items/1386d14a136f585e504e

### [Ruby Cheatsheet](https://github.com/ThibaultJanBeyer/cheatsheets/blob/master/Ruby-Cheatsheet.md)

https://github.com/ThibaultJanBeyer/cheatsheets/blob/master/Ruby-Cheatsheet.md

### [PHP Cheat Sheet](https://websitesetup.org/php-cheat-sheet/)

https://websitesetup.org/php-cheat-sheet/


### [Go cheatsheet](https://devhints.io/go)

https://devhints.io/go

## 最後に

いかがだったでしょうか。今回はエンジニア向けのチートシートをまとめました。

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

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

https://qiita.com/KNR109/items/d3b6aa8803c62238d990

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