Galapagos Tech Blog

株式会社ガラパゴスのメンバーによる技術ブログです。

はじめようElm!

こんにちは、iOS開発チームの本柳です。

弊社では所属に関係なく様々な言語について感心を持ち、学習しているエンジニアが多く在籍しております。

そんな私ですが、所属がiOSチームでありながら最近はElmというWEBフロントエンドのためのプログラミング言語*1がお気に入りです。

Elmって何?

最後のElmはアーキテクチャですというところは置いておいて、Elmとは関数型プログラミング言語であり、AltJSの1つという位置づけになります。

Elmの雰囲気をつかむには、自分で手を動かすのが早道ですね。

早速Elmをインストールして使ってみましょう。

Elmをインストール

OSがMac、HomeBrewがインストールされていることが前提となります*2

下記のコマンドを実行すればElmのインストールは完了です、簡単ですね!

brew install elm

インストールが完了したらelmコマンドが利用出来るようになっています。

Elmパッケージのインストール

Elmには最初からパッケージの管理ツールが付属しています。

このパッケージ管理ツールからインストールされるモジュールはElmプロジェクト単位にインストールされます、Globalにインストールされる訳ではないので注意しましょう。

では、適当なプロジェクトディレクトリを作成して、基本となるhtmlパッケージをインストールしてみましょう。

# プロジェクトディレクトリを作成
mkdir elm-sample
# プロジェクトディレクトリに移動
cd elm-sample
# htmlパッケージをインストール
elm package install elm-lang/html

途中Do you approve of this plan? [Y/n]と聞かれますので、Yを入力してインストールを進めましょう。

インストールが完了すると、プロジェクトディレクトリに下記のようなファイル・ディレクトリが作成されています。

elm-package.json
elm-stuff/

elm-package.jsonにはインストールしたパッケージの情報やプロジェクトに関する情報が記載されています。elm-stuffにはインストールしたパッケージが配置されています。

Hello Elm!!

ここまで準備が出来たら定番の「Hello Elm!!」と出力するアプリケーションを作成してみましょう。

Main.elmという名前でプロジェクトディレクトリ以下にファイルを作成します。

touch Main.elm

このファイルを下記のように編集します。

-- 利用する関数をインポート
import Html exposing(h1, text)

-- エントリポイントの定義
main =
  h1 [] [text "Hello Elm!!"]

このファイルをコンパイルして、index.htmlを出力するのですが、コードを編集するたびにコンパイルを行うのは面倒ですね。

Elmにはブラウザからコードのコンパイルを行って結果を表示するためのelm-reactorというツールが付属しています。

下記のコマンドを実行してelm-reactorを起動しましょう。

elm reactor

http://localhost:8000 にアクセスすると下記のような画面が表示されているはずです。

f:id:glpgsinc:20161005160706p:plain

Main.elmというリンクをクリックすると、作成したMain.elmコンパイルが実行されその結果がブラウザに表示されます。

f:id:glpgsinc:20161005160813p:plain

もし、Main.elmを編集した場合はブラウザをリロードすると再コンパイルされブラウザの出力が変わります。

ブラウザをリロードしないといけないのは面倒なので、ファイルの変更を監視してブラウザをリロードするツールなどを導入すると開発が楽になるかもしれませんね。


Elmについて、触りの部分だけをサラッと書いてみました。

言語とアーキテクチャが一緒にあるというのは、ライブラリの流行にとらわれること無く言語の習得に集中できるので、昨今のWebフロントエンドのための言語としてElmはなかなか良い選択ではないかなと考えています。

Elmはとにかくシンプルな言語であることを目指しているので学習し易いのもポイントですし、型推論やGenericTypeといったモダン*3な型システムを搭載しているのも使ってみたくなるポイントだと思います。

Elm、良い言語ですよ!


ガラパゴスでは、iOS開発に限らず幅広いジャンルの技術にチャレンジしたいエンジニアを大募集中です!

Elmについて語りたいけど周りにそんな人がいない…なんて寂しい思いをしている人もガラパゴスなら大丈夫。

ご応募、お待ちしております。

www.glpgs.com


*1:Elmはサーバーサイドでも動作させることに意欲があるようですが、このブログを投稿した時点ではWEBフロントエンドのためとしておきます。

*2:手持ちにWindowsLinuxもないので、これらを利用している人は公式サイトのインストール方法をご参照下さいm(__)m

*3:何をもってモダンとするかという議論はおいておいて、感覚的にモダンだよね?型推論やGenericTypeって