Tagbangers Blog

Shitara Daigo

Netadashi Meetup #12 で話しました

NRIさん主催の勉強会 Netadashi Meetup で LT をしてきました。 今回は「フロントエンド関連技術」がテーマだったので、「OCaml/Reasonで始めるフロントエンド開発」をお題にしました。 スライドはこちら BuckleScript が ReScript にリブランドされて以来、勢いのなくなってしまった感のある Reason でしたが、Melange という新しい OCaml to JS コンパイラが登場したことで Reason が再始動している感があります。 静的な型システムと型推論、Variant、Option / Result 型、Pipe 演算子、パターンマッチン...

ml5.jsで体験する機械学習

ml5.jsはTensorflow.jsをラップしてブラウザ上で機械学習を使ったWebアプリケーションを簡単に作成できるライブラリです。 以下のような簡単なコードだけで画像のカテゴリー分類などができます。   const classifier = ml5.imageClassifier("MobileNet", () => {     console.log('model ready!')   });   const img = document.querySelector("#myImage");   const prediction = classifier.p...

Mapboxで始めるGeoJSON

GeoJSON = JSONベースのGISデータ記述フォーマットで 地球上の緯度・経度のデータと、その配列から点・線・面を表現することができます。  * GISとはGeoJSONのような地理情報データをもとに可視化、分析するシステム Geographic Information System を指します。  地理情報データを座標値(ベクトル)と複数の属性で構成できるので、地球上のある場所(点)、2点間の距離や道路(線)、建物や土地(面)をデータとして表現できます。  点を表現する 以下のような形式で表現します。 {   type: 'Feature',   properties: {  ...

Rustを始めるための準備

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

XStateは有限状態機械(= 有限オートマトン)を実装するライブラリです。 まず、どういうものなのか: import { createMachine, interpret } from 'xstate' const toggleMachine = createMachine({   id: 'toggle',   initial: 'inactive',   states: {     inactive: { on: { TOGGLE: 'active' } },     active: { on: { TOGGLE: 'inactive' } },   }, }) ...

JavaScriptの新機能たち

JavaScriptの仕様標準であるECMAScriptはTC39という団体により使用が策定されています。 ProposalはGithubのレポジトリにまとめられています。 Proposalにはstageというものがあり、stage 0から順にstage 4へ上がっていくというプロセスを経て最終的にECMAScriptに採用されます。 Stage 0 - Strawman(たたき台) アイデア段階 Stage 1 - Proposal(提案) 必要性や解決方法についての説明がある 実際にPolyfillやデモが実装される Stage 2 - Draft(下書き) 仕様書の初期案 具体的な構文に...

Doczでドキュメント

主にフロントエンド側で使用するドキュメンテーションツールを探していて、 markdown で書く普通のドキュメントも MDX で React コンポーネントのショーケースとしても ということで docz を使ってみることにしました。 インストール v2 から Gatsby がベースになるようなので、 docz@next を使うことにします。 % npm i -D docz@next ドキュメントの mdx ファイルを置いておく docs と 設定ファイルとなる doczrc.js をプロジェクトルートに作ります。 % mkdir docs % touch doczrc.js ドキュメントに含...

CurryingとFunctional Composition in JavaScript

Currying Currying(カリー化)のコンセプト自体はとてもシンプルで、複数の引数を一度に一つずつとる関数です。 例えば、2つの実引数の和を返す関数を考えた場合、まず一つの実引数を受け取る関数を返します。返り値となる関数は次の実引数を受け取る関数を返します。 const add = x => y => x + y add関数は一つの引数をとって、closureスコープに固定された部分適用された関数を返すという形になります。カリー化は常に一つの実引数を取る関数(unary function)を返しますが、部分適用の実引数の数は任意です。 const add =     x =>  ...