Elm
いわゆるリハビリ。自分用に書いたのですが、公開します。Elmのバージョンは0.17です。 なぜ書いたのか。 ググッて出てくるコードが複雑なものが多く、初心者にとって本当に必要なものを明示したかったから。 なので、0.17から盛り込まれたSubscribeについて…
半年ぶりくらいにElmを触りましたが、0.17から0.18へとアップグレードしました。0.17は公式のインストーラ経由でインストールしたのですが、これを機にnpm管理に移行しました。 インストーラ経由のElmを削除 Elmそのものを削除。 $ sudo rm /usr/local/bin/e…
Elmのお勉強です。 公式の以下のチュートリアルの写経になります。 HTTP · An Introduction to Elm 書いたコードがこちら。 // gist.github.com 以下、学んだこと。 HttpはEffectsの１つ。 他のEffectsと同様、直接実行するのではなく、”Elmに実行させる” Ta…
Elmでinputの入力を監視しつつ、軽いバリデーションを行うコードです。 公式リンクはこちら。 Forms · An Introduction to Elm 関連するドキュメントは以下のとおり。 input: いわゆるInputタグ。 http://package.elm-lang.org/packages/elm-lang/html/1.0.0…
引き続き、ElmでTodoListをつくっていきます。 chuckwebtips.hatenablog.com ここで、ちょっと修正を行います。 Elmのプロの方からブログにコメントをいただけたので、そのフィードバックを反映します（嬉しい！） 型のimport TodoListを作り始めた頃、親子…
ひきつづき、TodoListをつくっていきます。 chuckwebtips.hatenablog.com 今回はちょっとした機能追加をします。 現在、Todoを追加する際には、空文字でも追加できてしまいます。 （２つめのTodoが空文字） そこで、空文字の場合はAddボタンを押せないように…
ちょっと間が空きましたが、Elm-Architectureの学習のつづきです。 前回の学習はこちら。 chuckwebtips.hatenablog.com この間に何をしてたかというと、TodoListを作っていました。 ずっと写経ばかりだったので、手を動かしてみようかなと。 chuckwebtips.ha…
ひきつづき、ElmでTodoListをつくっていきます。 前回は、Todoに任意の文字列を入力できるようにしました。 chuckwebtips.hatenablog.com 今回は、それぞれのTodoに終了機能をつけていきます。 終了機能の実装 チェックマーク まず、見た目から追加します。 …
ひきつづき、ElmでTodoListをつくっていきます。 前回までで最小構成ができたので、ここからはTodoListらしい肉付けをしていきます。 chuckwebtips.hatenablog.com テキスト入力 現在、Todoの追加はボタンのクリックのみです。 ボタンをクリックすると、do s…
今回から、ElmでTodoListを作っていきます。 ちなみに、elmでtodolistを作成する場合、以下のレポジトリが参考になるかもしれません。 github.com チュートリアルというほどではないですが、学習の参考になるはずです。 ただし、ただの写経になってしまいそ…
引き続き、Elmのシンタックスのお勉強。 前回は再帰関数について学びました。 chuckwebtips.hatenablog.com 今回は、union typeのうちeitherというものについて学びました。 union typeってなんやねんと思ったのですが、要は直和型っぽいです。 ただ、こんな…
Elmのシンタックスについて、ひきつづき勉強していきます。 前回は基本的な関数の用法について学びました。 chuckwebtips.hatenablog.com 今回は関数の中でも、再帰を使った処理について学びました。 http://elm-lang.org/examples 写経したコードがこちら。…
Elmのシンタックスについて、軽く勉強しました。 まだまだ記法に慣れておらず、公式のサンプルを写経しました。 今回は、以下のCore > functionsを消化。 http://elm-lang.org/examples 書いたコードがこちら。 gist35a6ce778af8c49457a0df837d20f579 Elmで…
Qiitaのこちらの記事を読みました。 qiita.com Elmで定義されているデータ型とその内部実装について、解説がなされています。 以下、読みながらのメモとなります。 直和型 基礎知識としまして、Elmにおいて直和型は以下の様にctorフィールドを持つObjectとし…
残念ながらElmのコンパイルにはwatchオプションがありません。つまり、「ファイルの変更を感知してコンパイルを行う」といったことができません。 そこで、Nodeの標準パッケージを利用して、擬似的なwatch機能を作ってみました。 gist8b7482df27f3e1b80f4823…
引き続き、ElmArchitectureの勉強をしていきます。 chuckwebtips.hatenablog.com 前回は動的にカウンターを作成する方法を学びました。 今回は、削除機能を改良して、それぞれのカウンターに削除ボタンをつけるようにします。 github.com レンダリング関数の…
引き続き、Elm-Architectureのサンプルを見ていきます。 chuckwebtips.hatenablog.com 前回は、複数のカウンターを作成しました。 今回は動的なカウンターを作成します。 github.com カウンターモジュール カウンター自体は前回作成したものを再利用します。…
前回までは、Elm-architecturの基本について学びました。 chuckwebtips.hatenablog.com 今回はちょっとだけ自分で手を動かしてみます。 トリプルカウンター 作成するのは３つのカウンターです。とはいえ、前回２つのカウンターを作ったのでホントにカンタン…
前回に引き続き、Elm-architectureの例を消化していきます。 chuckwebtips.hatenablog.com 例２ ペアカウンター 前回は単一のカウンターを作成しましたが、今回はペアのカウンターを作成していきます。 github.com カウンターが２つということは、カウンター…
前回まではElm入門と題して、Elmの基本について学びました。 chuckwebtips.hatenablog.com 今回からは、Elmの重要概念となるElm architectureについて学びます。 ここからの学習は、以下のレポジトリに沿って行います。 github.com Elm-architectureとは Elm…
引き続き、Elmの入門記事です。 前回は恒例のHello Worldをしました。 chuckwebtips.hatenablog.com 今回はスタートガイドの残りの部分を消化しつつ、新しいことを学びます。 スタートガイド elm-repl REPLってなんか聞いたことがありますね。 ”値や関数に直…
前回は、Elmという言語について簡単に学びました。 chuckwebtips.hatenablog.com 今回は、Elmをインストールして実際に書いてみます。 インストール インストールします。 公式：http://elm-lang.org/install Mac用のinstallerをクリック。 エディタ用にシン…
今日から何回かに分けて、Elmに入門してみます。 AltJSの一種で、関数型リアクティブプログラミングであるElm。非常に楽しみです。 Elmとはなんなのか 1. HTML/CSS/JSにコンパイルされる AltJSの一種ということで、HTML/CSS/JSにコンパイルされるようです。…
