【ユニット３】HTML/CSSコーディング復習・Emmet・スニペット（2024/8/31~9/9）-デイトラweb制作職業訓練校
ユニット１では、基礎的なHTMLとCSSの学習を行い、ユニット２ではケーキ屋さんのサイトをお手本を見ながら実装しました。
ユニット３は、以下３部の構成で学習を進めました。
1. HTML/CSSコーディング復習
課題
出来るだけ動画を見ずにゼロからコーディングしてみよう
目標は6時間で完成
感想
全く見ずには無理だったので、復習を挟みながらできるだけ自力で実装できるように進めました。
1周目では言われるがままに書いていたコードも、理解しながら書けるようになったように感じます。やはり、目的を持って取り組むと定着率が上がるように思いました。
まだまだ、全てを自力で実装は難しいなぁと思いつつも、慣れるしかないと思うので、作業にならないように気をつけながら数をこなしていきたいと思います。
2. コーディングのスピードを上げるための便利なEmmet機能を覚えよう
01.【Emmet略語の展開】HTML基本編
idおよびclass属性
入れ子
隣接
繰り返しに便利なEmmet
02. 【Emmet略語の展開】HTML応用編
上の階層に戻る
グルーピング
属性
テキスト
連番
閉じタグにコメントアウトの自動挿入
HTMLの型を展開
03. 【Emmet略語の展開】CSS基本編
CSSのEmmetの基本の書き方は、「プロパティ名(省略形):値(省略形)」
プロパティのイニシャル、バリューの数値もしくはイニシャルを省略形として入力すると大体できて、できないときにはチートシートで確認すること。
「:」も省略することが可能。
04. 【Emmet略語の展開】CSS応用編
%の略語は、p
バリューが0.??の時にはpxでなく、emの単位で補完される
バリューの複数指定の場合、「-」で繋ぐ
!importantの展開には癖あり
プロパティの複数指定の場合、「+」で繋ぐ
05. Emmetアクション① バランス内側・外側
バランス外側は選択位置から一つずつ外側のタグを選択できる。
「ctrl+shift+cmd+b」をバランス外側のショートカットに設定。
バランス内側はその逆で、内側のタグを選択できる。
内側はそこまで使わないので、ショートカットは割り当てせず。
06. Emmetアクション② 値の増加・減少
バリューを増減するEmmetアクション。
「ctrl+shift+cmd+down」を1ずつ減少のショートカットに設定。
「ctrl+shift+cmd+up」を1ずつ増加のショートカットに設定。
07. Emmetアクション③ ラップ変換・タグの更新・数式の評価
ラップ変換は、選択部分を特定のタグで包むことができる。
私はVS Code拡張機能の「htmltagwrap」を入れて使うことにしました。
タグの変換は、divタグをsectionタグに変更したい場合などに要素を更新することができる。
私はVS Code拡張機能の「Auto Rename Tag」を入れて使うことにしました。
数式の評価は、単純な数式を計算してくれる。
使う場面は限られるとのことなので、記憶しておくに留める。
08. Emmetアクション④ イメージサイズの更新・行のマージ
イメージサイズの更新
imgタグにwidth属性とheight属性を付与できる。
私は「ctrl+shift+cmd+i」をショートカットに設定しました。
【レイアウトシフトに関する参考サイト】
Cumulative Layout Shift の最適化
【徹底解説】imgタグのwidth/height属性は絶対に指定した方が良い
行のマージ
HTMLの複数行を一行に結合できる。
使用頻度は高くないため、ショートカット割り当てはせず。
09. 【おまけ！】おすすめのVS Codeキーバインディング設定
新しいファイルを作成
ctrl+shift+cmd+n
新しいフォルダーを作成
ctrl+shift+cmd+f
ショートカットが多くなって混乱してきたら、
「キーボードショートカット」の3点リーダーから「ユーザーのキーバインドを表示」を選択して、管理ができる。
10. 【おまけ！】その他おすすめのVS Code設定
ハイフンで繋がれた単語をダブルクリックで選択できるように、設定画面から変更しました。
感想
基本的なEmmetについては、ユニット２にてすでに紹介されていた、はにわまんさんの記事で学習済みでした。ですが、今回は文章でなく動画で実際にコードを打っている様子を見ることができたので、よりよい復習の機会となりました。また、応用も知ることができ、使える場面でできるだけ実践していこうと思います。
3.コーディングのスピードを上げるためのスニペットを作ろう
01. スニペットの重要性やメリット
生産性の向上
品質の向上（バグやエラーが少なく安定した動作・コードに一貫性が保たれる）
注意点：品質が保たれるということは、品質が悪いコードを再利用してしまうと悪い品質が保たれてしまうということ。
02. 【Notionを使ったスニペット集を作ろう①】 導入と基本操作
Notionの導入と基本操作について視聴。
Notionのマークダウンショートカット
キーボードショートカット – Notion (ノーション)ヘルプセンター
多彩な表現方法とショートカット、markdown記法
03. 【Notionを使ったスニペット集を作ろう②】 スニペット集の作成
Notionへのスニペット登録方法を視聴。
過去の受講生のNotion活用例
VS Codeに登録すべきEmmet登録用スニペット130種
04. VS Codeのユーザースニペット機能
ユーザースニペット登録方法を視聴。
【追加で参考にしたサイト】
ユーザースニペットに関するドキュメント
Visual Studio Code のスニペット#スニペット構文
注意点：PHPの開始タグと終了タグ「 <?php?> 」を含むスニペットは、グローバルスニペットかhtml.jsonに登録すること。php.jsonに登録したスニペットは、PHPの開始タグの中でのみ展開することができる。
05. 【おすすめプラグイン Easy Snippet】VS Codeの拡張機能を使った簡単登録方法
拡張機能「Easy Snippet」の追加
Easy Snippet
「Easy Snippet」の登録エラーについて
登録するJSONファイルの中に文法エラーが残っていたり、登録するJSONファイルの中身が空になっていると「Unexpected token “」のエラーが表示され登録することができない。
エラーのチェックとしてChatGPTを使っても良い。
06. 【おすすめユーザースニペットの紹介①】HTML編
おすすめのHTMLのスニペットを登録
07. 【おすすめユーザースニペットの紹介②】SCSS編
おすすめのSCSSのスニペットを登録
SCSSは未学習。
08. 【おすすめユーザースニペットの紹介③】JavaScript編
おすすめのJavaScriptのスニペットを登録
JavaScriptは未学習。
09. 【おすすめユーザースニペットの紹介④】PHP編
おすすめのPHPのスニペットを登録
PHPは未学習。
感想
１では実装を自力で行うことに挑戦しました。覚えられていないものも多くあり、復習を重ねましたが、より実践を意識した学習のきっかけとなりました。慣れがなにより大切だと感じたので、より多く手を動かしていければと思います。
２と３に関しては効率化に関するTipsが多く紹介されていました。すべてを使用することは現段階では難しいですが、取り入れられるものから取り入れていきたいと思います。