備忘録

自分の為の備忘録

最近のWebフロント事情

2016年今日日Webについてわからないのはまずいと思い、ここ数ヶ月Web界隈についての勉強をしている。そこで得た知見について簡単に記しておきたいと思う。

HTML

最新はHTML5。今年9月にHTML5.1が勧告される予定だそうだ。
いまではHTMLの規格策定もGitHubで行っている。素晴らしい時代になったものだ。
HTML5.1では大きな変更はないもののpicture要素などが追加される。

CSS

最新はCSS3。どうやら規格は機能単位でモジュール化して勧告することになったようだ。すなわち CSS4は来ない。 つまり、バージョンが上がるたびに機能を覚えれば良かった今までとは違い、日々アップデートされるCSSの規格やブラウザに合わせて学習する必要に迫られる。ちなみにHTMLもモジュール化しようという提案もあるそうだ。

CSSメタ言語

最近ではSassやLESS、Stylusといったメタ言語が出てきている。

  • Sass
    Rubyで書かれているらしく特にRuby界隈で人気があるらしい。変数が利用できるなど、より生産的なCSSの記述ができるようになっている。SASS記法とSCSS記法があり、最近ではCSSの記法に近いSCSS記法が主に利用されているようだ。

  • LESS
    Sassに影響を受けて開発された。JavaScriptで組まれていて、Node.jsを利用する。このJavaScriptで利用する点を生かし、コンパイルせずにクライアントにLESSファイルを渡し、クライアントサイドで動的にCSSを生成する手法があるようだ。CSSよりでSCSS記法に近いらしい。

  • Stylus
    SassやLESSよりも後発、LESSと同じようにJavaScriptによる実装。SASS記法のような記法とSCSS記法のようなCSS風の記法を混ぜることができるなど、柔軟な記法が特徴。*1
    あくまでも個人的な感想ではあるが、これが一番使いやすそうに感じる。リリースから日が浅いことによる情報不足がネックか。

JavaScript

最新はES2015。ES6という呼び名が一般的だが、正式には"ES2015"と年数を加えた名前にするべきだそうだ。
当然ES7もといES2016も今年に公開される。どうやら今月(2016年6月)に公開されるらしい。(2016/06/21追記 17日に正式公開された)
ES2015ですらブラウザのサポートが追い付いていない現状を考えるとES2016が出たところですぐに全面的な採用は困難だろう。

JSライブラリ

大変宗教戦争感がある。

  • JQuery
  • AngularJS
  • Redux
  • React

辺りが流行っているらしい。

altJS

JavaScriptの代替となる言語たち

ES2015に従ったJSを古い規格のものに変換してくれるBabelや、ES2015自体の普及により利用が減っているそうだ。

*1:つまりスタイルを統一しなければ悲惨なことになるのは火を見るよりも明らかだ

eslintrc

現在の設定。

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,   // ブラウザのグローバル変数の使用
    "node": true,      // node.jsの使用
    "es6": true,       // ES6(ES2015)の利用
  },

  "globals": {
    "$": true,
    "jQuery": true,
    "PaintMap": true,
    "Tile": true,
    "GenerateTiles": true,
    "Player": true,
    "Local": true,
  },

  "rules": {
    "no-alert": 2,             // alert,confirm,promptがあるとエラー
    "no-fallthrough": 1,       // break忘れを警告
    "no-multi-spaces": 2,      // 無駄なスペースをエラー
    "no-new": 2,               // 参照されないnewをエラー
    "no-redeclare": 2,         // 複数回同じ変数を宣言するとエラー
    "no-self-compare": 2,      // 自分自身同士を比較するとエラー
    "arrow-spacing": 2,        // アロー関数の矢印の前後にスペースを要求
    "no-unused-vars": 1,       // 変数を利用していない場合警告
    "prefer-const": 2,         // 変更されていないにも関わらずconstでないならエラー
    "indent": [1, 2],          // インデントがスペース2個以外で警告
    "no-var": 2,               // varでの変数宣言を禁止
    "semi": [2, "never"],      // セミコロンの使用を禁止
    "space-before-blocks": 2,  // ブロックのカッコの前にスペースが開けられていないとエラー
    "no-multiple-empty-lines": [2, { "max": 1 }], // 余分な空行が2行以上でエラー
    "comma-spacing": [2, {"before": false, "after": true}], // コンマの後にスペースを要求
  }
}

