デイトラのロゴ

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

コーディング練習編
DAY 10
コーディングのスピードを上げるためのスニペットを作ろう

今回はコーディングのスピードを上げるための、おすすめのコードスニペット方法を紹介していきます。
コードスニペットを使うことで大幅な作業時間の短縮になるので、ぜひ取り組んでみてください！

TIPS

01.スニペットの重要性やメリット

スニペットのメリット
  • 再利用の自由
  • 品質の向上

02.【Notionを使ったスニペット集を作ろう①】 導入と基本操作

Notionの導入

Notionのダウンロードはこちらから

Wiki、ドキュメント、プロジェクトがつながるコネクテッドワークスペース | Notion (ノーション)

Notionの基本操作

Notionのマークダウンショートカット

キーボードショートカット – Notion (ノーション)ヘルプセンター

多彩な表現方法とショートカット、markdown記法

03.【Notionを使ったスニペット集を作ろう②】 スニペット集の作成

まずは簡単にできる基本的な使用方法を紹介しました。Notionに慣れてきたら、ぜひご自身で応用して自分が使いやすいように管理してください！

以下は過去の受講生りょーさん( Xアカウント )の活用例になります。

過去の受講生のNotion活用例

VS Codeに登録すべきEmmet登録用スニペット130種

04.VS Codeのユーザースニペット機能

VS Codeのユーザースニペット機能とは、特定のキーとソースコードのセットを登録することで、短いキーの入力でソースコードの塊を簡単に展開できる機能のことです。

ユーザースニペット機能を使うことでかなりの作業時間が短縮できますので、よく使うソースコードはユーザースニペットに登録して効率化しましょう！

HTML編

CSS編

ユーザースニペットに関するドキュメント

Visual Studio Code のスニペット#スニペット構文

PHPのスニペットを登録する際は注意しよう！

PHPの開始タグと終了タグ「 <?php?> 」を含むスニペットは、グローバルスニペットかhtml.jsonに登録しましょう。
php.jsonに登録したスニペットは、PHPの開始タグの中でのみ展開することができます。

05.【おすすめプラグイン Easy Snippet】VS Codeの拡張機能を使った簡単登録方法

拡張機能「Easy Snippet」

Easy Snippet

「Easy Snippet」の登録エラーについて

登録するJSONファイルの中に文法エラーが残っていたり、登録するJSONファイルの中身が空になっていると「Unexpected token “」のエラーが表示され登録することができません。詳しくは以下のよくある質問をご確認ください。


「Easy Snippets」で「Unexpected token “」のエラーが表示され登録できない。

06.【おすすめユーザースニペットの紹介①】HTML編

動画補足

3:23付近で「fotter」と記述していますがつづりが誤っています。正しくは「footer」になります。

おすすめスニペットHTML

以下のコードをユーザースニペットに登録することで、動画と同じスニペットが使用できます！
すでにユーザースニペットを登録されてる方は、{}の部分はコピーせずにお使いください。

コピー{
  "Section Inner": {
    "prefix": "in",
    "body": [
      "<${2:section} class=\"$1\">",
      "\t<div class=\"l-inner\">",
      "\t\t$3",
      "\t</div>",
      "</${2:section}>"
    ]
  },

  "Picture": {
    "prefix": "pic",
    "body": [
      "<picture class=\"$1\">",      
      "\t<source media=\"(${2|min,max|}-width: ${3:768}px)\" srcset=\"$4\">",
      "\t<img src=\"$5\" alt=\"$6\" decoding=\"async\">",
      "</picture>"
    ]
  },

  "Global Navigation": {
    "prefix": "navul",
    "body": [
      "<nav class=\"p-navigation-${1:header}\">",
      "\t<ul class=\"p-navigation-${1:header}__list\">",
      "\t\t<li class=\"p-navigation-${1:header}__list-item\">",
      "\t\t\t<a href=\"\" class=\"p-navigation-${1:header}__link\"></a>",
      "\t\t</li>",
      "\t</ul>",
      "</nav>"
    ]
  },


  "Br SP": {
    "prefix": "brsp",
    "body": [
      "<br class=\"u-hidden-pc\">"
    ]
  },

  "Br PC": {
    "prefix": "brpc",
    "body": [
      "<br class=\"u-hidden-sp\">"
    ]
  }
}

07.【おすすめユーザースニペットの紹介②】SCSS編

おすすめスニペットSCSS

以下のコードをユーザースニペットに登録することで、動画と同じスニペットが使用できます！
すでにユーザースニペットを登録されてる方は、{}の部分はコピーせずにお使いください。

