TypeScriptもいいですが、試行錯誤の速さ優先で、素のJavaScript好きです。

サーバープログラムをNode.jsで作る書くことが増え、ブラウザ側とも共有したくなった際、モジュール化の手法が異なるのがネックでした。 Node.jsのver13では、ES6のimport/exportが使え、ブラウザもES6(ECMAScript6)対応なので、移行する良い機会。

結論
- 拡張子 js → mjs
- HTTPサーバーでの mjs の Content-Type は application/javascript
- ブラウザ内のscriptタグには type=module
- CLIでの単体テストは process.argv をチェック
- "use strict" がデフォルトになったので記述不要!
- ローカル開発時でもwebサーバー必須

ということで、今後の開発は .mjs で行き、既存のものもメンテナンスの際に少しずつ移行していくことにします。

"use strict" は、JavaScriptで変数宣言しないと使えなくする厳格モードに入るおまじない。これがないと、Pythonのように変数宣言なしで動きます。

a = 15 alert(a)

ちょっとしたコードを作るときにはいいですが、プログラムが長くなった際、うっかり変数を書き間違えに気づけず、無用な時間を取られます。"use strict" を先頭に記述することで厳格にチェックしてくれますが、妙な文法が気になっていたので大歓迎! また、モジュール対応で複数のJavaScriptファイルをHTMLのタグで書くことからも解放されます!

移行実験に使ったプロジェクトは、こちら「lifegameclock」(src on GitHub)
さまざまなパターンが「ライフゲームの物体一覧 - Wikipedia」として公開されているので、JavaScriptをモージュルに分けて、いろいろと実験してみました。


汽車ポッポ」と呼ばれるパターン


P94S
1993年に発見されたグライダー発射パターンの一種、グライダーが発射されます(拡大してみてみましょう)


