はじめに 昨年にGitHubがGraphQLのAPIを公開して大きな話題になりました。GraphQLに関する詳細はこちらの記事をご覧になっていただければと思います。最近ではBaaS(Backend as a Service)として手軽に利用できるGraphQLサーバー(Scaphold、Hasura、AWS Appsync等）も増えてきています。 JavaScriptで使われているメジャーなクライアントライブラリはRelayとApolloでしょうか、大きなプロジェクトでの採用実績も多くあるそうです。ElmからPorts経由でこれらのライブラリの利用することも可能とは思いますが、キャッシングやオフラインのサポート、サブスクリプションで同期だとか高度な事を望まなければ、所詮はJSONデータのやり取りなので、ElmからHttpで直接GraphQLサーバーを叩いて利用する事も可能です。 Elmのコ

こんにちは、 Elm Elm – A delightful language for reliable webapps https://elm-lang.org/ はじめに · An Introduction to Elm （Elm 公式ガイド日本語訳） https://guide.elm-lang.jp/ Elm は関数型の小さな言語仕様を持つ altJS です。 Redux が影響を強く受けた ことでも有名ですね。 “No Runtime Exceptions” は魅力的ですし、何より興味深いのは The Elm Architecture です。 Redux にはあまりセンスを感じられなかったのですが、 The Elm Architecture はとても良さげに見えました。 Elm が持つ 代数的データ型 と パターンマッチ、状態の不変性、 レコードの部分更新式 などとうまく馴染み、簡

↓次の記事もよろしくやで！ 4歳娘「パパ、20歳以上のユーザーを抽出して？」 忘れ物を取りに久々に出社したワイ ワイ「おはようさん」 ハスケル子「おはようございます」 ワイ「なんや、ハスケル子ちゃんしかおらんのかいな」 ハスケル子「はい」 ハスケル子「みなさんリモートワークです」 ワイ「コロナウィルスのせいで基本出社禁止やもんなぁ」 ワイ「通勤せんでいいのは楽チンやけど」 ワイ「みんなに会ってバカ話ができなくて寂しいわぁ・・・」 ハスケル子「やめ太郎さん、あんまり近づかないでください」 ハスケル子「こっち向いて喋るのもやめてください」 ワイ「おお、失礼失礼」 ワイ「もしウィルス感染してたら、うつってまうもんな」 ハスケル子「いえ、単純に口が臭いんです」 ワイ「Oh...」 ワイ「ごめんやで...」 リモートだと、井戸端会議が聞けなくて困る ワイ「なんか、リモートって結構やりにくくない？」

このTEAは、関数型FluxライブラリであるReduxの思想に影響を与えたことで知られています。 TEAは現代のフロントエンド・アプリケーションを開発するにあたってのベストプラクティスを踏襲しており、「Elmまかせ」でアプリケーションを作ることでが、スケールするアプリケーションを開発するための最短ルートととなるように作られているのです。 ECサイトの商品カート機能をElmで作ってみよう さて、ここからは手を動かしながら、Elmのエッセンスをお伝えしていきたいと思います。ElmによるTODOアプリやカウンタアプリのサンプルは、Elmの公式ページやさまざまなブログ、書籍などで比較的よく見られますが、もう少し大きな規模でのElmのアプリケーションのコードを見る機会は多くはありません。 最も実践的なアプリケーションのサンプルとしては、NoRedInk社のリチャード・フェルドマンによるmediumの

とある休日の朝 娘（4歳）「パパ、最近はお仕事でどんなWebサイトを作ってるの？」 ワイ「ん？詳しくは言えへんけど、技術記事投稿サイトや」 娘「Qiitaのパクリみたいなやつ？」 ワイ「ハッキリ言うなや」 娘ちゃんはなぞなぞがしたい 娘「それよりパパ、なぞなぞしよ」 ワイ「ええで」 娘「じゃあ行くよー」 娘「実行時エラーの出ないフロントエンド言語ってなーんだ？」 ワイ「いやどんななぞなぞやねん」 ワイ「っていうか、どんな言語でも実行時エラーは出るやろ」 ワイ「例えばさっきの技術投稿サイトで」 ワイ「最新記事を1件表示しようとした場合...」

はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactやVue.jsといったwebフロントエンドフレームワークのお供にReduxやVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxとElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxはElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か？｜Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ

この記事はElm Advent Calendar 2019最終日の記事です。 去年末あたりから現職のチームでElmを書き始めたので、大体1年程度はプロダクションでElmのコードを書き続けたことになる。学生時代はRubyとJavaScriptばっかりだったので、関数型プログラミングとかそういうバックグラウンドは一切なかった。その観点から、改めて率直な感想を申し上げておく。 なお、弊社フロントエンドチームとElmに関するはなしは、私の書いたFringe81アドベントカレンダーの記事を参照のこと。 fringeneer.hatenablog.com Elmには中毒性がある Elmを触ったことのない方からすると「？」になるかもしれない（というか、昔の自分がそうだった）が、率直に言ってElmには中毒性がある。一度Elmを知ると、Elm以外の言語を触るたびに「これ、Elmだったら〇〇なのにな〜」と思う

バージョン1.0が見えてきたElmが良さげなのでお試し。 バージョン0.19がリリースされ、その先にバージョン1.0が見えてきたというElm。 『今勢いのある言語 Elm』という勢いあるエントリーに乗っかって、入門してみた次第。インストールやコマンド体系などが今までのバージョンと違うようだったので、備忘録をここに記す。 入門者のスペック Haskellは以前に2冊くらい本を読んだ程度。Scalaはベターjavaとして実案件で活用。普段はPythonを使う。趣味は、同じくバージョン1.0出るか出たよが話題となる、NimとJulia。以前、フロントエンドも自前で書いた時に辛かったので、Immutableな言語で仮想DOMを操作してフロントエンドを完結できるならいいねと、Elmに期待（加えて、Mutableな処理をガリガリ書く必要があるならば、Nimでwebassemblyといきたいところ）。

正式なタイトルは「VS Code で Elm の開発環境を構築する on Windows 10 on 人権不足マシン(メモリ8GB)」 といったところです。 気になるところ、足りないところがあればコメントいただけると助かります。 動機 腰を据えて Elm やってみようかと思ったけど、ググると大体 Mac か Linux 向けの解説… Windows だと環境構築するの結構しんどいのでは？ というわけで、Windows でほぼ何もない所から環境構築する一連の手順が あるといいなと思ったので書きます。 前提 OS は Windows 10 を想定しています。 VS Code が動けば 10 以外でも大丈夫なはず。 Elm のインストール時にバージョンは指定しません。 2018.12 現在では Elm 0.19 がインストールされることを期待した手順となっています。 後述の理由により Elm の

この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対

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

宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql

【forが嫌い！可読性を上げたい！】楽するために学ぶ配列の高階関数(map, filter, reduce等)JavaScriptリーダブルコード高階関数 複雑すぎるforの処理に悩まされたことはありませんか？ プログラミング習いたての頃、forに悩まされた記憶はありませんか？ また、業務で複雑すぎるfor文を見て、これくらい理解できないとやっていけないのか…と悩んだ記憶はありませんか？ 実はそのfor…もっと読みやすい書き方が出来て、簡単に読めるとしたら楽じゃないですか？ いやいや、単にもっと楽したくありませんか？ 今回は個人的に「苦手なfor文」の書き換え(map, filter, reduce等)について、短くなるだけじゃないところを紹介したいと思います。 コードを読む事に神経をとがらせて疲弊したくない人には、オススメしています。(頭を使う労力が減ってると信じたい...) 本記事につ

Elm Meetup in Summer 2019

<template> <div> <button v-on:click="decrement">-1</button> <div>{{ count }}</div> <button v-on:click="increment">+1</button> </div> </template> ほぼHTMLですね。見やすいです。 Vueでの条件分岐や繰り返し v-ifやv-forなどのディレクティブというものが用意されていて、それをHTMLの属性みたいに書きます。 【例】記事タイトル一覧 記事があれば、その分だけ繰り返し表示するし、1件もなければ「記事がありません。」と表示する例です。 <template> <ul v-if="items.length"> <li v-for="item in items"> {{ item.title }} </li> </ul> <p v-else>記事があ