こんにちは、iOS開発チームの本柳です。
弊社では所属に関係なく様々な言語について感心を持ち、学習しているエンジニアが多く在籍しております。
そんな私ですが、所属がiOSチームでありながら最近はElmというWEBフロントエンドのためのプログラミング言語*1がお気に入りです。
Elmって何?
- ElmはJavacriptにトランスパイル可能なプログラミング言語です
- Elmは関数型プログラミング言語です
- 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 にアクセスすると下記のような画面が表示されているはずです。
Main.elmというリンクをクリックすると、作成したMain.elm
のコンパイルが実行されその結果がブラウザに表示されます。
もし、Main.elm
を編集した場合はブラウザをリロードすると再コンパイルされブラウザの出力が変わります。
ブラウザをリロードしないといけないのは面倒なので、ファイルの変更を監視してブラウザをリロードするツールなどを導入すると開発が楽になるかもしれませんね。
Elmについて、触りの部分だけをサラッと書いてみました。
言語とアーキテクチャが一緒にあるというのは、ライブラリの流行にとらわれること無く言語の習得に集中できるので、昨今のWebフロントエンドのための言語としてElmはなかなか良い選択ではないかなと考えています。
Elmはとにかくシンプルな言語であることを目指しているので学習し易いのもポイントですし、型推論やGenericTypeといったモダン*3な型システムを搭載しているのも使ってみたくなるポイントだと思います。
Elm、良い言語ですよ!
ガラパゴスでは、iOS開発に限らず幅広いジャンルの技術にチャレンジしたいエンジニアを大募集中です!
Elmについて語りたいけど周りにそんな人がいない…なんて寂しい思いをしている人もガラパゴスなら大丈夫。
ご応募、お待ちしております。