日々是精進。(はてな館)

日々ネットで調べたり、付箋に書き留めたものをアップしています。子育てで中断しながらも、年に数回投稿しています。皆様の恩恵に感謝しつつ。

日々の記録を残しています。皆様の恩恵に感謝しつつ。

freeCodeCamp 記録その3 / 2年経ってもおわってません！

イラスト プログラミング 精進系 freeCodeCamp

みなさんこんにちは。はてなの記事、42本目になりました。久しぶりです！！

今回は、 freeCodeCamp 記録その2 の続きになります。 前回Blogに記事を書いてから、もう1年半が経っています....。

ここまでのみちのり

とはいえ、ほんとうに途中の何ヶ月かの中断を踏まえつつも、進めることは進めています。 とりあえず自分を褒めたい一心で、ここまでのCertificationの記録を挙げてみます。

初回のCertificationは除いて、4つ進みました。

20190523: JavaScript Algorithms and Data Structures Certification

20191007: Front End Libraries Certification

20200610: Data visualization Certification

20201003: APIs and Microservices Certification

JavaScript Algorithms and Data Structures (20190307 - 20190523)

いや、これはほんとうに難しかった！ freeCodeCampは簡単な練習課題を進めたあとは、「プロジェクト」と称した4つから5つのコーディング課題を提出することが、コース終了の認定条件になります。

もちろん、学習メインで認定書は不要であれば、どんどん次のコースに進んでも構いません。 ですが、実際に手を動かしてみると、わたしに関しては全くと言っていいほど何から手をだしていいかわかりませんでした。

IT歴20年近いのに恥ずかしい。でもほんとうにそうなんです。メイン関数の書き方もわすれちゃうんですよね。 あとは、アルゴリズムをきちんと学習しているわけではないので、書籍やサイト、アルゴリズムの動画などを見て調べながら悪戦苦闘.....。

from:akiko_pusu #freeCodeCamp - Twitter Search な条件で検索をすると、その苦労っぷりが出てきます。

提出したコード

コードは基本的にはGitHubに登録しています。 また、静的に動かせるものは、Netlify上にポートフォリオ的に公開しています。JavaScript Algorithms and Data Structuresの認定課題は、以下に上げています。

FCC: JavaScript Algorithms and Data Structures Projects

やってみて

おそらく、最初の「Responsive Web Design」も、練習課題自体はサクサクと進めると思います。 認定課題はデザインが入るので、サーバサイドやバックエンド専門の方には、あなどることなかれ、なかなか難しいものがあるかもしれません。

こちらのJavaScript Algorithms and Data Structuresは、「あああ、アルゴリズムって大事なんだああ！」というのを実感したコースですし、ここをクリアしたCamperさんたちは凄いと思います。

また、取り組んでみて思ったのが、「配列がとにかく処理の基本」ということ。 このあたりはどんな言語でも同じですね。 JavaScriptで課題を組んではいますが、「あれれ、配列を扱うのに、こんなにいろんな関数があるのね！」という驚きとともに、さもありなんと納得したのでした。

Front End Libraries (20190528 - 20191007)

じつはこのコースは、いきなりReactとかReduxが出てきて、なかなか悩ましい箇所でもありました。 JavaScriptのフレームワークを使うため、シンプルなJavaScriptとHTMLとCSSでh完結せず、Node.jsを使ってパッケージを追加したりして環境を整えないと進めにくい....。

このコースに関しては、認定課題に関しては、環境構築を断念して、オンラインの codepen.io を使いました。 また、デザインも伴っての課題のため、そもそもどんなふうにHTMLをコーディングすればいいかも難儀しました。

最初のWeb Designのコース、そしてCSSのグリッドデザインあたりが、ここで効いてきます。 終了までに途切れ途切れで、かなり時間のかかったコースです。

提出したコード

これもGitHubに載せています。また、CodePen上のものを提出したり、Netlifyに上げたものを提出したり。

以下は、最後の課題の「Pomodoro Clock」になります。

freeCodeCamp: Front End Libraries Projects - project5 - React Pomodoro Clock

やってみて

（今思えばどれも）難しいのですが、画面実装も含めてかなり実践的な課題だったので、やってみたあとの達成感は「作品作った！」という気がしました。

Data visualization (20191008 - 20200610)

こちらはコース完了するまでに半年以上！！！ そもそもD3.jsを初めてるかうことと、どうやらバージョンが大きく変わったため、参考にしたソースが動かなかったりで、非常に難儀したコースでした。

今もう一回やれ、と言われても自信がありません。たぶんD3.jsではないライブラリを使いたいです....。

