Skip to content

Instantly share code, notes, and snippets.

@calmery

calmery/Elm_TGJS.md

Last active September 10, 2020 01:57
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save calmery/ba5263250f3ec5264ea4912790f07603 to your computer and use it in GitHub Desktop.
Save calmery/ba5263250f3ec5264ea4912790f07603 to your computer and use it in GitHub Desktop.
Download ZIP
Used in Mercari TGJS
Raw
Elm_TGJS.md

Elm

特徴

The Elm Architecture

Elm は The Elm Architecture を使うためのプログラミング言語．この The Elm Architecture を他の言語，他のフレームワークで例えるのであれば TypeScript と React，Redux，Redux のミドルウェアを合わせたものに近い．

静的型付け言語

型推論があり，副作用が分離されている．TypeScript とは異なり any を許容する設定ができないため，型システムによって型に起因する不具合が存在しないことを保証できる．また，よく Haskell と比較されるが，Haskell の特徴ともいえる型クラスやモナドは存在しない．機能や構文も制限されており比較的学習コストは低い．

実行時例外が発生しない

2015 年から Elm を用いて運用されているサービスの話で，これまで実行時例外が一度も発生していない．コンパイルさえできれば実行時例外が発生しないという安心感がある．

パッケージのセマンティックバージョニング

型システムによって API の変更を検出できる．Elm Packages に公開されるパッケージはセマンティックバージョニングが強制されるため，基本的にパッケージの更新に起因する不具合は発生しない．

整備されたエコシステム

Elm での開発に必要な機能は elm コマンド上でほぼ全て提供されている．インストール · An Introduction to Elm の「ターミナル用ツール」を参考にすると良い．

わかりやすいエラーメッセージ

コンパイラの出力するエラーメッセージの内容がわかりやすい．

アセットサイズが小さい

コンパイラが出力する JavaScript のサイズが小さい．

始め方

Elm をブラウザ上で試せる Ellie を使いつつ，A Introduction to Elm を読み進めると良い．Yosuke Torii さんの 基礎からわかる Elm もオススメ．しっかりと雛形を使って開発をしたい場合は，halfzebra/create-elm-app や calmery/boilerplate を使うと幸せになれる．

また，お互いの幸せのために 2019年 Elmをはじめる人が最初に読むページ と Elmはどんな人にオススメできないか は必ず読む．

コミュニティ

Elm-jp は山羊が苦手な人にはオススメしない🐐

採用事例

内容が少し古いが jah2488/elm-companies にまとまっている．国内での採用事例はまだまだ少ない．

FAQ

エディタのプラグインは？

インストール · An Introduction to Elm の「エディタの設定」にまとまっている．

パッケージの探し方がわからない

基本的には Elm Packages で検索する．関数の型で検索したりできる Elm Search を使うのも良い．それでも見つからなければ作って公開する！

ソースコードのフォーマットやフォルダ構成は？

Style Guide に従う．フォルダの構成は NoRedInk/elm-style-guide や rtfeldman/elm-spa-example を参考にすると良さそう．ソースコードのフォーマットに関しては elm-format 使用する．

コンパイル時に elm: Map.! というエラーが出る

elm: Map.!: given key is not an element in the map

Elm のコンパイラの不具合．そのうち直る．現状としては elm-stuff を削除する．またはコンパイラの --debug オプションを消すと上手くいくことが多い．

View の生成後に処理を行いたい

Browser.Events の onAnimationFrame を使う．または Port を使用して JavaScript 側で requestAnimationFrame を使うようにする．

アプリケーションの一部にだけ Elm を使いたい

Browser.sandbox や Browser.element，または Web Components を使う．

アニメーションを使いたい

自分で実装するのはとてもつらいので elm-style-animation や elm-animation を使う．正直，これらのパッケージを使ってもまだつらさはあるので CSS を使ってしまうのも良い．個人的には他の要素に直接的に影響のないアニメーションに関しては CSS で記述している．

不具合の報告や要望を出したい

不具合の報告や要望の出し方は Elmにおけるバグ報告・機能要望の出し方 を参考にする．記事中のリポジトリの情報など内容が少し古いのでその辺は読み換える必要がある．よくわからなければ Elm-jp に投げると良さそう．

Maybe や Result がネストしてつらい

Maybe や Result を多用すると case をネストすることになってしまいとてもつらい．Maybe.map や Result.map を使うと幸せになれる．

Haskell の ○○○ はないの？

Elm ではなく以下のプログラミング言語，フレームワークを使うと幸せになれそう．

console.log を使いたい

Debug に含まれる log 関数を使うことで同じことができる．ただし開発中しか使用できない．本番用にビルドする場合は Debug.log がソースコード中に含まれているとビルドに失敗するので注意する．

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment