libsassってなんだろ

 

libsassを導入してみる。

概要

libsassの前に
まず、sassって?というとこから。

CSSの良いところは簡単かつ明確な点ですが、簡単ゆえにあまり複雑なことができません。プログラミング言語なら、変数とか演算を使って柔軟な命令ができますけど、CSSにはそれができない。そこで、CSSをもうちょっと便利にしようぜ!という発想からSassが生まれたようです。

https://liginc.co.jp/web/html-css/css/56599

より早くCSSが書ける便利なCSSということらしい。
sassとscssという似たようなものがあるがscssの方が後発で現在の主流らしい。

しかし、これはrubyでできているので、scssからcssへのコンパイル時の速さを求めるといまいち。

これを解決するのがC/C++で書かれたlibsassというライブラリ

libsassは速くて便利だが、libsass単体では使えない。wrapperが必要。

Node-SassはlibsassのNode.js用wrapper。
これは、Nodeを使った環境からCSSコンパイルしてくれる。
基本的にはNode-Sassが使われる。

このNode-Sassを実際に使うにはgulp(Node.jsを使ったタスク自動化ツール)を経由して使うのが一般的。

gulp経由のNode-Sassのことをgulp-sassという。

まとめると
SCSSというCSSを便利に書けるツールがあるがこれをより速く便利にするライブラリがあり、それをLibSassという。

LibSassはライブラリなので自分たちがを恩恵を受けるためにはwrapperと呼ばれるものが必要で、色々あるがNode-sassが一般的。
このNode-sassはgulpで使われ、その呼び名はgulp-sassとなる。



ちなみに、
gulpはタスクを自動化することができるツール。自分でコードを書いてカスタマイズが可能。

実際の導入は以下のサイトにしたがって行った。
http://whiskers.nukos.kitchen/2014/12/02/gulp-sass.html
http://whiskers.nukos.kitchen/2014/12/03/gulp-watch.html
http://qiita.com/KAMEch/items/b34159c70b9095485b77

導入

ディレクトリ作成

scssとcssのフォルダを作り階層を作る

ローカルインストー

プロジェクト内にpackage.jsonを作成。一番上の階層。

$ npm init 

ローカル用にgulpをインストール。

$ npm install --save-dev gulp

package.jsonと同じ階層にgulpfile.jsを作成。ここにタスクを記述する。

$ touch gulpfile.js

プラグインのインストー

$ npm install --save-dev gulp-sass

gulpfile.jsの記述

http://qiita.com/KAMEch/items/b34159c70b9095485b77#%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

実行

$ gulp sass

まとめ


単にCSSで書くよりSCSSの書き方になれたら開発スピードも大幅に上がると感じた。
lib-sassやらnode-sassやら色々似たようなものがたくさんあって複雑に感じた部分もあったが理解できた。
Gulpに関してはもうちょっと知って色々と自動化できるよう生かしていきたい。

%23%206/3%20libsass%0A%0A@%28%u5B66%u7FD2%u8A18%u9332%29%0A%0Alibsass%u3092%u5C0E%u5165%u3057%u3066%u307F%u308B%u3002%0A%23%23%23%u6982%u8981%0Alibsass%u306E%u524D%u306B%0A%u307E%u305A%u3001sass%u3063%u3066%uFF1F%u3068%u3044%u3046%u3068%u3053%u304B%u3089%u3002%0A%0A%3ECSS%u306E%u826F%u3044%u3068%u3053%u308D%u306F%u7C21%u5358%u304B%u3064%u660E%u78BA%u306A%u70B9%u3067%u3059%u304C%u3001%u7C21%u5358%u3086%u3048%u306B%u3042%u307E%u308A%u8907%u96D1%u306A%u3053%u3068%u304C%u3067%u304D%u307E%u305B%u3093%u3002%u30D7%u30ED%u30B0%u30E9%u30DF%u30F3%u30B0%u8A00%u8A9E%u306A%u3089%u3001%u5909%u6570%u3068%u304B%u6F14%u7B97%u3092%u4F7F%u3063%u3066%u67D4%u8EDF%u306A%u547D%u4EE4%u304C%u3067%u304D%u307E%u3059%u3051%u3069%u3001CSS%u306B%u306F%u305D%u308C%u304C%u3067%u304D%u306A%u3044%u3002%u305D%u3053%u3067%u3001CSS%u3092%u3082%u3046%u3061%u3087%u3063%u3068%u4FBF%u5229%u306B%u3057%u3088%u3046%u305C%uFF01%u3068%u3044%u3046%u767A%u60F3%u304B%u3089Sass%u304C%u751F%u307E%u308C%u305F%u3088%u3046%u3067%u3059%u3002%0A%0Ahttps%3A//liginc.co.jp/web/html-css/css/56599%0A%0A%u3088%u308A%u65E9%u304FCSS%u304C%u66F8%u3051%u308B%u4FBF%u5229%u306ACSS%u3068%u3044%u3046%u3053%u3068%u3089%u3057%u3044%u3002%0Asass%u3068scss%u3068%u3044%u3046%u4F3C%u305F%u3088%u3046%u306A%u3082%u306E%u304C%u3042%u308B%u304Cscss%u306E%u65B9%u304C%u5F8C%u767A%u3067%u73FE%u5728%u306E%u4E3B%u6D41%u3089%u3057%u3044%u3002%0A%0A%u3057%u304B%u3057%u3001%u3053%u308C%u306Fruby%u3067%u3067%u304D%u3066%u3044%u308B%u306E%u3067%u3001scss%u304B%u3089css%u3078%u306E%u30B3%u30F3%u30D1%u30A4%u30EB%u6642%u306E%u901F%u3055%u3092%u6C42%u3081%u308B%u3068%u3044%u307E%u3044%u3061%u3002%0A%0A%u3053%u308C%u3092%u89E3%u6C7A%u3059%u308B%u306E%u304CC/C++%u3067%u66F8%u304B%u308C%u305F**libsass%u3068%u3044%u3046%u30E9%u30A4%u30D6%u30E9%u30EA**%u3002%0A%0Alibsass%u306F%u901F%u304F%u3066%u4FBF%u5229%u3060%u304C%u3001libsass%u5358%u4F53%u3067%u306F%u4F7F%u3048%u306A%u3044%u3002wrapper%u304C%u5FC5%u8981%u3002%0A%0ANode-Sass%u306Flibsass%u306ENode.js%u7528wrapper%u3002%0A%u3053%u308C%u306F%u3001Node%u3092%u4F7F%u3063%u305F%u74B0%u5883%u304B%u3089CSS%u306B%u30B3%u30F3%u30D1%u30A4%u30EB%u3057%u3066%u304F%u308C%u308B%u3002%0A%u57FA%u672C%u7684%u306B%u306FNode-Sass%u304C%u4F7F%u308F%u308C%u308B%u3002%0A%0A%u3053%u306ENode-Sass%u3092%u5B9F%u969B%u306B%u4F7F%u3046%u306B%u306Fgulp%28Node.js%u3092%u4F7F%u3063%u305F%u30BF%u30B9%u30AF%u81EA%u52D5%u5316%u30C4%u30FC%u30EB%29%u3092%u7D4C%u7531%u3057%u3066%u4F7F%u3046%u306E%u304C%u4E00%u822C%u7684%u3002%0A%0Agulp%u7D4C%u7531%u306ENode-Sass%u306E%u3053%u3068%u3092gulp-sass%u3068%u3044%u3046%u3002%0A%0A**%u307E%u3068%u3081%u308B%u3068**%0ASCSS%u3068%u3044%u3046CSS%u3092%u4FBF%u5229%u306B%u66F8%u3051%u308B%u30C4%u30FC%u30EB%u304C%u3042%u308B%u304C%u3053%u308C%u3092%u3088%u308A%u901F%u304F%u4FBF%u5229%u306B%u3059%u308B%u30E9%u30A4%u30D6%u30E9%u30EA%u304C%u3042%u308A%u3001%u305D%u308C%u3092LibSass%u3068%u3044%u3046%u3002%0A%0ALibSass%u306F%u30E9%u30A4%u30D6%u30E9%u30EA%u306A%u306E%u3067%u81EA%u5206%u305F%u3061%u304C%u3092%u6069%u6075%u3092%u53D7%u3051%u308B%u305F%u3081%u306B%u306Fwrapper%u3068%u547C%u3070%u308C%u308B%u3082%u306E%u304C%u5FC5%u8981%u3067%u3001%u8272%u3005%u3042%u308B%u304CNode-sass%u304C%u4E00%u822C%u7684%u3002%0A%u3053%u306ENode-sass%u306Fgulp%u3067%u4F7F%u308F%u308C%u3001%u305D%u306E%u547C%u3073%u540D%u306Fgulp-sass%u3068%u306A%u308B%u3002%0A%3Cbr%3E%3Cbr%3E%3Cbr%3E%0A%u3061%u306A%u307F%u306B%u3001%0Agulp%u306F%u30BF%u30B9%u30AF%u3092%u81EA%u52D5%u5316%u3059%u308B%u3053%u3068%u304C%u3067%u304D%u308B%u30C4%u30FC%u30EB%u3002%u81EA%u5206%u3067%u30B3%u30FC%u30C9%u3092%u66F8%u3044%u3066%u30AB%u30B9%u30BF%u30DE%u30A4%u30BA%u304C%u53EF%u80FD%u3002%0A%0A%u5B9F%u969B%u306E%u5C0E%u5165%u306F%u4EE5%u4E0B%u306E%u30B5%u30A4%u30C8%u306B%u3057%u305F%u304C%u3063%u3066%u884C%u3063%u305F%u3002%0Ahttp%3A//whiskers.nukos.kitchen/2014/12/02/gulp-sass.html%0Ahttp%3A//whiskers.nukos.kitchen/2014/12/03/gulp-watch.html%0Ahttp%3A//qiita.com/KAMEch/items/b34159c70b9095485b77%0A%0A%23%23%23%u5C0E%u5165%0A%0A%23%23%23%23%20%u30C7%u30A3%u30EC%u30AF%u30C8%u30EA%u4F5C%u6210%0Ascss%u3068css%u306E%u30D5%u30A9%u30EB%u30C0%u3092%u4F5C%u308A%u968E%u5C64%u3092%u4F5C%u308B%0A%0A%23%23%23%23%u30ED%u30FC%u30AB%u30EB%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%0A%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u5185%u306Bpackage.json%u3092%u4F5C%u6210%u3002%u4E00%u756A%u4E0A%u306E%u968E%u5C64%u3002%0A%60%60%60%0A%24%20npm%20init%20%0A%60%60%60%0A%u30ED%u30FC%u30AB%u30EB%u7528%u306Bgulp%u3092%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u3002%0A%60%60%60%0A%24%20npm%20install%20--save-dev%20gulp%0A%60%60%60%0Apackage.json%u3068%u540C%u3058%u968E%u5C64%u306Bgulpfile.js%u3092%u4F5C%u6210%u3002%u3053%u3053%u306B%u30BF%u30B9%u30AF%u3092%u8A18%u8FF0%u3059%u308B%u3002%0A%60%60%60%0A%24%20touch%20gulpfile.js%0A%60%60%60%0A%0A%23%23%23%23%u30D7%u30E9%u30B0%u30A4%u30F3%u306E%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%0A%0A%60%60%60%0A%24%20npm%20install%20--save-dev%20gulp-sass%0A%60%60%60%0A%0A%23%23%23%23gulpfile.js%u306E%u8A18%u8FF0%0Ahttp%3A//qiita.com/KAMEch/items/b34159c70b9095485b77%23%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25B0%25E3%2582%25A4%25E3%2583%25B3%25E3%2582%2592%25E3%2582%25A4%25E3%2583%25B3%25E3%2582%25B9%25E3%2583%2588%25E3%2583%25BC%25E3%2583%25AB%0A%0A%23%23%23%23%u5B9F%u884C%0A%60%60%60%0A%24%20gulp%20sass%0A%60%60%60%0A%0A%0A%23%23%23%u307E%u3068%u3081%0A%0A---%0A%u5358%u306BCSS%u3067%u66F8%u304F%u3088%u308ASCSS%u306E%u66F8%u304D%u65B9%u306B%u306A%u308C%u305F%u3089%u958B%u767A%u30B9%u30D4%u30FC%u30C9%u3082%u5927%u5E45%u306B%u4E0A%u304C%u308B%u3068%u611F%u3058%u305F%u3002%0Alib-sass%u3084%u3089node-sass%u3084%u3089%u8272%u3005%u4F3C%u305F%u3088%u3046%u306A%u3082%u306E%u304C%u305F%u304F%u3055%u3093%u3042%u3063%u3066%u8907%u96D1%u306B%u611F%u3058%u305F%u90E8%u5206%u3082%u3042%u3063%u305F%u304C%u7406%u89E3%u3067%u304D%u305F%u3002%0AGulp%u306B%u95A2%u3057%u3066%u306F%u3082%u3046%u3061%u3087%u3063%u3068%u77E5%u3063%u3066%u8272%u3005%u3068%u81EA%u52D5%u5316%u3067%u304D%u308B%u3088%u3046%u751F%u304B%u3057%u3066%u3044%u304D%u305F%u3044%u3002

 

