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

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

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

freeCodeCampを続けています。

イラスト 精進系 英語学習 プログラミング freeCodeCamp

みなさんこんにちは。はてなの記事 24件めになります。

今回は、昨年晩秋から続けている、freeCodeCamp についてのお話になります。
実のところ、英文読み切れていないのであまり詳しいことを知らないで進めているところもあります。
ですから、同じ様に日本、さらに世界中で学習をされている皆さんの認識とはズレてしまっているところがあるかもしれません。

でも、なぜ始めたか、何を思ってやっているのか、どうなったかなどを書き留めておこうと思います。

f:id:akiko-pusu:20190302145114j:plain

freeCodeCampの最初のコースが終わりました！

freeCodeCampって？

freeCodeCampは、その名の通り無料でWebプログラミングを学べるオンラインサービスです。サービス提供の舞台はアメリカですが、世界中の方が学習をされています。

www.freecodecamp.org

もちろん、日本にも基本は無料（高度なカリキュラムや学習管理の付加サービスを利用する場合に有料）といったオンライン学習サービスはたくさんありますね！

わたしも、しばらくの期間ドッドインストール様にお世話になったことがあります。
本当に良い時代だなあと思う次第です。

きっかけは Mediumの記事

もともとはfreeCodeCampを目指したわけではなく、たまたまDockerのMedium上の記事を見たことがきっかけです。

記事が面白かったので、ついつい絵を書いてみたりしたのですが、そのあと記事の作者の ryanwhocodes さんのプロフィールを拝見して、freeCodeCampのことを知りました。

とても素敵なJourneyを読んだ

そのまま、ryanwhocodesさんや、freeCodeCampからの記事をいくつか眺めるように。
その中で、目にとまったのが以下の記事でした。

3年でGoogle Developers ExpertになったというJenniferさんのストーリーでした。

Lotus Notesの開発者としての長いキャリアの後、51歳で退職し、2014年に1ドルのJavaScriptの本を買ったところから、彼女の旅が始まります。

medium.freecodecamp.org

もちろん、freeCodeCampの基本のカリキュラムだけではなく、ご自身のIT業界のご経験もベースにはなっているでしょう。

それでも、モチベーションを強く持ち、学習をし直し、実際に様々なコミュニティへの貢献活動を広げてという結果は、とても素晴らしいなと思いました。

そこから、freeCodeCampに興味を持つようになりました。

非常に惹かれたのは、Jenniferさんのように別業界での長いキャリアから飛び込んだ方、教職からチェンジした方、子育てが落ち着いてから学び直して開発者への道を進んだ方のお話が多かったことです。

かく言うわたしも40代後半。正直、学生さんや若い方のような時間の使い方はできません。

その中でどう時間を作り、モチベーションを維持し、学んでいくか、年齢を考慮しつつもどう仕事に繋げていけるか。そういうこともfreeCodeCampの中で発信されていました。

なぜいまさらBasic HTMLから？

さて、なぜ数あるオンライン学習サービスから、こちらを選んだのか。
しかもWebプログラミングなので、もしかすると「なぜ今さら？」と思われた方もいらっしゃるかもしれません。

わたしはそこそこIT業界は長く、個人リポジトリも無いわけではないので、もちろん自分自身でも、「基本的なことは学ばなくてもいいのでは？もっと高度なものを学ぶべきじゃない？」ということも少なからず考えました。

ですが、いざカリキュラムや内容を眺めてみると、時代はもうHTML5。

25年以上も前に覚えたHTMLとは、かなり違っています。

様々なデバイスに対応できるように意味をもったタグが提供されており、アクセシビリティを考慮したサイトを届けられるようになっています。サーバサイドで頑張らなくても、フロントでできることも非常に増えており、取り残された感を持ちました。

また、英語の学習も兼ねて取り組みたいという気持ちもあり、とにかく初めてみることにしました。

はじめてみた！

取り組み始めたのは、11月の後半から。

本当にオンラインで、簡単なカリキュラムを使って進めていく形です。

  • Webのテキストの解説を読む
  • 設問があるので、その条件を満たす様にHTMLやCSSを入力していく
    同じ画面に入力フォームがあります！
  • 入力し終わったら、確認用のボタンを押す
  • 条件を満たしているかどうかチェックが走り、成功なら次に進める、失敗ならエラーの箇所が表示される
  • 1分から1分半くらいの解説動画も用意されている

概ね1つのコースを300時間と見積もっています。もちろん個人差や既にある程度の知識がある方はサクサク進んでいたり、JavaScriptやReactのコースも並行して進めていらっしゃいます。*1

