【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【17週間目】

当記事はデイトラでWEB制作コースを受講して17週間、どんな状況でどんな勉強をしているのかまとめています!

未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

未経験でもできるの？
他の人がどんな風に勉強しているのか知りたい。
デイトラを受講したいと思っているけどどんなものなの？

そんな方の判断材料になれば幸いです！

なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。

ばく

デイトラ中級最終課題を1からやり直しています…。こんなやつは私くらいじゃないでしょうか…。

当記事では

なんで一から課題やり直してるのか。
やり直したのに全然うまくいかない私の失敗談
きれいにするためにスニペット登録

これら失敗談からの対策をまとめています！

＼デイトラを受けるならここから／

課題やり直し
2回目なのにすごく時間がかかる
- pictureタブ(ピクチャータブ)の調整方法
VScodeのスニペット登録や設定、PCの設定
- 追加しているスニペット
【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【17週間目】❘まとめ

課題やり直し

先週パソコンを買い替えて、意気揚々とコードを書いていましたが、うまくコンパイル(自動的に変換してくれること)されていませんでした。

都度ソフトのオンオフを切り替えてコードを書いていました。それでできていたのです。

ばく

それにしてもおかしい、エラーと言う文字がずっと出ている。

原因を探ってみたらHTMLの閉じタグ(</div>という、/バックスラッシュが入ってるやつ)が足りていませんでした。

この時点で40時間ほどプログラムを書いていて、閉じタグを直していくと表示が崩れて取り返しのつかないことになりました。

あっちを直せばこっちが崩れる、ということで、1からやり直したほうが綺麗にできる…(泣)となり、課題をやり直すことになりました。

エラーがなければソフトをオンオフなんかしなくても自動的にコンパイル(勝手にいい感じに変換してくれる)されてストレスなくコードを書けます。

エラーがずっと出ていたため自動的にコンパイルされないな〜なんてずっとやっていました…。

2回目なのにすごく時間がかかる

同じ課題を2回やるなんてすぐできると思いますよね。私はそう思います。

今まで

崩れていたところ
分かりづらかったところ
放置していたところ

を直し直し作業をしていたらとても時間がかかってしまいました。

ばく

40時間かかった1回目とあまり変わらないペースという、いつになったら終わるのかわからないペースです…。

最終課題には最初にでっかい画像が出る(ファーストビューといい、サイト構築でよくあります)のですが、スマホとPCで画像が切り替わります。

pictureタブというものを使って表現する(中級ではそう習ってきている)のですが、うまくいかず別の方法で表現してしまった(cssのbackground)ところを変更。

また、閉じタグが足りないなんて事態をなくすために全部にコメントをいれるようにするなどの工夫をしています。

他にも1回目にはなかったエラーが起きたり、リセットcssが思わぬ効果を発揮して崩れが直せなかったりと亀の歩みです…。

pictureタブ(ピクチャータブ)の調整方法

忘備録としての記録です。

pictureタブに付いて調べると、以下の記述が多いです。

pictureタブはcssで調整できない。
HTMLに直接width,heightを書く必要がある。

これを鵜呑みにしてcssでの調整を諦めていたら全然できませんでした。

ものすごいドアップだったり、画面を広げると画像がついてくる(動く)など、「なんか思ってるのと違う…」となっていました。

ピクチャータブのネスト(入れ子)のimgに画像の調整用のcssを当ててみたところうまくいきました！以下がコードになります。

.fv {
  position: relative;
}

.fv__background {
  //位置の調整
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%; //横幅いっぱいに出す
  overflow: hidden; //はみ出たら消える
  img {
    //画像の調整
    object-fit: cover; //高さを固定しつつアスペクト比を守る
    object-position: center center; //画像のポジション
    width: 100%; //表示する横幅を画面いっぱいにする
    height:  //表示する高さを固定
  }

  @include mixin.mq("lg") {
//　レスポンシブに対応、pcサイズ
    height:
    img {
      height: 100%;
    }
  }
}

VScodeのスニペット登録や設定、PCの設定

新しく設定し直し、不備が出ないように注意しつつ作業するのに設定を整えました

具体体には以下の設定を行いました

ファイル分割を最初から行う
分割に伴い増えた記述をユーザースニペットで補足
全閉じタグにコメントアウトする
開始タグと閉じタグを同時に編集できる拡張機能の追加

見やすくするために

サブディスプレイを使用
ディスプレイを縦2つに並べる、上は書く用、下は読む用

追加しているスニペット

スニペット登録(辞書登録のようなもの)を思いついたら足しています。

使っていて便利だな〜と感じたスニペットを紹介していきます。

HTMLのスニペット

クラス命名時にコメントアウトする。参考｜じゅんぺいブログ

// Emmetの構文プロファイルを設定、クラス命名時にコメントアウトする。
  "emmet.syntaxProfiles": {
    "html": {
      "filters": "html,c"
    }
  },

SCSSのスニペット

変数をまとめたファイル(_variable)を呼び出すときに使う

  "@use variable": {
		"prefix": "var",
		"body": [
		  "variable."
		]
	  },

ミキシンをまとめたファイル(_mixin)呼び出しつつレスポンシブ対応をする

"@use mixin": {
		"prefix": "mi",
		"body": [
		  "@include mixin.mq(\"${1|pc,sp|}\") {",
		  "\t$2",
		  "}"
		]
	  },

コメントを書く

  "Comment out": {
		"prefix": "ca",
		"body": [
		  "/* \t$1 */"
		]
	  },

追加した拡張機能

Auto Rename Tagを追加して、開始タグを編集したら閉じタグも編集できるようにしました。

さらにsetting.jsonにて、以下を追加

// リンクされた編集を有効にする設定
  "editor.linkedEditing": true,

以上の処置で開始タグと閉じタグを同時に編集できるようになります。