タグ

elmに関するjoan9のブックマーク (26)

  • Elmのカレンダー | Advent Calendar 2015 - Qiita

    見た目はHaskell中身はMLっぽいAltJS, ElmについてのAdvent Calendarです。 Elmのタグをつけて記事を書いたことがある方を適当に招待します。

    Elmのカレンダー | Advent Calendar 2015 - Qiita
    joan9
    joan9 2015/12/05
  • Software: Tool for Change

    joan9
    joan9 2015/06/14
  • Signalのカタログ+Signalについて - Qiita

    http://giisyu.github.io/elm-signalCatalog/ Signalの性質がひと目で分かる、かもしれないSignalのデモを作った。 Signalによっては画面をクリックしたり、キーボードを押したり、押しっぱなしにする必要があります。 ソースコード Signalがどんな挙動をするのか、関数を通すとSignalの型がどうなるのか、どのSignalが優先されるのかとか、カタログで確認してみてください。 表示の見方 1 map : (a -> result) -> Signal a -> Signal result () ------------------------()----------- Mouse.clicks 4 3 2 関数の型 Signal a になるコード タイムライン、右から左に時間が流れている。シグナルが出る(発火する)と、その時の型が出る。(

    Signalのカタログ+Signalについて - Qiita
    joan9
    joan9 2015/05/23
  • React.js+Fluxをやるなら今すぐElmを使うべき理由 - ジンジャー研究室

    皆さん、そろそろElmやりましょう。 Elmって何なの? Webブラウザで動くFRP(Functional Reactive Programming)言語です。 コンパイルするとHTMLJavaScriptを吐き出します。 Elm 公式サイトに動くサンプルが大量にあるので見てみると面白いです。 どうして今やるの? これまでElmと言えば、良くも悪くも理想を追求した言語で、一般的なWebの部品(HTML/CSS/JavaScript)と相性が悪く、「まぁちょっとCanvas使っておもちゃアプリでも作るかー」くらいが関の山だったのですが、最近になってその状況は一変しました。 HTMLライブラリのサポート Ajaxなど非同期タスクのサポート JavaScriptAPIを通じて相互接続可能 エコシステムの登場 順序はちょっと忘れましたが、0.14とか0.15で色々出来るようになりました。 im

    React.js+Fluxをやるなら今すぐElmを使うべき理由 - ジンジャー研究室
    joan9
    joan9 2015/05/13
  • ElmのMVU(MVC):自動履歴保存を付けてみる - Qiita

    今回、文字を入力して、リストを作ったり消したりできるアプリに、 行動毎の自動履歴保存機能をつけてみる。(ちょっとレンジの挙動が怪しいが) MVUとは? channel -------------------→  channel ↑ send+merge ↓ subscribe main = View ---------- fopdp update --------- 1 : 1 ↕ Model mainの前がmain = view <~ modelとなり、このmodelを作るのにmodel = foldp update initModel (subscribe appChannel)というふうに、全てのユーザーのアクションをまとめたChannelがあり、update内のcase式でアクションごとの処理を書く。みたいな感じに書くスタイル。 Elm使ってるとだいたいこうなる。 この形はChan

    ElmのMVU(MVC):自動履歴保存を付けてみる - Qiita
    joan9
    joan9 2015/04/10
  • 10 อันดับเกมมือถือน่าเล่น ยอดนิยมในไทย ปี 2023

    10 อันดับเกมมือถือน่าเล่น แนะนำเกมมือถือสนุกๆ ปี 2023 มีเกมไหนบ้างที่คอเกมมือถืออาจจะติดแล้วนอนไม่หลับ? มีทั้งเกมเล่นคนเดียวและเกมให้เล่นกับเพื่อน ในการเลือกโทรศัพท์หลายๆ คนคงนึกถึงกล้องเป็นอันดับแรก หรือฟังก์ชั่นต่าง ๆ แต่แน่นอนว่าหลายคนซื้อมือถือเพราะอยากเล่นเกมต้องบอกว่าเกมมือถือยุคใหม่มันดีมาก โดยเฉพาะหากเล่นกับโทรศัพท์ที่มีประสิทธิภาพดีอย่างแน่นอน 10 อันดับเกม มือ ถือ 2023 ปัจจุบันโทรศัพท์มือ

    10 อันดับเกมมือถือน่าเล่น ยอดนิยมในไทย ปี 2023
    joan9
    joan9 2015/03/15
  • Elmでやってみるシリーズ16: マウスストーカーを実装する - uehaj's blog

    「リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべブログ ♨」という記事があり、興味深いのでElmのリアクティブプログラミングで似たようなことをやってみました。 全画面表示はこちらから。 コードは以下で、プロジェクト全体はこちらにあります。 import Text import Window import Time import Mouse import List import Signal import Graphics.Element(..) import Graphics.Collage(..) import Color(..) import Signal(Signal,(<~),(~)) import AnimationFrame -- マウスの座標をCollageの座標に変換するいつもの関数 mousePos : Int -> Int -> Int

    Elmでやってみるシリーズ16: マウスストーカーを実装する - uehaj's blog
    joan9
    joan9 2015/03/11
    elmのコード分かり易いな
  • ElmでWebSocket

  • ElmでWebSocket接続の例 - SF(すごくふつう)なブログ

    説明 WebSocketというのは、TCPで使える(主にブラウザー用の)プロトコルです。 WebSocket(ウェブソケット)は、コンピュータ・ネットワーク用の通信規格の1つである。インターネットの標準化団体であるW3CとIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIはW3Cが、WebSocket プロトコルはIETFが策定に関与している。プロトコルの仕様は RFC 6455。TCP上で動く。 引用元 Wikipedia Javascriptから簡単に利用することができ、Httpに比べ低いレイテンシーでリアルタイムな通信に向いていると言われています。 WebSocketプロトコルについては次の2つのウェブサイトが参考になりました。 RFC6455 — The WebSocket Protocol 日語訳 RFC6455の

    ElmでWebSocket接続の例 - SF(すごくふつう)なブログ
  • elmでやってみるシリーズ3: xeyesっぽい目が動く - uehaj's blog

    elmでやってみるシリーズ3: xeyesっぽい目が動く。 import Mouse -- 目の輪郭を書く eyeframe x y = move (x,y) <| outlined { defaultLine | width <- 5 } <| oval 40 50 -- 目玉を書く eyeball x y = move (x,y) <| filled black <| circle 5 -- 目(=目玉+目の輪郭)を一個分書く。tは目玉の見ている方向。 eye r x y t = [eyeframe x y, eyeball ((r * (cos t))+x) ((r * (sin t))+y)] -- 目を2つ書く eyes t = collage 200 200 <| (eye 15 -20 0 t)++(eye 15 20 0 t) -- 「目の座標位置を計算する(=「マウス座標

    elmでやってみるシリーズ3: xeyesっぽい目が動く - uehaj's blog
    joan9
    joan9 2015/02/10
    そうなんだ > Signalがモナドでなくアプリカティブなのは理由があって、「SignalのSignal」を禁止するためだそうな。つまりSignalにjoinは定義できない・してはならない。bind/flatMapも然り
  • Haskell 的視点から見た Elm - Qiita

    前書き Egison のドキュメントをいろいろ眺めていたところ The 6 Programming Languages Interesting to Try を読んで Elm という言語を知り、これは面白いと思い Egison そっちのけで Elm をダウンロードしていろいろ遊んでみました。そのうちにいろいろと思うところがあったので Elm Advent Calendar に乗じて徒然なるままに書いてみることにしました。 もし Elm のことは全然知らないというならば、まずは Examples で遊んでみてください。Web 上で Elm を実行して遊べます。 純粋関数型の世界から JavaScript の世界へ Elm は Haskell に非常に良く似た文法を持っています。Haskell と同様、副作用を暗黙に生じさせない「純粋関数型」のアプローチを取っていて、コンパイラは厳密な静的型付

    Haskell 的視点から見た Elm - Qiita
  • Elmでやってみるシリーズ14:ライブラリを公開する - uehaj's blog

    この記事は「Elm Advent Calendar 2014」の23日目として書きました。 今回は、作成したElmのライブラリをElmコミュニティライブラリに公開してみます。公開するブツは以前こっそりと作成してすでに登録していた「IntRange」というもので、たいしたものじゃございません*1。今回Elm 0.14に対応させた上で、elm-packageコマンドの登録手順を整理してみます。 プロジェクトを作る 何はともあれ、公開したいプロジェクトを作ります。 ディレクトリを作ってそこにcdしてelm-packageを実行。 $ mkdir IntRange $ cd IntRange $ elm-package install Some new packages are needed. Here is the upgrade plan. Install: elm-lang/core 1.0

    Elmでやってみるシリーズ14:ライブラリを公開する - uehaj's blog
    joan9
    joan9 2015/01/26
  • Elmにおけるimportの使い方 - uehaj's blog

    Elmにおけるインポートの方法を説明する。説明が対応するElmのバージョンはElm 0.14かそれ以降、ただしインポートの仕様は今後大きく変更される可能性がある(今後についての関連情報)。 他モジュールで定義され、エクスポートされた識別子(型コンストラクタ、値コンストラクタ、型エイリアス、定数・関数など)は、インポートすることで始めて使用可能となる。Elmのimportは、この点でJavaのimportと異なっている。Javaではimport宣言をしてもしなくてもFQCNを指定すればクラスパスにあるすべての識別子を参照可能であるが、Elmでは、インポートの明示的な宣言をしない限り、他モジュールの識別子を利用できない(ただし、いくつかのモジュール・識別子はデフォルトでインポートされている。後述)。 インポートの宣言をする方法は大きく分けて2つある。 Qualified Import Ope

    Elmにおけるimportの使い方 - uehaj's blog
    joan9
    joan9 2015/01/26
  • 「Elmでやってみる」シリーズのまとめエントリ - uehaj's blog

    このブログ記載のElmの記事で、動作するElmの実行プログラムをiframeで貼っていたのですが、いくつも動かなくなっていたので、動くようにしました。 ちなみに動かなくなっていた原因は2つありました。 Elmのコード共有サイトshare-elmの仕様がかわった。対処としてはリンクをはりなおしました。 elm-runtimeへのリンクが、src="http://elm-lang.org/elm-runtime.jsで参照していたのが、404エラーになるようになったため。そうなった正確な理由は不明ですが、バージョンに依存するはずなので、いずれにせよこの絶対リンクが上手くうごかなくなるのはあきらかでした。対処としてはgithub-page上の固有のものにリンクをはるようにした。 たいへん失礼しました。以下のとおりです。今はすべて動くはずです。 「プログラムでシダを描画する」をelmで描画する -

    「Elmでやってみる」シリーズのまとめエントリ - uehaj's blog
    joan9
    joan9 2015/01/26
  • FRPとVirtual DOM、状態について。 - Qiita

    今回は、Elmを通して、FRPに対する個人的な理解、そしてVirtual DOMがFRPに合っているということを述べていきます。 関数プログラミングはどのように「状態」を扱うのか? 「Functional Reactive Programming」とあるように、FRPは関数プログラミングのパラダイムの技法だと思います。なので、関数プログラミングについてまず、「状態」について考えてみたいと思います。 状態とは何か? まず、状態とは何でしょうか? CTMCPによると、 状態(state)とは、必要とされる計算の途中結果を含む、値の時系列である とあります。関数プログラミングのような宣言的なプログラミングは、そしてこの書籍では暗黙的状態を扱い、オブジェクト指向のような命令的なプログラミングは明示的状態を扱うと述べています。 値と、オブジェクトと、「状態」 関数プログラミングは、「値」を扱います。

    FRPとVirtual DOM、状態について。 - Qiita
  • 魅惑のElm標準ライブラリ - Qiita

    昨日に引き続き失礼します! Elm標準ライブラリであるcoreには結構多くのモジュールが存在しています。 Javascriptに同じ様なコンテナが存在するため、あー、アレ使っているんだろうなーと思いきや、関数型言語であるElmとの相性のためか、イミュータブルなデータ構造を定義しているモジュールも多いです。 各モジュールで定義されているデータ型とその内部実装について見ていきましょう。 直和型 基礎知識としまして、Elmにおいて直和型は以下の様にctorフィールドを持つObjectとして表現されます。 elmにおける、

    魅惑のElm標準ライブラリ - Qiita
    joan9
    joan9 2014/12/18
  • elmでやってみるシリーズ7: elm-htmlでTwitter Bootstrapを適用 - uehaj's blog

    Elmでやってみるシリーズ7: elm-htmlTwitter Bootstrapを適用。 つい先日、「Blazing Fast HTML」と銘打って、elm-htmlライブラリが公開されました。これはElmでDOMツリーを構築・更新するための低レベルライブラリであり、Virtual DOMという技術を使っているので非常に画面更新速度が速いそうです。SPA(Single Page Application)ではDOMの更新速度が重要になりますが、Elmは純粋関数型・イミュータブルデータなのでそのことを利用してさらに効率良く実装できるそうな。 従来、ElmCSSとの連携はあまり重視されておらず、「ElmはCanvasを使ったアニメーションが得意」とされてきましたが、現代的な見た目のHTMLベースのアプリも自在に開発できるようになる、という道筋の第一歩なわけです。まだ未成熟ですがね。 個人的

    elmでやってみるシリーズ7: elm-htmlでTwitter Bootstrapを適用 - uehaj's blog
    joan9
    joan9 2014/12/18
  • Elmというミニマムでフレームワークにもなる関数型altJS言語を触ってみよう!!! - Qiita

    Elm触ってみると面白くてハマりまして、この記事もそんな一人による紹介記事になります。 この記事が一番ストック数が多いので、v0.17になったことに合わせて書き直しました。(2016年5月18日) Elmとは ・コンパイルすると、HtmlCSSJavascriptになる。 Elmとは、コンパイルするとHTMLCSSJavascriptを生成するプログラミング言語です。 ・Elmアーキテクチャで書ける。 v0.17から正式にElmはフレームワークを兼ね備えた言語になりました。 後述するElmアーキテクチャというパラダイムでブラウザアプリケーションを書きます。 ・Elmはシンプルで小さな関数型の言語です。 ElmはHaskellやいろんな関数型言語を参考にして、とても小さく強力な構文を持っています。 ・学習が始めやすいです。 かなり学習のしやすさや学習曲線を大事にしているのでちょっと見

    Elmというミニマムでフレームワークにもなる関数型altJS言語を触ってみよう!!! - Qiita
    joan9
    joan9 2014/12/17
  • すごいElm-0.14いまから使おう! - Qiita

    ここ数日、Elm触ってみていますが、とても楽しいですね!! Elmの現バージョンは0.13となっておりますが、まだまだ発展途上でバグを踏むこともしばしば有ります。 私もバグを踏んだので、issue立てるために開発版を使って確認しようとしたところ、コンパイラをどうやってコンパイルするのかすらわからない……!みたいな状況になったりしたので、作業ログと(まだ殆どCHANGELOG書かれてないので)気付いた変更点などについて書かせていただきます。 どのあたりがElm-0.14での確定情報となるのかイマイチわかりませんが、現時点で使うならばこの様な感じです。 コンパイラなどのコンパイル 2014/12/11 03:20 追記 記事から6時間ほどでElm-0.14が正式にリリースされ()、公式サイトからバイナリがダウンロード出来る様になったのでそれを使いましょう! 1週間前と様変りしている感じなので、

    すごいElm-0.14いまから使おう! - Qiita
    joan9
    joan9 2014/12/11
  • Elmでランダムウォークやってみたよ。(elm初心者向け記事) - Qiita

    はいはい。ども@nobkzです。 Elmが楽しいことを伝えられそうな記事を書きたいかなーとか思っています。 Elmでランダムウォークやった話をしまつー。 ランダムウォークとは? 一歩一歩、ランダムに、歩くことを言います。これを、Elmでシュミレートしました。 Elmでランダムォーク walk関数を作る まず簡単に、純粋な関数を作ります。walk関数は、数字0~3と、(Float,Float)を取り、(Float,Float)を返す関数として実装します。 walk choice (x,y) = if choice == 0 then (x+1,y) else if choice == 1 then (x-1,y) else if choice == 2 then (x, y+1) else (x,y-1)

    Elmでランダムウォークやってみたよ。(elm初心者向け記事) - Qiita
    joan9
    joan9 2014/12/05