ParcelでバンドルしたプロジェクトをGitHub Pagesに表示する
Parcelで Parcelの導入や開発フローについては説明しません。
ページは一つだけで、cssとjsをロードする簡単なプロジェクトを想定します。
GitHub Pagesの表示はmasterブランチのdocsフォルダを使用する方式を採ります。
ディレクトリ構造
大まかなディレクトリ構造はこんな感じ。docsはGitHub Pagesで表示するためのディレクトリで、Parcelの本番用バンドルの出力先となります。
. ├── docs ├── index.html ├── src │ └── index.js └── style.css
index.htmlの記述
何の変哲もないlinkタグとscriptタグの記述ですが、本番用バンドルの出力と比較しやすいように載せておきます。
... <link rel="stylesheet" href="style.css" /> ... <script type="text/javascript" src="./src/index.js" charset="utf-8"></script> ...
本番用にバンドルする
本番用のbuildコマンドです。
--out-dir docsオプションを指定し出力先をdocsディレクトリにする--public-url .オプションを指定する
// package.json "scripts": { "dev": "node_modules/.bin/parcel index.html", "build": "node_modules/.bin/parcel build index.html --out-dir docs --public-url ." },
--public-urlオプションがないと実際にGitHub Pagesで表示したときにロードができなくなります。
--public-url .を指定しない場合の出力結果
<link rel="stylesheet" href="/style.f5c87fca.css" /> ... <script type="text/javascript" src="/src.c52f2b67.js" charset="utf-8"></script>
--public-url .を指定した場合の出力結果
<link rel="stylesheet" href="style.f5c87fca.css" /> ... <script type="text/javascript" src="src.c52f2b67.js" charset="utf-8"></script>
gitで作業を一時中断して別ブランチに移りたいときに使えるコマンド
1. git stashを使う方法
stash: こっそりしまう、隠す、蓄える
基本
git stashコマンドを使うと作業中の変更を一時保存することができます。
$ git stash
Saved working directory and index state WIP on master: ***
$ git status
On branch master
nothing to commit, working tree clean
保存した変更を戻したいときは git stash pop コマンドを使用します。
$ git stash Saved working directory and index state WIP on master: *** $ git status On branch master nothing to commit, working tree clean $ git stash pop On branch master Changes not staged for commit: modified: new.txt
未追跡ファイルを保存する
git stashはそのままでは未追跡のファイルを保存しません。
$ git status On branch master Untracked files: new.txt $ git stash No local changes to save
未追跡ファイルを保存するにはあらかじめstageしておくか、
$ git stage new.txt $ git stash Saved working directory and index state WIP on master: ***
-uオプション（または--include-untracked）をつけて実行します。
$ git stash -u
Saved working directory and index state WIP on master: ***
2. コミットした変更を戻す方法
自分は普段こちらを使っています。 ただし戻し忘れると一時保存のつもりの変更がコミットログに残ってしまう欠点はあります。
一時保存したい変更をとりあえず適当なメッセージでコミットしておいて、git reset HEAD^コマンドで戻します。
$ git commit -m "wip" $ git reset HEAD^ $ git status On branch master Untracked files: new.txt
いちいち打つのは面倒なので.bashrcにundoという名前でコマンドエイリアスを使って気軽に運用しています。
alias undo="git reset HEAD^"
IntersectionObserverであそぼう
WebkitにもIntersectionObserverが入るということで
注：本エントリのサンプルは未対応ブラウザのある機能を使っています。
IntersectionObserverとは
Intersection: 交差点
IntersectionObserverがobserveするのはHTMLエレメントとviewportの交差です。 例えば画面をスクロールしていって目当てのエレメントが見えてきたらイベントを発火、という便利な使い方ができるAPIです。
以下のサンプルではグレーの四角が半分まで見えてるかどうかをobserveさせメッセージを切り替えています。
See the Pen IntersectionObserver-1 by seihmd (@seihmd) on CodePen.
詳しいことはMDNで
何がいいのか
目的のエレメントの位置を取得してscrollイベントを検知してscroll位置とエレメント位置を比較して...という苦行をしなくて良くなります。 パフォーマンス的にも当然◎
サンプル
スクロールしてきたらアニメーション
See the Pen IntersectionObserver-2 by seihmd (@seihmd) on CodePen.
画像の遅延ローディング
See the Pen IntersectionObserver-2 by seihmd (@seihmd) on CodePen.
