プログラミング学習

プログラミング学習。5か月目前半の記録【ウェブカツで学習中】~HTML・CSS上級終了~

更新日:

こんにちは、もう早いもので、プログラミング学習5か月目に突入するぷちまま(@8JCPS844tsX5wLI)です。

 

↓プログラミング学習の動機などはこちら。

プログラミング初心者のぷちままが当ブログを始めた理由と、勉強して実現させたいこと(ウェブカツにて勉強中)

初めて利害関係なく、日記ブログというのを作ります。 (広告は基本載せませんが、いいと思ったものは紹介するかも。)   ここでは、私がこのブログの開設に至った経緯と、プログラミングを勉強して実 ...

続きを見る

↓前回分はこちら

プログラミング学習。4か月目後半の記録【ウェブカツで学習中】~javascript・jQuery部 中級学習中~

こんにちは、もう早いもので、プログラミング学習4か月目に突入するぷちまま(@8JCPS844tsX5wLI)です。   ↓プログラミング学習の動機などはこちら。 ↓前回分はこちら &nbsp ...

続きを見る

 

現在学習中のプログラミング学習サイトはこちら⇒ウェブカツ(女性割引で学習中。現在HTML・CSS上級終了が終了しかけなところです。)

 

プログラミング学習5か月目前半で、学んだ&できるようになったこと

風邪が治ったからなのか、大好きなHTML,CSSに触れられたからなのか、この半月はめちゃくちゃ楽しみながら学習を進めることができました。

【学んだこと】

(HTML,CSS)

  • CSSアニメーション
  • flexboxの仕組みや動き
  • 命名規則
  • Bootstrapの仕組み
  • レスポンシブデザイン
  • SASSの書き方

(Javascript,JQuery)

  • npm、(gulp)、ターミナルの書き方など

【できるようになったこと】

  • ワードプレス作成中のサイトを、上の学習した物を使って書き直しています

 

この半月で知ったこと、できるようになったことはかなり多かったです。

flexbox・アニメーション

まず、HTML,CSSのアニメーションやflexbox。

WPでテンプレートを作っている最中なのですが、グローバルナビゲーションに「float:left」をつけて、親要素に「overflow:hidden」をつけたら、ドロップダウンメニューが隠れてしまってどうしよう・・・とそこで止まってしまっていたんですね。

それを「flexbox」に助けられました。

「float:left」のように、親要素で解除しなくてもいいし、自由自在に要素を配置できるので、神がかっていると思います。

たまに崩れたりもしますが、「flexbox」ちゃんラブです❤️❤️

 

命名規則

「プロの方は、すごくきれいなコードを書いているなぁ」「それに引き換え自分のコードは・・・。皆どうやってclass名つけているんだろう??」と思い、地味に学びたかった命名規則。

それが解決しましたね。

「絶対」の決まりはないけど、FLOCSSなどわかりやすい命名規則があり、それをもとに各人各現場で決めているみたいですね。

 

これを学んだことで、保守性がグンと上がりました。

というのも、ワードプレスのアウトプットをしていた最中、(命名規則を知らないころ)適当な名前をつけて、「あれ?このコードが効いてない・・・。あっ、これが原因か・・・!」を繰り返していたんですね。

それが、命名規則をもとに、わかりやすく書き直してみたのですが、「場所や動きがわかりやすい」名前をつけることで、クラス名を見るだけで、「ここのことか!」と推測できるようになった&修正がかなりしやすくなったので、「綺麗なコード」というのはとても大事だなとひしひし実感しています。

ちなみに、適当なコード名をつけていると、一人でも、わちゃわちゃなっているので、複数人の現場とかだったら、もっと大事になってくる概念なんだろうなぁ・・・と感じています。

 

(クラウドソーシングでコーディングをお願いして、修正を頼んだら、自分が作ったのに「分かりません。修正できません。」という人がいて困った。という話を聞いたことがあります。

おそらく、かじりだけ勉強して案件を受けてしまったのだろうなぁ。命名規則とかコードとかぐちゃぐちゃだったんだろうなぁ。と推測しました。「目に見えるものだけが、成果ではない」んだな、と勉強すればするほどひしひし実感しているところです。)

 

SASS・npm(gulp)

前々から気になっていた、SASS。

「開発時間が短くなるって聞くけど、CSSでも十分早いし・・・SASSってそんなに必要ある?」

なんて思っていました。

 

SASSを実際に使ってみるまでは・・。

これも、命名規則と同じで、SASSを使うと、本気で綺麗なコードが書けて感動しました!

命名規則と組み合わせると、今までぐちゃぐちゃで見にくくて、何度もHTMLを確認しつつ修正していたコードが一発で修正完了します!

しかも、後から例えば「メインカラーを変えたい」となっても変数を変えるだけ!

とっても便利!保守性激高です!

 

ただ、SASSを使うには、難点が一つだけあって・・・。

それは、いちいちCSSにコンパイルしないといけないこと。

「SASSで読み取ってくれないのかぁ・・・」と少し不便ではありますが、それもSASSをbuildするツール、監視ツールをnmpから取ってきて、それをコマンドから実行するだけ!

実行している間は、自動的にCSSに吐き出すことができ、SASSを修正したら、一瞬でCSSに反映されるので、開発にそこまで支障はありません。

パソコンを開いた瞬間は、監視パッケージが動いていなかったり、何かの拍子で止まったりすることがあるので、いちいち設定は面倒だったりしますが、今のところ設定の面倒さよりも、SASSの開発・保守性の虜になっています。

これからもできるだけ、SASSで実装していきたいと思います☺️

 

レスポンシブデザイン

これもめちゃめちゃ大事な考え方ですね。

今や、多くの人が、PCよりもスマホなどでサイトを見ていることが多いと思います。

(私もブログ運営をしていた時は、70%がスマホからの流入でした。)

今まではPCに対応するサイトを作っていましたが、それをスマホだったり、画面のサイズが変わっても見れるように、見やすくしたのがレスポンシブデザインのサイトです。

これも、progateでCSSで習っていた時は「これを毎回指定しないといけないのか〜面倒だな。」

なんて思っていたのですが、正直SASS使ったら一発です。(かなり快感。)

 

今はワードプレスのテーマを、今までのプログラミングアウトプットとして作っているのですが、上記習ったことをもとに、修正して行っています。

いろんな技術を学んだことで、開発が捗り、(主にフロントエンド)開発がとっても楽しくなってきています^^

 

これからやっていきたいこと(プログラミングがまだまだ楽しい!)

【勉強面】

ウェブカツの練習制限もだいぶ解除されたので、これからがつがつ進めていきたいと思います。

12月中には、javascript・jQuery部上級に足を突っ込めたらいいなと思っています。

いよいよ終わりが見えてきました。

1月2月ほどに次の道に進む予定なので、1月末には退部かなぁなんて漠然と考えています。

 

あとは、WPのアウトプットですね(部活を進めつつは、時間がなかなか取れないですが、なんとか並行してやっていきたいと思います(12月中には完成したらいいなぁ・・・。))

早く自分のテーマを載せて、ブログを書きたいです。笑

-プログラミング学習

Copyright© ぷちままのブログ , 2020 All Rights Reserved Powered by AFFINGER5.