この記事は Crieit なんでもアドベントカレンダー 12月12日分の記事です。

ともたこ(@tomotaco)と申します。
いきなりこの画面は何だと思われると思いますが、これは先月リリースしたemoscode(エモすこ) という個人開発の Web サービスです。
ソースコードを投稿する事を主な目的にしていますが、種類を「plaintext」にすることで普通のテキストも投稿可能です。本記事をサンプルとして投稿してみました。

emoscode(エモすこ)については、Qiita のひとり開発アドベントカレンダー(12/04)に紹介記事を書きました。
同じくクソアプリ2アドベントカレンダー(12/05)に新機能のネタ記事を書いています。
今回も同じエモすこネタですが、技術面から離れて開発の経緯をエモめちょいマシな感じで振り返ってみようと思います。

開発のきっかけ

ひとり開発アドカレの方にも書きましたが、Qiita の記事を書いている時にソースコードを引用した時、「ここ」と特定の場所を指して説明を書きたい、と思うことがありました。ソースコード内にコメント文で書くのではなく、矢印で指す注釈のようなイメージです。
この時点ではできるかどうかは全く分からないままぼんやりと情報収集していましたが、W3C の Canvas の仕様によると、デフォルト値が透明とあり、技術的に実現できそうなことがわかったので、そのうち機会があったら作ろう…と考えました。
しかしここからが問題で、「いつでも作れる」と思ってしまうと安心してしまって
なかなか一歩を踏み出すことができません。京都に住んでる人が近所の有名なお寺に行かないのと同じ論理ですね。
アドカレの方ではここから「なんやかやあって…」と省略していましたが、ここではそのなんやかやの詳細を書いてみたいと思います。

実際に作り出したきっかけ

昨年末、unityroom 開発者の naichilab さんのブログ記事「ゲーム投稿サイト「unityroom」に使われている技術」を読んだことがきっかけです。
私は衝撃を受けました。「書かれている内容、技術ネタが、なんもわからん!」
特に、Heroku(名前しか知らなかった)などのクラウドサーバや、フロントエンドWeb関係の用語が全くさっぱりでした。
自分はここ数年は Web 開発から離れているものの、一応 Web 開発を10 年以上やってきた立場です。ただ、昔 Java・PHP5・Javascript(ES3)で開発した案件のメンテナンスをする程度で、最近の Web 開発(node.js が流行り出して以降)については全くと言っていいほど知識がありませんでした。
正直、技術屋として身の危険を感じるレベルでヤバいと感じ、 Web 開発技術に関する知識のアップデートをしよう、と思い立ちました。
そのためには実際に動くものを作ってみるのが一番なのは言うまでもなく、そしてたまたま自分には↑で書いたように「機会があれば作ってみたいネタ」がありました。
ここでパズルのピースががっちりはまり、実際に開発に踏み出すことになった訳です。
運営者ギルドにも参加したのもこの時期です。
(運営者ギルドは Web サービスをリリースした開発者の集まりです。リリースしていなくても運営する予定があれば参加することができます)

最初は試作から

最初は GUI の試作から始めました。HTMLの静的な1ページに、CSS3 と Javascript で書きました。作ろうとしたものは、
- テキスト選択された箇所をマーキングし、そこを矢印で指しつつコメント"hogehoge"(固定) を表示
- コメントは自由にドラッグできる

という単純なものでした。
ブラウザのテキスト選択範囲は window.getSelection() により Selection クラスの形で取得することができます。
Selection クラスは起点の Text ノードと文字内の位置、終点の Text ノードと文字内の位置で構成されます。つまり複数の DOM にまたがる事があるため、そこから切り出して mark タグで囲む必要があります。
DOM 操作は jQuery で楽できるはず…と思っていたのですが、そうは問屋が下ろしませんでした。
jQuery は HTMLElement ノードの操作については確かに楽にできますが、間にはさまる Text ノードの操作が難しいため、素の Javascript で DOM を触るコードを書く必要がありました。

試作 GUI は年末年始の休み中に仕上げるつもりが1月半ばまでずれ込み、結局3週間ほどかかったことになります。とりあずGUIの確認ができたので、gif動画を自分の twitter とか運営者ギルドの自分の times チャンネルにこっそり上げてみたら、意外と反応が良くて驚きました。(リリースもしていないペーぺーなのに反応もらえるとは…運営者ギルドメンバーの方々マジで神)
ということで、ほなサービス化するか…と本格的に動き出すことになりました。
なお、この試作ページは Web 開発者の方の食い付きが良く、サービスがまともに動き出すまで半年ほどデモとして活用することになりました。

開発時間の確保

開発中はとにかく開発に集中する時間の確保が課題でした。
エモすこのデモを見せた時に、開発期間を聞かれて答えると「えっそんなにかかるんですか?」とよく驚かれました。
家庭の事情で週末の昼間には開発できないため、平日休日それぞれ深夜の1〜2時間が確保できればいい方、平日帰宅後の家事も結構なボリュームがあり、終わった頃には疲れて何もできず眠ってしまう日もありました。
睡眠時間を削って増やすことはできましたが、体力的に厳しい年齢のためそれは避けて、
代わりに平日夜に開催されるもくもく会に参加するようになりました。

