8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript1ヶ月半くらいの独学初心者がGW中にプロダクトを作った話

Last updated at Posted at 2019-05-08

初めまして。zer0_256(ゼロ)と申します。
現在、大学2年で情報系に通っています。3月頃からJavaScriptを独学で始めて1ヶ月くらいで基礎の基礎をやってこのGW中にプロダクトを作ったので記録としての残しておこうと思います。

##参考までに筆者のレベル
HTML/CSS:レスポンシブは苦手。自作サイトを作成済み。夏にサイト模写をやるつもり
JavaScript: ドットインストール &Progateで勉強。以前ジャンケンゲームを作った。
Processing:初めて触ったプログラミング言語。グラフィック系は肌に合わずに軽く挫折
C言語:現在大学で履修中。まだ簡単な条件分岐までしかやっていないのでコメント不可。
ざっくりですがこんな感じです。今後はPHPやJavaScriptライブラリをやる予定。

#何作ったのか
4月の中旬くらいにとある勉強会に参加して、そこで好奇心でプロダクトを作って楽しそうにLTをされていた方が居たので自分も思い切って作ってみようかなと火がついたのがスタートでした。

ちなみにプログラミング自体は昨年の9月から大学の講義でProcessingとHTML/CSSをやったのが初めてです。大学進学前からプログラミングは知っていましたが独学をしたことはありませんでした。この話はまたおいおいしていきたいと思います。

  • チャットアプリ
  • To doアプリ

作ったのはこの二つです。好奇心が勝ちチャットアプリ から作っていきましたが、あとからとあるサイトを見ていたらTodoアプリの方が楽ということを知りました笑
ということもあり、GW中はほぼチャットアプリに苦しめられることばかりでした。
もうしばらくはmessageという英単語見たくないですね。。。ww

##使ったもの

  • ドットインストール

バックエンドの知識はないに等しいのでFirebaseを使いました。
そこでまずはドットインストールで仕組みを理解。

ドットインストール
なんですが、コレを終わらせるだけでも一苦労でした。
始めたのは4/13で、4月中に終わらせる予定がかなり遅くなり終わったのが5/1でした。
大学の方が忙しくなったのもありますが、一番の理由は細切れの時間でやるとインプットが遅くなって忘れて見返して時間を食ってしまうことでした。
ほかのレッスンと違ってコンテンツの中身が目まぐるしく変わるような印象を受けたのでまとまった時間が取れないと厳しいなと感じました。

##問題発生
ドットインストールを終えたのですが、このレッスンをご存知の方ならわかるとは思うんですが、基礎の基礎すぎて送信時間を実装したり、アイコンを設置したりする方法って検索しないと出ないんですよね。
しかも、今回私はjQueryすらなしでJavaScriptオンリーで実装していたので参考文献と呼べるものが少なかったです。Vueとかは検索すると引っかかるものが多かったです。

参考になるサイトはいくつか見つけたのですが、コードを読む力も必要とされ、独学の私にはかなりハードルが高かったです。(今の印象です。)
最初は送信時間の実装やアイコン、自分を右に表示、他の相手を左に表示といったこともやりたかったのですが今回は力不足ということもあり、断念しています。

もう少しコードやFirebaseに慣れてきたところで再挑戦していきたいと思っています。
(スクショはデザインがひどいので割愛します。LTするときには見せますよ!笑)

##Todoアプリ
モデルはTodolistというアプリです。ご存知の方も多いと思います。
ありがたいことに先人の方がQiitaで素晴らしいものがあったので紹介させていただきます。
参考にさせていただいたQiita
このQiitaではHTML/CSS/JavaScriptの復習からアプリ作成に入っていけるので初心者の方にはオススメです。
そして基礎の基礎部分ですが出来上がったのがこちら。
スクリーンショット 2019-05-08 1.02.08.png

右のボタンをクリックすると左のメイン部分が出てきてタスクを入れることができます。
日付だったりとかカテゴリ分けといったコンテンツを作ってより実用的なものを目指していくつもりです。

##GWを通して得たこと

  • 忍耐力がついた

GW中はもくもく会に少し参加しただけでほぼ一人で開発してました。大学の同期でJavaScriptをやっている人はいないですし、(実は後期にやりますw)チャットアプリを作っている人は周りにはいなかったので常に一人で画面に向き合っていました。
確かに一人で質問できる人がいない環境も辛いですが、向き合ってみることで自分の実力や検索力やコードを読む力を得ることができたと思います。

  • 実際に動いているアプリケーションのすごさに気づいた

チャットアプリならLINEなど。Todoアプリも様々なアプリケーションが世の中にリリースされています。それを作っている人はすごいなーと思ったと同時に世に出ているアプリケーションのレベルの高さを知りました。今まで何気なく使っていたものですが開発者の気持ちが少しだけわかった気がします。

  • 実際にプロダクトを作ってアウトプットすることは最強(でもめっちゃキツイ)

ドットインストールや他のサービスや本などで理解してコードを書いていても自分で使ってみなきゃ本当のコードではない気がします。
知識として持っていても実際の現場やプロダクトでいかに使える武器が多いか。そのプロダクトや現場に適応することが重要だと再確認できました。
プロダクトを作ってLTやブログやQiitaにアウトプットすることによって、未来に自分や誰かが困ったときに助けになると思います。(自分も実際今回それを実感しました〜)
確かにキツイですが、「そのプロダクトを作ってみたい!という好奇心で突破できるような気がします。私は今回断念しましたが、断念したことによってこれを糧に半年後くらいには自分つけたい機能が実装できるように勉強していこうと思うことができました。

アウトプットすることによって作品は自分の財産になりますし、ポートフォリオとして使うこともできるし、いいことが多いです。
確かにキツイですが、自分の好きなものを作ることによってプロダクトをもっと作りたい!と思う方が勝ると自分は思いました。

また、プロダクトを作ったり、チャットアプリの方で進捗があったらまた投稿させていただきます。

##参考サイト
今回作る上で参考にしたサイトを少しご紹介します。

firebase

ここまでお読みいただきありがとうございました。

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?