備忘録

自分の為の備忘録

最近の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を始めるのに、とりあえずこれだけ覚えておけば大丈夫
公式のチートシート

HTML学習備忘録・基本

HTMLがまったくわからないので勉強する。
ひとまず備忘録として学んだ事を記事にしようと思う。
当然HTML5
参考にしたサイト

文書の土台

文書型宣言

DOCTYPE宣言とも。

<!DOCTYPE html>

と最初に書けばよい。

文字

言語コード

日本語のページならば

<html lang="ja">
foobar
</html>

のようにhtmlタグに、何の自然言語で書かれているか記述する。

文字エンコーディング

UTF-8が基本。

SHIFT-JISは死ね。

headタグの間に

<meta charset="UTF-8">

を記述。

タイトル

titleタグで囲むだけ。
当然文字エンコーディング指定の後に書くべきだろう。

IE対応等

考えたくない たとえば

<!--[if lt IE 9]> hoge <![endif]-->

のように書けばブラウザがIE9の時だけhogeが実行される。
後は適当にやる。

コメント

<!-- 
comment
-->

テンプレート的な土台

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

初歩的タグ

見出し

h1 ~ h6 タグで囲む。
数字が小さいほうから大雑把に。
SEOでも重視されるのできちんと書くべき。

改行

brタグを利用。

段落

pタグを利用。
paragraphの略らしい。

範囲指定

  • インライン要素 -> spanタグ
  • ブロック要素 -> divタグ

イメージ

imgタグを利用。

主な属性

  • src="ソース"
  • width="幅"
  • heigh="高さ"
  • alt="代替テキスト"

<img src="image/testimage.png" alt="これは代替のテキストです" width="100" height="100">

リンク

aタグを利用。

主な属性

  • href="URL"
  • title="タイトル"

<a href="https://www.google.co.jp/" title="ぐーぐる">

ページの中の特定の箇所へのリンクはhref属性に#id名を指定。

リスト

  • ul(Unordered List) 番号無しリスト
  • ol(Ordered List) 番号付きリスト
  • dl(Description List) 記述リスト

ul 番号無しリスト

ulタグの中にliタグを入れるだけ。

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

ol 番号付きリスト

ulに同じ。

主な属性

  • start 付けると開始番号を指定できる
  • reversed 番号が逆順に
  • value liタグに付けると途中でカウントを変更できる

dl 記述リスト

dlタグの中にdtタグで定義する用語の記述、ddタグでその説明を書く。
正直いまいちよくわからない。

テーブル

tableタグで囲った範囲がテーブルに。更にその中でtrタグで囲った部分が一行となる。
実際の中身はthタグ囲んだ部分が見出し、tdタグで囲んだ部分が実際のデータになる。 captionタグでタイトルを設定。

<table>
<caption>title</caption>
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
  </tr>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr>
    <td>td4</td>
    <td>td5</td>
    <td>td6</td>
  </tr>
</table>
title
th1 th2 th3
td1 td2 td3
td4 td5 td6

セクション

セクション要素

  • section
  • article
  • aside
  • nav

section

名前の通り。セクション分けしたい際に利用。
あくまで文章構造を示したい際に利用するものであって、デザイン的な指定をしたいのならば基本通りdivで囲う。 あくまで汎用的なものであり、他のタグで適切なものがある場合(記事ではarticleのように)それを使う。

article

記事をこのタグで囲む。例えばこのエントリのようなブログの記事を囲うのに使う。

aside

本文やその記事とは関係のない補助的な内容を記述するのに囲む。


加筆予定