はじめてコーディングするときに絶対やること

コーディングを始めたときに絶対やった方がいいことを考えてみました！

テキストエディタはVScodeを使う前提でのお話となります。

VScodeのプラグインの準備

以下のプラグインは全部入れる

・ Emmet
・beautify
・Auto Close Tag
・Auto Rename Tag
・EvilInspecto
・indent-rainbow
・Bracket Pair Colorizer 2
・Highlight Matching Tag
・Live Server
・HTML CSS Support

それぞれのプラグインがどんな動きをするのかを確認することも大事です。
説明文を読んでわからない言葉があればそれも調べて理解する努力は必要です。

Emmetは必須なのですが、Beautifyも必須です。

Emmetを使いこなす練習をする

Emmetはめちゃくちゃ便利なツールで、これ無くしてはコーディングなんてやってられません！

具体的に何ができるかというと定型文を簡単なキー入力で完遂できます。

そのため素早くコーディングできるようになるのですが、初心者にとっては素早くできることよりも、間違いなくできるようになることにメリットがあると思います。

最低限この２つはできないといけません！

・クラスを付けて展開できるようにする
・HTMLタグやCSSプロパティはEmmetに書かせる

例えばclassをつけるとき

<h1 class="header">見出しですよ</h1>

クラスをつける時にはclass=""と入力しなければいけませんが、これを毎回記述するのは明らかに時間がかかりますし、ミスの元です。

Emmetを使えば

h1.header

と入力してTabキーを押すと

<h1 class="header"></h1>

ここまで自動で入力してくれます！

.header

とだけ入力してTabキーを押すと

<div class="header"></div>

上記のようにdivタグで展開されます！

コーディングの授業を受ける時に先生は絶対この操作を行うので、慣れていないとめちゃくちゃ早く感じます！

ついていけないよって思うくらいですので確実に覚えてください。

その他にもimgタグに必須なsrc=""やaタグに必須なhref=""などもEmmetを使うと勝手に書いてくれるので、手打ちしなくていい分、楽ですしミスがありません。

ちなみにimgと入力してTabキーを押すと

<img src="" alt="">

aと入力してTabキーを押すと

<a href=""></a>

このように最低限必要なところを勝手に書いてくれます！

Tabキーを押してみるとある程度勝手にいいようにしてくれますね！

CSSを書くときはもっと気を聞かせてくれます。

margin-topはmt
font-sizeはfz
background-colorはbgc

これでTabキーを押すとそれぞれ正しいプロパティに書き換えてくれます！

全部覚える必要はなくてなんとなく頭文字のアルファベットを入力してみると、予測変換みたいな感じで候補がいくつか出てきます。

さらに時短するためには

・入れ子の書き方
・ラップする時の書き方

この２つを覚えると楽になります。

意識すること

最後にコーディングする上で日頃から意識した方がいいと思うことをお話します。

まずは基本的なショートカットを覚えることです。

１つ戻るはcommand(ctrl)+z
セーブはcommand(ctrl)+s

この2つは鉄板です。

大体のソフトで動きます。

さらにVScodeのショートカットなのかわからないのですが、選択範囲を複製する場合、複製したい範囲を選択した状態で

command+option+↓キー

これで複製してくれます。

繰り返す箱やリストアイテムを複製する時にはとても便利です。

まとめ

今回はコーディング初心者が絶対やるべきこと、意識することを共有してみました。

まずはここからはじめてみてもらうとスムーズに進めてもらえるかなと思います！

意味のわからない言葉が出てくることもありますが、そんな時はとりあえずその言葉を検索してみてください。

初心者のうちは知らない言葉だらけでしんどいと思いますが、その先に進んだ人たちはそれらの言葉の意味を全部知っています。

しんどいのは今だけ、言葉とその意味を覚えなくては会話できないのと同じなのでしばらく辛抱しましょう！