💭

ES5までしか使えないJavaScriptのPlayGroundを作成してみた

2022/05/01に公開

概要

プログラミングスクールRUNTEQが「くそアプリWeek」という物を開催しており、誰でも参加できそうだったので、参加してみました。

RUNTEQサイト: https://runteq.jp/
クソアプリWeekサイト: https://kusoapp.runteq.jp/

作った物・内容

img

くそアプリWeekの課題が「つらい」とのことだったので、それに沿った?物を作成してみました。

作った物の概要としましては、ES5までのJavaScriptしか使用できないブラウザ上のPlaygroundです。
特に深い意味はなく、最初に思いついた物をそのままガッと作ってみたので色々問題はあるかと思います。何かありましたらIssue等で教えて頂けると幸いです。

技術的?な話

使った技術?と選定理由?をそれぞれ記載します。

名前 使用用途 理由
SvelteKit フロントフレームワーク 最近勉強し始めてボイラープレート少なくサクサク開発できるから。
CodeFlask ブラウザ上のエディタ CodeMirrorやAce?よりも軽量、かつ設定も少なくてわかり易く、JavaScriptのみ書く今回のケースには合っていたから。
Vercel ホスティング ホスティングがワンクリックで楽々さくさく(今回はしていませんがカスタムドメインもさくさく設定できます。)

あと、このプロジェクトではESLintをブラウザ上で実行しているので、下記の記事を参考にしました。また同じ方が作成されたライブラリを使用しました。
下記の記事やライブラリ作成時よりESLintのバージョンが上がった影響で内部にやや変更があり、ここら辺の設定やらの周りに一番時間がかかったと思います。

https://qiita.com/mysticatea/items/97410ca3c237ba8f1b59

https://github.com/mysticatea/eslint4b

Discussion