Common Lisp to JavaScript変換ができるJSCLでReactプログラミングをしてみました。

1. Common Lispで
Reactはじめました
Endered

2. 自己紹介
● 会津大学学部3年
● 競技プログラミングでレート約2200(黄色)
● この前のJPHacksにGoのサーバーサイドで参加しました
● 最近はTSでフロント/バック両方の勉強中です
● アカツキさんのgame jamで優勝
● ラクスルさんのハッカソン型インターンでCTO賞
● インターン先募集中

3. 自己紹介
好きなプログラミング言語
● Common Lisp
趣味
● Common Lisp
ICPCを引退したら使いたい言語No.1
● Common Lisp

4. Common Lispで
Reactはじめました
Endered

5. Common Lispで
Reactはじめました
Endered

7. どうしてこうなった
すべてをsshで管理するのが面倒くさい
スマホにターミナルをインストールして
sshでcliアプリを操作したいですか？私は嫌です。

8. どうしてこうなった
強い人: 「関数型言語が好きならElmやClojure Scriptを使えば良いんじゃないでしょう
か？」
私: なるほど
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝その後＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
私: これは私の求めるものと微妙に違う…
Google: 「JSCLっていうCommon Lisp ➜ js トランスパイラがあるで。」
私: もろたで工藤！

9. JSCLについて
● Common LispのコードをJSに変換してくれるライブラリ
● ただし、日本語英語どちらでも利用事例/解説文がほぼなし
(使い方がわからない)(READMEはちゃんと書いて…)
○ alert(“Hello World”)するのに2日かかりました。

10. JSCLについて
● Common LispのコードをJSに変換してくれるライブラリ
● ただし、日本語英語どちらでも利用事例/解説文がほぼなし
(使い方がわからない)(READMEはちゃんと書いて…)
○ alert(“Hello World”)するのに2日かかりました。
前例無いなら作ってしまおう！(深夜テンション)
せっかくならReactも勉強しちゃえ
(今回、実装難度が上がった主因)

11. ということで
Common Lisp用Reactラッパー
作っちゃいました(未完成)

12. 簡単な言語仕様

13. トランスパイラでReact使用したときの死亡原因の3つ
1. createElementの引数に関数コンポーネントの名前の文字列を渡す
2. 関数引数の”個数”について
3. 2言語のどちらのデータ構造を使うか決められない
トランスパイラの難しさ

14. トランスパイラの難しさ(どっちのdictionary?)
Q. トランスパイラを使うとき、辞書型データ構造はどちら側のを採用しますか？
(両方使うと変換コストが上がるため選択するべき)
A. 使うライブラリによる
ReactはJSのdictionaryを多用する言語なのでCommon Lisp側は使わないように。

15. トランスパイラの難しさ(関数引数の個数)
この関数定義はjs側ではどう認識
されるでしょうか？

16. トランスパイラの難しさ(関数引数の個数)
この関数定義はjs側ではどう認識
されるでしょうか？
可変長引数関数
つまり、React側からは可変長引数関数
と思われて引数を渡されて、Common
Lisp側は単引数が与えられると思っている

17. 実際に動かしてみた
コンパイルの風景をお楽しみください。

18. 感想
● フロントエンドをしたことがなかったので、
ようやく使い方を知れて良かった
● ポートフォリオサイトをこれで作れる
● ハッカソンにフロント要因で参加できます！

19. ここで発生する疑問
これReactなの？
Common Lispで遊んだだけの内容じゃないの？

20. Reactです

21. 使い方が気になる人へ
https://github.com/Endered/cl-react
(未完成なので注意)