はじめに
こんな人が役に立つ記事
- コーディング業務の効率を上げたい。
- コーディングに関するチートシートを知りたい。
- 打つのもめんどいからコピペでなんとかしたい（笑）
今回は、コーディングに役立つチートシートをまとめました。
VSCODEチートシート
エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！
HTML系のチートシート集
HTMLに関するチートシートをまとめてみました。
HTML5 タグチートシート
HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、
PDFでダウンロードできます。
HTML5 入れ子チートシート
HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート
特殊文字一覧：HTMLで使える文字コードの一覧表
HTMLで使用する特殊な文字コードが一覧で見れるサイトで、とても分かりやすく表にまとめてくれています。
コピペで使えるのでとても便利。
CSS系のチートシート集
CSSに関するチートシートをまとめてみました。
FlexBoxチートシート
FlexBoxを理解できるチートシートになっています。並べ方を図などで解説しており、とてもわかりやすくまとまったチートシートの記事です。Webクリエイターボックスの無料ニュースレターへのご登録すれば、PDFでFlexBoxのまとまったチートシートがダウンロードできます。
【CSS】メディアクエリチートシート
メディアクエリに記述方法を解説してくれているチートシートになります。
SASSチートシート
こちらはPDFなのでダウンロードできて、パッと見てわかりやすいチートシート。
Bootstrap5チートシート
こちらはBootstrap5のデザインサンプル集になっているので視覚的に見やすいのでチートシートです。
Tailwind CSSチートシート
TailwindCSSの書き方が分かりやすくまとまってい。、TailwindCSSを使用する際は必須のチートシート。
javascript系のチートシート集
javascriptに関するチートシートをまとめてみました。
JavaScriptチートシート
JavaScriptの機能に関するチートシートで、コメント、データ構造、演算子、関数と挙動など、詳しく載っているのでJavaScriptの学習にもなる記事です。
jQueryチートシート
Web制作で使用されているjQueryの書き方を学ぶことができます。
jQuery -> Vanilla JSの変換
最近では、React.jsやVue.jsが台頭してくる中で、jQueryに依存しない純粋なJavaScriptの書き方を覚えるために、jQuery -> Vanilla JSの対応関係をまとまったチートシートです。
TypeScriptチートシート
型定義の基本文法から少し応用的な内容まで記載してあるチートシートです。
TypeScriptの基礎なことを理解するのにいいチートシートになります。
The React Cheatsheet for 2022
Reactのフックや状態管理方法などがまとまっているチートシートになっています。
https://www.freecodecamp.org/news/the-react-cheatsheet/#react-props
Vue.jsチートシートTECH
基本文法やオプションがコードブロックで表示されているのでコピペ実行できるので便利です。
https://korenarawakaru.com/tech/vue/cheatsheet/
PHP系のチートシート集
PHPに関するチートシートをまとめてみました。
PHP基本文法チートシート
PHP基本文法書いてあるPHPの基本が記載してあるチートシートです。
Laravelマイグレーションのチートシート
Laravelのマイグレーションのコマンド一覧が掲載されていおり、マイグレーションファイルの作成などもの掲載してるチートシートです。
日本語版 WordPressチートシート
WorePressのテーマカスタマイズ時に使用する基本的なタグをまとまっており全てコピペで使用できるので、便利なチートシートです。
正規表現チートシート
PDFで分かりやすくまとまっているチートシートです。
まとめ
いかがでしょうか？
このようにチートシートをまとまっていれば、いざ困った時も、サッと解決できたりするので作業の効率を上げていきましょう！！