1152
Help us understand the problem. What are the problem?

posted at

updated at

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

はじめに

こんな人が役に立つ記事

  • コーディング業務の効率を上げたい。
  • コーディングに関するチートシートを知りたい。
  • 打つのもめんどいからコピペでなんとかしたい(笑)

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

VSCODEチートシート

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

HTML系のチートシート集

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

HTML5 タグチートシート

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

HTML5 入れ子チートシート

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

特殊文字一覧:HTMLで使える文字コードの一覧表

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

スクリーンショット 2022-09-02 23.17.50.png

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で分かりやすくまとまっているチートシートです。

まとめ

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1152
Help us understand the problem. What are the problem?