ITの世界では新しい技術が日々生み出され、その中からスタンダード(デファクトスタンダード)や流行が生まれています。皆さんは、新しい技術をどうやって学んでいますか？
ネットや書籍の情報を読むだけでは、なんとなく理解しただけで技術が身についているとは言えない事があると思います。
画像はイメージです
最近行った ボロ ライディング ショップにスマホ・ビューを追加 ではスマフォ用ビューは本格的に HTML5/CSS3 を導入しました。 もはや HTML5/CSS3 は新しい技術ではありませんが、従来のHTML/CSSでもなんとかなる事や一部ブラウザーの挙動が違ったりするので今までは本格的な導入はしていませんでした。
しかし、スマホにはIEのような古いブラウザーが無いので完全にHTML5/CSS3で行けると考え、導入しました。
導入して良かった点
- Flexbox など柔軟で判りやすいレイアウト要素を使ったことで、HTML/CSSがコンパクトになった
- BEM (Block、Element、Modifier) を導入したことで、メンテナンス性の高い CSS になった
- ひょんな事から CSS の calc()関数 の存在を知り、JavaScriptを使わずに難しいレイアウトが出来た
問題点、今後の課題
- Semantic elements (header,main,section…) を導入したが、今までの習慣からついつい div を使ってしまい、 全てのページで徹底できなかった
- BEMを導入したが実サイトで使うと、どうしたら良いのか迷う事がままありました。今回作ったCSSファイルの中でも統一感にかけている個所があります (現在BEMに関しての日本語書籍は無く、実用的な規模のサンプルコードも少なくいです)
まとめ
今回のスマホ・ビューを追加で、HTML5/CSS3 や BEM がかなり学べましたが、まだしっくりとこないところも残っています。 今後は現在のHTML/CSSを改良しながら、もう少し学んで行きたいと思います。
ネットや書籍の情報を読むことで技術の概要を知る事ができます、また簡単なサンプルコードを書くことで更に理解は深まると思います。
しかし実プロダクトに新しい技術を導入すると、概要だけでは済まずに仕様を読み込むことで理解が深まり、また新たな発見をしたりします。
さらに作業を繰り返す事により、しっかりと記憶に定着させる事ができます。
