初OSS活動に取り組んで得た知見 - 自転車とプログラミング

こんにちは、Watanabe です。昨年の話になりますがJavaScriptのライブラリにpull requestを送って承認されたことがありました。OSSへのコントリビュート（貢献）できた経験をまとめないのはもったいないのでこちらにまとめておきます。

`textarea-markdown`にpull requestを送ってマージされました

HTMLのテキストエリアをマークダウン記法に対応させるJavaScriptライブラリtextarea-markdownに新機能をpull requestしました。経緯としてはFJORDBOOTCAMPのチーム開発にて、FJORDBOOTCAMP内のテキストエリアにファイル選択ダイアログに対応したファイルアップロード機能を追加させるIssueを担当したことから、実装を遡った結果このライブラリに行き着きました。

もともとtextarea-markdownはテキストエリアへのファイルドロップでのアップロードに対応してましたがファイル選択ダイアログでのファイルアップロードには対応していなかったので、オプション的に機能させるように実装しました。

textarea-markdown ライブラリはこちら

通常時はテキストエリアに所定のIDとClassを設定するとtextarea-markdownが反映されます。以下のような感じです。

<textarea id="editor" data-preview="#preview"></textarea>
<div id="preview"></div>
import TextareaMarkdown from 'textarea-markdown'

document.addEventListener('DOMContentLoaded', () => {
  const token = document.querySelector("meta[name=\"csrf-token\"]").content;
  const textarea = document.querySelector('#editor');

  new TextareaMarkdown(textarea, {
    endPoint: '/api/image.json',
    paramName: 'file',
    responseKey: 'url',
    csrfToken: token,
    placeholder: 'uploading %filename ...'
  })

これをオプション的にファイル選択ダイアログに対応しました。テキストエリアとは別にinput要素を用意し、こちらにもClassを設定してテキストエリアと紐付けることでアップロード(とtextarea-markdownでのプレビュー)が可能になります。

<h2>Editor & File input</h2>
<input type="file" class="data-input">
<textarea id="editor" data-preview="#preview" data-input=".input"></textarea>

<h2>Preview</h2>
<div id="preview"></div>

import TextareaMarkdown from 'textarea-markdown'

let textarea = document.querySelector('textarea');
new TextareaMarkdown(textarea);

中身的にはinput要素を捕捉して

  setInputElement() {
    const selector = this.textarea.getAttribute("data-input");
    if (selector) {
      return document.querySelector(selector);
    }
  }

イベントを設定してファイルが選択されたらアップロード処理が走るようにしています。

    if (inputelement) {
      inputelement.addEventListener('click', (e) => e.target.value = '');
      inputelement.addEventListener("change", (e) => this.input(e));
    }

ドロップファイルでのアップロードが実装されていて主要な処理はすでにあったので、コードリーディングを主に取り組んだ形ですね。あとこの機能についてREADMEに追記したりもしました。

github.com

OSS活動に取り組んで得た知見

コントリビュートする流れがあって自然とOSS活動に至ったのですが、じつはこれの一個前に同じライブラリに不具合修正のプルリクを送っていました。日本語で。

その時にはマージされましたが「英語で書いてね」とたしなめられてしまって、しまったと思いました。マージされたプルリクは当たり前ですがライブラリの一部としてライブラリが継続する限りはその一部になるのでいつ誰が遡って見るかもわかりません。そのときに「できるだけわかりやすくする」配慮がもとめられると気が付きました。

↑のプルリクはその反省を活かして英語で記述しています。 deepl翻訳やChatGPTを使うことで比較的簡単に英語での文章が作ることができました。日→英、英→日の翻訳をかけて内容のチェックもすればより精度が高いと思います。

また、OSS活動ではIssueを作っての改善内容の提案とプルリクでの具体的な改善提案の2種類があると思いますが、「できるだけわかりやすくする」この方針で考えれば具体的な修正案が伴っていたほうがニュアンスが伝わりやすく開発者や他のコントリビュータにとっても伝わりやすいのかなと思いました。

textarea-markdownにpull requestを送ってマージされました

OSS活動に取り組んで得た知見

`textarea-markdown`にpull requestを送ってマージされました