cidermitainaスマートフォン用の表示で見るcidermitainaフロントエンドエンジニアをやっています。頑張るから読んでほしい。コンパイルの仕組みを調べてみました。the-super-tiny-compilerのコードリーディング、写経を行い実際にブラウザで動かしてみて、コンパイルの仕組みを調べてみました。実際にブラウザで動かしてみる。コード今回の記事はなぜthe-super-tiny-compiler?コンパイラの仕組みthe-super-tiny-compilerのコードリーディングについて書いています。the-super-tiny-compilerとは?JavaScriptで書かれたコンパイラの主要部分が非常に単純化された例。the-super-tiny-compilerを読む?コンパイラは身の回りにたくさんあるし、多くのツールはコンパイラのコンセプトを取り入れているのでthe-super-tiny-compilerを読むことで良い経験になるかなあと思いました。どんなものを作る?Lispのような関数呼び出しをCのような関数呼び出しにコンパイルするものを作成します。Compilerほとんどのコンパイラは、解析、変換、およびコード生成の3つの主要な段階に分類されます。構文解析は生のコードを受け取り、それをコードのより抽象的な表現に変換します。変換はこの抽象表現を受け取り、コンパイラーが望んでいることを何でもするように操作します。コード生成はコードの変換された表現を受け取り、それを新しいコードに変えます。Analysis)生のコードを受け取り、それをトークナイザー(またはレクサー)と呼ばれるものによってトークンと呼ばれるものに分割する。tree、AST)を作成します。(構文の各部分およびそれらの相互関係を記述する表現に再フォーマットしている。}]}Transformation(変換)ASTを受け取り、変更を加えることができます。ASTを同じ言語で操作することも、まったく新しい言語に翻訳することもできます。{},};ASTを通過するときに、一致するタイプのノードに「入る」たびに、このvisitorメソッドを呼び出します。ノードと親ノードへの参照も渡します。Generation(コード生成)コードを新たに作成します。456)の場合などが考えられるので以下の処理をします。}2-parser.js1-tokenizer.jsでできたトークンをastにします。}]};walkという再帰関数でループしています。Transformation(変換)3-traverser.jsnodeにアクセスできるようにします。astの配列を順番に見ていき、enterメソッド、exitメソッドがある場合は呼び出します。}4-transformer.js3-traverser.jsを使って新しいastを作成します。Generation(コード生成)5-code-generator.js新しいastを元に構文作成。.mapで新しい配列を作成。.joinで配列の中身を連結させて文字列にしています。実際にブラウザで動かしてみる。コードまとめ実際に簡単な例のコンパイラをコードリーディングをしてみることで、コンパイルの仕組みを理解することができました。ESlintとかBabelだったり、pug→htmlの変換も同じような流れなのかなと、思ったり...!今度はRubyでつくるRubyも読んでみたいなあと思っています。16:45はじめてのコンパイラTweet広告を非表示にする関連記事2019-04-20ハイパフォーマンスブラウザネットワーキングを読みました(HTTP)最近ハイパフォーマンスブラウザネットワーキングの10章~12章を...2019-03-03ブラウザのレンダリングの仕組み「ブラウザを立ち上げてアドレスバーにURLを打ち込んでEnter押...2019-01-26Vue.jsのリアクティブシステムみたいなのを作ってみた。Vue.jsの中身を読んでみる!というのを最近やってみていて、算...2018-09-05Dockerで作ったWebサーバでページを表示してみる。Dockerの勉強を始めました。JSで画像遅延してみました。(1)はてなブログをはじめよう!cidermitainaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。