30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

制作記録

趣味で作っている SPA の Performance スコアを 40 点上げた

Lighthouse の Performance スコアを52から94に上げた。 Before。 After。 施策として具体的に何を行ったのか、書いていく。 経緯 以前、Shape Painter という SPA を作った。 構成はシンプルで、エントリポイントはひとつだけ。そしてそこで、ライブラリの…

Power Assert Deno を作った

Deno で Power Assert を利用するためのモジュールを作った。 github.com Power Assert とは、テスト失敗時に詳細な情報を表示する仕組みのこと。 例えば以下のようなテストコードがあるとき、通常はx()とy.zのそれぞれの結果と、それらが一致しないことのみ…

ツリー図を簡単に作れるウェブアプリを作った話と、抽象的思考力の話

他の図形も作れるようにしたい気持ちはあるが、今はツリー図だけ。 shape-painter.numb86.net ソースも公開している。 github.com 作った動機 単純に、自分が欲しかった。 図形を作成するツールは、もっと高機能で高品質なものが、他にたくさん存在する。だ…

郵便番号で住所を検索できる npm パッケージ Ken All を公開した

パッケージ名はken-all。 github.com 郵便番号を渡すと、該当する住所を値として持つpromiseオブジェクトを返す。 import KenAll from 'ken-all'; // [['東京都', '千代田区', '大手町']]; KenAll('1000004').then(res => console.log(res)); 詳しい使い方は…

Vue + Rails ではてなブックマークをインポートできるアプリを作った

習作なので実用性は低い。 後述するように Heroku にデプロイしてきちんと動いているので、動作に問題はない。 github.com 作成した目的 サーバーサイドの知識がなさすぎるので、それを学ぶため。 実際に何かを作るのが一番勉強になるし、ソースコードが手元…

Node.jsで任意のサイズの画像を生成するスクリプトを書いた

縦横サイズかバイト数、あるいはその両方を指定できる。 画像を操作するプログラムを書いていて、その検証用の画像を簡単に用意できるようにしたい、というのが作った動機。 既に似たようなツールは存在するのかもしれないが、勉強になりそうだから自分で作…

ReactとCanvasで画像のリサイズや回転を行う

Canvasを学ぶ必要があり、その練習として作ってみた。 ただの習作だから別に公開する必要はないのだが、いろいろあり、仕事以外でもコードを書いて公開していこうと思うようになった。 そのほうがちゃんと続けられるだろうし。 職場では他のホスティングサー…

簡単にTwitterAPIの認証を行えるnpmモジュールを公開した

TwitterAPIの認証を行うために必要な署名を、簡単に作成できる。 APIキーなどの必要な情報を渡せばエンドポイントとリクエストヘッダを返すので、それを使ってリクエストするだけで済む。 このモジュールを作成した目的 OSSの実践。その練習として。 他人が…

Node.js+React+ReduxでTwitterクライアントを作った

ReactとReduxの習作として、ブラウザで動くTwitterクライアントを作った。 サーバーサイドはNode.js。Expressも使っている。 JavaScriptだけでこういったものが作れるのだからすごい。 APIとやり取りをして情報を送受信し、それを元にビューを構築。 ユーザ…

Reactでシンプルなブラウザゲームを作った

http://numb86.net/tech/react-runner/ クリックするとジャンプするので、ひたすら障害物を避けていく。 今回の技術的な目的は、Reactに慣れること、Jestによるテストの実践、Gitのよりスマートな利用、といったあたり。 Reactではアニメーションをどうする…

Reactで Food Health API のデモを作成した

http://numb86.net/tech/food-health-react/ 3週間ほど前、Food Health APIに栄養素のデータを追加した。 これで、食品データと組み合わせることで例えば、1日の食事の内容を入力して不足している栄養素は何か調べる、ということも一応可能になった。 また、…

Food Health API のデモを公開

http://numb86.net/tech/food-health-demo/ 先日公開したAPIのデモを作った。 取り敢えずAPIを使って動くものを作る、というのが目的だったので、実用性はあまりない。 ただ、このAPIを使って何が出来るか、は表現できていると思う。 これをもっと機能拡張し…

APIを自作する際の検討事項

7月に公開を開始した食品栄養素検索サービス『Food Health』、そのAPIを作った。 今後もAPIを作ることがあるかもしれないので、設計作業の流れを備忘録としてまとめておく。 機能を決める まず、そのAPIでどんな機能を提供するのか、それを決める。 日本食品…

食品栄養素検索サービス『Food Health』を公開

食品名を検索することでその食品に含まれる成分を調べることが出来る。 それだけの、とてもシンプルなウェブアプリケーション。 そもそも、元データを提供している文部科学省が、同様のウェブサービスを既に公開している。 それでも、このウェブアプリケーシ…

複式簿記を学べるブラウザゲームを公開

https://bookkeeping.numb86.net 詳しくは下記を参照。

Cloud Vision API を利用した画像認識ゲームを制作

目標 ミーハーなので、アルファ碁を見て人工知能や機械学習に関心を持った。 この技術を使って何か出来ないかと調べていたところ、Googleが画像認識技術を提供していることを知り、本作を作ることにした。 本作を通じて、以下の2つの目標を達成したかった。 …