はじめに
上述のサービスを作ってみてアップデートしたい点がいろいろ出てきたのでPugの勉強がてら試してみます。
今回改修したい点
HTMLファイルが冗長⇒Pugを使ってみる
命名規則が適当⇒BEMなり調べながら変更してみる
✅ゴール
・Pugの理解を深める
✅環境
Windows
Pugの環境構築
既になかなかに冗長になってしまっているhtmlファイルを改善したいと思い試してみました。
参考:
基本的な記法。ソースファイルもあった。
src/test.pugを作成
p Pug Test
gulpfile.jsを編集(ver4用にコールバック関数を記載しています)
var gulp = require('gulp'); var pug = require('gulp-pug'); gulp.task('pug', function (cb) { gulp.src( ['./src/**/*.pug', '!./src/**/_*.pug'] ) .pipe(pug({ pretty: true })) .pipe(gulp.dest('./dist')) cb(); });
🙄src/**/ディレクトリ下の.pugファイルがコンパイルされるのがわかりますね!
実行
gulp pug
もしくはpackage.jsonを編集
"scripts": { "dev": "gulp pug" },
実行
npm run dev
HTMLファイルの生成を確認できました。

🙄これで効率よくコードが書けるはず!!
Pugを使ってみる
参考:[Pug] HTMLを効率よくコーディングする、Pugの記法まとめ
とりあえず以下のような形にはできました。
※\nがコンパイルすると改行されてしまうのでそこだけできていない。
命名規則について調べた
Pugで書きながら気になった点は随時調べてみました。
参考:
恥ずかしながらこういうの始めてみました。。。とても参考になります。
※jsはheadタグで読み込まないと。
ダブルクリックで_だと連結された単語を選択できて、-だと選択できないのは初めて知りました。リファクタリング時に効果を発揮しそうです。
逆に-で変更したい部分だけ変更できるようにしておくという使い方も。ケースバイケースですね。
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
これも参考になる。
htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか
cssは一般的にハイフン文化らしい。
Javascriptのコーディングスタイルを復習 – Google編
JS特化の命名規則。これとても参考になる。
変数も基本キャメルケース。定数が大文字スネークケース!!
隠蔽したいファイルには_を頭文字。
👇個人的な結論
JS併用の場合、class属性(書式はアンダーバー>ハイフン)はcss専用。id属性(書式はCamel)はjs専用。
これを踏まえてPugのコードを見直していきたいと思います。
リファクタリング
リファクタリングした内容を記載します。
・「:」+半角スペースで改行せずに入れ子できるみたいなので変更
・変数の活用
・for文活用
ちなみにこれだと
li number#{n} - for (var n = 1; n < 3; n++) li number#{n} li number#{n} li number#{n} li number#{n}
こうなる
<li>number</li> <li>number1</li> <li>number2</li> <li>number3</li> <li>number3 <li>number3</li> </li>
🙄for文以下でインデントされたものに対して適用(※HTML書き出し時にインデントの影響は受けない)。また、変数は保持される。少し慣れが必要ですね
結果こんな感じになりました。左がpugで右がhtmlです。ぼちぼち改修しやすいコードにできたかと思います◎

追加機能を実装する
※以下、完全なる思い付きです。
①定型文の作成
②タグを選択できるようにする
調べたもの
・labelタブのfor属性に関して 参考
<label for="ラベル付け対象要素のid属性値"></label>
・selectタグの値の取得
色々調べましたが、結果selectタグのidを取得して、.valueでアクセスすればoptionタグの値を取得できました。とてもシンプル!!
・selectタグのイベント 参考
changeイベントなるものがあった!便利!!
👇諸々変更してこんな感じになりました。

✅更なるリファクタリング
①コードのリファクタリング
②ハッシュタグが未入力でも#だけ追記されてしまっていたのでif文で入力されないように処理。
index.pugのセレクトハッシュタグ部分の簡略化。

上部に変数で定義。

🙄だいぶすっきり!かつ変更もしやすくなりました◎
同様にindex.jsのセレクトハッシュタグ部分のクリックイベントをforEach文で簡略化。