コピー
{  
  "After": {
    "prefix": "af",
    "body": [
      "&::after {",
      "\t$1",
      "}"
    ]
  },

  "before": {
    "prefix": "be",
    "body": [
      "&::before {",
      "\t$1", "}"
    ]
  },

  "Flex Gap": {
    "prefix": "dfg",
    "body": [
      "display: flex;",
      "gap: $1;"
    ]
  },

  "Flex Center": {
    "prefix": "dfc",
    "body": [
      "display: flex;",
      "justify-content: center;"
    ]
  },

  "Flex Center Center": {
    "prefix": "dfcc",
    "body": [
      "display: flex;",
      "justify-content: center;",
      "align-items: center;"
    ]
  },

  "Flex Between": {
    "prefix": "dfb",
    "body": [
      "display: flex;",
      "justify-content: space-between;"
    ]
  },

  "Flex Wrap": {
    "prefix": "dfw",
    "body": [
      "display: flex;",
      "flex-wrap: wrap;"
    ]
  },
  
  "Flex Direction": {
    "prefix": "dfd",
    "body": [
      "display: flex;",
      "flex-direction: column;"
    ]
  },
  
  "Media Quely": {
    "prefix": "mq",
    "body": [
      "@include g.mq(\"${2|md,lg,xl,xxl,sm,sp|}\") {",
      "\t$1$3",
      "}"
    ]
  },

  "Absolute Center Center": {
    "prefix": "abc",
    "body": [
      "content: \"$1\";",
      "position: absolute;",
      "top: 50%;",
      "left: 50%;",
      "transform: translate(-50%, -50%);"
    ]
  },

  "Absolute Center Y": {
    "prefix": "aby",
    "body": [
      "content: \"$1\";",
      "position: absolute;",
      "top: 50%;",
      "left: $2;",
      "transform: translateY(-50%);"
    ]
  },

  "Absolute Center X": {
    "prefix": "abx",
    "body": [
      "content: \"$1\";",
      "position: absolute;",
      "top: $2;",
      "left: 50%;",
      "transform: translateX(-50%);"
    ]
  },
  
  "First Child": {
    "prefix": "fc",
    "body": [
      "&:first-child {",
      "\t$1",
      "}"
    ]
  },
  
  "Last Child": {
    "prefix": "lc",
    "body": [
      "&:last-child {",
      "\t$1",
      "}"
    ]
  },
  
  "Nth Child": {
    "prefix": "nc",
    "body": [
      "&:nth-child($1n) {",
      "\t$2",
      "}"
    ]
  },
    
  "First Of Type": {
    "prefix": "fot",
    "body": [
      "&:first-of-type {",
      "\t$1",
      "}"
    ]
  },
  
  "Last Of Type": {
    "prefix": "lot",
    "body": [
      "&:last-of-type {",
      "\t$1",
      "}"
    ]
  },
  
  "Nth Of Type": {
    "prefix": "not",
    "body": [
      "&:nth-of-type($1n) {",
      "\t$2",
      "}"
    ]
  },
  
  "Not First Child": {
    "prefix": "nfc",
    "body": [
      "&:not(:first-child) {",
      "\t$1",
      "}"
    ]
  },
  
  "Not Last Child": {
    "prefix": "nlc",
    "body": [
      "&:not(:last-child) {",
      "\t$1",
      "}"
    ]
  },
  
  "Not Nth Child": {
    "prefix": "nnc",
    "body": [
      "&:not(:nth-child($1n)) {",
      "\t$2",
      "}"
    ]
  },

  "Not First Of Type": {
    "prefix": "nfot",
    "body": [
      "&:not(:first-of-type) {",
      "\t$1",
      "}"
    ]
  },
  
  "Not Last Of Type": {
    "prefix": "nlot",
    "body": [
      "&:not(:last-of-type) {",
      "\t$1",
      "}"
    ]
  },
  
  "Not Nth Of Type": {
    "prefix": "nnot",
    "body": [
      "&:not(:nth-of-type($1n)) {",
      "\t$2",
      "}"
    ]
  }
}

08.【おすすめユーザースニペットの紹介③】JavaScript編

おすすめスニペット JavaScript

以下のコードをユーザースニペットに登録することで、動画と同じスニペットが使用できます！
すでにユーザースニペットを登録されてる方は、{}の部分はコピーせずにお使いください。

コピー{
  "ConsoleLog": {  
    "prefix": "cl",
    "body": [
      "console.log($1);"
    ]
  },

  "Alert": {
    "prefix": "al",
    "body": [
      "alert($1);"
    ]
  },

  "QuerySelector": {
    "prefix": "dq",
    "body": [
      "document.querySelector(\"$1\")"
    ]
  },

  "QuerySelecterAll": {
    "prefix": "dqa",
    "body": [
      "document.querySelectorAll(\"$1\")"
    ]
  },
  
  "addEventListener": {
    "prefix": "adde",
    "body": [
        "element.addEventListener(\"${1:click}\", (e) => {",
        "\te.preventdefault()",
        "\t$2",
        "});",
    ]
  },
  
  "Toggle Class": {
    "prefix": "tc",
    "body": [
        ".classList.toggle($1);",
    ]
  },
  
  "Add Class": {
    "prefix": "ac",
    "body": [
        ".classList.add($1);",
    ]
  },
  
  "Remove Class": {
    "prefix": "rc",
    "body": [
        ".classList.remove($1);",
    ]
  }
}

