私は会社勤めをやめてフリーランスになりたいと思っていて、そのためにウェブカツというプログラミングスクールの女性割引を利用してプログラミングを学習しています。
ウェブカツの女性割引を利用する場合は「毎日の進捗をツイートする」「15日と月末にブログ記事を書く」というのが条件になっています。プログラミングスクールに関する記事にはアフィリエイト報酬を得るための記事が多いのですが、ウェブカツの女性割引適用者はアフィリエイト対象外なのでこの記事はアフィリエイト記事ではありません。
ウェブカツを始めたのは2019年3月19日なので7ヶ月近くが経ちました。そして、WEBサービス部より難しいと噂のjs上級を終えました！
js上級を終えるまでにかかった時間は「40時間39分」
WEBサービス部は「41時間12分」だったのでほぼ同じくらいの時間がかかっています。
WEBサービス部の頃は「変数ってなに？」というようなプログラミング超初級者でした。
それに比べればプログラミングスキルは上がっていると思うのですが、それでも同じくらいの時間がかかるとは、、、最難関と言われるのは納得です。
確かに難しかったのですが、WEBサービス部の時は「何が分からないのか分からない。いったいどうしたらいいんだろう。」と途方に暮れる感覚がありましたが、js上級では「む、難しい。。。でも必死にやれば理解できそう！」と思えたので、WEBサービス部よりは楽しく勉強することができました！
今回のブログではjs上級でどういう学習をしていたのか、Backbone.jsの宿題のことを書きたいと思います！
js上級の勉強方法
js上級の勉強方法ですが、前回のブログで書いた「Chromeのデベロッパーツールのステップ実行機能」を使いまくりました！！（前回のブログはこちら）
Step1.動画を見る
Step2.サンプルコードを自分なりの言葉で解説する
Step3.Chromeのデベロッパーツールのステップ実行機能でステップ実行しながらどのタイミングでどの関数にどんな値が入っているのかを目で確認する
という3stepで勉強していました。
ただし、この方法が非常に有用だったのはBackbone.jsまでです。
React.jsになると書いているソースコードと実行されるコンパイル後のソースコードがかなり違うので、Chromeのデベロッパーツールのステップ実行機能はあまり参考にはならなかったです。。。
React.jsは考え方とか全体の処理をざっくりつかめればOKのようなので、Chromeのデベロッパーツールのステップ実行機能でじっくり学ぶ、、というより全体像や処理の流れをつかむことに集中しました。
最後のVue.jsはびっくりするくらい簡単に書けるので、React.jsをやった後だと「え！そんなんでいいの？」と思うくらいでした。
ウェブカツの講座では基本的な説明だけだったので、逆にそう感じたのかもしれません。
難しいReact.jsは丁寧に解説。
学習コストが低いVue.jsは基本だけ解説というように区別されているように感じました！
React.jsは役割ごとにソースコードが整理されていて、一つのファイルのコード量が少ないので大規模なシステムや大人数の開発だと本領を発揮するんだろうなということが想像できました。
その分、初学者にはなかなか習得が難しいのでウェブカツの動画で学べてすごくよかったと思います。
Vue.jsは書籍や日本語ドキュメントも豊富なので基本だけウェブカツで学べればあとは独学でも習得できそうな気がします。
js上級 backbone.jsの宿題の進め方
js上級ではbackbone.jsの宿題をとにかく頑張りました！
そして頑張ったことでほんの少しだけですが、自分でプログラムを作る感覚を感じることができました。
backbone.jsの宿題はタスクの検索機能を実装するというものです。
私は以下の手順でこの宿題をやっていきました。
最初に必要な機能を細かく書き出す
めっちゃざっくりしですが、最初はこんな感じで書き出しました。
1.検索フォームにkeyupしたタイミングで
2.検索フォームに入力された文字を取得
3.タスクを全部取得
4.検索文字とタスクを比較
5.一致したものだけ表示
実装できそうなやり方に変更する
ただ、この方法だと「5.一致したものだけ表示」を実装する方法がどーーーしても思いつかず。
なので、
1.検索フォームにkeyupしたタイミングで
2.検索フォームに入力された文字を取得
3.タスクを全部取得
4.検索文字とタスクを比較
5.一致しなかったタスクにフラグを立てる
6.一致していないものを非表示にする
という方法に変更することにしました！
一番難しそうな機能をさらに単純化して実装してみる
とはいえこちらの方法も1〜4はサンプルコードでなんとなくできそうな気がしていたのですが「5.一致しなかったタスクにフラグを立てる」と「6.一致していないものを非表示にする」が難しそうだったので、まずはこれをどう実装するかを考えました。
最初は「5.一致しなかったタスクにフラグを立てる」が、見当もつかなかったのでさらに簡単な機能で考えることにして、
「一致、不一致にかかわらずとりあえず検索フォームからkeyupしたら全てのタスクにフラグを立てる」
という機能を実装してみることにしました。
これについてはサンプルのコードを参考にすることで無事「Keyupしたら全てのタスクにフラグを立てる」はできました。
単純な機能から少しずつ実装したい機能に近づける
そこから「2.検索したフォームに入力された文字を取得」「3.タスクを全部取得」「4.検索文字とタスクを比較」をサンプルコードをもう一度じっくりみて、動画も見返して、ググってでなんとか追加で実装して、最終的に1〜5の機能を実装することができました！
backbone.jsの宿題で得たもの
振り返ってみるとこの過程って普段でもよくやっていているんですよね。
「目標設定」
「現在の状況の確認」
「目標にたどり着くまでのタスクを洗い出し」
「一歩が踏み出せる単位までタスクを簡単にして細分化する」という
目標達成のための基本的な手法がそのまま活かせるということ に気づきました。
そのために書くのが日本語なのかプログラミング言語なのかという違いはありますが、同じような手法でプログラミングができるというのが大きな気づきでした。
ウェブカツでプログラミングを学んでも何もないところからどうやって自作サービスを作っていくのかがわからなかったのですが、少しだけ道が見えたようは気がします。
ちなみにbackbone.jsの宿題の最後の「6.一致していないものを非表示にする」はcssでdisplay:noneを使うことで実装したので、適切な方法ではないと思っています。 backbone.jsの機能を使って実装する方法がありそうな気がしています。
プログラミングに正解はないものだと思っていますが、こういう時に就職していれば先輩に相談もできるし、レビューもしてもらえるから短期間で成長できるんだろうなとふと思いました。
うちの会社でも新人さんが研修を終えて実務をはじめましたが、先輩社員が隣の席にいて常にアドバイスをもらいながらプログラミングしている姿がとてもうらやましいです。
転職できれば給料をもらいながら毎日プログラミングの勉強ができるという環境になるんですよね。
短期間でウェブカツを終えて、転職するのが一番の近道！という事実が身に染みました。。。。
そうできれば一番いいんですけどね。。ほんと。
なかなかそうも行かないのが、辛いところですが、諦めずにコツコツと頑張ります！！
コメント