イイダリョウのブログ。事始めJSブログ名をこっそり変えました。Settingの旅、第3回です。第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。今回はこれまたアルトいいねの「AltJS」。少ない記述量でJSが書けるメタ言語です。それでは行ってきます!目次:CoffeeScriptCoffeeScriptの主な記法LiveScriptLiveScriptの主な記法TypeScriptTypeScriptの主な記法BabelBabelの主な記法まとめ※参考:JSの基本についてはこちら【JSの基本-前編】書ける前に読む!HTML、CSS、JSの書式-4【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-5※2019/10/20:この記事上にソースコードがありませんでしたが、追記しました。コードはボタンを押すとアラートで「ハローワールド」的なイベントです。コメントアウトの中に元のJSのコードがあります。Scriptは少ない記述量で済むAltJS。少ない記述量といえばjQueryだが、AltJSはAltCSSと同様コンパイルする。Settingの旅、JS編第一回。Scriptは少ない記述量で済むAltJS。<br>少ない記述量といえばjQueryだが、AltJSはコンパイルする。falseRubyライクとのことで確かに記述量は減っているのだが、個人的にはカッコは目印にもなっていたんだな、という印象を持った。記述が少ない分、インデントも厳密です。アロー関数はスッキリしてて良さげですね。Rubyを元々書いてた方がフロントに入るにはいいと思う。JSが初めてのプログラミング言語の人にとっては学習コストが生じます。コンパイルはNodeでできるようです。LiveScriptLiveScriptはCoffeScriptの拡張言語らしい。CoffeeScriptはRubyライクとのことだったがLiveScriptはHuskellライクに関数型のような書き方ができるそうな。Settingの旅、JS編第2回。LiveScriptはCoffeScriptの拡張言語らしい。<br>CoffeeScriptはRubyライクとのことだったがLiveScriptはHuskellライクに関数型のような書き方ができるそうな。false正直、関数型の知識が希薄なため、この簡単なコードではCoffeeScriptとの違いを体験できなかった...。食べられないほうカリー?別途もっと関数型の利点が活かせるコードを書いてみたいと思います。TypeScriptTypeScriptは静的型付け、クラス定義、ES対応などの特徴があるそうな。CoffeeScriptと違ってJSの延長上の記法なので読み書きしやすそう。変数に「:」で静的型付けができる。Settingの旅、JS編第3回。TypeScriptは静的型付け、クラス定義、ES対応などの特徴があるそうな。<br>CoffeeScriptと違ってJSの延長上の記法なので読み書きしやすそう。<li>変数に「:」で静的型付けができる。<p>素のJSでもそのまま行けるようなのでJSからの書き換えもしやすそう。false);やっと見慣れている記法になった!素のJSもそのまま活かせるので、既存サイトの修正にも使えそう。型指定はJSの自由すぎる部分に制限を加えてエラーを軽減する利点がある。アロー関数はCoffeeとは少し形が違いますね。クラス定義については今回は踏み込めなかった。コンパイルはNodeでできるそうです。BabelJS編の最後を飾るBabelはブラウザがまだ対応していない最新のESに準拠した記述ができるAltJSとのこと。Settingの旅、JS編第4回。JS編の最後を飾るBabelはブラウザがまだ対応していない最新のESに準拠した記述ができるAltJSとのこと。<p>Babelも素のJSがそのまま行けるようなのでJSからの書き換えもしやすそう。<p><small>※letは再宣言が出来ない。<br>※constは再宣言も再代入もできない。→いずれもvarより厳密だが、全てvarに置き換えても問題はない。false);Babelも素のJSがそのまま行けるようなのでJSからの書き換えもしやすそう。機能はTypeScriptに似ているが書き方が少し違うところもあり、これはESがTypeScriptなどを機能として参考にしているが、書き方は違う形に決定したためです。Babelで書いておけば後々ブラウザが対応して、コンパイルしなくても動く部分が含まれることになります。未来を先取り!最近ESでは「var」に加えて新しい変数が増えています。「let」は再宣言が出来ない、「const」は再宣言も再代入もできない、などいずれもvarより厳密です。それらを全てvarに置き換えても問題はないです。BabelもNodeでコンパイルができるらしいです。まとめ一通り触って、私はこんな印象を持ちました。LiveScriptJSライクでいいけど型を厳密にしたいよ。Babel元祖AltJSはCoffeeScriptなのですが、最近ではTypeScriptが主流になっているようです。学習コストが低いのと、既存のコードの修正にも活かせるのがポイントだと思います。カッコが極限に少なくインデントを綺麗に書く言語は他にもあり、その界隈からはJSは「自由すぎる(クソコ◯ド)」とも言われることもあるようです。今後別の言語を習得する可能性があるならRubyライクな記法に慣れていくのもいいかと思います。コンパイルはどれもNodeでできるようなので目的に応じて検討されるといいのではないでしょうか。varとletとconst(再代入、再宣言の挙動の違い)ES2015から新しく加わった変数letとconst。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。