さて、基本的には最初はHTMLから、それもHTML5の部分ではなく初歩の初歩からなのですが、なにしろ英語を読みながらなので、「これってなんのこと？」的なところで脱線することもしばしば。

これはこれで楽しい経験ではありました。
また、解説動画も短めなのと、意外と聞き取りやすかったこともあり、助かりました

エディタの入力画面を表示していても、解説者さんが入力間違いをしたりしているのを、あまり編集せずにそのまま流しているところも、親しみやすかったです。

HTMLやCSSを書き進めるだけなのにTDDっぽい！

カリキュラムを進めていて、特に気に入ったのが、HTMLやCSSを入力するだけでもTDD (テスト駆動型開発) っぽい形で確認ができることでした。

 グリーンになるとテンションが上がります。それが、とくにテスト用のソースコードをインストールすることなく、ブラウザで実施できるというのは非常に気持ち良い体験でした。

実は、freeCodeCampのカリキュラムや、ブラウザでのテストを支援するライブラリはGitHubでも公開されています。

その気になれば、ご自身のローカル環境でも立ち上げることができるそうです。*2

github.com

github.com

freeCodeCampが大切にしてることの１つとして、「通信環境に恵まれていない場所や地域、スマホのほうな制限されたデバイスを使っている状況でも、自分のペースで学びたい方が学べる環境を提供できること」ということがあります。

カリキュラムに関しては、フロントの技術で実装できるものが大部分を占めています。

アメリカだけではなく、成長し伸びていこうとしている世界中の国で、制限された環境でも学べるように、ラズパイのような小さな機器にセットアップして学習教材として配布したいといったようなことも、念頭に置かれているようです。

こつこつ記録はScrapboxで

さて、最初のうちは復習的な内容が多かったので、英語につまりながらも比較的スムーズに進めることができました。

ペースとしては、仕事家事が終わって、こどもが寝てからの30分から1時間。

内容が進むにつれて、いよいよHTML5やCSSに入ってくるようになってからは、1週間に1日（週末）の2時間くらいしか取れないことも増えてきました。

こうなるとだんだんPCを立ち上げる気分も重くなります....。

これではいけないと思い、Twitterで「freeCodeCampやってます！」と呟いたり、Scrapboxでメモを取って書き出すようにしてみました。
（ようは、途中で終わったら恥ずかしいから頑張る！という仕掛けです）

f:id:akiko-pusu:20190302152452p:plain

Scrapboxを使って記録を取るようにしました！

手書きメモはモーメントで

freeCodeCampに関しては、まとまった単位で進むと、Twitterでタグをつけて呟くようにしました。
また、こちらに関しては、同じく取り組んでいる方々が海外の方が中心なことと、自分の英語の学習も兼ねて、怪しいながら英語で呟くようにしました。

さらに、Scrapboxへの書き出しのほか、CSSに入ってきてからは構造を把握するために手書きのメモを取ることも増えてきたので、そちらも時折つぶやきに混ぜるようにしてみました。

 幸い、おなじように頑張っていらっしゃる方から反応をいただくこともあり、これはこれで楽しく進めることができました。

このあたりの一連の呟きは、Twitterのモーメントにまとめることにしています。
（現在も更新中です！）

twitter.com

Certification用の課題にチャレンジしはじめたけど....

年末に一旦ペースを落としてからお正月中に巻き返し。
この時期はCSS Grid, FlexBox の内容に入っていき、なかなか理解しにくい所になってきました。

カリキュラムの解説だけでは追いつかないので、MDNを見て確認するといったことも増えてきています。それまではフロント系は適当にかいつまんで検索して済ませることが多かったので、それを思うと（恥ずかしながら）偉い進歩だ...と思いました。

さて、1月の半ばになり、基本のカリキュラムが完了。

いよいよ、Certificationを得るべく、５つの課題（プロジェクト）に取り組りかかりました。

プロジェクトの課題は、このような感じです。

  • 各課題でテーマに沿ったシングルページを作成する。
  • どんな技術を使っても構わないけれど、できればまだなJSは使わず、HTMLとCSSで進めること
  • 各課題で満たすべき基準が12〜15項目くらいあるので、HTMLやCSSをそれに従ってコーディングしつつ進める
  • サンプルのページが codepen.io 提供されているので、それを見ながらだったり、真似てもOK
  • 可能なら、テストスクリプトを使って、基準が満たされているかを確認
  • 出来上がったら、各課題のページに作成したページのURLを登録するフォームがあるので、そこにURLを記入して提出
  • 提出したら次のプロジェクト（課題に進む）

こちらも、やはりTDDっぽく進める形になりました。
いったんScrapboxにチェック項目を書き出して、なにをしないといけないのか確認。

