猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

VSCodeの好きなところ

西野カナの曲、♪あなたの好きなところ をもじってみた。笑
歌詞に従って、「~ところ」って書いていってもいいけど、
さすがに見にくいからちゃんと書く(笑)


さあ今回から、VSCodeにプログラムを書いていく!(ちょっと楽しみ)

まずは、HTMLから。
プログラミング初学者にとって、一番とっつきやすいのは、おそらく画面だと考える。
となると、画面ってプログラミングなのか?設計なのか?ちょっと不明だが、
プログラミングって、学ぼう!、その仕事をしよう!と思わなかったら、たぶん一生知らないままで人生終わると思う。
でも今度から、小学校の授業かなんかに取り入れることになったんだっけか。
すごいなー、時代は変わるなー、歳とってくなーw
そんなわけで、頭がかたくならないうちにいっぱい覚えようと思う✊


と、いうことでボスから教材をいただいた。
f:id:msm20-chocolateee:20180724151258j:plain

できる」!はい、やってみせます!!👍
ぱっと見たところ、カラーで見た感じがわかりやすいので、とっつきやすそう…!
勉強はいいね。なにも課題がないより、あったほうが人生豊かになる気がする。人との交流もあるし…!

そしてその教材を参考に、はじめのHTMLをVSCodeで書いてみた。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLのてすとだよ</title>
</head>
<body>
<p>おはようございます</p>
<p>今日は<b><em>20分</em></b>残業します!</p>
</body>
</html>

はい、今日残業します。笑
で、書いたら保存(ctrl+s)する。その瞬間、感動!!

なにが起こったか。それは…

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTMLのてすとだよ</title>
</head>

<body>
  <p>おはようございます</p>
  <p>今日は
    <b>
      <em>20分</em>
    </b>残業します!</p>
</body>

</html>

保存した瞬間、なんとコードを整形してくれたのだ!!!!!
おおお、なんという機能!Atomくんには無かった!
素晴らしすぎて、一瞬口がぱかんって開いた(笑)
はじめにオススメされるがままにユーザー設定をいじったせいかもしれない。


その(推奨)設定方法はこうだ
1.VSCodeを開く
2.開いたら、左下の歯車マークをクリック
f:id:msm20-chocolateee:20180724162641p:plain
3.既定のユーザー設定とユーザー設定の二画面が表示される
 → ユーザー設定のほうに以下を設定する
f:id:msm20-chocolateee:20180724162844p:plain

これだけでOK!簡単3ステップ!


ここでタグの説明をしていく。

<!DOCTYPE html>

は、HTMLを書くときに必ずといっていいほど書く1行。
このタグは、HTML5で書かれているよって宣言してる意味かな。あまり意味は気にしなくていいと思う。でも大事。

<html></html>

タグは、HTMLでプログラムを書いているよ、と定義している。終了タグあり。
そう、終了タグには「/」がつくのでお忘れなく。

<head></head>

コンピュータ側の要素。この文章はどんなものかをコンピュータが読み取る部分。
ブラウザに表示させた時に、中身の書いた部分は、人間には見えない。コンピュータには見えているイメージ。

<meta charset="UTF-8">

この場合、「UTF-8」のエンコードで書くよ、という設定。

<title></title>

ブラウザに表示させた時に、上に出てくるタブの部分の名前。終了タグあり。
こんな感じ↓
f:id:msm20-chocolateee:20180724161144p:plain

<body></body>

ブラウザが表示する部分で、コンピュータと人間に見える部分。終了タグあり。

<p></p>

パラグラフ。段落のこと。表示された時、改行され上下に余白できる。終了タグあり。

<b></b>

文字を太文字にしたいとき。終了タグあり。

<em></em>

エンファシス。文字を斜体にしたいとき。終了タグあり。


さっそく上のHTMLファイルをブラウザに表示させてみると、
f:id:msm20-chocolateee:20180724164310p:plain

表示できてますね。「20分」を、太文字&斜体で書いているのも反映されている◎


で、最後に大事なのは、

.html」で保存すること!

じゃないとHTMLファイルじゃなくなっちゃうからね!!笑