コースの前半は、練習課題なのであまり困らずサクサクすすみましたが、11月から中断。 その後、COVID-19の件もあり、自宅で過ごす生活が続いたので、意を決して放置したコースを再開しました。

提出したコード

これもGitHubに載せています。D3.jsは完全にフロントエンドでブラウザに描画をさせる技術なので、こちらもNetlify上のポートフォリオに載せています。

Data Visualization Projects - Visualize Data with a Treemap Diagram

Data Visualization Projects - Visualize Data with a Choropleth Map

やってみて

やってみて、「こんなものも描画できるのか！！！！」というのがまず驚きでした。 合衆国全域を描画できるとか、本当に感激.....。

そして、D3.jsのライブラリが生成するHTML（SVG）のコードを眺めると、ほんとうに細かいことの積み上げて出来ていて、それを正しく処理するのがプログラムなんだということがよく分かったコースでした。

APIs and Microservices (2020719 - 20201003)

この章からはサーバサイドの技術になります。Node.jsを使ってのコース。 個人的にはサーバサイドエンジニアのカテゴリでお仕事をしていますが、Node.js (+JavaScript) できっちり書いていくのは初めてです。

これはこれで進めていて楽しいコースでしたが、「非同期処理」の扱いに大変頭を悩ませたコースでした。 結果的には、「やって良かった！！」というコースです。

なぜなら、あまり馴染みのなかった分野に触れることができたので。

  • Node.js / Express
  • MongoDB
  • 非同期処理

とくにMongoDBは、いわゆるNon-SQLなデータベースではありますが、一定のクエリを投げてデータを抽出するという点では、RDBと同じです。書き方は違うけれども、クエリの条件式を渡す際、SQLインジェクションと同じく適切でない文字列を渡すと全件検索や削除といった危険性がある。

これは、やってみての「なるほど！」感でした。 練習課題ではそこまで意識した内容にはなっていませんが、認定課題に取り組んでいる際に、「あれ、これエスケープしとかないといけないんじゃないかな？」という思いを巡らせて、結果的にいろいろライブラリを探したり方法を調べたり、ということも行いました。

提出したコード

これもGitHubに載せています。実際のfreeCodeCampでのテストは、どうやら移行期間中らしく提出さえすれば通ってしまうものもありました。

以下は一部になります。

github.com

やってみて

サーバサイド、APIの実装だったので、これはとても楽しい！ また、プロジェクトのシナリオもIN/OUTのみを意識してのコーディングなので、お仕事に近い感覚がありました。

なお、特に驚いたのが、提出課題をどうやってfreeCodeCamp側がテストするかといった点。

  • 実装したAPIを提供するRepl.io のURLを入力してSubmitを押す
  • ブラウザがテスト用のfreeCodeCampからのJavaScriptを読み込み、ブラウザ自身が提出したサイトにアクセスしてIN / OUTが正しいかをチェックする

こんな流れです。

freeCodeCampのURLを開いている画面で、提出したサイトのAPIをAjaxで叩いてチェックするということを行うので、サイトをまたがってのJavaScriptの実行になります。

このため、提出したサイト側に、CORSの設定が必要になります。

やくにたっているのかな？

もっと早く進めたり、もっと実用的な認定資格（ベンダー資格や国家資格）などに時間を充てたほうがいい、と思われるかもしれません。

ですが、今はその時ではない。 もうしばらく子どもたちのこともあるので、自分のために捻出できる時間と金銭には限りがあります。

好きなペースで進めながらも、なにか一つ達成しておきたいという気持ちから、とにかく続けています。

そして、以前書いた最初のfreeCodeCampに関する記事の中で、51歳からはじめてGoogle Developers Expertになられた方のお話がとても印象に残っています。 そこまではいかなくとも、近い世界を見てみたい、そんな気持ちも持ち続けています。

思い出しながらの取り組みですが、実のところは「役に立っている」というのは間違いありません。 仕事の中でコーディングが発生するとき、今まであまり意識できていなかったフロントエンド側の工夫、表現方法に関して一歩進んだ考え方ができるようになっています。

ここ2年の取り組みで、個人リポジトリでのコミットの中心は、サーバサイドではなくフロントエンドでした。 間違いなく、それまではわたし自身思い付けなかった方法、手を出したくても出来なかったことに、近づけているように思います。

つぎにすすみます！

ということで、大雑把ですが「やってますよ！」な記録でした。 後半に出てきた、テストの仕組みも次の Quality Assurance のコースで出てくるかもしれないので、とても楽しみです。

また、年末年始くらいには、その先のPythonのコースです。これも楽しみ！