当記事はデイトラでWEB制作コースを受講して30週間、どんな状況でどんな勉強をしているのかまとめています
未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。
- 未経験でもできるの？
- 他の人がどんな風に勉強しているのか知りたい。
- デイトラを受講したいと思っているけどどんなカリキュラムなの？
- どれくらい時間がかかるもの？
そんな方の判断材料になれば幸いです！
なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。
デイトラweb制作コース卒業制作課題にて、wordpressを扱っています。
この記事では以下のことについて書いています
- デイトラweb制作コースの卒業課題について
- どれくらい時間がかっているか
- 詰まった箇所と直し方
デイトラって卒業するものなの？明確な基準がある？など疑問に思ってる方は覗いてみてくださいね。
＼デイトラを受けるならここから／
デイトラweb制作コースの卒業課題について
web制作コースの卒業課題として、一つのサイトをwordpressで作り上げます。
初級、中級で学んだ静的なコーディング(HTML,CSS,Javascript)
上級で学んだWordPressをつかったサイト構築。
これらを総合して２週間で行うというものです。とはいえ、時間的には無理なことがほとんどなので時間にかかわらず完成させるというものです。
人によっては何ヶ月もかかる課題ですが、wordpressを使ったサイト作成は需要が高い為、踏ん張りどころです(๑•̀ㅂ•́)و✧
私は2週間かけてようやく静的なコーディングを終わらせ、wordpressの構築に取り掛かることができました
難しいと評判の課題ですが時間をかけてでも完走したいと思います(๑•̀ㅂ•́)و✧
どれくらい時間がかっているか
この記事を書いている現在2024/06/30ですが、
静的なコーディングに13日(62H)ほど、
wordpressの構築に現在１週間(20H)ほどかかって、まだまだ終りが見えません。
一般的かどうかと言われると、おそらくそんなに早くはない(遅すぎることもないと思いたい💦)です。
課題の目標としては2週間(１日8H稼働の週休2日で80H)と想定していると思われます。
普通に作り上げるだけでも大変なのに時間が〜（泣）
詰まった箇所と直し方
今後の忘備録として詰まった箇所、こうすればよかったと思うところをまとめていきます。
特にwordpressに移ってからは沼にハマり続けているのでこれからも増えそうです(´・ω・｀)
似たような表現のスタイルが被り、表示が崩れる
サイトとして、デザインが統一されると同じような表現がいくつも見受けられます。
このサイトの見出しやタイトルなんかもそうですね。
卒業制作の課題もページが変わって同じような表現があるのですが、同じようなだけで微妙に違っていて、コピペで手抜きをするとあっちはいいのにこっちが良くない、ということが起こります。
作っている最中では気づかず、最後に見直して使いまわしたスタイルが崩れているのに気づく、直したら２つ目のほうが崩れて…ということを繰り返していました。
直しかた
大人しくクラス名を分けて別のものとしてスタイルを当て直しました。
コードが長くなるし視認性が良くないのですが、確実に直せました。
クラス名が複雑、被り、長くなる
10ページにあるサイトを作成していて、似たような表現、表示をするページがあるとcssに当てるクラス名が被ったり、かぶりを避けるために長い名前をつけたりします。
クラス名が被ったら後につけた方のスタイルが優先されてしまうため、また表示が崩れる…と。原因を探すのも一苦労でした。
BEM(ベム)と呼ばれる命名規則を中心につけていると似たような表現が増えてしまいました。
対策
10ページあるページの名前をそれぞれ変更して、クラス名の頭にページの名前をつけて共通パーツはなくしました。
「css全体をネストしてしまえばいい」というアドバイスを受けて実行したところ、被りやスタイルの崩れが減りました。
画像を入れるファイル、ファイル分割しているscssファイルがものすごく増える
セクションごとにフォルダやファイルを分割してわかりやすくするぞとしたところ、どんどんフォルダやファイルが増えていき、収集がつかなくなりました。
ファイルを探すのが一苦労という本末転倒なことに…
規模の大きなサイトを作るうえではもっと大変なんだろうなとおもいつつ、一般的なサイトを作るだけでも何も考えずに行ったためめちゃくちゃになりました。
対策
ファイルとフォルダをHTMLのファイル名と同じにして、セクションごとに分けることをやめました。
ページごとに探せば良くなったり、ファイル数が14→9に減ったりと、かなりスッキリしました。
その時に画像パスが変わってしまうのですが、vscodeの一斉置換を使って全ファイルの文字列を変更できるショートカットを使って処理しました。
VScodeの全置換はCommand＋Shift＋ｈのショートカットで行えます。
wordpress化したらクラス名などが変更される
HTMLしかやってこなかった人間にはコレが一番きついです…
独自のブロックやid、クラスにwordpressのクラスが勝手について、頑張って作成した静的なコーディングの内容が生かされないこと多くあります。
リストとして並んでいるものにクラス名をつけていたらただの<li>になっていたり、ブロック自体がオリジナルとなって親要素のプロパティが効かなかったりで大変な思いをしています。
しっかり作り込んだ人ほど辛いのではと思ってしまいます…。
スワイパーなどのライブラリを読み込む必要があるものも、改めて設定しないと動きませんでした。
対策
まだ始めたばかりなので大した対策ではないのですが、実際に実装してみて、表示が変なのはdevtoolでクラスを確認。
確認したクラスやidに対してスタイルを指定するといった方法を取っています。
プラグインや別の方法があるのかもしれませんが、コーダーとしてはcssでスタイルを当てたいのです。
デイトラ卒業制作課題3週目を振り返って|まとめ
デイトラ上級編DAY31~44
— ばく＠朝活×デイトラweb制作 (@kakamigaharabac) June 30, 2024
8:30~10:30 12H トータル 884H
✅Recent Posts Widget Extended の導入
プラグインにてサイドバーを編集するも、思うようにいかずハマっています🤔
少し気分転換をして再度挑戦します🤗#デイトラ#web制作 pic.twitter.com/FErD8LDYdW
デイトラ受講から30週目、880H学習してきました。
卒業制作は80H程度、毎日学ぶ日々です。静的なコーディングは多少慣れてきたかな？というところです。
wordpressが独特！難しいというよりは新しいことなのでわからないことが多すぎる感覚です。ここでつまづいてしまう人もいるかも知れません。
ただ、毎日失敗し続けても続けている人間もいるので、そんなやつでもできるんだと少しでも励みになってくれたなと思います。
現在学習時間は882時間ほど。wordpresに毎日振り回されています。
これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。
リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。
自分も何かのスキルを得たい、変わりたいと思っている方、
一緒に頑張りませんか？
WEB制作のスクールは安い買い物ではありませんが、
頑張るだけの価値はあると感じます。
＼デイトラを受けるならここから／
