プログラミングを始めて 7 か月が経とうとしています。
フロントエンドを効率化する言語を学習したので、今月はそれを使ってコーディングの効率化や可読性の向上を図っていました。今回も前回と同様に書きたいと思います。
進捗状況
Progate
JavaScript 道場編Ⅰ: ヒントを使わずに完走できました
SQL Ⅰ: 今月の上旬に登場。Paiza のおかげか割と出来たような気がします
ドットインストール
Emmet 入門 : HTML と CSS を略語で素早く書けるようになりました
Vue.js 入門 : JS フレームワーク
その他
CSS 設計 (OOCSS・SMACSS・BEM）
GitHub Flow
新着事項
7 か月目で新たに取り入れたことや、プログラミングで意識したことを書いていこうと思います。
ポートフォリオサイトの見直し
先月に学習したフロントエンドを効率化させる言語を使って、今まで作ったポートフォリオサイトのコーディングを見直すとともに、ejs,sass をメインにポートフォリオサイトを組み込んでみました
ejs: 「テンプレートエンジン」と呼ばれているもので、HTML を効率的にコーディングできるものです。WordPress でいうテンプレートタグやインクルードファイルのように使うことができます。約 300 行にわたる HTML も、ejs でかなり見通しが良くなりました。
sass: CSS にプログラミング言語の要素（計算、条件分岐、ループ処理、関数等）を合体させたようなメタ言語。同じようなところを使い回せるのでとても便利です。最近学習した CSS 設計と併せて、可読性を向上させました。
見直しをしてみて
最初はとにかく完成させようということで、特に意識せずコーディングをしていました。そのこともあって仕方ないとは思いますが、改めて見直してみるとぐちゃぐちゃにコードを書いていることが分かりました。
CSS に関しては、指定したクラス名をダブらせて書いていたり、何をスタイリングしているのか分からないようなクラスをつけていたりと可読性がよろしくない書き方をしているのが分かりました。可読性が低い書き方をすると、かなりの時間をとられてしまうことも今回の見直して体験できたような気がします。
最近学習した Gulp や ejs 、sass 、CSS 設計（OOCSS・SMACSS・BEM）をポートフォリオサイトに組み込むのには時間がかかりましたが、なんとか形にはなったような気がします。可読性が高いコーディングを意識してすることも効率化の一つになると思います。
最後に
ポートフォリオサイトの見直しがてらに、Glup や ejs 等を試してみました。効率化はもちろんのことですが HTML や CSS だけでは気付かなかったことにたくさん気づくことが出来たような気がします。 スキルアップとともにとても便利であることを実感しましたが、まだまだ改善の余地はありそうです
まだ分からないことがたくさんありますが、一日でも早く上達できるように頑張りたいと思います。