テストが通るようにタグだけとか、最低限のテキストだけを保持したHTMLを記述し、1つ1つテストが通るのを確認してから、実際のコンテンツを埋めていきます。

ただ、このコンテンツ作成がなかなか難儀してしまい、いくつかは結果的にサンプルのソースコードとほぼ同じものを提出したりしました...。
（もちろん、1つずつテストを通していったんテストをクリアするものを書いてから、サンプルの内容に近づけることをしています）

 本当は、テーマに沿って自分自身で工夫したページを作りたかったのですが、テストを満たすHTMLやCSSは書けても、デザイン的に美しいかどうかは、また別次元。

思った以上に時間のかかった課題でした。

なんだかんだで３ヶ月かかってしまいました....

こんな形で、やっと5つめの課題が終わったのが、2月の末！
なんとか憧れの、「Today I got my first certification from #freeCodeCamp.」を呟くことができました！

おなじようにつぶやいていて、次々とCertificationをアップするみなさんにとても憧れていたので、本当に嬉しかったです....。

また、せっかくの課題は、ソースコードをGitHub上にあげて、コンテンツをNetlifyにデプロイして公開してみることにしました。

こちらも、非常に簡単にデプロイできるという現在の技術に驚きましたし、同じ様につとコードを走らせることができて感激したのはいうまでもありません。

こそっと、こちらに置いてあります！

これで学んだもの

途中から 100DaysOfCode のタグもまぜてつぶやくようになっていましたが、たしかに始めてから100日くらいかかっての1コース終了となりました...。

それでも、なんとか断念せずに、1つでも通せて嬉しい限りです。

さて、この経験で、実際にフロントエンド（マークアップがメイン）のお仕事のレベルに達しているかというと非常に怪しいです。
課題に入ったときに非常に難儀したように、デザインのセンスが無かったり、この表現はどう構成すればいいのかといった案が、まだまだ出てきません。

そんなことも含めて、以下のような気づきや学びがありました。

1つめ、Webサイトのアクセシビリティに対する考え方が変わりました。

とにかくこれは一番大きかったかもしれません。あまりうまく言えませんが...。

  • 制限された環境、特定のデバイスを通してでないと情報に到達できない場合がある。
  • そういう場合にも、広く同じ様に情報を届けるためにはアクセシビリティを考慮した作りにすること。
  • 逆に、ノイズになるような情報が入らないように、HTMLの属性やタグの意味を理解して利用すること。
  • 色にも意味があり、さらに視覚的に判定しやすいコントラストも求められること。

カリキュラム中のこの一文が、非常に印象に残っています。

"Websites should be open and accessible to everyone, regardless of a user's abilities or resources."

2つめは、CSSでできることが本当に多いということ。

こちらも、アニメーション的な動作、図形の描画といったところを、駆け足でしたが通して学ぶことができました。

3つめは、Gridデザインの考え方。

簡単ですが書き出してみて、「本当に方眼紙の上にオブジェクト、要素を配置するんだな！」というのを実感しました。

 HTMLのテーブルで頑張るのではなく、ブラウザの技術がこういった構造を表現できるまでに進化したのだなということを実感しています。

また、こうした考え方を踏まえてページを構成するため、空間的な認識力のようなものも求められるなとつくづく感じました。

4つめは、Web上での学習を支える技術の凄さです。

今回、課題をクリアするのに codepen.io を使いました。こちらも初めてですし、完成した課題は Netlify を使ってデプロイしたりもしました。

なにより学習のサービスサイト自体も、ほんとうにブラウザだけで学習が進められることに驚いています。

実務では触れていなかったのですが、JAMstackという言葉を、この学習を通して初めて知りました。

これからのこと

さて、次はJavaScriptの基本に入ります。日本語で進めていたら、もっと早く進んでいたかもしれませんが、そこはさておき、これからもっとプログラミングらしいところに入っていくので非常に楽しみです！

引き続き、メモをとったり、つぶやいたりして進めようと思っています。

また、freeCodeCampのカリキュラムは基本的なもので、実際はそこからさらにたくさんのブログ記事、動画、フォーラムでのやりとりなどが広がっています。
分野もフロントエンドだけでなく、もちろんインフラ、サーバサイド言語、アプリ開発まであり、とてもではないですがわたしのかじったのは、ほんの少しです。

そちらにもチャレンジしていきたいと思います！

*1:TwitterのfreeCodeCampタグを見ると、みなさん進捗をシェアしているのがわかります。

*2:わたしは、ちょっとうまくいかなかったので、わたしはオンラインで進めています。