eslintを使えるようにした

eslintを導入したので導入と概要のまとめ。
以下の記事にしたがって進めた。
http://qiita.com/mysticatea/items/f523dab04a25f617c87d
http://qiita.com/mysticatea/items/6bd56ff691d3a1577321
http://qiita.com/mysticatea/items/dc35ced6bd5e782f50cd

概要

eslintとはJavascriptのためのエラー検知ツール。コードが実行される前にバグを見つけたり記法の統一を図るのに便利。

特徴


 

  • ES6対応
  • eslintは2週間ごとにアップデートされている
  • npmとNode.jsがダウンロードされている必要がある。
  • プロジェクトごとにESlintをインストールして使うのが主流

 

導入の流れ


npmでeslintをグローバルにインストール場合

npm install -g eslint




npmでeslintをプロジェクトごとにインストール場合


本来はプロジェクトごとにESlintをインストールする。
プロジェクトのフォルダ内で以下のコマンドを入力し、package.json作成後、eslintを追加。
もしすでに他のメンバーがpackage.jsonを作成していれば2行目だけでOK。
npm installだけで他のメンバーと同じ環境を整えられる。

$ npm init
$ npm install --save-dev eslint

パスの通っていないnpmパッケージを使えるようにする。

{
"scripts": {
"lint": "eslint src"
},
"devDependencies": {
"eslint": "^2.8.0"
}
}

eslintコマンドを使えるようにする。

$ npm install -g eslint-cli
$ npm install --save-dev eslint
$ eslint src



もしプロジェクト内に.eslintrc.jsonファイルがなければ以下へ進む。
もしくは

$ eslint ファイル名

をすれば色々ターミナルから聞かれた後にファイルが自動生成される。

.eslintrc.json


.eslintrc.jsonファイルをプロジェクトのルートディレクトリに用意し、以下を記述。

{
"extends": ["eslint:recommended"],
"plugins": [],
"parserOptions": {},
"env": {"browser": true},
"globals": {},
"rules": {}
}

以下のコマンドを入力するとJSの記述に誤りがあるか見つけてくれる。

$ eslint test.js

共有設定


eslintのルールは非常に多いため毎回設定するのは大変。これに対応するために共有設定という機能がある。

最後に


テキストエディタatomを使っている人がいれば、linterとlinter-eslintを導入することでより視覚的にエラーが歩かないかを判別できる。
https://mae.chab.in/archives/2874

ルールを追加したり、オプションを追加することもできるのでReactに対応できたりすごい便利。

マークダウン方式で書くと綺麗に描ける感じするしWeb上でも読みやすくていいなー。

%236/3%20eslint%0A@%28%u5B66%u7FD2%u8A18%u9332%29%0A%0Aeslint%u3092%u5C0E%u5165%u3057%u305F%u306E%u3067%u5C0E%u5165%u3068%u6982%u8981%u306E%u307E%u3068%u3081%u3002%0A%u4EE5%u4E0B%u306E%u8A18%u4E8B%u3092%u53C2%u8003%u306B%u9032%u3081%u305F%u3002%0Ahttp%3A//qiita.com/mysticatea/items/f523dab04a25f617c87d%0Ahttp%3A//qiita.com/mysticatea/items/6bd56ff691d3a1577321%0Ahttp%3A//qiita.com/mysticatea/items/dc35ced6bd5e782f50cd%0A%0A%23%23%23%u6982%u8981%0Aeslint%u3068%u306FJavascript%u306E%u305F%u3081%u306E%u30A8%u30E9%u30FC%u691C%u77E5%u30C4%u30FC%u30EB%u3002%u30B3%u30FC%u30C9%u304C%u5B9F%u884C%u3055%u308C%u308B%u524D%u306B%u30D0%u30B0%u3092%u898B%u3064%u3051%u305F%u308A%u8A18%u6CD5%u306E%u7D71%u4E00%u3092%u56F3%u308B%u306E%u306B%u4FBF%u5229%u3002%0A%0A%0A%23%23%23%u7279%u5FB4%0A---%0A%3Cul%3E%0A%3Cli%3EES6%u5BFE%u5FDC%0A%3Cli%3Eeslint%u306F%uFF12%u9031%u9593%u3054%u3068%u306B%u30A2%u30C3%u30D7%u30C7%u30FC%u30C8%u3055%u308C%u3066%u3044%u308B%0A%3Cli%3Enpm%u3068Node.js%u304C%u30C0%u30A6%u30F3%u30ED%u30FC%u30C9%u3055%u308C%u3066%u3044%u308B%u5FC5%u8981%u304C%u3042%u308B%u3002%0A%3Cli%3E%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u3054%u3068%u306BESlint%u3092%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u3057%u3066%u4F7F%u3046%u306E%u304C%u4E3B%u6D41%0A%0A%23%23%23%20%u5C0E%u5165%u306E%u6D41%u308C%0A%0A---%0A%23%23%23%20npm%u3067eslint%u3092%u30B0%u30ED%u30FC%u30D0%u30EB%u306B%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u5834%u5408%0A%60%60%60%0Anpm%20install%20-g%20eslint%0A%60%60%60%0A%0A%3Cbr%3E%3Cbr%3E%3Cbr%3E%0A%23%23%23%20npm%u3067eslint%u3092%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u3054%u3068%u306B%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u5834%u5408%0A%0A---%0A%0A%u672C%u6765%u306F%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u3054%u3068%u306BESlint%u3092%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u3059%u308B%u3002%0A%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u306E%u30D5%u30A9%u30EB%u30C0%u5185%u3067%u4EE5%u4E0B%u306E%u30B3%u30DE%u30F3%u30C9%u3092%u5165%u529B%u3057%u3001package.json%u4F5C%u6210%u5F8C%u3001eslint%u3092%u8FFD%u52A0%u3002%0A%u3082%u3057%u3059%u3067%u306B%u4ED6%u306E%u30E1%u30F3%u30D0%u30FC%u304Cpackage.json%u3092%u4F5C%u6210%u3057%u3066%u3044%u308C%u3070%uFF12%u884C%u76EE%u3060%u3051%u3067OK%u3002%0Anpm%20install%u3060%u3051%u3067%u4ED6%u306E%u30E1%u30F3%u30D0%u30FC%u3068%u540C%u3058%u74B0%u5883%u3092%u6574%u3048%u3089%u308C%u308B%u3002%0A%60%60%60%0A%24%20npm%20init%0A%24%20npm%20install%20--save-dev%20eslint%0A%60%60%60%0A%0A%u30D1%u30B9%u306E%u901A%u3063%u3066%u3044%u306A%u3044npm%u30D1%u30C3%u30B1%u30FC%u30B8%u3092%u4F7F%u3048%u308B%u3088%u3046%u306B%u3059%u308B%u3002%0A%60%60%60javascript%3Apackage.json%0A%7B%0A%20%20%20%20%22scripts%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22lint%22%3A%20%22eslint%20src%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22devDependencies%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22eslint%22%3A%20%22%5E2.8.0%22%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0Aeslint%u30B3%u30DE%u30F3%u30C9%u3092%u4F7F%u3048%u308B%u3088%u3046%u306B%u3059%u308B%u3002%0A%60%60%60%0A%24%20npm%20install%20-g%20eslint-cli%0A%24%20npm%20install%20--save-dev%20eslint%0A%24%20eslint%20src%20%0A%60%60%60%0A%3Cbr%3E%3Cbr%3E%0A%u3082%u3057%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u5185%u306B.eslintrc.json%u30D5%u30A1%u30A4%u30EB%u304C%u306A%u3051%u308C%u3070%u4EE5%u4E0B%u3078%u9032%u3080%u3002%0A%u3082%u3057%u304F%u306F%0A%60%60%60%0A%24%20eslint%20%u30D5%u30A1%u30A4%u30EB%u540D%0A%60%60%60%0A%u3092%u3059%u308C%u3070%u8272%u3005%u30BF%u30FC%u30DF%u30CA%u30EB%u304B%u3089%u805E%u304B%u308C%u305F%u5F8C%u306B%u30D5%u30A1%u30A4%u30EB%u304C%u81EA%u52D5%u751F%u6210%u3055%u308C%u308B%u3002%0A%0A%23%23%23%20.eslintrc.json%0A%0A---%0A%0A.eslintrc.json%u30D5%u30A1%u30A4%u30EB%u3092%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u306E%u30EB%u30FC%u30C8%u30C7%u30A3%u30EC%u30AF%u30C8%u30EA%u306B%u7528%u610F%u3057%u3001%u4EE5%u4E0B%u3092%u8A18%u8FF0%u3002%0A%0A%60%60%60javascript%3A.eslintrc.json%0A%7B%0A%20%20%20%20%22extends%22%3A%20%5B%22eslint%3Arecommended%22%5D%2C%0A%20%20%20%20%22plugins%22%3A%20%5B%5D%2C%0A%20%20%20%20%22parserOptions%22%3A%20%7B%7D%2C%0A%20%20%20%20%22env%22%3A%20%7B%22browser%22%3A%20true%7D%2C%0A%20%20%20%20%22globals%22%3A%20%7B%7D%2C%0A%20%20%20%20%22rules%22%3A%20%7B%7D%0A%7D%0A%60%60%60%0A%0A%u4EE5%u4E0B%u306E%u30B3%u30DE%u30F3%u30C9%u3092%u5165%u529B%u3059%u308B%u3068JS%u306E%u8A18%u8FF0%u306B%u8AA4%u308A%u304C%u3042%u308B%u304B%u898B%u3064%u3051%u3066%u304F%u308C%u308B%u3002%0A%60%60%60%0A%24%20eslint%20test.js%0A%60%60%60%0A%0A%0A%23%23%23%u5171%u6709%u8A2D%u5B9A%0A%0A---%0A%0Aeslint%u306E%u30EB%u30FC%u30EB%u306F%u975E%u5E38%u306B%u591A%u3044%u305F%u3081%u6BCE%u56DE%u8A2D%u5B9A%u3059%u308B%u306E%u306F%u5927%u5909%u3002%u3053%u308C%u306B%u5BFE%u5FDC%u3059%u308B%u305F%u3081%u306B%u5171%u6709%u8A2D%u5B9A%u3068%u3044%u3046%u6A5F%u80FD%u304C%u3042%u308B%u3002%0A%0A%23%23%23%u6700%u5F8C%u306B%0A%0A---%0A%u30C6%u30AD%u30B9%u30C8%u30A8%u30C7%u30A3%u30BF%u306Batom%u3092%u4F7F%u3063%u3066%u3044%u308B%u4EBA%u304C%u3044%u308C%u3070%u3001linter%u3068linter-eslint%u3092%u5C0E%u5165%u3059%u308B%u3053%u3068%u3067%u3088%u308A%u8996%u899A%u7684%u306B%u30A8%u30E9%u30FC%u304C%u6B69%u304B%u306A%u3044%u304B%u3092%u5224%u5225%u3067%u304D%u308B%u3002%0Ahttps%3A//mae.chab.in/archives/2874%0A%0A%u30EB%u30FC%u30EB%u3092%u8FFD%u52A0%u3057%u305F%u308A%u3001%u30AA%u30D7%u30B7%u30E7%u30F3%u3092%u8FFD%u52A0%u3059%u308B%u3053%u3068%u3082%u3067%u304D%u308B%u306E%u3067React%u306B%u5BFE%u5FDC%u3067%u304D%u305F%u308A%u3059%u3054%u3044%u4FBF%u5229%u3002%0A%0A%0A%u30DE%u30FC%u30AF%u30C0%u30A6%u30F3%u65B9%u5F0F%u3067%u66F8%u304F%u3068%u7DBA%u9E97%u306B%u63CF%u3051%u308B%u611F%u3058%u3059%u308B%u3057Web%u4E0A%u3067%u3082%u8AAD%u307F%u3084%u3059%u304F%u3066%u3044%u3044%u306A%u30FC%u3002%0A

 