通勤は途中に難波・梅田を通るルートのため、もくもく会はあちこちで開催されています。
特に会場が初めての所は興味本位でよく参加しました。(個々のもくもく会のコミュニティへの定着率は悪かったと思います。すみません…)

connpass の記録によると、自分が参加した平日夜のもくもく会はこれだけありました。
主催、参加者のみなさんにお礼申し上げます。
(土日に開催されるもくもく会にも面白そうなものがたくさんあるのですが、家の事情で参加できないのがとても残念です…)

• 【大阪・梅田】Web×PHP TechCafe
• 【大阪】西中島StudyGroup【もくもく会】
• 【初心者歓迎】大阪Python もくもく会
• 【大阪】JSerもくもく会【フロントエンド/monaca/ハイブリッド開発】
• Unityをさわる人が、大阪に集まるもくもく会　『フライデーナイトUnity』
• [大阪・なんば] Web制作もくもく会
• 【Free Language】Programming勉強会
• 【大阪・梅田】エンジニアもくもく勉強会 ＠ RAKUS
• 【大阪】夜通し作業しNight【もくもく会】
• 【梅田】お酒を飲みながらのもくもく会　（ワンドリンクサービス）
• 孤独なもくもく会
• 梅田夜もく会
• もくもくReactive
• 【大阪・梅田】WEB系言語もくもく会(サイレント)
• 平日もくもく会＠大阪本町
• 【江坂駅・北摂地域】すいもく会 at 3Drops
• 【大阪・梅田】初心者限定・WEB系言語もくもく会

もくもく会で 2〜3時間だけでも開発に集中する時間があると、帰宅してから続きをする気力も確保できるので自分にはとても合っていたような気がします。

一方で、通勤電車で座れた時にノートPCを出して…というのもやってみましたが、思ったほど集中できないため、機械的なリファクタリングくらいしか進捗を出せませんでした。(Webサイトで調べものをするだけならスマホで十分です)
通勤時いつでも座れるとも限らないため習慣化するまでには至らず、そのうち老眼が悪化しそうだったのでやめました。

技術をアップデートするか否か

開発中に頭を悩ませた問題として、「新しい技術を勉強するか否か」というものがありました。当初の動機が「自身のWeb技術のアップデート」だった訳ですが、「技術的にできそう」から遠のく方向のアップデートには消極的でした。

試作GUIは HTML + javascript(ES6) + jQuery で書いており、それに沿う形でサーバ側も実装していましたが、世間は React や Vue.js を使った SPA で主流です。そちらに切り替えることも考えましたが、試作GUI相当のものを SPA で作るには一体どうしたら…という所で思考が停止気味になりました。

いろいろ悩んだ結果、導入の是非は
- 今後の開発が効率化しそうならOK
- 既存部分の作り直しで余計に時間がかかりそうなのは NG

という方針で行うことにしました。その結果、
- フロントエンドのビルドシステム Webpack4 の導入
- Javascript(ES6) → Typescript の移行

は行いました。時間はかかりましたが、クラス構成の見通しが良くなりしょうもないミスが実行時ではなくコンパイル時に見つかることで開発は確実に効率化しました。
毎回ビルドする手間も webpack-dev-server のおかげで意識する必要もなく、Typescript を保存すると即座にブラウザが更新されるため、素の Javascript を書いている頃よりもむしろ開発体験は上がったように思いました。
その一方で jQuery の使用は継続しました。Typescript の型定義 @types/jquery パッケージがちゃんと存在し、jQuery を使ったままでも Typescript への移行には支障がないと判明したからです。ただ、一部の jQuery プラグインについては型定義がなかったため自力で書く必要がありました。

リリースするぞ詐欺駆動開発

開発が長期化すると、タスクも減らないまま風化していき、だんだん思考が鈍ってくるため、本当に完成に近づいているのか自信が持てなくなる事がありました。
そんな時は「明日にでもリリースするぞ」という気分に切替えるようにしていました。すると不思議なことに漠然とした緊張に包まれ、「やはりこれ入れずにリリースはマズいのでは」と足りない機能に気付くことができました。これはリリース前の実装項目の優先付けに有効なのでは…と思います。

手の中にあるもの

エモすこは11月10日にリリースすることができましたが、リリース後も DB の接続数の問題に悩んだり、不具合の修正に追われたり、GUIを改良したりと開発が終息する気配はありません。でもこれらはリリースしなければ得られなかった経験なので、リリースして本当に良かったと思います。運営者ギルドの皆さんを始め、興味を持って使って下さった皆さんには心よりお礼申し上げます。引き続き改良を重ねて行きますので、今後ともよろしくお願いします。

Web技術が星の数だけあっても、自分の手の中につかめる数は限られています。個人開発というのは、自分の手の中につかんだものでどうにかやりくりしてシステムやアプリを仕上げていく、という感覚に近いと思います。もちろん新しい技術を学ぶことでつかみ直すこともできますが、新しい事をつかんだらその分手からこぼれ落ちていくものもあります。
その手の中から生み出されるものは、社会を変える素晴らしいサービスかもしれませんし、みんなを笑顔にする素敵な(クソ)アプリかも知れません。何だっていいと思います。
個人開発者のみなさん、どうか無事にリリースされる事を祈っています。