個人開発に興味があるものの、フロントエンドが苦手なんで何とか克服しておきたかった。
そんで、まずはチンケなアプリをサクッと作ってみようかと思って、ちょこちょこ手を動かしてみました。
作ったの、こんな感じ。
【 異名ジェネレータ 】
ランダムに言葉を生成して、適当な異名を探す。英語/日本語。
https://another-name-generator.netlify.com/
【 CSV to TABLE 】
CSV をテキストエリアに入力したら、ちょっといい感じにテーブル化する。
DLして遊ぼうと思ってたデータがCSV形式だったんで、その過程で作ってみた。
https://csv-to-table.netlify.com/
「うっわ！ ショボ！」
って思ったかもしれないが、まぁ、その通り。否定する気は全くありません。
正直、練習という要素が強いんで、こんな問題を解決しようとか、世の中にどんなインパクトを与えようとかは、ほぼ考えずに作りました。
多分、「こんなの、素人でも作るのに３日もいらないんじゃね？」という印象を持った人も居るんじゃないかと思う。
ってか自分も、そのぐらいでサクっと作れるボリュームを考えていたつもりだ。
しかし、実際に手を動かしてみると、こんな有様だ。
手を動かしている間、日誌というか雑多な記録をつけるようにしていたんで、その経緯が以下のような感じになりました。
（クソ長いです。リンク先をクリックせず、そのままスクロールしてもらってOKです。）
Part 1. 異名ジェネレータ：公開までの振り返り
土台構築期１（レベルが低すぎて倒される期）
【Vue.js】vue-element-adminで遊んでる。
【Vue.js】vue-element-admin遊びの続き
【Vue.js】vue-element-admin遊びの続き２
【Vue.js】vue-element-admin遊びの続き３
土台構築期２（起き上って進む期）
【Vue.js】次の遊び（todo-backend-golang-mc）
【Vue.js】次の遊び（Vue-Bootstrap-with-Material-Design）
【Vue.js】vuetifyjs/theme-blog）
【Vue.js】vuetifyjs/theme-freelancer
【Vue.js】Vue-Bootstrap-with-Material-Design その２
haikunator で遊ぶ
haikunator で遊ぶ その２
【Vue.js】Vue-Bootstrap-with-Material-Design その３
【Vue.js】Vue-Bootstrap-with-Material-Design その４
【Vue.js】v-bind と v-model
【Vue.js】Vue-Bootstrap-with-Material-Design その５
【Vue.js】「:is」が理解できなかったのでサンプルを書いた。
【Vue.js】Vue-Bootstrap-with-Material-Design その６
「Vue.js わからーん！」と言いながら、突き進んでる期
【Vue.js】data とか data(/) とか、使い分けがよく分かんない。
【Vue.js】Vue-Bootstrap-with-Material-Design その７
【Vue.js】通常の for文って？
【Vue.js】created と mounted の使い分けがよく分かんない。
【Vue.js】v-model がよく分かんなかったんで調べた。
Ver1 リリース
Ver2 意外と簡単に行けそうなので、機能追加にやってみる期
Ver2 エラー遭遇期
【自作アプリ】異名ジェネレータ：追加機能作成中
【自作アプリ】異名ジェネレータ：追加機能作成中 その２
【自作アプリ】異名ジェネレータ：追加機能作成中 その３ エラー遭遇中
【自作アプリ】異名ジェネレータ：追加機能作成中 その４ エラー遭遇中
【自作アプリ】異名ジェネレータ：追加機能作成中 その５ エラー遭遇中
Ver2 方法転換期
【自作アプリ】異名ジェネレータ：追加機能作成中 その６ 作戦変更（ダメな方向に）
【 Node.js 】csv → json 変換ライブラリを色々試した。
Ver2 リリース
Part 2. CSV to TABLE：公開までの振り返り
次のアプリ作成中：その１
【Vue.Js】「@Click.Native.Prevent」の意味がわからなかったから調べてみた。
【Vue.Js】CSVファイル読ませてそれを画面上に反映させたかっただけなのに、何か遠回りしてる。
【Vue.Js】Vue Router で出来る範囲のことがいまいちよく分からない
【JavaScript】CSV から JSON に変換してくれるライブラリとか
【Vue.Js】Json-2-Csv 使ってみたけど、上手くいかない。
【Node.Js】csv（というライブラリ）の使い方がよく分からない。
【JavaScript】Import XXX と、Import { XXX } って、どう違うの？
【自作アプリ】CSV to TABLE を公開してみた。
要約すると、
『「わからーん！」と「全然うまくいかねー！」を繰り返しつつ、妥協に妥協を重ねた上にブチかっこ悪い着地をした挙句、一部はハリボテで出来てます♪』
という事が書かれています。
あと、読んでもらえれば分かるかと思いますが、完全に理解しないまま使ってる所も多いです。
ちなみに書き手は、システム開発についてズブの素人という訳ではありません。（フロントは得意じゃないけど）
得意なのは .NET、PHP、Java あたりで、フロントはぜいぜい jQueryを使うレベル。
どっちかというとWindows デスクトップアプリを作るエンプラ案件のが得意だけど、徐々にスキルセットを Web系に寄せていこうかとフロントにも手を出している。
（というかフロントは興味があって触ってる。）
実務で触ったことあるフロントエンドフレームワークは Vue.js の 1系のみで、jQuery と素の JavaScript がキメラの如く混ざり合った Chaos☆な感じで、まぁまぁパンチが効いた体験をさせてもらった。普段 Vue.js を触っている人が見ても、「分かりづらっ！」と言ってくれたシステム。
ドットインストールの Vue.js を全クリし、「基礎から学ぶ Vue.js」を読みながら手を動かしている。（全部の内容が理解できている訳では無いので、「読了」とは書かないことにした。）
そのぐらいの人間ですが、冒頭でご紹介させて頂いたアレを作るのに、上記のような大変な経路を辿りました。
作り手の能力に問題がある事を差し引いたとしても、あの程度のチンケなアプリ作るだけでも、まぁまぁな苦労がある事が伝わってくれればと思います。
わかった事は、
『個人開発者って、すげえ。』
あんな小さいアプリ作るだけでも、これだけの苦労をしたんだ。
個人でまっとうなプロダクトを世に送り出すなんて、どれだけ凄いんだよ。
個人開発者の方々の凄さを実感すると同時に、自分のエンジニアとしての力量の低さを嫌でも実感していまう。
という感じで、個人開発に興味があって、色々な構想を練っている方も多いと思いますが、まずは上記のようなチンケなアプリを作ってみるところから始めてみてはどうでしょう？
多分、想像している以上に多かった障壁に愕然として、計画を練り直すいいきっかけになるんじゃないかと思う。
小規模なアプリであれば、人によってはもっとサクっと作れると思う。ってか、もっと上手くできる人の方が多いんじゃないかという気がしている。
その時は、
「よーし！ こいつよりは上手くいったぞー！」
と、遠慮なく足蹴にしてくれれば幸いだ。それが他のエンジニアの勇気になるのなら。
まぁ、手を動かす事をやめるつもりは無いんで、こんな事を言っている人間が何を作れるようになってるかは、１年後ぐらいに振り返ってみようかと思います。
コメント