読者です 読者をやめる 読者になる 読者になる

備忘録

自分の為の備忘録

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

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


加筆予定

すごいH本

一ヶ月たったけどもまだ190ページほどしか読み終えていない。
まだHaskellのソースもほぼ書いてない。(30行程度?) 今度とりあえず読んだところまでの簡単なまとめを書きたい。

Haskellやってみる

Haskellをはじめる(た)。
とりあえずすごいH本を読んでいる。
一ヶ月ぐらいで一周したい。