NRIさん主催の勉強会 Netadashi Meetup で LT をしてきました。 今回は「フロントエンド関連技術」がテーマだったので、「OCaml/Reasonで始めるフロントエンド開発」をお題にしました。 スライドはこちら BuckleScript が ReScript にリブランドされて以来、勢いのなくなってしまった感のある Reason でしたが、Melange という新しい OCaml to JS コンパイラが登場したことで Reason が再始動している感があります。 静的な型システムと型推論、Variant、Option / Result 型、Pipe 演算子、パターンマッチン...
ml5.jsはTensorflow.jsをラップしてブラウザ上で機械学習を使ったWebアプリケーションを簡単に作成できるライブラリです。 以下のような簡単なコードだけで画像のカテゴリー分類などができます。 const classifier = ml5.imageClassifier("MobileNet", () => { console.log('model ready!') }); const img = document.querySelector("#myImage"); const prediction = classifier.p...
GeoJSON = JSONベースのGISデータ記述フォーマットで 地球上の緯度・経度のデータと、その配列から点・線・面を表現することができます。 * GISとはGeoJSONのような地理情報データをもとに可視化、分析するシステム Geographic Information System を指します。 地理情報データを座標値（ベクトル）と複数の属性で構成できるので、地球上のある場所（点）、2点間の距離や道路（線）、建物や土地（面）をデータとして表現できます。 点を表現する 以下のような形式で表現します。 { type: 'Feature', properties: { ...
Rust ツールチェインのインストール curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh rustupがインストールされます。rustupはRustのインストーラというだけでなく、一連のツールの管理も行ってくれるものです。 % source ~/.cargo/env % rustc --version rustc 1.44.0 (49cae5576 2020-06-01) rustup show を実行すると以下のようにインストールされているツールチェインを確認できます。 % rustup show Defaul...
XStateは有限状態機械(= 有限オートマトン）を実装するライブラリです。 まず、どういうものなのか: import { createMachine, interpret } from 'xstate' const toggleMachine = createMachine({ id: 'toggle', initial: 'inactive', states: { inactive: { on: { TOGGLE: 'active' } }, active: { on: { TOGGLE: 'inactive' } }, }, }) ...
JavaScriptの仕様標準であるECMAScriptはTC39という団体により使用が策定されています。 ProposalはGithubのレポジトリにまとめられています。 Proposalにはstageというものがあり、stage 0から順にstage 4へ上がっていくというプロセスを経て最終的にECMAScriptに採用されます。 Stage 0 - Strawman（たたき台） アイデア段階 Stage 1 - Proposal（提案） 必要性や解決方法についての説明がある 実際にPolyfillやデモが実装される Stage 2 - Draft（下書き） 仕様書の初期案 具体的な構文に...
主にフロントエンド側で使用するドキュメンテーションツールを探していて、 markdown で書く普通のドキュメントも MDX で React コンポーネントのショーケースとしても ということで docz を使ってみることにしました。 インストール v2 から Gatsby がベースになるようなので、 docz@next を使うことにします。 % npm i -D docz@next ドキュメントの mdx ファイルを置いておく docs と 設定ファイルとなる doczrc.js をプロジェクトルートに作ります。 % mkdir docs % touch doczrc.js ドキュメントに含...
Currying Currying（カリー化）のコンセプト自体はとてもシンプルで、複数の引数を一度に一つずつとる関数です。 例えば、2つの実引数の和を返す関数を考えた場合、まず一つの実引数を受け取る関数を返します。返り値となる関数は次の実引数を受け取る関数を返します。 const add = x => y => x + y add関数は一つの引数をとって、closureスコープに固定された部分適用された関数を返すという形になります。カリー化は常に一つの実引数を取る関数(unary function)を返しますが、部分適用の実引数の数は任意です。 const add = x => ...