JavaScriptやCSSには人間が読みやすいよう、改行やスペースを設けたり、パット見て何に利用するかわかりやすい変数名をつけるわけですが、これは対人間用であってそれを実行する機械にとっては邪魔でしかありません。変数は1文字あれば十分ですし、改行やスペースなどのいわゆる「ホワイトキャラクター」はそもそも不要です。
そんなときに利用するのがminify。
webpackなどを利用していれば、最終的な出力時に自動的にやってくれますが、手元で個別のファイルに対して実行したいときがありますよね。今回はwebpackも内部で採用しているUglifyJSと、CleanCSSのCLIツールを利用して、JavaScript/CSSのminifyを行ってみます。
いつも使い方を忘れるのでメモ。
「Start」と「Basic Use」あたりに一通り書いてありますので、基本的にはこちらを参照するのが最も正確です。
無料版ではアイコン、フォント、コードによってそれぞれ別れています。いずれも一般的なWebサイトなどで利用する分には個人、商用問わず利用できます。GPLのようにコードの公開やコピーレフトもありません。
Startページでlinkタグを生成し、利用したいページのheadタグ内などに貼り付けます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello FontAwesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
</body>
</html>
これまで何の前触れもなくチラッと出てきたComponentにCSSを適用する方法について、いよいよ解説したいと思います。まぁブログの構成(順番)を間違えてるだけなんですけどねｗ もっと早く取り上げるべきだったｗ
Component名は前回と同じですが、今回はボタンをクリックする度に文字色が変化するサンプルにしてみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dialog</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style type="text/css">
.dialog {
border: 1px solid gray;
background-color: beige;
text-align: center;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Dialog extends React.Component {
constructor(props) {
super(props);
this.state ={
i: 0
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState({
i: this.state.i + 1
});
}
render() {
let colormap = ["black", "red", "green", "blue"];
let i = this.state.i % colormap.length;
let color = {
color: colormap[i]
};
return (
<div className="dialog">
<h1 style={color}>HelloWorld</h1>
<button onClick={this.handleClick}>チェンジ</button>
</div>
);
}
}
ReactDOM.render(
<Dialog />,
document.getElementById('root')
);
</script>
</body>
</html>
