innerHTML より insertAdjacentHTML を使うという記事が上がっていたのをみて、そんなものあったな、と。
第一引数が覚えられなかったので、勉強がてら思い切ってモジュールを作ってnpmで公開してしまえ！と思って作ってみました。

注意点

モジュールを作る・公開するのは初めてなので、拙い点も多々あると思います。また、突貫で作ったため、かなり粗があると思われます。ご了承ください。

そういった箇所は、コメントや編集リクエスト等で教えていただけると幸いです。

ソースコード

https://github.com/tee-talog/insert-adjacent-simple
（実はGithubをまともに使うのも初めてです。）

src/ts/index.tsがモジュール本体のソースです。

使い方

console

$ npm i --save insert-adjacent-simple

index.js

const { insertHTMLBeforeBegin } = require("insert-adjacent-simple");

const elm = document.getElementById("id");
insertHTMLBeforeBegin(elm, "insert text");

insertAdjacentElementもinsertElementHogeHogeで使用できます！

追記(2017/09/28)

insertAdjacentTextにも対応しました。

Githubの運用方法

基本的に自分しか使わないので、これまでは雑にGitを使っていましたが、今回は公開するために、自分の中でルールを設けました。

4ブランチ（A successful Git branching model）で運用

サルでもわかるGit入門の記事を参考に、4ブランチ作成しました。
実際にGithubにpushするのは、masterとdevelopだけです。
Releaseとfeatureはローカルのみにあります。

工夫したところは、Releaseブランチの作り方です。
今回package.jsonには、基本的にprivate: trueを設定していたため、それをfalseに設定してからnpm publishしなければいけませんでした。

そこで、private: trueの状態でmasterにコミット・タグ付けし、そこからReleaseブランチにcheckout後、private: falseにしてからnpm publishを行いました。

こうすることでGithub上にはprivate: tureのソースしか残らないため、間違ってnpm publishしてしまうことを防げます。

必ず`--no-ff`

自分は履歴がすべてわからないとモヤモヤしてしまうタイプなので、--no-ffを付けてmergeしました。

やってみて

npm、意外と簡単だった
Githubも、意外と簡単だった
- 今回は自分でcloneしてpushしただけだったから？
- 大体のコマンドがやり直せるから？（reflogは酷い有様になりましたが）
TypeScriptでnpmモジュールを作成するのは、考えることが多くなってしまったので、今回のような突貫の場合は、普通にjsで書いたほうが早かったと思われる
- このせいで（いや自分が悪いのですが……）公開当初は動いていませんでした
コマンドプロンプトからではエラーerrno -4068（illegal operation on a directory,～）が発生してnpm publishが出来なかった
- Cygwinからコマンドを実行することで成功
- Nodistを使用しており、npmのインストール位置が通常と違ったため？
TypeScriptで作っておきながら、型定義ファイルがない
- declarationDirオプションを指定すると、なぜかエラーが発生する
- declarationDirオプションを指定しないと、型定義ファイルが出力されない
- 今後、アップデートで対応したい→対応しました
  - Browserifyを使っていたのが原因っぽいです

お詫び

（2017/09/15 21:15 追記）
公開直後はちゃんとモジュールが作成できていなかったため、使用できませんでした。
現在は修正して、使用できる状態になっています。
申し訳ございませんでした。

（2017/10/24 07:40 追記）
ブログに使用できなかったことについて書きました。
http://blog.tee-talog.com/entry/2017/10/23/210501

ぜひ！（あとがき）

npmに公開するのは意外と簡単でした。ですが、一回やってみるとかなり勉強になりました。あとは自分の足りない部分が分かるので、今後の勉強にも役立ちそうです。

公開後、npm installして自分が作成したモジュールが配置されるのを見ると、達成感がありますね！（最初は動きませんでしたが……）
動かなくても、仕事じゃないので誰に怒られるわけでもなく、むしろ直さなくてもいいレベルなので、とても気楽にチャレンジできます。

ということで、やったことがない方はぜひ作って公開してみてください！

参考