個人プロジェクトでMacアプリを作るためにWebフロントエンド技術を学習中なのです。
方針
一気にElectronアプリを作ろうとすると死ぬので、まずはTypeScript + Node.jsでいくつかコマンドラインツールやライブラリを作って経験値を貯めていこうと思います。
まずはインプット
10月15日〜10月26日あたり。
コマンドラインツールを作る際に使えそうなモジュールを調べていくことにしました。
読んだリファレンス
それぞれのモジュールで遊ぶためのリポジトリを作ってREADMEやリファレンスの内容を試してみました。
TypeScriptにも慣れないので、素のJavaScriptではなくTypeScriptで書くようにしました。
本も読んでみる
10月27日〜11月07日あたり。
当面使ってみたいライブラリは試し終わったので、最新のJavaScriptの知識を補強しました。
Node.jsの基礎知識をサッと確認したかったので、読んでみました。
Webサーバの立て方が題材だったのですが、当面は作りたい予定がないので「ふーん。こういう風に書くんだ」ぐらいの温度感でサラッと読みました。
varとletの違いとか、呼び出し方次第でthisが指すものが変わるとか、プロトタイプチェーンとか、ES2015の新機能とか、「前にブログ記事で読んだことがあるような気がするけど、うろ覚えだなー」って知識をほぼ最新の状態にリフレッシュできたので、良かったです。
序文で使っている理由を述べていたけど、日本語変数名はデメリットの方が多いと思うので、止めて欲しかったです。
内容はほぼ上の本と被っていましたが、ハマリどころを別の人の言葉で語ってもらうことで、理解が深まったので良かったです。
同上。
そろそろ手を動かしたいが･･･
インプットは十分にしたので、そろそろ手を動かしたところですが、ネタをどうしようか悩みました。
しばらくはコマンドラインツールやライブラリを作って経験値を貯めたいわけですが、方向性は以下のいずれかになるかと思います。
1. 書籍や学習サイトのハンズオン
2. 車輪の再発明(Webならブログ、コマンドラインツールならUnixコマンド再実装など)
3. 本当に作りたいアプリのサブセット
1はよく練られたカリキュラムに沿って学べるので、プログラム初学者であれば最適だと思います。しかし、自分の場合、すでに知っている知識が多く、時間あたりの効率が悪そうです。その結果、モチベーションが維持できない懸念があります。
2は言語構文に慣れることが目的であればいいかと思いますが、自分に取ってJavaScript(TypeScript)は、非同期処理以外はそれほど異質な言語でもないため、効果が薄そうでした。
3はサブセットの切り出しが難しいです。芋づる式に必要な知識の範囲が増えていってしまい、手に負えなくなる可能性があります。またコマンドラインツールだとアウトプットがテキストの形になってしまうことも辛いです。
2日ぐらい悩んだところ、気付きを得ました。
CLIアプリケーションでも結果をHTMLとして出力すれば作りたいネタのうちいくつかは作れることに気づいた！！
— はじぴー (@hajimepg) November 2, 2017
3の後者の問題が解決しました。前者の問題については、データベースの使用を禁止することで、あまり複雑なネタにならないように制限することにしました。コマンドライン引数を受け、API呼び出しを含む何らかの処理をして、HTMLファイルを出力するアプリを作っていくことにします。
実際に作ったもの
機能についてはリンク先のREADMEを参照してください。
TwitterUserAnalyzerPrototype1
https://github.com/hajimepg/TwitterUserAnalyzerPrototype1
1本目です。11月08日〜11月12日に掛けて作りました。
リポジトリをオープンにし、コミットするたびにTwitterにツイートするTwitterドリブンで書きました。
(」・ω・)」async！(／・ω・)／await！ · hajimepg/TwitterUserAnalyzerPrototype1@d40fd6c – https://t.co/CP5tyiRaux
— はじぴー (@hajimepg) November 8, 2017
たまにいいねしてもらえることがあって、テンションがあがります。
いくつか欲しい機能があったので、以下のモジュールのリファレンスを読みました。
JavaScriptのDateクラスはタイムゾーンが取り扱いづらいので辛いです。Moment.jsとDate-Fnsのうち、なんとなくDate-Fnsを採用しました。
lodashは色んなメソッドがあって便利です。「リファレンス全部読むぞ」って思ったんですが、長すぎて中座してます。
Nunjucksはテンプレートエンジンです。PythonのJinja2を使ったことがあるので構文が同じこちらを採用しました。良い感じです。
なんか難しそうと思っていたEventEmitterやPromise、async/awaitなどを使ってみることができました。やってみたらそれほど難しくなくて苦手意識が減りました。
TwitterのAPI制限に引っかかりがちだったので、スタブ(モック？)を作りました。継承関係は関係なく、同名のメソッドがあるオブジェクトであればいいので、雑に作れてとても楽でした。
TwitterUserAnalyzerPrototype2
https://github.com/hajimepg/TwitterUserAnalyzerPrototype2
2本目です。11月13日〜11月25日に掛けて作りました。
以前に作ったHTMLのモックがあったので、そこに実際のデータを流し込んで出力するようにしました。
使用するAPIやモジュールはTwitterUserAnalyzerPrototype1と大差ないので、データ集計の難易度を少し上げたのと、似たような作業を繰り返すことで、知識の定着を計りました。
クソダサいコードの度合いもちょっとだけ下がったと思います。
TweetArchiverPrototype1
3本目です。11月25日から作っており、まだ完成していません。
(途中で法事のために帰省したので、数日中断しています。密かにモチベーション源になっていたGitHubの芝生も途切れてしまいました)
すでにネタ切れになってきており、ネタ出しに苦戦しました。
TweetArchiverPrototype1では、ツイートをあとで参照できるように保存するところまで作成する予定です。
いわゆる「Web魚拓」というやつです。
TweetArchiverPrototype2以降で、複数ツイートを保存し並び替えやフィルターをできるようにしていくつもりです。
この際にデータベース禁止を解除することになりそうです。
HTML+CSSを書く必要があるため、挑んでみたところ、「正しくはどう書くべきなんだ。わからん」という悩みで手が止まってしまったため、最新のHTML5+CSS3の知識を復習しました。
「〇日で一通りのサイトを作れるようになりましょう」的なものではなく、最新の機能と以前は使っていたけど既に使うべきではない機能を把握したかったのですが、そういう情報源はあまりないため、苦労しつつようやく良い感じの本を見つけることができました。
読み終わったあとにHTML+CSSを書いたところ、以前よりは手が止まることが少なくなりました。良い本でした。
今後
TweetArchiverPrototype1がやっと動き始めたところです。HTML+CSSの知識はもう少し補強しておきたいので、次はTIPS的な本を読む必要がある気がします。
デザインは学びたいことの本命ではないので、「明らかに本職のデザイナではなくプログラマが組んだデザインだけど、なんとか使えないこともない」ぐらいのレベルで妥協しつつ進めたいです。
データベースの使い方を覚えたあとは、出力するHTMLにNode.jsではなくブラウザで実行するクライアントサイドJavaScriptを含めてみようかと思います。最初は簡単な関数を呼び出す程度に留めておき、DOM構築を慣れてきたらVue.jsに任せてみたいです。その次はいよいよクライアントからサーバへの通信でしょうか･･･。
今のところはこの学習方法は上手くいっているように思います。こうやってログをまとめて見ると「期間の割りには進んでいないな」と思わないこもとないですが、焦ってもしょうがないので、腐らずに生きたいです。また1ヶ月後ぐらいに進捗を報告したいと思います。最後までお読みいただき、ありがとうございました。