Atomで利用しているパッケージ・設定等

  • インターフェイステーマ
    気分に応じて変更しているがAtom Darkが気に入っている。

  • シンタックステーマ
    最近はIcebergを利用している。
    Duotone系列もいい感じのテーマが多い。

  • フォント
    Source Han Code JPを導入。

  • パッケージ

    • atom-html-preview
      htmlのページをプレビューできる

    • autocomplete-plus
      言わずと知れた優秀な入力補完パッケージ

    • autocomplete-paths
      autocomplete-plusで出てくる補完候補ディレクトリを追加

    • color-picker
      名前の通りカラーピッカーを表示

    • emmet
      すでに説明済み

    • file-icons
      タブなどにファイル名と共にファイルの種類に応じたアイコンを表示してくれる

    • git-log
      名前のまま

    • highlight-line
      これも名前のまま選択行をハイライトしてくれる。highlight-columnと併用しようか迷っている

    • highlight-selected
      選択した単語と同じ物を強調する

    • japanese-menu
      日本語化

    • linter
      コード解析・他のlinter系パッケージを入れるために必要

    • linter-csslint
      CSSのlint

    • linter-eslint
      ECMAのlint・うまく動作しなかったので無効化しjshintを使用eslintをメインに利用

    • linter-jshint
      JSのlint(eslintが動いたことで無効化)

    • minimap
      sublime Textのようなミニマップを表示できる

    • minimap-autohide
      前述のminimapを自動で隠してくれる、画面をスクロールすると表示

    • minimap-git-diff
      git diff を自動で走らせminimapに差分の位置の表示をしてくれる

    • pigments
      ソースコードにカラーコードなど色を表す文字を書いたら実際にその色を表示してくれる

    • platformio-ide-terminal
      Atom上でターミナルを動かすことができる

    • show-ideographic-space
      全角スペースの可視化(Atomは海外製エディタなので全角スペースと半角スペースが同じように見える)

    • tablr
      CSVのファイルをいい感じに見ることができる

Emmet

前書き

Atomに極めて短い省略記法でHTMLやCSSを書くことができるEmmetというパッケージを入れた。
Emmetの記法を簡単にまとめる。

記法

  • Emmetではタグとしての<や>は必要ない。要素名を書けば必要であろう属性が付与された状態のスタートタグとエンドタグに自動で変換される。
  • タグを入れ子にするとき(階層を下げる時)に>を使用する。
  • 階層を上げるときは^で。
  • +記号で同じ階層の要素を記述。
  • table要素などの特定の子要素が来る要素は+を付けると子要素が挿入される。この場合他の要素を並列に付ける場合+記号を二つ付ける。
  • 要素名の後に#idnameや.classnameとすればid、class属性の付与。他にも要素名の後に特定の記述をすることで要素に対して任意の属性等を付与できる。
  • loremと記述することでダミーテキストに変換される
  • フィルターを利用することで一行で出力する等

  • 要素を指定せずともその場所に適当であろう要素が挿入される。

変換前

#header

変換後

<div id="header"></div>

  • 属性名の後に[]と付けることで任意の属性を付与。

変換前

head+body>a[href="./test.png"alt="hoge"]+ul.list>li

変換後

<head></head>
<body>
  <a href="./test.png"alt="hoge"></a>
  <ul class="list">
    <li></li>
  </ul>
</body>

  • {}で囲むと中身のテキスト等に

変換前

p{test}

変換後

<p>test</p>

  • *numとすることで要素の複製。その際\$記号を用いればその部分が連番に。

変換前

p+ul>li{list$}*3

変換後

<p></p>
<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

変換前

!

変換後

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

CSS用にも用意されているが、大変量が多く書ききれる気がしない。


参考

HTML/CSSを爆速コーディング Emmet入門
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
公式のチートシート