効率的なコードを目指して！ Gulp/Flocs/Pug使ってみました
こんにちは、ミモザ(@mimosa_0429)です。
アラフィフ/２児ママ/元営業職の新人Webデザイナーが、日々の制作や勉強の様子を発信しているので、参考になれば幸いです。
効率的にコーディングを行うためのスキルアップ
さて、7月で職業訓練校が終了しました。8月は子供達が夏休みでずっと家にいたこともあり、あっという間に１ヶ月が過ぎてしまいました。。。
そんな中で、挑戦したことが下の項目です。
- WordPressのオリジナルテーマ構築
- WordPress既存テーマのカスタマイズ
- Gulpを使ったタスク処理
- FLOCSを用いたコーディング
- PugでHTMLを書いてみる
何にもできなかった感があるのですが、こうやって書いてみると結構色々チャレンジしていましたね。
ちなみに、デイトラ実務編のカリキュラムに揃っているので、ぜひそちらを確認してみてください！
今後Web制作をお仕事として目指している身としては全て必要なスキルだなーと感じましたので、今後も継続的にブラッシュアップしていきたいと思います！
Gulpで走らせたタスクはこれ！
最初はタスク処理を自動化できる、というものですが、「Gulpって必要かなー。Sassのコンパイルなら、 VSコードが勝手にやってくれるし・・・」とイマイチその必要性が分かりませんでした。
これは、シンプルなHTMLとCSSだけでコード書いているとあまりその効果を実感できないかと思いますが、Pugも使って書いてみる！となるともはや必要不可欠だと思います。
私はデイトラで基本的な作り方を学んでそれを自分なりにカスタマイズして、今は以下のタスクを組んで走らせています。
- PugをHTMLにコンパイルする
- SaasをCSSにコンパイルする
- CSSにコンパイルするときに、オートプレフィックスを自動でつけ、要素をアルファベット順に並び替え、メディアクエリーをまとめる。
- ブラウザをリロードする
- タスク途中のエラーを表示させる
参考のコードを記載します。
普段は、 devとwatchを使うことが多いです。
const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require("gulp-sass")(require("sass"));
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssSorter = require("css-declaration-sorter");
const mmq = require("gulp-merge-media-queries");
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
const browserSync = require("browser-sync");
function test(done) {
console.log("Hello Gulp");
done();
}
function compilePug() {
return gulp.src(["./src/**/*.pug","!./src/**/_*.pug"])
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest("./public"))
}
function compileSass() {
return gulp.src("./src/assets/sass/**/*.scss")
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(sass())
.pipe(postcss([autoprefixer(), cssSorter()]))
.pipe(mmq())
.pipe(gulp.dest("./public/assets/css/"))
}
function watch() {
gulp.watch("./src/assets/sass/**/*.scss", gulp.series(compileSass, browserReload))
}
function browserReload(done) {
browserSync.reload();
done();
}
exports.test = test;
exports.compilePug = compilePug;
exports.compileSass = compileSass;
exports.watch = watch;
exports.dev = gulp.series(compilePug, watch);
exports.all = gulp.parallel(compilePug, watch);１から書いたわけではないのですが、それでもきちんと走るまでにはエラー、エラーの嵐で心が折れそうになりました。。
特にエラーが表示されないと原因の特定も難しいので、 gulp plumber とgulp notifyは必ず設定した方がいいが良いと思います！
使っていると ちょっと不便なところも出てきてwatchの途中で pugを編集しても自動的に反映されないので、一旦 Control + Cで抜けて、再度devを走らせる必要があるのでここはちょっと改善したいと思っています。
もうClass名で迷わない！ Flocsについて
ある程度コーディングの慣れてきて、複雑なサイトのコーディングをしているうちにClass名ってどうつけよう・・・と迷いが生じたり、CSSが煩雑になってきたりすることが多くなってきました。
明確なプログラミングの世界で、CSSだけが曖昧で、管理が我流になってくることにモヤモヤを感じていたので、FLOCSという命名ガイドラインを取り入れることにしました。
デイトラの説明に加え、以下のサイトを参考にさせていただきました。
パーツごとに分ける！という考え方がWordpressやPugとも親和性がよく、管理がしやすくなりますね。
特にglobal, base,などは変数だけ変えたら色々なサイト制作に使い回しができるので、効率的になる気がします。
迷いどころは、
- ComponentとPartsをどこで線引きするか？
- Partsに関するマージンなども全部Layoutで設定すると煩雑になる
という点です。
この辺はサイトにもよって正解はないと思うので色々試行錯誤しつつ、煩雑にならず、保守性も高い方法を見つけていきたいと思っています。
PugでHTMLがシンプルに！
今回使った３つで一番のお気に入りがPugです。
Pugもデイトラの講義動画を参考にしつつ、とても役に立ったのが以下のサイトでした。
PugはHTMLで必要だったタグを無くしてシンプルに記述できるというもの
例えば、こんな感じでPugで書いてGulpのタスクでコンパイルすると・・・
//Pug
.p-contact
.p-contact-wrapper.l-contact-inner
.c-section-title
p.c-section-title_sub お問い合わせ
h2.c-section-title__main Contact
form.p-contact-form.l-contact-form
p ご質問などは、下記のフォームよりお問い合わせくださいこんな感じでHTMLに変換されます
<div class="p-contact">
<div class="p-contact-wrapper l-contact-inner">
<div class="c-section-title">
<p class="c-section-title_sub">お問い合わせ</p>
<h2 class="c-section-title__main">Contact</h2>
</div>
<form class="p-contact-form l-contact-form">
<p>ご質問などは、下記のフォームよりお問い合わせください。</p>
このコードだけだとイマイチ、何が効率化なの？というところですが、私が便利だと感じたのは次の２点
- 変数が利用できる
- パーツやテンプレートに分けて呼び出しできる
この辺りは、Wordpressのループを呼び出したり、テンプレート化したりするのに似ている気がします。
1.に関しては、Navなどのパーツを作っておいて、サイトごとに変わる部分を変数化して差し替えれば使い回しができるので、とても便利です。
Pugで menusを配列として変数を設定
//Pug
-
const menus = [
{
url: "#about",
id: "js-link_about",
name: "About",
},
{
url: "#menu",
id: "js-link_menu",
name: "Menu",
},
{
url: "#shop",
id: "js-link_shop",
name: "Shop",
},
{
url: "#contact",
id: "js-link_contact",
name: "Contact",
},
];
nav.c-nav
ul.c-nav-ul
each menu in menus
li.c-nav-list: a(href=`${menu.url}` id=`${menu.id}`) #{menu.name}コンパイルしたHTML
<nav class="c-nav">
<ul class="c-nav-ul">
<li class="c-nav-list"><a href="#about" id="js-link_about">About</a></li>
<li class="c-nav-list"><a href="#menu" id="js-link_menu">Menu</a></li>
<li class="c-nav-list"><a href="#shop" id="js-link_shop">Shop</a></li>
<li class="c-nav-list"><a href="#contact" id="js-link_contact">Contact</a></li>
</ul>
</nav>２については、色々なやり方がありますが、私が管理している方法は、パーツごとにPugファイルを作成して、大元のHTML.Pugでそれを呼び出す、、という形です。
HTMLがずいぶんスッキリしました。
//Pug
extend ./templates/_page.pug //大元のテンプレートを作っておいて呼び出す。
append value //テンプレートの変数部分だけ記述
- const title= "Green Saladのサイト";
- const description= "Green Saladのサイト";
- const path= "."
block content //中身に関しては、パーツ化して呼び出す
include ./parts/_header.pug
include ./parts/_top.pug
include ./parts/_concept.pug
include ./parts/_about.pug
.p-image_salad //記述少ないものは、直接記載
include ./parts/_menu.pug
.p-image_shop //記述少ないものは、直接記載
include ./parts/_shop.pug
include ./parts/_contact.pug
include ./parts/_footer.pugPugの難点として、今感じているのは
- 繰り返しを全て配列にするとかえって非効率
- brやspanが絡むとPugの記述が複雑になる
という点です。
これも初心者ならではの点もありますが、
1は、配列を変数化したときに、エラーが出やすく、１つ１つエラーを特定して潰していくと却って時間がかかってしまうので、上のメニューのようなシンプルな場合は直接記載した方が早いのかと。
要素や項目が 複数あるものだと配列で変数化した方が断然メリットは大きいので使い分けしていきたいと思います。
２に関しては、Pugのインライン要素の書き方は、ちょっと複雑で、｜（パイプ）で繋いでこんな感じになります。
//- Pug
p テキスト内容を記載
br
| 改行後のテキスト内容を記載
span.text-red
| Spanされるテキスト内容を記載HTMLだとほぼ１行
<p>テキスト内容を記載<br>改行後のテキスト内容を記載<span class="text-red">Spanされるテキスト内容を記載</span></p>なので、今は効率重視で、pタグ以下はHTMLで書くようにしています。
p テキスト内容を記載<br>改行後のテキスト内容を記載<span class="text-red">Spanされるテキスト内容を記載</span>ちなみに、配列にタグを含める際は留意点があって
① 配列の中身を”” ではなく、バックコーテーション“(MacならShift キー＋＠）で囲む
② 出力場所に、!{変数名}として！を頭につける
ということで対応できます。
//pug
const abouts = [
{
url: "./assets/img/img-about-1.png",
title: `全ての食材が安心の<span class="u-green">国産</span>`,
text: "TF Garden Saladaの食材は全て産地を公表をしています。信頼できる農家さんから直接買い取り、その日採れたものをその日のうちに厨房へ",
},
{
url: "./assets/img/img-about-2.png",
title: `カスタム可能で<br>その組み合わせは<span class="u-green">全400種類</span>!`,
text: "定番のメニューに加えてサラダのフルカスタムも可能。お好みのベース×トッピング×ドレッシングを選んであなた好みにアレンジして。",
},
{
url: "./assets/img/img-about-3.png",
title: `<span class="u-green">ジムトレーナー監修</span>のメニュー`,
text: "コンビニのサラダチキンに飽きたらこれ！一食でタンパク質20gがとれるトレーニング向けのメニューもご用意してます。",
},
];
.p-about
.l-inner_about
.c-section-title
p.c-section-title_sub Garden Saladのこだわり
h2.c-section-title__main About
.p-about-list.l-about-list
each about in abouts
.p-about-item.l-about-item
.about-img
img(src=`${about.url}`)
.about-text
p.c-text-title.l-text-title !{about.title}
p !{about.text}他にもやり方はあるかと思いますが、今は PugとHTMLを織り交ぜて、柔軟に対応したいと思います。
以上、Webデザイン勉強歴約半年の新人WebデザイナーがGulp, Flocs,Pugを取り入れてみた感想と共有となります。
ブログ＆ポートフォリをサイトを立ち上げしたので、9月からは情報発信にも力を入れていきたいと思います！