max」(時計が不要な方は max_withoutclock
お気に入りの無限増殖パターン、起動!(マックス (ライフゲーム) - Wikipedia


上下左右を錬鉄しているトーラス空間なので、画面端でぶつかり、崩れ始めます。


左右も崩れ始めます。崩れるパターンは表示するウィンドウ次第です。


グライダーを多数確認!(幅高さを508,579に設定すると宇宙船の登場が確認できます)


いずれすべての動きが止まります。

地球も一つの有限空間、無限に増える恐ろしさに対して、如何に戦うか!?

エンジニアの祭典、デブサミこと翔泳社のDeveloper Summit 2018、EdTechコーナーにIchigoJam出展。
テーマは「変わるもの×変わらないもの」、プログラミングに最初にであったワクワク感。現代の子供達も変わりません。

IchigoJamでコントロールするかわいいロボットやキラキラの数々、人気でした!
秋葉原のPCN直営店、PCN秋葉原 アセンブラージュ (@pcn_akiba)ではいつでも体験できますよ!
IchigoJam電光掲示板のソースはこちら!)


1行でサーボやキラキラできて、数行で楽しいゲームのプログラミングができちゃう、IchigoJam!
はんだづけから楽しめるハーフキットと、つないで2秒で即プログラミングできる完成版。
オススメキーボードは、USBキーボードながらPS/2ファームも入っている、651円のサンワサプライ製キーボード

Amazonで揃います!(PCN通販もどうぞ)


お父さんが教えるプログラミング、我が子に伝えたいワクワク - Developer Summit 2018
Speakerのセールスフォースの安倍さん、レッドハットの平さん


大多数が幼稚園や小学生を親に持つエンジニアな満員の会場、IchigoJamを知っていますか?で挙がったのは10%ほど。
ソフトウェアとハードウェアの垣根がなくなるIoT時代、ソフトウェア系なエンジニアな方こそ、子供と一緒にはじめてほしいプログラミング&電子工作。


阿部崇さんの自己紹介スライド、小学生でファミリーベーシック、中学生でMSX、高専でX68!
都会では、周りにコンピューターを持っている友達がたくさんいたという羨ましい環境があったんですね。三重県では学年にもうひとりしかMSXを持っている子供はいませんでした。


おにぎりコロコロ on IchigoJam web
ESCキーか、Ctrl-Cか、ボタンで止まる、IchigoJamのWebAssemblyでつくったエミュレーターです。
平さんが5歳の息子にはじめて教えたプログラミング!

CLS = 画面を消去、CLear Screen
LOCATE = カーソル移動
PRINT = 表示
WAIT = フレーム数分待つ(60=1秒)
GOTO = 処理を指定行数に移す(ループや分岐に使う)
全コマンドは、A4 1枚に収まる「IchigoJam BASIC リファレンス」をご参照ください。


絵文字で楽しく、プログラミング!
左Altキーを押しながらアルファベットや数字キーで絵文字がでるので、簡単にさくっと楽しげな雰囲気のできあがり。
IchigoJam web でも試せます。


I/O(外の世界とのインプット・アウトプット)が超簡単なのがIchigoJamの特徴です。

LED 1

これでLEDが光ります!

OUT 1,1

OUT1端子に差し込んだ外付けLEDが光ります。モータードライバー経由でモーター制御もこれ1命令

PWM 2,60

関節にあたるサーボの制御もこの1命令。サーボは、パルスの長さによって角度が変わるようにできているんです(PWM = パルス幅変調)。

危険なMaker Faire、ぜひお子様と一緒に覗いてみてください!
いろいろ作ってみたくなりますよっ


EdTechZineの人気連載が書籍に!
平初著「おうちではじめるプログラミングの授業」来月発売!

講演のグラレコ、かわいい!


北千住を中心に、子どもたちにプログラミングの楽しさを伝えるグループ「PCN北千住」代表の村上さんと平さん!

こどもいない、まだ小さいけど興味あるという方、子どもたちにプログラミング伝えてみませんか?
2.24(土)「第3回 こどもプログラミングサミット2018 in Tokyo | PCN プログラミング クラブ ネットワーク
2.25(日)「PCNこどもプロコン2017冬 表彰式!

links
- お父さんが教えるプログラミング、我が子に伝えたいワクワク - Developer Summit 2018
- 【デブサミ2018】15-D-7「お父さんが教えるプログラミング、我が子に伝えたいワクワク」 #devsumiD #devsumi - Togetter


「3パッチメーカー」

3パッチ作成素材ツール

ブラウザを使った簡単画像加工ツール 第三弾
9パッチまでは必要ない場合にどうぞ。
縦か横で3つに分割します。
ファイルの保存はひとつずつ手動でお願いします。

LICENSE: CC BY (show & link to this page)


「9パッチメーカー」

9パッチ作成素材ツール

ブラウザを使った簡単画像加工ツール 第二弾
サイズ可変の画像素材で使う9パッチ(ナインパッチ)の画像を作成する簡易ツールです。
ファイルの保存はひとつずつ手動でお願いします。

LICENSE: CC BY (show & link to this page)


「美咲フォント表示」

美咲フォント

わずか8x8ドットのすばらしい、しかもライセンスフリーな日本語フォント「美咲フォント
シンプルに自在に扱いたいと、JavaScriptでの表示プログラムを作ってみました。
ポケコン風にしてみるとか、何かオリジナルのハードウェアなどにおすすめです。

LICENCE: PUBLIC DOMAIN


「ポケコンデモ」

ポケコンデモ

私の初のモバイルコンピュータは、シャープのポケコン、PC-G805。
懐かしかったので表示だけ再現してみました。
フォントはなんとなく描いたので、ちょっと違うと思います。

License: CC BY


「JS文字列変換」

JS用変換

HTMLのコードなどをJavaScriptの文字列にするときに使います。
License: PUBLIC DOMAIN (CC0)


「ふきだしメーカー」

ふきだしメーカー

ふきだしを6つのスライダーで調整して作るものです。
CSSで三角形を作るテストと、スライダーをタッチ対応にするテストを兼ねて作成。

ライセンス: CC BY


「ボタンメーカー」

ボタンメーカー

フォントの合字を使ったステキなアイコン表現が紹介されていたのでテストを兼ねて作成してみました。
ポイントはCSSのfont-feature-settings属性ですね。

こちら必見です!「Ligature Symbols 〜ほんとにべんりなフォントのはなし〜

ライセンス: CC BY


「癒しのドラゴン曲線」

癒しのドラゴン曲線

自分自身の一部が全体の相似になっている、自己相似形のひとつ。小説ジュラシックパークの挿絵に描いてあったドラゴン曲線に魅せられた、高専一年生の夏。MSX BASICでがんばって描こうとする過程で再帰という概念を知りました。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS