<p data-line="0" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/d430739825679e19bb44f5f9.gif?sha=604a4e72e5cc574e1ad5bed45dac10f6f80283c4" alt="kilo + fsharp = filo" loading="lazy" class="md-img"><br>
<em>Preview</em></p>
<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="3" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="5" class="code-line"> C 言語 約1,000 行で書かれた kilo というエディタがあり、184 のステップからなるチュートリアルをなぞらえることで誰でもハンズオンできます。他言語での記述も比較的容易であり、 Zenn 内でも先駆者様がいらっしゃいます。そんな kilo を F# で書いてみたので所感を綴ってみます🖋️</p>
<p data-line="7" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__efac934f16927" src="https://embed.zenn.studio/card#zenn-embedded__efac934f16927" data-content="https%3A%2F%2Fgithub.com%2Fame-utsu%2Ffilo" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/ame-utsu/filo" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/ame-utsu/filo</a></p>
<h2 id="%E5%8F%82%E8%80%83" data-line="9" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<p data-line="11" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6ad0e80fdd49" src="https://embed.zenn.studio/card#zenn-embedded__6ad0e80fdd49" data-content="https%3A%2F%2Fviewsourcecode.org%2Fsnaptoken%2Fkilo%2Findex.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://viewsourcecode.org/snaptoken/kilo/index.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://viewsourcecode.org/snaptoken/kilo/index.html</a><br style="display:none">
 チュートリアル。懇切丁寧な解説🧑‍💻</p>
<hr data-line="14" class="code-line">
<p data-line="16" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a7917045da934" src="https://embed.zenn.studio/card#zenn-embedded__a7917045da934" data-content="https%3A%2F%2Fzenn.dev%2Fkawarimidoll%2Farticles%2F0b3edd1b000124" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/kawarimidoll/articles/0b3edd1b000124" style="display:none" target="_blank">https://zenn.dev/kawarimidoll/articles/0b3edd1b000124</a><br style="display:none">
 Rust の学習として取り組まれたようです🦀</p>
<hr data-line="19" class="code-line">
<p data-line="21" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5aa80d2fd3e7d" src="https://embed.zenn.studio/card#zenn-embedded__5aa80d2fd3e7d" data-content="https%3A%2F%2Fzenn.dev%2Fbugph0bia%2Farticles%2Fc08cf913ff3472" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/bugph0bia/articles/c08cf913ff3472" style="display:none" target="_blank">https://zenn.dev/bugph0bia/articles/c08cf913ff3472</a><br style="display:none">
 Go 言語の勉強も兼ねて作られたようです🐹</p>
<h2 id="%E6%89%80%E6%84%9F" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%E6%89%80%E6%84%9F" aria-hidden="true"></a> 所感</h2>
<h4 id="%E5%8D%98%E4%B8%80%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AF%E8%BE%9B%E3%81%84%F0%9F%98%96" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E5%8D%98%E4%B8%80%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AF%E8%BE%9B%E3%81%84%F0%9F%98%96" aria-hidden="true"></a> 単一ファイルは辛い😖</h4>
<p data-line="28" class="code-line"> 外部ライブラリを使わない + 単一ファイルで約 800 行でした。 F# は同一ファイル内に複数のモジュールを定義可能なため、機能面での制約は特段ないのですが、さすがに数百行を超えてくるとあっちこっち行き来するのが億劫になりました……。モード機能や色設定などを追加で盛り込んだことで余計に肥大化した感じですが、コード総量自体は減っているみたいです。</p>
<h4 id="%E3%82%A2%E3%83%AC%E3%83%B3%E3%82%B8%E3%81%8C%E6%A5%BD%E3%81%97%E3%81%84%F0%9F%8E%A8" data-line="31" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%AC%E3%83%B3%E3%82%B8%E3%81%8C%E6%A5%BD%E3%81%97%E3%81%84%F0%9F%8E%A8" aria-hidden="true"></a> アレンジが楽しい🎨</h4>
<p data-line="33" class="code-line"> kilo は Windows のメモ帳に近い様相なのですが、慣れ親しんだ Vim ライクな操作感にしてみたり、チュートリアルでは ASCII のみサポートのところを UTF-8 ベースにして日本語や絵文字にも対応してみたりと、あれこれアレンジしていきました。ほかにもイミュータブルな状態管理をしたりループを for ではなく再帰でまわしたりと、 F# らしさを意識してみたりも。このあたりは使用する言語各々の特性に合わせて書くことで、よりその言語への理解が深まる部分な気がします。好き勝手に弄ったのでオリジナルとは若干毛色が異なっているかもです。</p>
<h4 id="%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%AF%E8%A4%87%E9%9B%91%F0%9F%A7%91%E2%80%8D%F0%9F%9A%80" data-line="35" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%AF%E8%A4%87%E9%9B%91%F0%9F%A7%91%E2%80%8D%F0%9F%9A%80" aria-hidden="true"></a> 絵文字は複雑🧑‍🚀</h4>
<p data-line="37" class="code-line"> いつの間にかワールドワイドに羽ばたいていた emoji 、華やかだし kawaii ので本稿でも多用していますが、ターミナル上で管理する場合はかなりの曲者でした。絵文字によってバイト数が変わってくるし、合成絵文字やサロゲートペアなどの仕様<sup class="footnote-ref"><a href="#fn-4ef2-1" id="fnref-4ef2-1">[1]</a></sup>も相まってカーソル位置や文字数計算などを自前でよしなにするのはかなり骨なので、大人しく外部ライブラリを使うべきですね……。</p>
<h4 id="ansi-%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%82%B3%E3%83%BC%E3%83%89%E3%81%B8%E3%81%AE%E7%90%86%E8%A7%A3%F0%9F%94%A4" data-line="39" class="code-line">
<a class="header-anchor-link" href="#ansi-%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%82%B3%E3%83%BC%E3%83%89%E3%81%B8%E3%81%AE%E7%90%86%E8%A7%A3%F0%9F%94%A4" aria-hidden="true"></a> ANSI エスケープコードへの理解🔤</h4>
<p data-line="41" class="code-line"> 言わずと知れたターミナル上でのテキストの装飾などに使われる制御コードで、 <code>\x1b[31m</code> で文字を赤くするといった類のものです。これまでは出力に色をつける程度でしか扱ったことがなかったため、仕様についてしっかりと触れる良い機会になりました。エディタ画面の描画やカーソルの形状変化など初めて使用するものがあったり、愚直に乱用するとパフォーマンスが悪くなったりちらつきが発生して一筋縄ではいかなかったりと、なかなかおもしろいです。たとえば .NET には標準でマウスカーソルの位置を設定する <code>System.Console.SetCursorPosition</code> が存在しますが、今回は ANSI エスケープコードの出力により移動を表現するなど、 kilo に寄せた書き方をしてみました<sup class="footnote-ref"><a href="#fn-4ef2-2" id="fnref-4ef2-2">[2]</a></sup>。</p>
<h4 id="%E5%AE%9F%E7%94%A8%E6%80%A7%E3%81%AF%E3%81%AA%E3%81%84%F0%9F%A6%A0" data-line="43" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E7%94%A8%E6%80%A7%E3%81%AF%E3%81%AA%E3%81%84%F0%9F%A6%A0" aria-hidden="true"></a> 実用性はない🦠</h4>
<p data-line="45" class="code-line"> アンドゥ / リドゥ未実装、複数バッファ非対応、絵文字表示が不完全、ハードコーディング多数、などなど挙げればキリがないのですが、終わりがみえなくなりそうな予感もするので一旦はチュートリアルを終えたことで良しとします。あらためて既存のエディタ群がいかに作り込まれているのかを実感させられました。</p>
<h4 id="%E8%BB%8A%E8%BC%AA%E3%81%AE%E5%86%8D%E7%99%BA%E6%98%8E%E3%81%AF%E8%89%AF%E3%81%84%F0%9F%9B%9E" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E8%BB%8A%E8%BC%AA%E3%81%AE%E5%86%8D%E7%99%BA%E6%98%8E%E3%81%AF%E8%89%AF%E3%81%84%F0%9F%9B%9E" aria-hidden="true"></a> 車輪の再発明は良い🛞</h4>
<p data-line="49" class="code-line"> とはいえ既存のプロダクトを模倣するいわゆる車輪の再発明も、初学者や他言語の導入における学習教材としてはかなり優秀な気がしています。新しく言語を学習するケースでも、その言語の特性やメリットを考えながら手を動かすことは体系的な学習への糸口となりますし、 (挫折しなければ) 約束された成果物という成功体験はモチベーションの維持・向上において非常に大きなメリットになり得るはずです。</p>
<h4 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E7%B4%B9%E4%BB%8B%F0%9F%85%B0%EF%B8%8F" data-line="51" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E7%B4%B9%E4%BB%8B%F0%9F%85%B0%EF%B8%8F" aria-hidden="true"></a> フォント紹介🅰️</h4>
<p data-line="53" class="code-line"> 冒頭のプレビューで使用しているフォントは 『マルミーニャ』 というピクセルフォントです。0 (ゼロ) と O (オー) の見分けがつかないためプログラミング向けではないかもしれませんが、可愛くて日本語対応なので私は気まぐれで使っています。</p>
<p data-line="55" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fd3ec0000f87c" src="https://embed.zenn.studio/card#zenn-embedded__fd3ec0000f87c" data-content="https%3A%2F%2Fbooth.pm%2Fja%2Fitems%2F4927023" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://booth.pm/ja/items/4927023" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://booth.pm/ja/items/4927023</a></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="57" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="59" class="code-line"> 古式ゆかしい C 言語でも、気にあっているあの言語でも、譲れないこの言語でも、ぜひあなただけの kilo を書いてみてください🌙</p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-4ef2-1" class="footnote-item">
<p data-line="61" class="code-line">'🧑' と '🚀' の異なるコードポイントが組み合わさることで '🧑‍🚀' を表現するなど、裏ではいろいろな事情があったりします。 <a href="#fnref-4ef2-1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-4ef2-2" class="footnote-item">
<p data-line="62" class="code-line">DOS 時代からの名残である WinAPI を叩く仕様。でも実行環境が Linux の場合は内部で ANSI エスケープコードを書き込んでいるみたいです。 <a href="#fnref-4ef2-2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


F# でテキストエディタ (kilo) を書く

Discussion