Google HTML/CSS Style Guideを読んだ

Google HTML/CSS Style Guideを読んだ。

Google HTML/CSS Style Guide

 

前にSEO対策の一環としてより良いコンテンツを作ることが挙げられるということをまとめた。

 

今回読んだのはGoogle HTML/CSS Style Guide。

Style Guide、つまりHTML/CSSを書いていく際にSEO対策として有効なスタイルは何かということが書かれてある。

 

たくさんのTipsが書かれてあるがそれのメモ書き。

 

 

埋め込みリソースにはhttpsプロトコルを使う。
ex) <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" > </ script>

一度に2回だけインデント
<ul>

  <li> Fantastic
  <li> Great
</ ul>


全てのコードは小文字。
末尾の空白は削除。

ヘッダーのエンコーディングには
<meta charset="utf-8">

必要に応じてコメントも書くと良い。

HTML5であるという宣言を忘れない。
<!DOCTYPE html>

セマンティックHTMLを用いる。

メディア(画像、動画、アニメーション)を埋め込むときaltを用いる。
<! - Recommended - > <img src = "spreadsheet.png" alt = "スプレッドシートスクリーンショット。>

省略可能なタグは省略する。

type属性は今は必要ない。
<! - おすすめしません - > <link rel = "stylesheet" href = "https://www.google.com/css/maia.css" type = "text / css" >
<! - Recommended - > <link rel = "stylesheet" href = "https://www.google.com/css/maia.css" >


