11
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Elmのブームに便乗してみた

Last updated at Posted at 2018-09-12

はじめに

先日みた記事に便乗してElmを始めてみました。
すでに入門してみた記事はいくつか投稿されているのでn番煎じもいいところなのですが、投稿者のほとんどはフロントエンドの経験がある方たちばかりだったので(当然だとは思いますが)中級~上級者の視点から書かれた内容が多いなという印象を感じました。
そこで敢えて、フロントエンド全くの未経験・JavaScript未経験のど素人である私がノリと勢いでElmを触ってみた件についての記事を書いていこうかなと思います。

今まで触ってきた言語

Web系を全く触ったことないわけではありませんが、入門書を少し読んだくらいです。どっちかというとマイコンとか画像認識とかの方が得意です。

なぜElmを触ろうと思ったのか

元々Web系で何かプログラミングをやってみたいなと思っていました。そのためにGoを始めて「Go言語によるWebアプリケーション開発」とかいう本を買ったわけですが、これ結局フロントエンドの部分はHTMLとjqueryで書いてるんですよね。つまるところWebを始めるならJavascriptの知識は必要だということが分かったわけです。ですが、JavaScriptよくわからんし、ぶっちゃけ勉強すること多そうで嫌だという拒否反応が出てしまって、フロントエンドの勉強はモチベーションがあまりわかなかったというのが、この@ufoo68の現状だったわけです。
しかし最近このElm関係の記事を見つけて、**お?なんか面白そうやん?**とか思ったのでその場のノリでElmをインストールしてみたのがきっかけで再びフロントエンドの勉強を始めてみた次第です。要は新しいものと流行物に飛びついたって感じですね。

インストールとか環境構築

公式ページに説明がのっていたのでそれを参考にカチャカチャやってインストールはすんなり通りました。OSはWindowsですが、コマンドラインを使うことが多い言語はWSLの方に入れて使っています。なのでインストールはLinuxの方を参考にしました。しかし、このコマンドの最後のmv elm /usr/local/bin/は、sudo mv elm /usr/local/bin/にしないとpermissionで弾かれると思います。
また、開発環境はvscodeを使いました。WSLをvscodeに適用させる方法はこの記事を参考してみてください。Elm用の拡張機能もvscodeにちゃんとあるので問題はないと思います。
あと、glitchを使えばこういったサンプルが公開されているので、ローカルで環境を作らずとも始めることができます。

勉強に使ったサイトとか

こういうのは、~~公式ページのチュートリアルの日本語版とかあるのでそれを読んでいったら使い方はなんとなくわかるかと思います。~~←どうやら公式ではない模様。日本版の公式はこっちのようです。。。しかし私としては何かプロダクトを作りながらリファレンスを適宜参照するやり方の方がモチベーションが湧くのである程度型定義とか関数のルールを読んだ後に、このワークショップの問題を解きながら勉強を進めました。(というかまだ勉強会途中です)
ちなみにこのワークショップの内容はTODOとコメントアウトされている箇所を穴埋めしながら進めていく形式です。「condiut」という掲示板アプリのようなものを作成していきます。
ただし注意として、introのpart5~9に関して訂正がプルリクにあるので一部ファイルの修正が必要になります。もちろん0.19にちゃんと対応しているので問題なく始められます。

Elmを触ってみて

@ufoo68はフロントエンド初めてなので、技術的な話は全くできません。なんかHaskellと似てたりするらしいですが、そんなの知りません。とりあえずJavaScriptにアレルギー感じていた者としての感想は、ドキュメントの情報量の少なさが返って嬉しかったです。その点はGoと似ているところがあるなと感じました。
また逆に型についてうるさく言われる部分に関してはGoやc言語で慣れているので親近感を感じました。
あと先ほど述べたように、書き方は違えどGo言語と相性が良いのでは?と思う部分がいくつかありました。例えば、コードの形式のフォーマッターがあるところとか、typeで型をつくるところとかですかね。
ちなみに、GoとElmの組み合わせでwebを作るサンプルもあったりします。ただし、0.18に対応しているので、新たにelm.jsonを作成する必要があります。
そんで問題はその部分でして、Elmが0.18から0.19にバージョンアップしたのはつい最近なので、0.18のリポジトリが多く残っている訳ですが、これが厄介なことに、0.19との互換性があったり無かったりするので面倒なところは多々あります。

まとめ

とりあえず、今までJavaScriptが嫌でフロントエンドを諦めていた私のような人がいればこれを機に、Elmでフロントエンドの勉強を私と一緒に初めてみませんか?

11
6
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?