Babelとは
a-yossy
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
- Source code transformations (codemods)
- And more! (check out these videos for inspiration)
コンパイラ（英: compiler）は、高水準言語で書かれたコンピュータプログラムを、 コンピュータが実行や解釈できる形式に、一括して（※[1]）変換するソフトウェア[2]。
英語の動詞で、あるプログラム言語で書かれたコードを別の言語で書かれたコードに変換することを"compile"（コンパイル）といい、コンパイラとはその変換を一括して（※[1] ）行なうコンピュータプログラムのことである。インタプリタとよく対比される。
インタプリタ（英: interpreter）とは、プログラミング言語で書かれたソースコードないし中間表現を逐次解釈しながら実行するプログラムのこと[1]。
ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。
トランスコンパイラ（他にトランスパイラ、ソース・トゥ・ソースコンパイラ、などとも）は、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラである。一般に、コンパイラが「比較すると高水準な言語のソースコード」を入力とし、「比較すると低水準な言語の目的コード」を、コンパイル結果として出力するものであったのに対し、トランスコンパイラは同じ程度の（抽象化の）水準のコードをコンパイル結果として出力する。
a-yossy読む
Most compilers break down into three primary stages: Parsing, Transformation, and Code Generation
- Parsing is taking raw code and turning it into a more abstract representation of the code.
- Transformation takes this abstract representation and manipulates to do whatever the compiler wants it to.
- Code Generation takes the transformed representation of the code and turns it into new code.
Parsing typically gets broken down into two phases: Lexical Analysis and
Syntactic Analysis.
- Lexical Analysis takes the raw code and splits it apart into these thing called tokens by a thing called a tokenizer (or lexer). Tokens are an array of tiny little objects that describe an isolated piece of the syntax. They could be numbers, labels, punctuation, operators, whatever.
- Syntactic Analysis takes the tokens and reformats them into a representation that describes each part of the syntax and their relation to one another. This is known as an intermediate representation or Abstract Syntax Tree. An Abstract Syntax Tree, or AST for short, is a deeply nested object that represents code in a way that is both easy to work with and tells us a lot of information.
The next type of stage for a compiler is transformation. Again, this just takes the AST from the last step and makes changes to it. It can manipulate the AST in the same language or it can translate it into an entirely new language.
The final phase of a compiler is code generation. Sometimes compilers will do things that overlap with transformation, but for the most part code generation just means take our AST and string-ify code back out.
a-yossy読む
JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
概要: この記事は、'eXtensible Markup Language' (XML、拡張可能マークアップ言語) を紹介し、その使い道について XML は HTML に似たマークアップ言語です。 これは Extensible Markup Language の略で、汎用マークアップ言語として W3C が推奨する仕様です。つまり、他のマークアップ言語とは異なり、XML は事前定義されていないため、独自のタグを定義する必要があります。この言語の主な目的は、インターネットなどのさまざまなシステム間でデータを共有することです。
まぁ「XML」って単語が出てきたら「ファイルの書き方ルールのひとつで、HTMLの親戚なんだな～」と、お考えください。
マークアップ言語は、テキストを定義し提示するために設計された言語です。 HTML (HyperText Markup Language) は、マークアップ言語の一例です。
「semantics」ってよく聞くけどわかってないのでChatGPTに聞いてみた
下記の文章でのsemanticsとはどういう意味ですか？
Introduction
JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.文章の中で「semantics」という言葉は、「意味論」または「意味理論」という概念を指しています。プログラミングやコンピュータ科学の文脈では、一般的にプログラミング言語の「意味」や動作の解釈と理解について言及します。
この文書では、JSXは「定義された意味論(semantics)がない」ECMAScriptへのXML風の構文拡張と説明されています。これは、JSXがそれ自体はプログラミング言語の動作や振る舞いを定義していないという意味です。JSXは単に構文であり、それがどのように動作するべきかの指示や規則は提供していません。その動作や振る舞いの意味は、JSXを標準的なECMAScriptに変換するプリプロセッサ（トランスパイラー）によって解釈され、定義されます。
プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。
DSL（ドメイン固有言語） とは、あるアプリケーションドメイン内の特定の問題に対処するために設計された、範囲が限定されたコンピューター言語の一種です。
https://e-words.jp/w/DSL.html
DSLには対象や領域ごとに様々な言語がある。各分野で特に著名な例としては、Webページ記述のためのHTML、スタイル記述言語のCSS、組版言語のTeX/LaTeX、ページ記述言語のPostScript、データベースへの問い合わせ言語SQL、電子回路設計のためのハードウェア記述言語（HDL）であるVerilogやVHDL、文字列のパターンを表現する正規表現、文脈自由文法を定義するBN記法（BNF）などがある。