属性値を決めるときは必ずダブルクォーテーション
<! -推奨- > <a クラス= "maia-button maia-button-secondary"> ログインする</a>

IDとクラスの名前は意味があったり一般的なものを使用する。そして、その名前は必要最低限の長さで意味を伝えられるもの。
コードに関しても必要な情報を短く書く。

0の単位は必要な場合を除き、書かない。

16進数は可能であれば3文字で。

idとクラス名の単語はハイフンで区切る。

cssはアルファベット順に宣言する。

cssのブロックコンテンツはインデントして記述する。

全ての宣言の後にセミコロンを使用する。
test {
display: block;
height: 100px; }

propertyとvalueの間のコロン後にスペースを入れる。
h3 { font-weight: bold; }

selectorとcurly braces の間にスペースを入れる
#video { margin-top: 1em; }

selectorと宣言は別々の行に記述
h1,
h2,
h3 {
font-weight: bold;
line-height: 1.2;
}

塊と塊の間は2行間隔
html {
background: #fff;
}

body {
margin: auto;
width: 50%;
}

CSSではシングルクォーテーション、urlには何もいらない
@import url(https://www.google.com/css/maia.css);

html
{

font
-family: 'open sans', arial, sans-serif;
}

コメントを用いてわかりやすく
/* Header */

#adw-header {}

 

 

まとめ

とにかくわかりやすくということが挙げられる。

コメントも書くことが推奨されていたり、クラス名も何かがわかりやすく書かれてあるほうがいい、_(アンダーバー)ではなく、ー(ハイフン)のほうがいいという内容もあったのでGoogleクローラーはそんなところまで見ているのかという印象だった。

 

ここまでを完璧にやろうとするとCSS設計のBEMはちょっと工夫しなければならない。

なぜならクラス名に_を使うこともあるから。

 

何が正解かはわからないSEOの世界ではやはりそれを管理しているGoogleのいうことを聞いておくに越したことはないだろう。

GoogleのSEOガイドラインを読んだ

SEOに関するGoogleガイドラインを読んだ。
 
 
まず大前提が
  • ユーザーが探している情報を提供する
  • ユーザーが検索するであろう内容に関する質の高いコンテンツを提供する
この要素を満たすために、以下のようなことをして、検索する人にとって優しいサイトを構築する。
 
  • 他のサイトからリンクを貼られる
他のサイトから便利で価値があると思われて、リンクが貼られることでクローラーが見つけやすくなり、上位インデックスされる
 
  • サイトを簡単にアクセスできるようにする
一つ以上のテキストリンクで各ページにアクセスできるようにする。
 
避けること
過度なキーワード、不正なクローリングを試みない。
クローラーは画像のテキストを認識しないので重要な名前、コンテンツ、リンクに画像は使用しない。
用いる場合はALT属性をつける。
同じ内容のコンテンツを複数のURLで公開しない。
 
 
Googleがページを検出しやすくする
画像にはalt属性
リンクの数を妥当な量に抑える
robots.txtファイルを使ってwebページへのアクセスを制限する
サイトマップとサイト情報をgoogleに手動で送信することもできる
 
 
Googleがページを認識しやすくする
豊富な情報をわかりやすく提供する
titleにはタイトルh1には見出し
ページの把握に必要となるcssファイルやjavascriptファイルが全てクロールされるようにする
サイトの重要なコンテンツはタブなどには記載せず、デフォルトで表示する
広告リンクに対してはrobot.txtやrel="nofollow"でクローラが広告を認識しないようにする
 
 
訪問者がページを利用しやすくする
重要な情報はテキスト
全てのリンクがページにアクセス可能
ページの読み込み時間を短縮する
あらゆるデバイスに対応したサイトデザイン
あらゆるブラウザに対応
HTTPS接続
視覚障害のあるユーザーに対しても配慮
 
 

まとめ

 
どうすればユーザーに対して価値のある情報を提供できるか考える。
そして、そこに自分の独自性などで付加価値を高めることが検索で上位に来る大きな要因となる。
ネットをやっているとよくSEOという言葉を耳にするけど、Google曰く、ユーザーにとって役に立つようなサイトを作れば自ずと検索上位にくるということがわかった。
 
以前にWelqなどのキュレーションサイトが誤った情報を流すサイトにもかかわらず、検索上位に食い込んで問題になったが、いずれはそのようなサイトも淘汰されていくはず。
どれだけ人の役に立つ情報を載せるかということが一番重要。
役に立つとはいえ難しい文章にしてしまえば読まれにくくなるし、文章量が多ければそれだけ全て読むハードルは高くなる。
 
自分が読んで欲しいと感じる読者の目線に立ってコンテンツを作っていくことが大事なのかもしれない。
 
 

初めてCSS設計というものを知った

今までHTMLやCSSを書いたことはあったものの命名規則やコードを書いて行く順番などはバラバラだった。
大規模なコードに触れる機会がなかったらそれでもいいものの他の人と一緒に作業していく中で独自のやり方では賢いやり方ではない。
 
そんな中でCSS設計というものを知った。
 

CSS設計の役割

特定の決まりごとを作らずにCSSを書いていくと、そのうちコードがぐちゃぐちゃになったり必要以上に長いコードが出来上がってしまう。
それを防ぐためにクラスやIDの命名規則CSSのパーツの一つ一つをどう捉えるかということが重要となってくる。
 
これを実現するためにCSS設計があり、今回は4つのCSS設計の手法を学んだ。Atomic Design, OOCSS, SMACCS, BEMの4つ。
 
 

Atomic Design

Atomic Designとは、デザインシステムの方法論。
UIのコンポーネントを分割できない小さいものを原子(atoms)、原子の集めたものを分子(molecules)、分子の集まりを有機体(Organism)という。
有機体の集まりでテンプレート(templetes)を作り、画像や文字などを入れた状態にしたものをページ(pages)という。
 
例えで言うならガンプラを作るときと同じ。
小さい部品(atoms)を組み合わせて顔、腕など(molecules)を作っていく。
それらを組み合わせて上半身、下半身といったより大きな部品にしていく(organism)。
それらを組み合わせてガンダムが出来上がる(templetes)。
そこから塗装していき、完成(pages)。
 
 
特徴としては、
  • UIの一つ一つの要素を目で見て部品と捉え、プラモデルのように組み立てていくので再利用が可能。
  • エンジニアとデザイナーの間でコミュニケーションが取りやすい。
  • エラーはorganismに着目する。
  • 0からサイトを作っていくぶんにはいいが、既存のサイトをAtomic Designに変更していくのは大変。
 
デザインする上では全体のページを一度考えて、その上でAtomic Designを用いればエンジニア、デザイナー間の連携もはかれるし、Atomic Designの利点もうまく活用できるのではと感じた。
 

OOCSS

CSS設計の一つで、Object oriented Cascading Style Sheetsの略。
オブジェクト指向CSSを設計していこうという考え方。一つ一つのパーツをコンポーネントという。
 
アンチパターン...場所に依存した指定方法
ex) mainクラスのh2タグにはこれこれ。sidebarクラスのh2タグにはこれこれ。
 
アンチパターンをしすぎると、コピペをたくさんしなきゃならなくなってコードが長くなったり、上書きをすることで冗長になる。
詳細度を利用したスタイルの当て方をすれば複雑になるし、!importantで無理やり解決しなければならないという考えも生まれる。
 
OOCSSの考えでは一つ一つのコンポーネントをレゴのブロックのように考える。
レゴという考えが大前提。
 
注意点
  • 重複の記述を避ける。
  • 似たようなCSSのデザインが一つのページの中にあったら一つのCSSの記述でまとめる。
  • エレメントを特定することはしない。 ex) div.myClassではなく、.myClass
 
tips
  • 再利用する上でwidthやbackground-color,background-imageを変更することは便利
  • 柔軟性に富むためにグリッドの考え方を取り入れるべき
 
OOCSSの特徴
  • 一つ一つのコンポーネントをレゴのブロックのように考える。
  • コンテンツとコンテナという考え方をすることでパーツの使い回しが可能。
  • オブジェクト指向言語を知っている人ならすぐに馴染みやすいのではないかと感じた。
 
 

SMACCS

Scalable and Modular Architecture for CSSの略。スマックスって呼ぶらしい。
CSSのルールを5つのカテゴリに分ける。
 
ベース...デフォルトのスタイル
レイアウト...モジュールの配置場所
モジュール...再利用可能なパーツ
状態(ステート)...レイアウト、モジュールの状態
テーマ...レイアウト、モジュールの外観
 
ベース
  • IDやクラスは使わない。bodyやaなどのベースとなるスタイルを決める。
レイアウト
  • ページのエリア分けをする。クラスの頭に l-/ layout-をつける。ページ内の大きなブロックと捉える。
モジュール
  • レイアウト内のパーツ。module-titleなどのように頭にmodule-をつける。
ステート
  • レイアウト、モジュールの状態。is-をクラスの頭につける。
 
テーマ
  • カラーや背景色など。theme.cssで読み込ませる。
 
 
 

BEM

他のCSS設計に比べ一目でわかりやすいし、柔軟性に優れている。
Block Element Modifier によってCSS命名規則をつける。
Block...それだけで意味をなす塊 ex)input, menu, checkbox, header, container
Element… Blockの中の子要素的存在。 ex) menu item, list item, header title
Modifier… 見た目や動作を変える。 ex) disabled, highlighted, checked, size big
 
Block… クラス名のみ。ex) .block{}
Element… ブロック名+__エレメント名 ex).block__item{}
Modifier… ブロック名__エレメント名+ --modifier名 またはブロック名orエレメント名+ --modifier名
ModifierはElementかBlockが含まれている要素にしか付与できない。
 
 

まとめ

CSS設計を用いて、コードに規則性を持たせればメンテナンスしやすいし、作ったコードをパーツとして他のサイトを作る際にも応用できるとわかった。
BootstrapはOOCSSらしいし、確かに作る部品を他でも使うという前提でコードを書いていくのであれば、オブジェクトとして考えるのが一番いいのかー。
 
どれもそこまで大差がないけど、BEMが一番見てすぐにわかりやすそうだなと感じた。
 
 
 

コミュ力あがるHTML

セマンティックHTML
 
まず初めにセマンティックって?というところ

セマンティックとは、一般的には「意味」や「意味論に関することを指す語である。IT用語としては、コンピュータ文書情報の持つ意味を正確に解釈させ、文書関連付け情報収集などの処理を自動的に行わせる技術について用られる語である。セマンティックとは、一般的には「意味」や「意味論に関することを指す語である。IT用語としては、コンピュータ文書情報の持つ意味を正確に解釈させ、文書関連付け情報収集などの処理を自動的に行わせる技術について用られる語である。

セマンティックとは - IT用語辞典 Weblio辞書

 

要するに、
セマンティック(意味論)とは、意味づけをしっかりしましょうということ。
 
 
HTMLに置き換えると、
<p>を使うならそこは段落!空白行は<p>を使って表現してはいけないよ。
<div>がたくさんあって意味的じゃない?だったらHTML5からはヘッダーならヘッダー、フッターならフッターのタグを用意しますからこれ使って!
 
 
といった具合にタグの意味を考えて、それにあった記述をしていくということ。
 
 
これによって他の開発者との間で連携も取れ、再利用もしやすくなる。
さらにはコンピュータにもわかりやすい構造にすることができるのでアクセシビリティも上がり、SEO対策にもなる。
 
だから、今まで<div>を使われてきたところがHTML5からはより意味のあるタグに置き換わってたりする。
 
 
ヘッダーには<header>。フッターには<footer>というタグが使える具合に。
以下のサイトでHTML5から使えるようになったタグ一覧があるので参考になった。
 
 
セクション…文書を論理的に分割した単位。 ex)章、節、項…ページ、ダイアログ...
<section><article><aside><nav>がある
<section>は他の3つで置き換えられないもの。
<article>は独立した本文を扱う。RSSリーダーで意味が通じるなら<section>ではなく<article>
広告やサイドバーガジェットなど本文と関わりが薄いセクションには<aside>
サイト内のメニューに対しては<nav>
 
セクションの中には以下の要素が入る。
見出し要素 h1~h6, hgroup
セクションルート <body><blockquote><details><fieldset><figure><td>
ヘッダ、フッタ<header><footer>
 
そのほかにも日付や日時を表す<time>や問い合わせ先アドレスを表す<address>がある。
 
セクションでは文書のアウトラインを構成し、スタイル用途でブロックを作成する際には<div>を用いる
1セクションに対して1見出し!h1のみでOK
1つのセクションに2つ以上の見出しをつける場合にはそのセクションの内側をhgroupで囲う。
 
セクションルートはセクションとは独立したアウトラインを構成する。
 
 
まとめ
セマンティックHTMLとは他者(人、機械)とうまくコミュニケーションするための考え方。
コミュ力あげればみんなハッピー!
これはHTML5の新しく追加されたタグで実現可能になった。
 
文書はセクションを用いてブロック分けし、divはスタイルに関する記述に対して使用する。
 
 

最後に

HTML5関連で同様の作者のスライドを見るとHTML5に対する可能性をすごく感じる。
特にスライドの中で紹介されていたこのサイトはすごい!

どうサービスを作ればいいか

 
今まで新しくサービスを作っていくときにどうやって作っていけばいいのかわからなかった。
プログラミングは大事と言われているけど、プログラミングの基礎以外の教材はあんまりネット上には転がっていなかったし。
 
今月はプログラミングだけでなく、サービスを作る上で必要な知識を学んだので、
 
プログラミングをするまでのwebサービス作成の流れをさらっとまとめてみた。
 
 
サービスを作り上げる上で、まず大きく分けて4つの段階がある。
 
要件定義、設計、開発、テストの4つ。
 
 
要件定義ですることは、
簡単にいうと新しいwebサービスを作りたいなーって思ってそれをもうちょっと大人っぽく書き起こしたもの。
 
どんな機能をつけますか?とか
なぜ作るのですか?とか
どうやって作業は進めていくのですか?
 
といったサービスと作業の概要をまとめたもの。
だからここでは僕たちがwebサービスで学ぶプログラミングは登場しなく、紙の上でできる段階。
 
 
設計に関しても紙の上でできる。
どのAPI使うか決めたり、モックアップを作ってUI設計したり、データベースの設計をしたりする段階。
 
ここで重要なのがデータベース設計。
なぜなら僕たちが使っているwebサービスのほとんどがデータベースを持っているから。
なのでデータベース中心のDOA(Database oriented approach)という考え方が主流。
 
プログラミングを勉強したばかりだととりあえずプログラムしちゃってデータベースは後回しというようなPOA(process oriented approach)という取り組み方をするけど、こうしちゃうと後から結局データベースをもう一回考え直さなくなっちゃうから賢いとはいえない。
 
だからDOAで設計していく。
DOAの流れとしてはどういう情報がデータベースに入るか(情報=エンティティ)、を洗い出して、エンティティはどういう属性かを考えて、それらの情報を整理する(正規化)。ER図を用いてエンティティ同士の関係を可視化すると今後の作業もわかりやすくなっていい。
 
 
この要件定義、設計を考える段階が上流工程と呼ばれる。
 
 
ここからいよいよプログラミングをしていくことになる。プログラムも大事だけどそれ以上にどうやって作っていくかといった計画がとても大事。
 
プログラミング!自分でwebサービス作って世の中にインパクトを与えたい!って思っていても、最初の計画があいまいだったら形になる前に空中分解してしまうな。
 
計画性はやっぱり磨くべき。