freeCodeCamp 記録その2: JavaScriptまだまだやってます。
みなさんこんにちは。はてなの記事 26件めになります。
今回は、freeCodeCampの取り組みの続きです。
3月はじめに、やっと最初の "Responsive Web Design Certification" をクリアし、次の "Javascript Algorithms And Data Structures Certification" に着手となりました。
ですが、1ヶ月以上経過しているのですが、まだ終わっていません！
最初の3章分がやっと終わったところです...。
あと残りは6章、それからCertificationのためのプロジェクト（演習課題）が5つなので、このペースで行くとまだ2ヶ月はかかりそう？*1
それでも、「やってます！」と公言している以上はがんばって続けます！
3ヶ月以上、続編が滞ったらお察しくださいませ...。
はじめに：コツコツのやりかた
前回の記事のおさらいになりますが、こんな感じで進めています。
- 基本はブラウザでfreeCodeCampのレッスンをすすめる
- 英単語やJavaScriptその他の仕様でわからないことは調べて、Scrapboxに書き出す（基本1レッスンにつき4、5行のメモと課題の解答をメモ）
- 特に覚えておきたいものや、図を描かないと理解できないものはノートに書く
- モチベーションを下げないために、時々進捗をつぶやく（momentにまとめ）
今回のJavaScriptの学習ですが、実のところ「JavaScriptまったく初めて！」ではありません。プログラミングもそれなりに経験はあります。
なので、個人的にはもうちょっと早く進むかなぁと思っていたのですが、意外に時間がかかっております。
Basic JavaScript
まずは基本から入ったのですが、このBasic JavaScriptは107ステップほどあって、基本的なところでそこまでつまづきはしなかったものの、とにかくなかなか終わらない...。
3/4から始めて、終わったのが3/23でした...。
I’m keeping self-paced learning of #freeCodeCamp. Today 27th section was completed of Basic JavaScript chapter.
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) March 10, 2019
I hope to finish this chapter by the mid of this month and start to ES6 chapter. 😊 pic.twitter.com/3Kr2DRpUa9
内容は、以下のようなものです。
- データ型基本（undefined, null, boolean, string, symbol, number, and object）
- 算術演算子、論理演算子
- 変数の定義、代入、文字列変数の操作、型変換
- 配列の定義、配列を扱う関数
- オブジェクトの定義、オブジェクトを扱う関数
- 条件文(if, else, case文）と比較演算子
- ループ（for, while)
おさらいをしつつも、ちゃんと知らなかったのは、「文字列の変数はimmutable」「parseInt() の第二引数」をはじめ、いくつかありました。
3/16, Finished 33 to 45 of “Basic JavaScript”. We can use bracket notation to find Nth element both string and array. But string value is immutable. In other words, individual characters of a string literal cannot be changed ✍️#freeCodeCamp #sketchnotes pic.twitter.com/UONf34AeQ4
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) March 16, 2019
MDNとブラウザの開発者ツールを使って試す、という流れになってきました。
ES6
ES6に入ったのは、3/24からです。こちらは全部で26ステップで、最初と比べるとだいぶ数は減っていますが、終わったのが4/2。
I’m keeping to learn ES6 since last week. Run tiny script on chrome devtool, refer to MDN to support my understanding. I’ve never used Arrow function syntax🤫#freeCodeCamp Challenge / ES6 (1 - ) - akiko-memo https://t.co/f50ZQHm8Wv
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) March 27, 2019
関数や変数の定義、スコープの定義などを確認しながら進めるため、同じくScrapboxへのメモと、開発者ツールでの確認が中心です。
- let, const, 変数のスコープ
- アロー関数での記載方法
- クラスの定義
- 配列、オブジェクトへの分割代入（関数の戻りを代入するのに便利）
- Rest演算子（関数への引数を定義するのに便利）
などなど...。クラスや分割代入、動的パラメータについては、rubyで少し馴染みがあるので、「これが使えるんだ！」というあたりが嬉しいと感じた点です。
なお、このコンテンツが作られた当時は、まだブラウザの対応が完全ではなかったのかもしれませんが、概ねブラウザの開発者ツールでそのままES6の文法で記載して動かすことができています。
この章に関しては、ほとんどブラウザだけで完結できました。
Completed 1 to 21 steps of #freeCodeCamp JavaScript: ES6 chapter.
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) March 30, 2019
Learning while comparing with other languages, such as Ruby or Java, is fun for me :) Also I found ES6's video tutorials at https://t.co/PNEdrUmQOY and helpful for me!#scrimba #100DaysOfCode pic.twitter.com/fHbmbbmVrw
実は、「アロー関数」の書き方もあんまりよく理解しておらず、さすがにここはじっくり取り組んでなんとか「読めるかもしれない」ところまではたどり着きました。
（でも、コールバックの嵐になったりすると、パッと見では処理がどうなっているかわかりません...）
エディタを使っての作業
さて、ES6に関しては、ほぼ最新のブラウザならそのまま動かせそうですが、モジュールのインポート、エクスポートの確認をするためには、エディタでコードを作成し、実際に動かして確認したくなります。
ということで、VisualStudio Code (VS Code) を使って記載してみましたが...。
VS Codeだとデバッグさせようとすると、ES6で書いたものをES5にトランスコンパイル（変換）して実行するという流れになるので、トランスコンパイルのためにBabelというツールが必要。
また、Babel利用のためにNode.jsが必要になったり、package.jsonを配置してコンパイルのタスクを書いたりと、意外といろんなことが必要です。
この辺りは、いままですでに設定ファイルが置かれた状態のリポジトリに参加することが多くて、自分で1から配置ということがなかったので、あらためて「なるほど」と思いました。
Finished ES6. Here is my reflection on learning this chapter.
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) April 4, 2019
I understand latest browsers support generally ES6's syntax. So I wrote simple JS working on my Chrome :) But new specifications are finalized every year and it is difficult to catch up😆#freeCodeCamp #100DaysOfCode pic.twitter.com/WPZ7Yess0C
さて、なんだかんだでブラウザでも試し、エディタでもコードを記載して確認。
こちらに関しては、一部を学習用のリポジトリに登録してみました。
Regular Expressions
正規表現については、手書きノートは無しで、ブラウザでの確認とScrapboxへのメモ書きのみ。
他の言語、シェルでも正規表現は扱ったことがあるので、どちらかというとおさらい的に淡々と進めました。（でも32ステップもあるので、やはり時間がかかりました）
おさらいというより、「あら、そうなんだ！」と認識を新たにしたのは、以下のもの。
- greedy matchとlazy match / 欲張りマッチ（最長マッチ）と最短マッチ
- Positive and Negative Lookahead / 先読みと否定先読み
ちなみに、英語の解説だけだと意味がよくわからず、MDNの日本語を見る -> 英語版を見る -> freeCodeCampの説明文と照らし合わせるといったことをしています。
こちらも各ステップをクリアするために、テストコードを修正してパスしないと進めないのですが、今回は何度かうまくテストを通過できないことが多く、ちょこちょことヒントも見て、コンソールでも確認をして進めています...。
ここまでの感想
HTML / CSSよりは、スクリプトになってきたほうが楽しいのですが、まだまだ先は長い！5月の連休時に、まとまった時間が取れればなあと思っています。
なお、こつこつと進めていますが、時々つぶやくハッシュタグを通して、同じように、あるいは先を進んでいる方々のつぶやきも目にすることで、なんとかモチベーションを保てています。
それ以外にも、実はfreeCodeCampでは基本のCertificationのコース以外に、動画やブログ記事がたくさんあり、むしろそちらのほうがサーバサイドやAI、インフラなど幅広い範囲に渡っています。
（オンラインの学習コースは、概ねブラウザで完結できるからということで、フロントエンドの内容を取り扱っているのですね）
なお、今回も含めて学習の振り返りをしてみると、「あれれ？こんなのやったんだっけ？」という状態になっていることにも驚愕します...。
つまり、すっかり忘れてしまっているのですね。
日常的に触れるか、振り返りと復習の機会がないといけないなとも感じています。
おまけ / Scrimbaを初めて知りました！！
ところで、JavaScriptのチャレンジコースに入ると、動画が添えられていないので、発音とかどうするのがいいのかな...と思っておりました。（HTMLコースには全編動画もあったので）
ES6の章に入ってしばらくして、Scrimba というサイトにfreeCodeCampのレッスンの動画が掲載されていることを発見！
...というより、freeCodeCampの動画が、Scrimbaの機能を使って作成、提供されているのですね。
実際に、freeCodeCampの動画は動画といいつつ画面中のエディタはいじれるし、ミニブラウザのプレビューも変更が適用されます。
これには非常にびっくりでしたし、「一体どうやって作っているのだろう？」と不思議でなりませんでした。
その疑問が解決できました。
Scrimbaについては、下記の記事で紹介してくださっているので、こちらを見て納得。
ご紹介ありがとうございます！！（しかも2年近く前...）
Scrimbaは、オンラインでスクリーンキャストを作成・配信できるプラットフォームです。ただし、現在のところはクライアントサイドで稼働できる言語・内容のみの対応です。
どうやって作るかといったあたりは、こちらも動画を見て確認。
いまのところはわたしが発信できそうなものがないのですが、できれば試してみたい！と思っています。
いやーほんとに、世の中すごいと感じる日々です....。
*1:100DaysOfCode どころではなさそうです...。
