デイトラ PR

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

記事内に商品プロモーションを含みます。

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

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

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

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

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

ばく

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

当記事では

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

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

\デイトラを受けるならここから/

課題やり直し

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

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

ばく

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

原因を探ってみたら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,

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

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

中級最終課題が終わらないよー!

閉じタグの数が合わずエラーが出続けるコードに見切りをつけて、新たに書き直しています。が、2回目でも以下のような失敗談が出てきます。

あれやこれやの失敗談
  • ピクチャータブがうまく機能しない
  • →ネストのimgで調整
  • リセットcssが邪魔をして画像が思ったように表示されない
  • →リセットcssを変更
  • リセットcssが邪魔をしてスワイパーがうまく機能しない
  • →<link>タグの順番をスワイパーを先にする
  • ファイル分割してみたら読み込まない
  • →スペルミス、対策にスニペット登録
  • タグの変更が開始タグ、閉じタグ同時にできない
  • →拡張機能、設定の見直し
ばく

一つ一つ調べて直しておりますので非常に時間がかかっています。ほとんどの場所で詰まってる気がする。

ですが、デイトラで大事とされている「自走力」は身についている自信がありますね!

これからも続けたらどうなるか?を更新していくので見て頂ければ幸いです。

リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。

自分も何かのスキルを得たい、変わりたいと思っている方、

一緒に頑張りませんか?

WEB制作のスクールは安い買い物ではありませんが、

頑張るだけの価値はあると感じます。

\デイトラを受けるならここから/

【体験談】初心者がデイトラでプログラミングを学んだらどうなる?【16週間目】 当記事はデイトラでWEB制作コースを受講して16週間、どんな状況でどんな勉強をしているのかまとめています! 未経験、プログラミン...
ABOUT ME
ばく
30代×朝活×学びなおしをテーマに、実践していることを発信しています。 オンラインスクール「デイトラ」WEB制作コースの体験談を主に書いています。