UbuntuでBoo
インストール
sudo apt-get install boo
HelloWorld
helloworld.boo
print "helloworld"
実行 : booish helloworld.boo
結果 : helloworld
以上
UbuntuでSmallTalk
インストール
apt-get install gnu-smalltalk
HelloWorld
helloworld.st
Transcript show:'helloworld'. Transcript cr.
実行 : gst helloworld.st
結果 : helloworld
最近の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の代替となる言語たち
- TypeScript
- CoffeeScript
- Dart
- Haxe
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で利用しているパッケージ・設定等
フォント
Source Han Code JPを導入。パッケージ
atom-html-preview
htmlのページをプレビューできるautocomplete-plus
言わずと知れた優秀な入力補完パッケージcolor-picker
名前の通りカラーピッカーを表示emmet
すでに説明済みfile-icons
タブなどにファイル名と共にファイルの種類に応じたアイコンを表示してくれるgit-log
名前のままhighlight-line
これも名前のまま選択行をハイライトしてくれる。highlight-columnと併用しようか迷っているhighlight-selected
選択した単語と同じ物を強調するjapanese-menu
日本語化linter
コード解析・他のlinter系パッケージを入れるために必要linter-csslint
CSSのlintlinter-eslint
ECMAのlint・うまく動作しなかったので無効化しjshintを使用eslintをメインに利用linter-jshint
JSのlint(eslintが動いたことで無効化)minimap
sublime Textのようなミニマップを表示できるminimap-autohide
前述のminimapを自動で隠してくれる、画面をスクロールすると表示minimap-git-diff
git diff を自動で走らせminimapに差分の位置の表示をしてくれるpigments
ソースコードにカラーコードなど色を表す文字を書いたら実際にその色を表示してくれる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を始めるのに、とりあえずこれだけ覚えておけば大丈夫
公式のチートシート