自己紹介
こんにちは。 株式会社FLINTERSの高嶋です。
この記事は10周年記念として133日間ブログを書き続けるチャレンジの4日目の記事となります。
導入
プログラミングの勉強をする際、何か題材があったほうがいいと思うものの何を作ればいいのかわからないという悩みはありませんか？
私のおすすめは身近な困っているというほどじゃないけどあれば少し便利かもしれないというプログラムを作ってみることです。
特定の機能やライブラリについて勉強する際は少し向いていないかもしれませんが、言語や環境に慣れるにはおすすめです！
今回紹介する方法の他にも競技プログラミングもおすすめですのでぜひ調べてみてください。
身近な少し面倒くさい作業を見つける
例えばどういうものかというところで、私が最近少し便利にしたものとして勤怠の入力があります。
弊社では貸与PCのアクティブ状態を管理されており、大体何時から何時まで働いていたというのは自動で記録されていますが、それが自動的にそのまま働いていた時間とはならず、自分で何時から何時まで働いていたということを申請しなければなりません。
多くの場合は単に記録された時間をそのままコピーするだけなのですが、それを毎月営業日の数だけ手入力していくのは正直言って少し面倒です。
このように無くても特別困るようなものではないが、自動でやってくれると助かるという小さな問題は身近に多いのではないかと思うのでぜひ探してみてください。
■注意■
例で挙げた勤怠入力の支援ツールの利用は、社内の確認の上で使っています。
会社によっては社内システムのハックが禁止されている場合もあるので、会社のルールに反しない形で面倒くさいを解消する便利ツールを考えてみてください。
自動で解決できないか考えてみる
上の例でいうと、基本的にブラウザで完結していますので楽にするにはブックマークレット、あるいはChromeのプラグインが考えられます。
ただし今回は新規ウィンドウを開いてしまう、そのウィンドウには基本的にヘッダーがないというところでブックマークレットの呼び出しが面倒くさそうだったのでChromeプラグインで実装しました。
ここでは勤怠便利ツールと呼ぶことにします。
ブラウザで行う作業は比較的ハックしやすく、データにもアクセスし易いしあまり環境が壊れるということもないのでJavaScriptなどに慣れるのが目的の場合はおすすめです。
ブラウザ以外の実行環境である場合は、コマンドラインや自作GUIを用意するなどもありますが、まずはコマンドラインから慣れるといいかなと思います。
実際に作ってみる
Chormeのプラグインの作成については公式のドキュメントや他のブログを見ていただくとして、とりあえずmaifest.jsonとjavascriptのファイルがあれば動作します。
{ "manifest_version": 3, "name": "kintai benri", "description": "", "version": "1.0", "content_scripts": [ { "js": [ "content.js" ], "matches": [ "https://kintai.com/*" ] } ] }
自分用でChromeStoreなどに公開するわけではないので、これくらい手抜きでも大丈夫です。 とりあえず機能を作り始めるのであればDOMから直接読み込み、直接DOMに書き込むだけなのでコード自体は結構シンプルですみます。
document.querySelectorAll("#calendar .detail").forEach((dd) => { const log = dd.textContent.replaceAll(/\s/g, '').split("-").map(s => s.trim()); dd.querySelector('input[name$="from"]').value = log[0]; dd.querySelector('input[name$="to"]').value = log[1]; });
スタートラインとしてはコードはこのような感じになりました。
"10:00 - 19:00"といった形式で保存されている打刻時間をパースして入力フォームにコピーしていくだけの簡単なプログラムです。
面倒くさいなぁと思ってやっている手作業がこれくらいのコードで案外解決できたりするのです。
実際にはこれを任意のタイミングで発火できるようにボタンを配置したりする必要はありますが、ここでは割愛します。
(実際の画面はお見せできないのでソースコードはあくまでイメージとして捉えてください)
この段階ではとりあえず動くものを優先して問題ありません。
まずは目的の機能をしっかり作り上げることを目標にしましょう。
その中で課題がより明確になったり、DOMの操作であったり学ぶことが多くありますので、まずは完成させましょう。
一歩先に進む
一旦完成したらより良い状態はどうか？を立ち止まって考えてみると面白いでしょう。
サンプルコードくらいの規模ならこのままでもいいのですが、ここから例外を考慮したり機能を追加していくとコードが非常に読みづらい状態になっていきそうです。
実際に作成したツールではこの5倍くらいのコード規模になっているので、DOMからの読み込み、データの操作、DOMへの書き込み、の3つに分けて関心事を分離してあります。
こうして各関数での関心事が分離しておくと、半年くらい経ってからいじりたくなったとしてもある程度思い出しやすいのではないかなと期待しています。
ここまでくるとただ環境に慣れるだけでなく、設計などへの知見も得られます。
単に機能を完成させることは大事ですが、どうすれば後で思い出すのに掛かるコストを下げられるか考えるのもとてもおもしろいですよ！
まとめ
何を作ったらいいかわからない人向けに今回は勤怠便利ツールを例にまず身近なちょっと不便な点を解決してみるのはどうですか？という提案をしてみました。
完成させると日々の少し面倒くさい作業が楽になりますし、自分の作った便利ツールには愛着が湧くので少し機能が足りなくても使っていけます。
もしかしたら作るのに使った時間分そのツールで節約された時間は上回ることができないかもしれませんが、その途中で得られた学びはそれ以上に価値があります。
ぜひ皆さんもちょっと不便だなぁと思っているものを少し便利にしてはいかがでしょうか？