🙄だいぶ短く記述できました◎
この時点でこんな感じ。
学習記録
・簡単ツイートに追加機能!笑
(定型文機能とハッシュタグ選択機能!!)
・PugでHTMLを記述感想と課題:
次はGulpで自動コンパイルしてみる。
Pug楽しい!!
もうちょい追加機能盛り込みたい。#駆け出しエンジニアと繋がりたい#プログラミング初心者
Posted
by:https://t.co/CeloEFPBUq pic.twitter.com/w93mQCWq1y— まさる (@masaru_pg) June 11, 2020
自動コンパイル
せっかくなので最後に挑戦してみました。
参考:絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順
一回見てたけど、よく見たらかなり丁寧にGulpfileの説明あった。
どうやら自動コンパイルにはwatch機能を使うらしい。
gulp.watch('監視するファイル', 処理)
見よう見まねで以下で自動コンパイルできました。
👇ソースコード
躓いた点
✅npx gulpできない
どうやらgulpのタスクをdefaultにするべきぽい。
> npx gulp [19:34:23] Using gulpfile C:\xampp\htdocs\tweet-share\gulpfile.js [19:34:23] Task never defined: default [19:34:23] To list available tasks, try running: gulp --tasks
gulpfile.jsを変更
// gulp.task('pug', () => { gulp.task('default', () => {
これで実行できるようになりました◎
🙄ちなみにこれに伴いgulp pugが実行できなくなったのでgulp タスク名でどうやらpugは実行されるらしい。。
✅配列にオブジェクトを入れたい場合の定義
ハッシュタグのセレクトタグの部分が思いっきり繰り返していたのでeach文を使っていきます。
参考:Pug : for文、each文でリストをループ出力する
div - const hashtag = [ { name:"Popular", default:"#人気タグ", }, { name:"Language", default:"#言語", }, { name:"Framework", default:"#フレームワーク", }, { name:"Various", default:"#いろいろ", } ] p #{hashtag[0].name} each item in hashtag li item #{item.name} : #{item.default}
🙄配列にオブジェクトを入れたい場合は定義の仕方が独特でハイフンの後改行が必要っぽいです。また、each文対象の部分はインデントが1つずれます。地味にハマりました。。。
✅バックスラッシュがエスケープされてしまう
;などは属性値の=を!=すればよかったのですが、バックスラッシュに関しては色々調べましたが未解決です・・・
⇒\nでできました。
✅The following tasks did not complete: pugと出た場合
参考:gulp ejs で The following tasks did not complete: ejs が出たときの対処法
gulp4では明示的にタスクの終了を返す必要があるらしい。
おわりに
予想以上にPugの環境構築だけで時間(約1時間半)がかかりましたが、無事使うことができました。
既にべたのhtmlは記述したくないかもといった感じでPugの威力を実感しました。
✅参考
絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順
※上記記事はPugの構築はなし
GruntではJSON形式で独特の記述方法であるのに対し、GulpはJavaScriptで記述可能
Gruntでは基本的に同期処理であるためタスクは1つずつ実行されますが、Gulpでは基本的に非同期処理
グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的!!OMG!!
個人的備忘録
✅Pugを使うまでの奮闘記①グローバルにいれちゃう(※失敗)
とりあえずインストールします。
Package.json作成
npm init
諸々インストール
npm i pug npm i gulp npm i gulp-pug
pugがらHTMLへの変換
gulp pug
※この状態だと、bash: gulp: command not foundでエラーがでました。
公式に従ってgulpをインストール
npm install --global gulp-cli npm install --save-dev gulp gulp --version >> CLI version: 2.3.0 Local version: 4.0.2
参考:絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順
🙄調べたところ上記の方法一般的ではないらしい。。。
✅Pugを使うまでの奮闘記②パッケージ過多&gulpfileの書き方わからず失敗
以下、仕切り直して。。。
GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする
2019年版:Gulp4でSassをビルドしてBrowserSyncでライブプレビューする
※上述はGulpのVer3での記事。4は若干違うとのこと。gulp.task()
の中でちゃんとreturn()
で返してやらないとダメとのこと。ただ後述の4ではPug使っていない。。。
※こちらは各パッケージ(多い)の説明含め記載してくれている。
インストール
npm i gulp -D npm i gulp-notify -D npm i gulp-plumber -D npm i gulp-sass -D npm i gulp-autoprefixer -D npm i gulp-pug -D npm i -D gulp-uglify npm i browser-sync -D npm i -D gulp-cssmin npm i -D del
🙄Sassは今回使うつもりなかったから確実に入れすぎ。。。npm install -Dだとローカルらしい。
gulpfile.jsを作成
実行
gulp // ver3まで npx gulp // ver4以降
🙄ところがエラー。gulpfileの書き方が良くわからないのが起因ですね。。。ただブラウザーが自動起動したのは驚き。これがタスクランナーか!!

コメントを残す