エルムへのやさしい入門
8560 ワード
イントロ
フロントエンドの開発者として、我々はすべての技術は、私たちは高速、信頼性の高い、安全なWebサイトを構築するために役立つと同時に、また、私たちの喜びを与えながらコーディングを知っている.私の目標はエルムと呼ばれる技術を紹介することです.
エルムは、2012年の初めにエヴァンCataplickiによって作成されたプログラミング言語です.もちろん、何も新しい、しかし、角度のようなJavaScriptフレームワークの通常の考えとは異なり、反応またはVue.そのようにして、ELMはSvelteと比較することができます.
ELMの開発を推進する引用は「信頼できるwebappsのための楽しい言語」です、そして、それは私が個人的に非常に現実的に見つける何かです.コードに非常に快適であり、コンパイラが信頼できるのは、CodeBase全体に1つのエラーが表示されます.
コードに飛び込む前に、いくつかの質問に答えてください.
質問
あなたがなぜ異なる言語を学ぶ気になる？
まず最初に.あなたはなぜそこに別の言語の理由について考えたことがありますか?それらの言語の各々はそれ自身の目的を持っています、それはそれ自身の焦点です、そして、また、それは構造の自身のセットです、これはあなたが全く異なる方法で同様の考えを表すことができる各々の言語のためにそれを意味します.
「そして……?」それぞれのタスクについては、より良いし、他のフィット言語です.たとえば、あなたがマイクロコントローラのためにコードに行くならば、おそらく、CはJavaScriptよりよくあなたのニーズに合うでしょう、一方で、発展しているウェブサイトはJavaScriptでより友好的に見えます.私のポイントはここにあります:それ以外の言語がそれ自体でよりよくない、あなたのニーズを調べて、意識的な選択をしてください.
エルムはJavaScriptより良いですか?だめ!それは同じ結果を達成するために別のツールを提供しています.
EllmがJavaScriptにコンパイルされている場合は、2を指定します。
また、言語はフレームワークまたはその逆ではなく、それらの基本的な違いがあります.フレームワークを選択するだけでなく、それを選択するだけでなく、その背後にある言語で自分自身をコミットしています.言い換えれば、フレームワークは言語とその構文に結び付けられているからです.
例はここで役立つかもしれません.あなたがウェブ開発を学んで、反応のコースを始める気があるならば、あなたはJavascriptを学ぶ以外に選択がありません、しかし、反対は真実でありません.
第2の質問(と私の意見)は有効ではありません.言語を比較することはできません.本当の質問はここにあります.
私はブロックにこの新しい子供を使用するだけで私の全体のコードベースを書き直す必要がありますか？
だめ!
エルムは徐々に他の技術と同様に採用される.すべての技術はそれが浮き沈みであり、これはELMのために異なっていないので、あなたの全体のCodeBaseをリファクタにする理由がありません.
ElmはJavaScriptを出力するので、単純に単一のノードを定義することから始めることができます.
以下に例を示します.
elm make src/Main.elm --output=main.js
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
まずelm(main . elm)はjsファイル(main . js)にコンパイルされ,スクリプトはdivになり,実行される.それは簡単!
どのような学習曲線については？
人から人へ.エルムは純粋な機能言語です、そして、これはほとんどの人々が働くのに用いられるパラダイムでありません、しかし、同時に、我々はより多くの言語が機能的な建設を採用しているのを見ることができます、そして、これは役に立つかもしれません.以下に例を示します.
// Have you ever assigned a function to a variable?
var sum = function(a, b) {
return a + b;
};
// Or used a Arrow function?
var el = document.getElementById("t");
el.addEventListener("click", () => console.log('clicked!'));
// Called map, filter or reduce on an array?
var grades = [1, 3, 2, 8, 4, 9, 5, 6, 7];
var total = grades
.filter((grade) => grade > 5)
.map((grade) => grade * 10)
.reduce((partialTotal, grade) => partialTotal + grade, 0);
それらの例のすべては、JavaScriptのような主流言語によって採用された機能的な構文です.もちろん、それは他のものですが、すべてがあなたがすでに知っているものと異なるというわけではないということを知っていることは重要です.
構文はCファミリから派生せず、MLから派生します.
function add(a, b) {
return a + b;
}
次のようなコードを書きます.
add a b = a + b
別の観点から、言語にはほとんど建設がありません、そして、コンパイラはあなたが見るつもりである最高のエラーメッセージを与えます、それで、あなたは学ぶ多くの時間をとらないでください.
コンパイラエラーメッセージを見てください.
イメージからhttps://elm-lang.org/news/compilers-as-assistants
これはプレーン英語であり、コンパイラによってだけではなく、それを修正する方法も、コンパイラがエラーに応じて!
竜巻5は生産のためのエルムですか？
全く!そこにelmを使用している企業がたくさんあります、そして、最も有名な(そして、おそらく、より多くの線の1つ)はNoredinkです.
ラッピング
新しい何かで働くとき、常に疑いがあります、しかし、他のすべてとして、我々が我々の前後関係でないならば、我々は試みを与えて、我々自身のために見なければなりません.すべてのそれらの質問(そして、他)はいつも私を反映させて、私が私が不確かであるかもしれない何かに私の心を開けさせます.
私があなたに少し好奇心をもたせることができたことを望みます、そして、私はこのブログシリーズのパート2であなたに会いたいです.
役に立つ資源
Elm Lang Official Guide
Elm Programming
elm make src/Main.elm --output=main.js
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
// Have you ever assigned a function to a variable?
var sum = function(a, b) {
return a + b;
};
// Or used a Arrow function?
var el = document.getElementById("t");
el.addEventListener("click", () => console.log('clicked!'));
// Called map, filter or reduce on an array?
var grades = [1, 3, 2, 8, 4, 9, 5, 6, 7];
var total = grades
.filter((grade) => grade > 5)
.map((grade) => grade * 10)
.reduce((partialTotal, grade) => partialTotal + grade, 0);
function add(a, b) {
return a + b;
}
add a b = a + b
新しい何かで働くとき、常に疑いがあります、しかし、他のすべてとして、我々が我々の前後関係でないならば、我々は試みを与えて、我々自身のために見なければなりません.すべてのそれらの質問(そして、他)はいつも私を反映させて、私が私が不確かであるかもしれない何かに私の心を開けさせます.
私があなたに少し好奇心をもたせることができたことを望みます、そして、私はこのブログシリーズのパート2であなたに会いたいです.
役に立つ資源
Elm Lang Official Guide
Elm Programming
Reference
この問題について(エルムへのやさしい入門), 我々は、より多くの情報をここで見つけました https://dev.to/alissonfpmorais/a-gentle-introduction-to-elm-j4mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol