NFTを始めるなら日本円で始められるHEXA

【毎日コツコツ】デイトラ初級Day12 スニペットを作ってコーディングを短縮しよう!

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

デイトラ受講生のたくたくタックです。Webスキルを身につけたく完全未経験から受講を始めています。

といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。

こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。

毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します

過去に何度も挫折した私の記録はこちら→過去のブログ記事

タック
タック

ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。

Web制作を学ぶ理由

僕がWeb制作を学ぶ理由は大きく分けて3つあります。

1,単純にWeb業界に興味がある

2,Web制作に関わる仕事で多くの人に喜んでもらいたい

3,現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい

移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。

もっと知識や実務経験を増やしたいと思っています。

まずスニペットとはどういった意味かというと、

よく使うコードや定型文などをあらかじめ保存しておいて、必要なときに簡単に挿入できる便利なものです。例えば、プログラミングの際に同じようなコードを何度も書く必要がある場合、そのコードをスニペットとして保存しておきます。そして、同じ作業を繰り返す必要があるときに、スニペットを挿入することで時間を節約できます。

タック
タック

よく使うコードは今回紹介するNotion(スニペットのサイト)にまとめておいて必要な時に呼び出して使うことで、コーディング作業を効率良く行う事ができるよ。

Notionの使い方を学ぼう!

「Norion」は先ほど説明してようにスニペットを保存しておくサイトとなります。

他にもNotionは幅広く活用できるのですが、例えばスケジュール管理など多くのタスク管理などにも優れたサイトになっています。

ダウンロード方法

まずはNotionの無料ダウンロードを行いましょう。

登録はGoogleアカウントまたはメールアドレスがあれば簡単に登録できるようになっています。

Notion公式サイトから下記の画像の【ダウンロード】をクリックして登録を進めてください。

コードスニペット集の作り方

ここではNotionの簡単な基本操作を学びます。

まずは新しいファイルを作成していきましょう。

「ページを追加」をクリックします。

次に「題名・アイコン・文章の作成」の操作方法です。

①ページを追加すると無題のページが開くので題名とアイコン決定します。

②作業スペースに「 / (スラッシュ)」を押すと以下のブロックの種類を選択することができるのでその中から適切な項目を選びましょう。

こちらはブログなんかと似ているので割と簡単に理解ができました。

ブロック内でコードスニペット集を作るのに一番使うのは「コード」のブロック

それでは早速使ってみましょう!

Notionを使ってコードを保存しよう(コードスニペット集の作り方)

それではNotionを使ってコードを保存していきます。

まずは、ブロックの「テーブルビュー」を選択します。

これでスニペット集のリストが作れたので実際にコードを入力します。

テンプレートを活用してスピーディに登録しよう

次に画面の赤枠の「サイドピークで開く」を選択します。

次に登録するスニペットを入力していきますが、ここでポイントなのはテンプレートをあらかじめ作っておくことです。

タック
タック

毎回1から作ると時間が勿体ないのでテンプレートの作り方を紹介するね

「サイドピークで開く」をクリックしたあとに以下の赤枠「新規テンプレート」をクリックしてください。

新規テンプレートを開くと以下のページが開くので順に入力します。

  • 題名
  • タグ(HTML,CSS,Javaなど)
  • H2で見出し作成(その中でコードを選ぶ)

h2の中にHTMLやCSSといった見出しを作ったあとは、その項目の下にブロックで「コード」を入力すると以下の灰色の枠ができる。

Baby panda
Baby panda

HTMLやCSSの完成したシートがこちら!

コードを入力する以外にも、そのコードの説明があるとわかりやすいスニペット集になるので参考サイトも登録するようにしましょう。

今回参考にしたのが開発者向けウェブ技術ーMDNです。他にもわかりやすいブログがあればスニペット集に登録しておこう。

コードの意味を調べる役立つサイト→開発者向けウェブ技術ーMDN

【デイトラ初級 Day12】まとめ

このDay12ではスニペット集の登録方法について学びました。

ブログ記事ではNotionのみの解説としていますが、デイトラではVScode内でのスニペット登録の方法も深く学んでいます。

スニペット集を作るメリットですが、

  • 業務効率化(作業時間の短縮)
  • スペルミスが無くなる
  • 一貫性を維持できる
  • チーム間での共有
  • 学習としての活用

主にこういったメリットがあるため、これからコーディングを進めていく方には必須のものとなってくるのではないでしょうか。

僕もこれまで使ったことのないNotionでしたがこれから活用していこうと思っています。

タック
タック

ここで説明した使い方はほんの一部なのでYouTubeなど見ながら学習といいと思います

Notionの中には「テンプレート」も多く準備されているので参考にするとさらにタスク管理などにも活用できると思います。

それでは今回の記事はここまでにして次回の講義もしっかり学んでいきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA