スマホ、PC、サーバー、VRまで、応用範囲が広くて楽しいJavaScriptプログラミング! JavaScriptでサーバー側を開発できるランタイム Deno 1.4、ウェブ標準のWebSocket APIが使えるようになりました! ブラウザを使わずにテストコードが書けるので、リアルタイムウェブアプリ開発が捗りそうです! (WebSocket on W3C / MDN)

Denoでのテストコードの書き方は、こんな感じです。(参照、Testing - Manual | Deno

import { assertEquals } from "https://deno.land/std@0.69.0/testing/asserts.ts"; Deno.test("test 1+1", () => { assertEquals(1 + 1, 2); }); Deno.test("test 1<<10", () => { assertEquals(1 << 10, 1024); });

これを calc-test.js と、名前が -test で終わるファイル名を付けて、テストを実施します

$ deno test calc-test.js Check file:///Users/fukuno/data/js/code4sabae-js-sample/.deno.test.ts running 2 tests test test 1+1 ... ok (3ms) test test 1<<10 ... ok (1ms) test result: ok. 2 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out (5ms)

2つのテストが通りました!テストコードを複数作って、deno test でまとめてテストできます。

では、早速、先日の30行シンプルサーバー&クライアントのクライアント側のテストコードを書いてみます。

import { ClientSync } from "https://code4sabae.github.io/js/ClientSync.js"; import { assertEquals } from "https://deno.land/std@0.69.0/testing/asserts.ts"; const fn = async () => { const ws = await new ClientSync().connect("/ws/", "localhost", 8881, false); const req1 = { ab: 1 }; ws.send(req1); const res1 = await ws.get(); assertEquals(res1, { n: 2, testsync: req1 }); const req2 = { ab: 2 }; ws.send(req2); const res2 = await ws.get(); assertEquals(res2, { n: 4, testsync: req2 }); const req3 = { ab: 128 }; ws.send(req3); const res3 = await ws.get(); assertEquals(res3, { n: 256, testsync: req3 }); await ws.close(); }; Deno.test({name: "websock-test", fn, sanitizeOps: false });

次にサーバーのコードです。今回は5回返したら、終了させることにします。

import { ServerSync } from "https://code4sabae.github.io/js/ServerSync.js"; import { sleep } from "https://code4sabae.github.io/js/sleep.js"; new ServerSync(8881, async (ws) => { for (let i = 0; i < 5; i++) { const data = await ws.get(); await sleep(500); ws.send({ testsync: data, n: data.ab * 2 }); } });

サーバーコードを test-sync.js として、起動

$ deno run -A test-sync.js

次に、さきほど作ったテストコードを動かします。

$ deno test -A cli-test.js

コンソール上でいろいろとチェックできるのは便利!
* WebSocketを使ったコード、何かがリークしてうまく終了してくれなかったので、sanitizeOpt: false を追加しています。 テストは通りますが、終了してくれないので、まだ何か変なのかも。

Let's create realtime web apps!

links
- 30行でOK! サーバーとクライアントをシンプルに実装するJavaScript同期処理ライブラリ

プログラミングボードゲーム「囲みます」の今日の試合、戦況を見ながらリアルタイムに手動でAIを切り替えるプログラムを作ったすずともが優勝。 重要なのは人とコンピューターのコラボ!GUIをHTML/CSS/JavaScriptで、手軽に作るためのライブラリを作りました。

まずはサーバー側。クライアント届くデータを await getで受け取り適当に処理してsendで返すテストをプログラムを作って、test-sync.js として保存します。(この例では500msec無駄に待って、倍返し)

import { ServerSync } from "https://code4sabae.github.io/js/ServerSync.js"; import { sleep } from "https://code4sabae.github.io/js/sleep.js"; new ServerSync(8881, async (ws) => { for (;;) { const data = await ws.get(); await sleep(500); ws.send({ testsync: data, n: data.ab * 2 }); } });

続いて、クライアント側。HTMLで作ったボタンが押されるたびに、カウントしてサーバーへ送信し、返答を待って表示するプログラム。staticというフォルダを作り、index.html として保存します。

<!DOCTYPE html><html><script type="module"> import { ClientSync } from "https://code4sabae.github.io/js/ClientSync.js"; import { waitClick } from "https://code4sabae.github.io/js/waitClick.js"; window.onload = async () => { const ws = await new ClientSync().connect("/ws/"); let cnt = 0; for (;;) { await waitClick(btn); ws.send({ ab: ++cnt }); const res = await ws.get(); console.log(res); divn.textContent = res.n; } }; </script><body> <button id="btn">click me!</button><br> <div id="divn"></div> <body></html>

JavaScriptのランタイム、Denoを使って動かしましょう。コンソールで test-sync.js があるフォルダに移動し、下記コマンドで実行。

$ deno run -A test-sync.js

ブラウザで http://localhost:8881/ を開くと、動かせます!
サーバーとクライアントをつないだプログラムができました!簡単!


反応が遅い?サーバーで時間がかかる処理をやっている風を演出しているだけです。test-sync.jsの await sleep をコメントアウトしたり、数値を変えてみましょう。

簡単さの肝は、WebSocketClientWebSocketServerクラス。await getとsendを使ってサーバーもクライアントも同じように使えるように、WebSocketを同期処理でカプセル化しています。(src on GitHub)

同期型通信の利点は、APIを一つ一つ設計しなくても、サーバーとクライアントのやり取りをそれぞれ順序立てて作るだけなので分かりやすいことです。福井高専の卒業研究や、卒業後エージェント指向が流行った頃の仕事は、同じようなコードをJavaで実装してたことを思い出しました。

HTML/CSS/JavaScriptでいろんなUIを作って、サーバー通信を経由すれば、手軽にいろんなことができますね。 強力な処理を作った時は、接続元をローカルIPに限定する、鍵を付けるなど、セキュリティ対策も忘れずに!

人に変わってサービスし続けてくれるサーバー。その元祖、タイムシェアリングシステムは、60年近く前、1961年開発。

商業的初成功を収めたダートマス・タイムシェアリングシステム(DTTS)は、誰もがコンピューターを使えるようにとダートマスBASICと共に1964年開発。 見慣れたコマンド、LIST / RUN / SAVE / NEWが並ぶ。 そう、これらはBASICのコマンドではなく、TSS(今で言うシェル)のコマンドだったのです!

圧倒的に高速なコンピューターくん、マイクロ秒単位で相手する人を切り替え、人間から見てあたかも同時に対応してくれているように振る舞います。 シェルは、コンピューターと人とをつなぐ窓口のひとつ。IchigoJam BASICのように、コマンドを送ると、その結果を返事として返してくれます。

開発大詰め迎えるjigインターン、デモのためそれぞれチームごとに提供しているサーバーを設定し、Deno(JaavScript)で開発しているサービスをデプロイ(公開)しよう!

サーバー(AWS)上でDenoをサービスとして動かす方法
まずサーバーにログインする

動かしたいサービスをGitHubからとってくる
リポジトリの緑ボタン[Code]からで、Use HTTPS に切り替えて、Clone with HTTPSのアドレスをコピー

git clone https://github.com/.....git

Webサーバー Nginx(エンジンエックス)設定のため、一時的にrootユーザーになる

sudo su -

Webサーバーnginxの設定を追加する

cat > /etc/nginx/default.d/team.conf

下記を貼り付けて、Ctrl-D(ポート番号 8881 はそれぞれの環境に合わせる)

location / { proxy_pass http://127.0.0.1:8881; } location /ws/ { proxy_pass http://127.0.0.1:8881/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }

nginxを再起動して設定有効化

nginx -s reload

で動かすとエラーがでる

Location の設定がかぶっているので、下記を修正

vi /etc/nginx/conf.d/ssl.conf vi /etc/nginx/nginx.conf

"Location / { }" を # を頭に付けてコメントアウト

再び再起動

nginx -s reload

で動かし、エラーがでなければ設定完了!

exit

で、ユーザーを root からもとに戻す

サービスの動かし方

cd [service path] deno run -A main.js

サーバーのホスト名をブラウザに入れて、確認してみよう!
自分たちで作ったサービスが動くと感動ですね!

画面共有と音声帯域を使ったリアルタイムサポート、チームで感動も共有!

サービスとして、ターミナルから抜けてもずっと動くようにする方法

nohup deno run -A main.js &

サービスの止め方

ps -u [account name]

denoのPIDを探して

kill [PID]

サービスの止め方2
サーバープログラムに、ファイルを見たり、特定アクセスで Deno.exit(0) するようにプログラムしておく

サービスの更新方法

git pull

サーバーで更新してしまっていて、pullできない場合

git stash

で、一時保存した上で、 git pull
サーバープログラムを更新した場合は、サービスを一旦止めて、起動
(staticフォルダ内など、クライアント用ファイル更新のみの場合は再起動不要)

サーバー操作にも通じる、BASIC。
黒い画面に強いこども達が生む、サービス誕生が楽しみです!


ザイログZ80伝説(カラー版) | 鈴木 哲哉 | 工学 | Kindleストア | Amazon
今も生き続けるZ80、開発秘話から現況、タイムシェアリングのはじまりから回路設計まで幅広く多様な内容が楽しい!


IchigoJam BASICの元とした、タイニーBASICのプログラムも掲載!
このBASICでは、@マークでメモリアクセスになってますね。ご先祖を想って楽しい、コンピューター考古学!

せっかくなので、世界最初のBASICプログラムと言われる、エラトステネスの篩による素数計算をIchigoJam BASICで実装。アルゴリズム、見比べてみましょう。

1 'Sieve of Eratosthenes 10 CLV 20 FOR I=2 TO 10:?I 30 IF [I]=1 NEXT 40 N=2 50 M=I*N:IF M<102 [M]=1:N=N+1:CONT 60 NEXT 70 ?"PRIME NUMBERS" 80 FOR I=2 TO 101:IF [I]=0 ?I;" "; 90 NEXT:?

今日のjigインターンブログは、もしゃ!
jig.jpオンラインインターン2020 8日目! - jigintern2020’s diary
情報交換タイムでのおもしろ写真付き!

バーチャル背景生成アプリというジャンルもおもしろい!

どんな大規模プログラムも小さなプログラムの集まりです。 きちんと動くプログラムを作るコツは、構成する小さなプログラムをひとつひとつをシンプルかつ、丁寧に仕上げておくこと。 小さく切り分けておくことで、何か問題があった時に、すばやく解決することができるでしょう。


チーム開発で進む、高専プロコンの競技部門予定だった「Code for KOSEN、囲みマス」。 練習試合は盛り上がるも、忍者が消えてしまうコアモジュール「Kakomimasu.js」のバグは直さねば。

Denoの標準、testフォルダにテストコードを書いて、問題を特定、解決した。

1. 早速、チーム開発の基本に従い、debug-code branch作成。

2. 元々のシンプルなテストコード conflict1_test.js は問題なく通っていた。

cd test deno test conflict1_test.js

3. 忍者が寝返ってしまう状況を再現するランダムテスト random_test.js を書いて実験、時々おかしなことが起きる。

4. 修正がうまくいった時に再現できるよう、乱数の種を設定できる高性能なランダム MersenneTwister.js を用意。

5. おかしなことが起きるタイミングが掴めたので、そのタイミングに合わせて詳しい表示を console.log で入れて、チェック。REMOVEとMOVEの相互競合が原因と分かったので、まずは再現するテストコード conflict3_test.js を書いて、問題が起きることを確認。

6. コア修正し、テストコードが動くようになることを確認!

deno test

(全テストコードをまとめてテスト!)

7. コミットし、プルリク、レビューしてもらって、マージしましょう(GitHubでのチーム開発

テストコードがあれば、何か機能を足した時にデグレ(デグレーショション、退化)していないかを確認できて安心です。 とはいえ、最初から、完全なテストコードを書くのは大変なので、必要となる品質など、開発全体からのバランスを見て決めましょう。

プログラムをどこから手を付けていいか悩む時、テストコードから最初に書く、TDD(テスト駆動開発)という手法も有効です。 問題の切り分け、テストコードと実装、チームで開発する祭の役割分担にも良いですね。楽しい、開発を!

jigインターン、ぷりんによる、1週間のふりかえり!
jig.jpオンラインインターン2020 一週間の振り返り!byぷりん - jigintern2020’s diary

流れが早いweb開発界隈ですが、スマホの台頭とブラウザの仕様が整って来たので、まずはシンプルにはじめましょう!

サーバーとブラウザ上で動くクライアント、それぞれいろいろな選択肢がありますが、ブラウザのために産まれたプログラミング言語「JavaScript」を、サーバーでも使うのが、学習しやすくオススメです。

Windows、Mac、Linux、どの環境の人でも大丈夫。まずは「Deno」をインストール!
(WindowsのPowerShellは「Windowsキー+R」を押して「powershell」と書いてエンター、インストールスクリプト「iwr https://deno.land/x/install/install.ps1 -useb | iex」を貼り付け、エンターで実行!)

公式サイト記載の方法に従ってインストールしたら、コンソールヤコマンドプロンプトを開いて、次のコマンドでバージョン番号が出ることを確認しましょう

$ deno --version deno 1.3.0 v8 8.6.334 typescript 3.9.7

続いて、何かディレクトリを作成し、移動

$ mkdir test $ cd test

そのディレクトリ内に、次の2行だけのプログラムを main.js として保存します

import { Server } from "https://code4sabae.github.io/js/Server.js"; new Server(8881);

実はこれだけでwebサーバープログラムできあがり。
動かす時は deno の run コマンド(-Aでファイルアクセス、ネットアクセスを許可)

$ deno run -A main.js

表示されるアドレス http://localhost:8881/ を開いてみましょう。
「Not Found」と表示されますね。(code4sabae-js は、Serverst で動いてます)

表示する HTML は、static ディレクトリを作成し、その中に index.html を作成します。(test/static/index.html)

<h1>Hello web!</h1>

ブラウザをリロードすると表示されるはず!

web開発の基本は、ブラウザとサーバーとの通信ですが、送受信ともにJSONを使って、すっきりシンプルに作りましょう。

下記のように、Serverクラスを派生した、MyServerクラスに api 関数を用意します。ひとまず受け取ったパスやパラメーターに時間を付けて返すテストします。

import { Server } from "https://code4sabae.github.io/js/Server.js"; class MyServer extends Server { api(path, req) { cont time = new Date(); return { path, req, time }; } } new MyServer(8881);

先程動かした Deno のサーバープログラムを Ctrl-C で止めて、上を押してエンター。もう一度実行します。2回目以降は即起動!

http://localhost:8881/api/ を開くと、JSONで「時間」が返ってきます。

次に、index.html を編集して、ブラウザからサーバーへデータを送り、サーバーからのレスポンスを表示してみます。 下記のように、JavaScriptのコードを埋め込みます。今どきJavaScriptは、type="module"!

<!DOCTYPE html> <html><body> <button id="btn">fetchJSON</button><br> <textarea id="ta"></textarea><br> <script type="module"> import { fetchJSON } from "https://code4sabae.github.io/js/fetchJSON.js"; btn.onclick = async () => { const req = { a: 123, b: "abc" }; const res = await fetchJSON("http://localhost:8881/api/test/v1", req); ta.value = JSON.stringify(res); }; </script> </body> </html>

ボタンを押すと、テキストボックスにサーバーからのレスポンスが表示されます!
ブラウザから送られてきた JSON をあれこれ加工すれば、みんなで使うwebサービスが開発できそうですね!

HTML/CSS/JavaScriptに関する復習はこちら → 「JSはじめのいっぽ

プログラムを止めてもデータは残しておきたい?
データベースを学習するのもいいですが、まずは手っ取り早くファイルに保存しておきましょう。 例えば、JSONデータを保存するには、次のように書きます(参考、builtin@stable - deno doc

Deno.writeTextFileSync("test.json", JSON.stringify(json));

メモリは多量にあるので、プロトタイピング中はデータをまるっと1ファイルに保存しておき、起動時に読み込むくらいで十分です。

みんなが写真をアップロードできるようにすると、webサービスは楽しくなります!
便利機能を用意しました。選ばれたファイルを自動的にいい感じのサイズにして、サーバーの data ディレクトリにアップロード。 アップロードされた URL を取得して、あれこれ使うことができます。

<!DOCTYPE html> <html><body> <h1>image uploader test</h1> <input id="file1" type="file" name="file1" multiple> <div id="imgc"></div> <br> <button id="btn">get file url</button><br> <textarea id="ta" style="width: 80vw; height: 10em"></textarea><br> <script type="module"> import { ImageUploader } from "https://code4sabae.github.io/js/ImageUploader.js"; const maxwidth = 1200; const maxsize = 1 * 1024 * 1024; const uploadurl = "http://127.0.0.1:8881/data/" //const uploadurl = "/data/" file1.onchange = async e => { for (const file of e.target.files) { const type = file.type; if (!type.startsWith("image/")) { continue; } const imgup = new ImageUploader(uploadurl); imgup.setFile(file, maxwidth, maxsize); imgc.appendChild(imgup); } }; btn.onclick = () => { const urls = []; for (let i = 0; i < imgc.children.length; i++) { urls.push(imgc.children[i].value); } console.log(urls); ta.value = urls.join("\n"); }; </script> <a href="./index.html">top</a><br> </body> </html>

大きすぎる写真は使いづらいので、縦横最大サイズを1024以下または、1MB以下にしています。maxwidth や maxsize で設定可能。

このように、ファイルをまとめて選んで、アップロードできます。手元のサーバー data ディレクトリを確認しましょう。

ファイルアップロードで使う画像を扱うあれこれ(Image, ArrayBuffer, Blob, Canvasなど)や、img-upload タグなどのプログラムも短めなオープンソース。 自分なりに改造するのも歓迎です!(src on GitHub)

IchigoJamで動作する数十byte単位のプログラムも実装可能なモダンプログラミング言語 Rust。 サーバー実装の実験にリアルタイムwebの要、WebSocketを使って単純に送った文字列が返ってくる、echoサーバーづくり!

JavaScriptのランタイム Denoと、HTTPサーバーモジュール Servest を使った WebSocket の echo server のコードは Servest を使ってこんな感じ。 (servest 1.1.0 では、Deno 1.2.0 でエラーが発生、stdモジュールを新版への差し替えプルリク、下記は servest v1.1.1で動作します!)

import { createApp } from "https://servestjs.org/@v1.1.1/mod.ts"; function handleHandshake(sock) { async function handleMessage(sock) { for await (const msg of sock) { if (typeof msg === "string") { sock.send(msg); } } } handleMessage(sock); } const app = createApp(); app.ws("/ws/", handleHandshake); app.listen({ port: 8080 });

続いて、WebSocketのclient

import { WebSocket } from "https://deno.land/x/websocket/mod.ts"; const endpoint = "ws://127.0.0.1:8080/ws/"; const ws = new WebSocket(endpoint); ws.on("open", () =< { ws.send("hello!"); }); ws.on("message", message =< { console.log("recv", message); ws.close(); });

シンプルに書けて、いい感じ!(deno run -A server.js と den run -A client.js で実行)

続いて、Rustで書く WebSocket の echo server には、速そうな(TechEmpower Web Framework Benchmarksで現在2位)の Actix を使ってみました。

use actix::*; use actix_web::{web, App, Error, HttpRequest, HttpResponse, HttpServer}; use actix_web_actors::ws; struct EchoSession { } impl Actor for EchoSession { type Context = ws::WebsocketContext<Self>; fn started(&mut self, _ctx: &mut Self::Context) { } fn stopping(&mut self, _ctx: &mut Self::Context) -> Running { Running::Stop } } impl StreamHandler<Result<ws::Message, ws::ProtocolError>> for EchoSession { fn handle(&mut self, msg: Result<ws::Message, ws::ProtocolError>, ctx: &mut Self::Context) { let msg = match msg { Err(_) => { ctx.stop(); return; } Ok(msg) => msg, }; match msg { ws::Message::Ping(_) => { }, ws::Message::Pong(_) => { }, ws::Message::Text(text) => { ctx.text(text); } ws::Message::Binary(_) => println!("Unexpected binary"), ws::Message::Close(reason) => { ctx.close(reason); ctx.stop(); } ws::Message::Continuation(_) => { ctx.stop(); } ws::Message::Nop => (), } } } async fn echo_route(req: HttpRequest, stream: web::Payload) -> Result<HttpResponse, Error> { ws::start(EchoSession {}, &req, stream) } #[actix_rt::main] async fn main() -> std::io::Result<()> { HttpServer::new(move || { App::new() .service(web::resource("/ws/").to(echo_route)) }) .bind("127.0.0.1:8080")? .run() .await }

必要なものはきっちり書くスタイルなので、少し長いですが、やっていることは一緒です。Cargo.tomlにパッケージ名を記入して、cargo runでコンパイル&実行しておきましょう。

[dependencies] actix = "0.9.0" actix-web = "2.0.0" actix-web-actors = "2.0.0"

続いて、client は、こう書けます。

use websocket::{ClientBuilder, Message}; fn main() { let mut client = ClientBuilder::new("ws://127.0.0.1:8080/ws/") .unwrap() .connect_insecure() .unwrap(); let message = Message::text("hello!"); client.send_message(&message).unwrap() let mes = client.recv_message().unwrap(); println!("{:?}", mes); }

Cargo.toml の dependencies に websocket="*" を追加し、Cargo run で動きます。

コネクション確立後、「hello!」を送って返ってくるものを100回繰り返して、時間を計測。 最速タイムで、Deno:35msec、Rust:25msecと、Rustが速いですが、Deno/JavaScriptでもベースは十分速そうです。

ちょっと応用、RustのActix、ブラウザから接続するチャットのサンプルを動かしてみました。 JavaScriptのコードが、jQueryコードだったので、モダンスタイルに更新!(src on GitHub)

速さが要のリアルタイムweb用サーバーづくり、Rustで実装、楽しいかも?

なぜ、こどもにプログラミングを教えるのか?
→ プログラミングが汎用的で強力なツールであり、こどもにできるほど簡単だから

社会にネット(=コンピューター)が広まる程、プログラミングの力は強まります。昔はゲームづくりや専門的な解析が中心でしたが、IoT時代、身近な課題解決にもすぐ活用できます。

「十分に発達した科学技術は、魔法と見分けがつかない(クラークの三法則)」
Bluetoothイヤホンで通話しながら歩いている様子はテレパシー、3Dプリンターはテレポーテーション、ドローンの編隊を自在に操る様はまるで魔法。自在に操れたらもっとステキです。


学校を変えた最強のプログラミング教育 | 松田孝
前原小学校元校長の松田さんの本にも、ドローンプログラミングがこどもや大人に与えたインパクトと、意外とシンプルな制御プログラミングが掲載されています。 (その後、更に改良され「FruitPunch(フルーツポンチ) x IchigoDyhook(いちごだいふく)」で、もっとシンプル、もっと手軽にドローンプログラミングできるようになっています。)


松田さんとの出会い、書いてありました!2016年12月、福井で開催した「第1回こどもプログラミングサミット」の会場にて、IchigoJamのはんだづけからのプログラミング体験をしてもらってからのご縁です。 (ナチュラルスタイル松田さんも登場!、学校は「社会の求め」に応えられるか?校長・教頭へのおすすめ本! – about yrm


zoomお茶会IoTと地方創生で共同プロジェクト進行中のKDDI松野さんも参加!
IoTは、ITの集大成。身近な課題から、世界的な課題まで、多方面での活躍が期待されていますが、深刻な担い手不足。小中学校でのプログラミング必修化は大きなチャンス!

今日テーマにしたのは、身近な課題、眠りの快適さをアップするIoT。 きっと、部屋の温湿度が大事!でも、快適と感じる状況は人によって異なります。 まずは計測。IoT対応IchigoJamと、手軽で高性能な温湿度計SHT31を使って、日々の変化を記録してみます。

1 @ARUN 10 POKE#700,#2C,#06:R=I2CR(#45,#700,2,#700,6) 20 IOT.OUT #700,8 30 WAIT 60*60*5 40 GOTO 10

I2Cで取得したデータを(10行)、IchigoSodaで送信し(20行)、5分待って(30行)、くりかえし(40行)。シンプルですね!

sakura.ioのモジュールの管理画面で、DataStoreV2 APIを設定します。1ヶ月分保存なら追加料金はかかりません。 管理画面からCSVでダウンロードができるので、あとは、解析し放題!

解析をプログラムで自動化したい場合、パソコンでデータをダウンロードしましょう。JavaScriptをパソコン上で動かす、Denoをインストールし、このプログラムを test.mjs として保存。 (sensorname: 保存するディレクトリ名、token: DataStoreV2のtoken、moduleid: 使用するモジュール)

import download from "https://code4sabae.github.io/sakuraio-es/download.mjs"; await download(7, "sensorname", "token", "moduleid", 1);

あとはコンソールで動かすだけ!

$ deno run -A test.mjs

これだけで過去1週間分のJSONデータを日付ごとにダウンロード完了です! 詳しく知りたい方は、オープンソースのJavaScriptプログラム(src on GitHub)をどうぞ。 JavaScriptについて学びたい場合は「JSはじめのいっぽ」をどうぞ。 ネットがあれば、わからないものを無限に追求できますね。(社会実装例、バスの走っている場所、混雑状況などのIoTによって進む見える化 by ダイヤ編成〚その筋屋〛公式 ❄ @Sujiya_Systemさん)

このように、実現したいことを叶える技術が急速に発展し、ネットというインフラによって多くはソフトウェア化している上に、その大半がオープンソースソフトウェアとして誰でも自由に利用でき、改造でき、その開発に貢献することもできます。

ものづくりには、ソフトウェア、ハードウェア・素材までさまざまなレイヤーがありますが、ソフトウェアづくりはコンピューターさえあれば誰にでも始められる最も手軽なものづくりです。


バリエーション豊富なIchigoJam、IchigoSodaは4G通信モジュール対応のソーダカラーがかわいいIchigoJamです。 中央のチップが、100円のCPU。今回の高精度温湿度計SHT31も右下、黒い四角がその本体。あとは電源つないで動かすだけ! 世界中から登場する小さくて安くてワクワクする電子パーツたち。 プログラミングでつないで何創る?夢、膨らみますね!

日本一プログラミングを小学校現場で実践した、松田さんによる熱い著書。
学校を変えた最強のプログラミング教育 | 松田孝
ワクワクする未来を、こどもたちへ!

中止になった高専プロコンの競技部門、2020年の競技部門が永遠に失われるのも寂しいので、勝手開催しようと集まった仲間とオンラインハックデー。

釧路、木更津、函館、そして福井から集まった有志で開発した3時間半(16時から19時半)

実は誰も高専プロコン経験者がいなかった今回、まずは高専プロコンと競技部門の概要説明と、今回のルールをソースコードを見ながら解説。 プログラミング言語も、オブジェクト思考も実際触ってみると、理解が深まるものです。(JDK1.0.2での経験者)

スマホで遊んでみたいよねと、webアプリチーム、通信対戦するための仕様決めないとねと、プロトコルチームの2チームに分かれて開発スタート。 1スプリント1時間弱の超短縮スクラム、zoomのブレイクアウトルームでそれぞれ進めました。


GitHub、HTML、CSSがはじめての人向けレクチャーは、画面共有してもらってサポートが便利ですね!(参考、HTML/CSSはじめのいっぽ

今回の進捗はこちら!

Kakomimasu – Figma
オンラインデザインツール「Figma」を使用。イメージがあると、ワクワクしてきますね!


かこみますネットワークプロトコルを決めようの会 - HackMD
前回30回大会時のプロトコルが参考になるのと、連続出場者にも優しそうと、ひとまずそれをベースにして作ることに決まり。

2スプリント終わって、KPTでふりかえり。よかったので続けるキープ、気がついた問題点を挙げるプロブレム、次の挑戦トライ。ばばっと、それぞれ2分ずつ、Slackに書き出して、終了!

次の実装に向けて、イチオシDenoでの実装を提供。JSONで受け取り、JSONで返す。シンプルなAPIサーバーのモックを JavaScript on Deno で作ってみました。

import { createApp } from "https://servestjs.org/@v1.1.0/mod.ts"; // https://servestjs.org/ const api = (token, path, req) => { const res = { yourToken: token, yourPath: path, nActions: req.actions.length, }; return res; }; const app = createApp(); app.handle(/\/*/, async (req) => { try { const token = req.headers.get("Authorization"); const json = await req.json(); console.log("req", json); const res = api(token, req.path, json); console.log("res", res); await req.respond({ status: 200, headers: new Headers({ "content-type": "application/json" }), body: JSON.stringify(res), }); } catch (e) { console.log("err", e); } }); app.listen({ port: 8880 });

使用したフレームワークは、Servest、シンプルに書けて高機能なDeno用のHTTPサーバーです。

app.handle に受け取りたいpathを正規表現で書いて、中身を書くだけ。JSONで受け取り、JSONで返すことに特化した関数 api をいろいろ自由に作りましょう。

curlコマンドを使って、コンソール(コマンドプロンプト)から、呼び出して実験できます。C言語でも何でもコマンド呼び出しさえ使えれば、使えそうですね!

$ curl -H 'Authorization: token1' -X POST http://localhost:8880/action -d '{"actions":[{"agentID": 2, "dx": 1, "dy": 1, "type": "move"}, {"agentID": 3, "dx": 1, "dy": 1, "type": "move"}]}' {"yourToken":"token1","yourPath":"/action","nActions":2}

上記モック実装は、受け取ったactionの数を数える動作。nActionsが2となっています。(src on GitHub

次回は、6/17(水)20:00-22:00、参加希望の高専生、下記Slackまでどうぞ!
Slack: Code for KOSEN

IMI住所変換コンポーネントのコア、lgcodegeocodeを改善し、逆ジオコーディングに対応。
住所のジオコーディング、逆ジオコーディング(丁目レベル)」(src on GitHub)
JavaScriptのランタイム、Denoのキャラクターは、MIT Licenseのオープンデータ。背景に登場してもらったらぐっとかわいくなりました。

日本の地理への理解が深まりましたが、まだ奥が深いです。泊村(とまりむら)、北海道にふたつあるってご存知でしたか? 池田町が4箇所あるなど、都道府県を越えてのかぶりは把握していましたが、道内かぶりの想定も必要でした。北海道の場合、振興局という地方公共団体名が登場します。

geocodeでちょっと古い街区データからの変換時にエラー。最近名前が変わった、丹波篠山市と那珂川市への対応は、ひとまず手動対応しました。(makedata.mjs)

if (city2 === "篠山市") city2 = "丹波篠山市"; // v16は丹波篠山市に改名する前のデータ if (pref === "福岡県" || city2 === "筑紫郡那珂川町") city2 = "那珂川市"; // v16は那珂川市に改名する前のデータ

ただ、住所を正規化する際、古い住所を変換するニーズは割とありそうなので、古い市区町村との対応追加は実装したほうが良さそうです。(現在版は、現存する市区町村のみデータ化しています)


Denoくんがかわいいので、suzuriでTシャツを作ってみました。どう配置するか、バランスが難しい! Denoくんは、チンアナゴではなく恐竜です。
(出展、Deno 1.0リリース記念イラストを描きました - No Regrets in Bathing



Deno goods - suzuri
Denoグッズ、いろいろ作ってみたので、よかったらどうぞ!色やサイズは選べます。登録すれば、配置も自在に調整できますよ!

Denoへのもうひとつプルリクも無事マージ!
自分で使うツールのオープンソースに参加すると、何か合っても自分で解決できる感が高まってよいですね!

気にはなりつつも、使う機会がなかったプログラミング言語 Rust(ラスト)。 お気に入りのJavaScriptの実行環境、Denoで使われています。

Denoで直したいところがあり、最新版1.0.5でも、Issuesプルリクでの話題にもなっていなかったのでプログラムを取得し、改造し。プルリクしたら、主要開発者からコメントが付き、反映された! (プルリクとは、GitHubなどで使われる共同制作ソフトGitの重要機能で、反映要求。承認されて初めて反映される仕組み。)


added mjs files for default test by taisukef · Pull Request #6122 · denoland/deno
有名OSSへの初貢献の内容はこちら。Deno test の mjs 対応。

歴史が長いJavaScript、変数宣言が不要だったり、スコープが分かりづらいvarとの決別した、モジュールベースの新しいJavaScriptの拡張子 .mjs でいこうと決めて、開発しているが、Denoのテストでは、.jsや.tsしか認識してくれない。(参考、jsからmjsへ

.mjs も普通にコンパイルなどは普通にやってくれるので、きっと追加し忘れているに違いない。分かりやすくまとまったRustのコード、該当箇所を発見。

C/C++と同等またはそれ以上の記述力を持つRust。C言語からの系統、ほとんどのプログラムはRustを知らなくても普通に読める。 「||」という演算子は、C、Java、JavaScript、IchigoJam BASICでも同じ「または」を意味する論理演算子。 deno test の対象となる拡張子が並んでいるので、"mjs"を追加。


失敗したのがこちらドキュメントの訂正。mjsの追記だけと思って油断し、チェック後に手書きしたのが悪かった。 PR後の自動テストではねられてしまい、整形してねとコメントがついた。ドキュメントも書式が荒れないよう、規定桁数が設定されていた。 Denoの開発者さん、優しくて助かりましたが、大いに反省。自動テスト、偉い。

$ cargo test $ tools/format.py $ tools/lint.py

Contributing(貢献方法)のプルリク前の確認事項。

1. イシューやプルリクで同様内容をチェック
2. テストが変更点をカバーしていることをチェック
3. 全体テストプログラムを実行して問題ないことを確認 (cargo test)
4. 書式整形プログラムを実行(tools/format.py)
5. プログラムに問題がないことを確認(tools/lint.py)

オープンソースへの参加は、チーム開発に関する最新技術に触れられるので、何かお気に入りにツールへの貢献。チャレンジしてみると良いですね!

自動書式整形の優秀さに触れたので、使うことにした deno fmt。こちらもデフォルトに mjs が含まれていないので、もうひとつプルリク。(→ 後日、無事マージされました)
added mjs files for default fmt by taisukef · Pull Request #6134 · denoland/deno
ちょっとしたコードですが、世界中で使われると思うとうれしいですよ!


鯖江市役所にて、鯖江市長の牧野さん、牧田さんとIT話。
まちづくりもオープンソースにでいきましょう!
条例や、ウェブサイトなど、個人情報に絡まない公開情報は、全部GitHub管理でいいかも?

links
- KEN_ALL!? 郵便番号ESモジュールで開発効率化! 経産省もGitHub公開スタート
- Deno にコントリビュートする (1) - Qiita
- Deno にコントリビュートする (2) - Qiita

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