innerHTML より insertAdjacentHTML を使うという記事が上がっていたのをみて、そんなものあったな、と。
第一引数が覚えられなかったので、勉強がてら思い切ってモジュールを作ってnpmで公開してしまえ!と思って作ってみました。
注意点
モジュールを作る・公開するのは初めてなので、拙い点も多々あると思います。また、突貫で作ったため、かなり粗があると思われます。ご了承ください。
そういった箇所は、コメントや編集リクエスト等で教えていただけると幸いです。
ソースコード
https://github.com/tee-talog/insert-adjacent-simple
(実はGithubをまともに使うのも初めてです。)
src/ts/index.ts
がモジュール本体のソースです。
使い方
$ npm i --save insert-adjacent-simple
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
して自分が作成したモジュールが配置されるのを見ると、達成感がありますね!(最初は動きませんでしたが……)
動かなくても、仕事じゃないので誰に怒られるわけでもなく、むしろ直さなくてもいいレベルなので、とても気楽にチャレンジできます。
ということで、やったことがない方はぜひ作って公開してみてください!