Pug + SCSS + webpackの静的サイト構築環境を考える / LTイベント@クックパッド OthloEvent#44

Transcript

1. Pug + SCSS + webpack の
   静的サイト構築環境 を考える
   Siketyan
   ＠ LTイベント@クックパッド OthloEvent#44
   

   View Slide

2. 誰？
   

   View Slide

3. Siketyan って誰？
   • 豊田高専生 （情報工学科 1年）
   • C# + WPF で GUI を書く
   • C# + ASP.NET Core で API バックエンドを書く
   • Java や PHP も書く
   • JetBrains 信者
   • Vim と Sublime Text を使う
   • 2～4スペースインデント派
   • よろしくおねがいします
   Twitter: @siketyan
   

   View Slide

4. Webサイトの構築 に何を使っていますか？
   

   View Slide

5. モダンなWebサイトの構築方法
   • Node.js
   • Node.ｊｓ
   • Node.js
   • Node.js
   • Node.js
   • Node.js
   • Node.js
   • Node.js
   

   View Slide

6. Node.js
   

   View Slide

7. Node.js でのWebサイト開発あるある
   • SCSS での @import や JS での require 便利がち
   • とりあえず npm install / yarn add でなんとかなりがち
   • Node.js がサーバになるのでリバースプロキシしがち
   サーバは既存のものを使いたいので静的ページを生成したい
   でもヘッダやフッタは統合したいし @import とか使いたい
   静的サイトでも Node.js で開発したい！
   

   View Slide

8. > を書くのはやめにしませんか？
   

   View Slide

9. • 記法がとにかくシンプルな HTML プリプロセッサ
   • div を省略できる
   • レイアウトの継承などもできる
   • すげーやつ
   • パグかわいい doctype html
   html(lang="ja")
   body
   main
   .container
   section.section#summary
   h1.title Summary
   h2.subtitle About me
   .summary-list
   article.media
   figure.media-left
   Pug （旧: Jade） を使おう
   

   View Slide

10. @import を使いたい
    （npm のパッケージからインポートしたい）
    

    View Slide

11. • CSS プリプロセッサ
    • @import で npm のパッケージからインポートできる
    （要 node-sass-package-importer）
    • 属性の入れ子ができる
    • {} を使わずインデントで表記する
    SASS も存在する
    • でもコンパイラは node-sass
    • CSS と互換性がある
    （CSS の拡張である）
    @import "~bootstrap"
    body {
    padding: 1rem;
    .container {
    &.main {
    margin: 1rem;
    }
    }
    }
    SCSS を使おう
    

    View Slide

12. require() を使いたい
    （または import）
    

    View Slide

13. • npm パッケージから JavaScript （ECMAScript） の
    モジュールをインポートできる
    • ぜんぶまとめて一つの .js ファイルに出力できる
    const $ = require("jquery");
    // or
    import jquery
    webpack を使おう
    

    View Slide

14. ビルドがめんどい
    

    View Slide

15. • SCSS や webpack のビルドをまとめて管理できる
    （要 gulp-sass, webpack-stream）
    • gulpfile.js を書くだけ
    • webpack をそのまま使うより設定が簡単
    • バージョン4でいろいろ変わって混乱しがち
    const gulp = require("gulp");
    gulp.task("scss", function () {
    return gulp.src("./src/scss/*.scss")
    .pipe(sass())
    .pipe(gulp.dest("./dist/bundle.scss"));
    });
    Gulp.js を使おう
    

    View Slide

16. まとめ
    

    View Slide

17. ぼくの考える最強の静的サイト構築環境
    • Node.js
    • Yarn
    • Gulp.js
    • Pug
    • SCSS
    • webpack
    ほかにいい方法があったら教えてください！
    

    View Slide

18. 宣伝
    今回紹介した環境で個人サイトを作り直しました
    https://siketyan.dev/
    （ソース: https://github.com/Siketyan/siketyan.dev）
    動きます
    

    View Slide

19. ご清聴ありがとうございました
    

    View Slide