おすすめスニペット jQuery

以下のコードをユーザースニペットに登録することで、動画と同じスニペットが使用できます！
すでにユーザースニペットを登録されてる方は、{}の部分はコピーせずにお使いください。

コピー{
  "jQuery": {
    "prefix": "jq",
    "body": [
      "jQuery(\"$1\")"
    ]
  },

  "Add Class": {
    "prefix": "ac",
    "body": [
      "jQuery(\"$1\").addClass(\"$2\");"
    ]
  },

  "Remove Class": {
    "prefix": "rc",
    "body": [
      "jQuery(\"$1\").removeClass(\"$2\");"
    ]
  },

  "Toggle Class": {
    "prefix": "tc",
    "body": [
      "jQuery(\"$1\").toggleClass(\"$2\");"
    ]
  },

  "Click Function": {
    "prefix": "cf",
    "body": [
      "jQuery(\"$1\").on(\"click\", function () {","});"
    ]
  },

  "Loading Function": {
    "prefix": "lf",
    "body": [
      "jQuery(window).on(\"load\", function () {$1});"
    ]
  }
}

09.【おすすめユーザースニペットの紹介④】PHP編

おすすめスニペット PHP

以下のコードをユーザースニペットに登録することで、動画と同じスニペットが使用できます！
すでにユーザースニペットを登録されてる方は、{}の部分はコピーせずにお使いください。

PHPのスニペットを登録する際は注意しよう！

PHPの開始タグと終了タグ「 <?php?> 」を含むスニペットは、グローバルスニペットかhtml.jsonに登録しましょう。
php.jsonに登録したスニペットは、PHPの開始タグの中でのみ展開することができます。

コピー
{
  "Loop": {
    "prefix": "ppih",
    "body": [
      "<?php if ( have_posts() ) : ?>",
      "\t<?php while ( have_posts() ) : ?>",
      "\t\t<?php the_post(); ?>",
      "\t\t<?php the_content(); ?>",
      "\t<?php endwhile; ?>",
      "<?php endif; ?>"
    ]
  },

  "PHP if": {
    "prefix": "ppif",
    "body": [
      "<?php if ($1) : ?>",
      "${3:<?php elseif ($2) : ?>}",
      "${4:<?php else : ?>}",
      "<?php endif; ?>"
    ]
  },

  "PHP": {
    "prefix": "pp",
    "body": [
      "<?php $1 ?>"
    ]
  },

  "Home_Url": {
    "prefix": "ppur",
    "body": [
      "<?php echo esc_url( home_url( '/$1' ) ); ?>"
    ]
  },

  "The_Time": {
    "prefix": "pptime",
    "body": [
      "<time class=\"$1\" datetime=\"<?php the_time( 'c' ); ?>\"><?php the_time( 'Y,m,d' ); ?></time>"
    ]
  },

  "The_title": {
    "prefix": "pptit",
    "body": [
      "<?php the_title($1); ?>"
    ]
  },

  "The_Content": {
    "prefix": "ppcon",
    "body": [
      "<?php the_content($1); ?>"
    ]
  },

  "The_Permalink": {
    "prefix": "pplink",
    "body": [
      "${1:<?php the_permalink($2); ?>}"
    ]
  },

  "The_Excerpt": {
    "prefix": "ppex",
    "body": [
      "<?php the_excerpt($1); ?>"
    ]
  },

  "Get_template_Parts": {
    "prefix": "ppgtp",
    "body": [
      "<?php get_template_part( 'template-parts/$1' ); ?>"
    ]
  },

  "Get_Header": {
    "prefix": "ppgh",
    "body": [
      "<?php get_header($1); ?>"
    ]
  },

  "Get_Footer": {
    "prefix": "ppgf",
    "body": [
      "<?php get_footer($1); ?>"
    ]
  },

  "Get_Template_Directory": {
    "prefix": "ppgtd",
    "body": [
      "${1:<?php echo esc_url( get_template_directory_uri() ); ?>}"
    ]
  },

  "Get_Stylesheet_Directory": {
    "prefix": "ppgsd",
    "body": [
      "${1:<?php echo esc_url( get_stylesheet_directory_uri() ); ?>}"
    ]
  },
}

10.困ったらまずは「よくある質問」をご覧ください！

よくある質問