example/turorial のコーディングルール統一とビルドイメージへの同梱・整理

[dynamis]

現在 @satakagi さんが頑張って Qiita から Github 側のチュートリアル に移転してコーディングルール変更も進めつつあるが、exaple (および jsbin/jsfiddle) のサンプル例はまだ async/await ではない Promise .then コードで書かれている。

また、tutorial が github repo に入ったら Qiita に接続せずとも見られるので全てオフラインでチュートリアルが可能となるから、tutorial もイメージに同梱してローカルのチュートリアルを表示する感じにするのが良いはず。

ざっくり想定タスクリスト:

• [ ] example のコード例 (https://github.com/chirimen-oh/chirimen-raspi3/tree/master/gc 配下) とチュートリアルでコーディングルールの統一
  • [x] async/await
  • [x] #18 prettier などでのフォーマット統一
• [ ] jsbin なども新しいコードのバージョンを用意して差し換え。
  • できればそこは自動化可能にしたいがそれはまた別の issue にて

  • 20 rpi3 ローカルで jsbin を動かすようにすると自動化も簡単そう

  • あるいは jsbin pro アカウントで write api 使って自動化するか、webdriver などで自動処理を書くか...
• [x] ビルドイメージに tutorial を同梱
  • [x] ビルドイメージのチュートリアルリンクを差し換え (オンライン版へのリンクも何処かに残す)
  • [x] 新しいチュートリアルの補足ページか何かにオリジナル Qiita へのリンクなどもしておく

[dynamis]

すべての example は修正しきれないので手の回る範囲でですが、以下の方針で書き換えを行っています

• フォーマット
  • prettier に任せる。表形式のコードなど以外では // prettier-ignore しない
• HTML 要素の取得
  • いろいろな方法が使われているが getElementById に統一
  • window.elementId に対して elementId でいきなりアクセスする - id の値に依存する挙動で一般に良くない習慣。知らない人もいるし eslint などでの警告もされる。
  • getElementById - 単純。古典的・誰でもほぼ知っている
  • querySelector - 汎用的で良いツールだし、今時 id 指定ならちゃんと最適化もしてくれるからパフォーマンスロスがあるわけではないが、CSS Selector 構文について説明する必要がある
• 実行タイミング
  • HTML 要素にアクセスできるためにいろいろな方法があるが、script defer に統一
  • script defer - これなら jsfiddle などのオンラインエディタが勝手に調整したりするロードタイミング制御とコンフリクトすることがないし、js コード中にその制御のコードを書く必要がなくてシンプル。説明としても HTML 読み込み後に実行するための属性だよ、の一言で済むので初心者に優しい
  • (window.)onload = function(){} - シンプルだけどあまり良くない古いコード
  • addEventListener("load") - 本当は DOMContentLoaded
  • addEventListener("load") - DOMContentLoaded とはなんぞやという説明が必要
• 関数名
  • mainFunction -> main
• var, let, const
  • これくらいは教える＆ let/const 使うのが正しいと良いと思うのだけど、1Day 講習資料で var しか説明していないので今のところ var を基本とする

[kou029w]

https://github.com/chirimen-oh/chirimen-raspi3/issues/21#issuecomment-517090705 について #73 で対応完了

[kou029w]

JSBinについては #66

• [x] ところどころチュートリアルと異なり val ^= 1 のようなコードが登場するので修正する