SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Webアプリケーション開発技術の新潮流スタディーズ

関数型リアクティブプログラミング言語Elmに学ぶ フロントエンド開発の新しい形 【後編】

Webアプリケーション開発技術の新潮流スタディーズ 第5回


  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード samples.zip (8.2 KB)

 前回は、関数型リアクティブプログラミング言語Elmの基本的な文法と、関数型リアクティブプログラミング(Functional Reactive Programming:以下、FRP)の基礎になるSignalの扱いについて解説しました。 今回はいよいよ、Elmを使ってWebアプリケーションを構築する方法を説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

注意!

 Elmはバージョン0.17で大きな変更がありました。現在は「関数型リアクティブプログラミング」のための言語ではありません。

 また、言語自体のシンタックスやライブラリのAPIも以前とは大きく変わっています。これからElmを始める方は、必ず公式ドキュメントを参照してください。

本記事の理解を補助するサンプル(sample.zip)を、本記事のタイトル下にある[ダウンロード]から入手できます。解凍すると、次の表にある5つのプロジェクト(フォルダ)が現れます。

プロジェクト名 内容
1.counter ボタンを押した回数をカウントする
2.counter-module カウンタをモジュールとして外部ファイルに切り出す
3.four-counters カウンタを4つ並べて合計を表示する
4.initial-loader 初期データを非同期通信で取得する
5.data-loader ボタンが押されたときに関連付いたデータを非同期通信で取得する

インストールと準備

まずは、Elmを使うためのセットアップ方法から説明します。 なお、執筆時点でのElmのバージョンは0.15.1です。

Elm Platformのインストール

前回はオンラインエディタのTry Elmを使ってサンプルを実行しましたが、今回は複数ファイルを扱うためオンラインでは少々無理があります。 そこで、コンパイラなどのツール一式をセットにしたElm Platformをこちらからインストールしておきましょう。WindowsとOSXにはインストーラがあります。Linuxではソースからビルドする必要があります(コラム「ソースからビルドする手順」を参照)。

ソースからビルドする手順

ビルド手順はこちらに書かれています。要約すると、以下のようになります。

  1. Haskellのビルド環境を用意します。Haskell Platformを使うのが楽です。
  2. BuildFromSource.hsを入手し、runhaskellコマンドで実行します。ここでビルドするElmのバージョン指定も可能です。
  3. 生成される実行ファイルへのパスを通します(Elm-Platform/0.15/.cabal-sandbox/bin)。

ソースからのビルドは、パッチのあたった最新版を使いたいときなどにも便利です。

Elmファイルのコンパイル

インストールが終わったら、試しに簡単なファイルを作ってコンパイルしてみましょう。 プロジェクト用に新規ディレクトリを作成し、Main.elmを作成します。

import Graphics.Element exposing (..)

main = show "Hello!"

同じディレクトリで次のコマンドを実行します。

elm-make Main.elm --output=index.html

初回の実行時にコアパッケージのインストールを聞かれるので「y」を選択してください。 コンパイルが終了した時点で、ディレクトリ構造は次のようになっていると思います。

コンパイルが終了した時点のディレクトリ構造
コンパイルが終了した時点のディレクトリ構造

実際のプロジェクトでは、.elmファイルはsrcなどのディレクトリに配置するのがよいでしょう。

JavaScriptファイルとして出力

先ほどのコマンドではHTMLファイルを直接出力していましたが、この方法では外部のCSSファイルにリンクすることができません。 そこで、HTMLではなくJavaScriptファイルのみを出力して、HTMLから呼び出すようにします。

# 拡張子を.jsにするとJavaScript部分のみを出力する
elm-make Main.elm --output=main.js

この.jsファイルは次のようにしてHTMLファイルから呼び出すことができます。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <link rel="stylesheet" href="style.css"></link> <!-- CSSの読み込み -->
  <script type="text/javascript" src="main.js"></script> <!-- 生成したファイルの読み込み -->
</head>
<body>
  <script type="text/javascript">
    // Mainモジュール(デフォルトのモジュール名)を画面いっぱいに表示して実行する。
    // Elm.embed()で埋め込みも可能。
    Elm.fullscreen(Elm.Main);
  </script>
</body>
</html>

外部ライブラリのインストール

Elm-Platformには、外部ライブラリの管理を容易にするためにパッケージマネージャが最初から付属しています。 手始めに、最も頻繁に使うであろうelm-htmlパッケージをインストールしてみましょう(今のところ標準ライブラリとしては提供されていないようです)。

elm-package install evancz/elm-html

elm-package.jsonにライブラリの依存関係を記述するかどうかを聞かれるので、「y」を選択します。 無事インストールが完了すると、次のようにHtmlモジュールを使用できるようになります。

import Html exposing (text)

main = text "Hello, World!"

その他のパッケージはパッケージカタログから探してみてください。

Elmの基本的なツールの使い方は以上です。 次ページからは、いよいよElmを使ったアプリケーションの構築方法について見ていきます。

次のページ
Elm Architectureとその特徴

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Webアプリケーション開発技術の新潮流スタディーズ連載記事一覧

もっと読む

この記事の著者

鳥居 陽介(株式会社ワークスアプリケーションズ)(トリイ ヨウスケ)

株式会社ワークスアプリケーションズ所属。イケてるアプリケーションを死ぬほど楽に作るために研究を続ける日々。社内での立ち位置は「フロントエンドのナウい人」。最近エバンジェリストという肩書きが付いた。趣味は作曲とスノーボード。 Blog: http://jinjor-labo.hatenablog.com/ ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8986 2017/03/02 16:39

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング