すずかのプログラミング勉強記

元教員からエンジニアを目指す、プログラミング勉強記録です。

フィヨルドブートキャンプでプログラミングの勉強をする【9ヶ月目】

2023年が終わりました。昨年お世話になった皆さま・ブログを見てくださった皆さま、ありがとうございました🙏

フィヨルドブートキャンプ(以下FBC)で勉強して9ヶ月目が終わったので、2024年最初の振り返りを書きます!


12月の過ごし方

12月はクリスマスをお祝いして、年末年始をゆっくり過ごし、充実した日々を過ごしました。

年明けには一泊二日で帰省しました。実家で飼っている猫ともたくさん遊べて、一年分の癒しを補充できました💓

猫の写真


勉強の状況

12/4~1/3で修了したプラクティスは4つでした。

1ヶ月間で修了したプラクティス一覧

SWRを使ってAPIをコールする

Reactを学ぶ

npm パッケージの作成

クラス(JavaScript)

後述しますが、「Reactを学ぶ」というプラクティスで約2週間止まっていました。


修了したプラクティス

「年内にチーム開発に入る」という計画は達成できませんでしたが、今月半ばには到達できそうです。


勉強時間

学習時間は9ヶ月間累計(276日)で1725時間でした。

学習時間

今月だけの勉強時間で見ると、約180時間で、先月より20時間減りました。

年末年始はたくさん遊んだので、勉強時間がいつもの半分以下になったのが原因です😅
後悔はしていませんが、1月はもっと頑張りたいです。


できるようになったこと

  • 自作のnpmをリリースできた
    「gakkou-search」というコマンドラインアプリを作り、npmのパッケージサイトにリリースしました。
    今までやってきた課題は「指定のものを要件通り作る」ことが多く、作るものから考えるのは初めてでした。考えたものを形にするのが面白くて、今までで一番楽しかったです✨(成果物についての記事を今月中に書く予定です)
  • Reactで簡単なアプリを作れるようになった
    Create React Appを使って、SPAのメモアプリを作りました。
    コンポーネントの分割の仕方やイベントハンドラの書き方・レンダリングなどに悉く引っかかり、非常に時間がかかりました。提出までも大変でしたが、まだレビュー中なので、引き続き理解しきれていないところを復習します!


苦労したこと

「React公式ドキュメント『Reactを学ぶ』を全て読む」という課題が大変でした。

最初に見た時は、序盤でわからなくなったため一度中断して、自宅にあった「React.js & Next.js超入門」という入門書を読みました。JSX・コンポーネント・ステートの基礎的な内容を理解してから「Reactを学ぶ」に再挑戦したのですが、それでも私にとっては難しかったです😅

しんどかったので、「分報」(個人が思っていることを書ける日記のようなもの)に愚痴を書いていました。皆さんに「わかる」リアクションを貰えて、気持ちが楽になりました。 分報の画面 分報の画面

加えて先に進んでいる受講生・卒業生の方々に、「ここは理解しておいた方がいい」「ここは最初自分も理解できなかった」というアドバイスをいただき、大変助かりました🙏

一章読むのに何時間もかかってしまいましたが、どうにか読み終えることができました。

イベント参加など

  • 「角谷トーク」に現地参加
    FBC顧問の角谷信太郎さんによるトークイベントに参加しました。
    お話は難しかったけれど、「パソコンカタカタより広い範囲がエンジニアの仕事になってる」「人間同士の会話をしているチームはうまくいく」など、刺さるキーワードがたくさんありました。「ソフトウェア開発ではエンジニアの役割が重要」ということを何度もおっしゃっていて、自分がエンジニアを目指しているのは間違っていなかったんだなと感じました。
    懇親会では、角谷さんやFBCのメンター・受講生の皆さんと交流できました😆

  • 「Urawa.rb」の告知
    以前から夫と話していた、地域.rbの実現に向けて動き始めました。FBCのメンター&アドバイザーの方々に、相談にのっていただきました。
    Xで沢山リポスト・いいねをしてもらったお陰で半日で定員になり、大変感謝しています。(参加登録できなかった皆さまごめんなさい🙇‍♀️)
    継続して活動できるよう、夫婦で頑張っていきたいです。

  • 「現場で使える Ruby on Rails 5速習実践ガイド」の輪読会に参加
    「皆についていけなのでは?」という不安があり、今までコードを書く輪読会に参加できていませんでしたが、この輪読会に第一回目から参加しています。皆さんとても優しく教えてくださり、初のドライバーや進行役を務めることができました。

今の気持ち

12月中旬は進捗が芳しくなく意欲低下気味でしたが、おかげさまで持ち直しました✨

Reactを頑張ったおかげで、年末年始には夫とペアプロをし、ちょっとしたWebアプリを作り始めることができました。 Image from Gyazo 今はやる気に満ち溢れているので、このモチベーションのままチーム開発まで駆け抜けたいです💪

1月の目標

  • ReactとWebセキュリティのプラクティスを修了する。
  • チーム開発で生き残る。
  • 「ピープルウエア」を読み終える。

2024年の目標

  • FBCを卒業して就職する。
  • Urawa.rbをとりあえず1年続ける。
  • 健康的な料理のレパートリーを増やす。
  • 1日2回のヨガを継続する。
  • 英会話のラジオを聞くことを習慣化する。

Rails Girls Tokyo 15thに参加したその後

これは「Rails Girls Japan Advent Calendar 2023」の23日目の記事です🎄

昨日はmaimux2xさんの 「Rails Girls ガイドの更新作業を頑張ったので振り返ります!」でした。

はじめに

今年は4月にRails Girls Tokyo 15thに参加して以来、Rails Girlsに色々とお世話になった年でした。参加後のできごとや心境の変化を、時系列に沿って振り返ります。

お世話になった皆様や、Rails Girlsについて知りたい方・参加を迷っている方に読んでいただけたら嬉しいです。


2023年〜4月:Rails Girlsに参加するまで(学校で働く&FBC入会)

3月末までは公立高校の教員をしており、プログラミングとは無縁の生活をしていました🏫

退職直前にProgateで遊び始め、HTMLとCSSがちょっとわかるようになりましたが、「ターミナル」や「Git」などの存在はもちろん知りませんでした。

プログラミングをもっと勉強してみたいと思い、Rails Girlsの4日前(4/3)にFJORD BOOT CAMP(以下FBC)に入会しました。


4月7〜8日:Rails Girls Tokyo 15thに参加

知り合いはゼロ人で、業界やRubyのことをほとんど知らず、Mac(買ったばかり)の操作すらおぼつかない状態で参加しました。

そんな状態でも楽しい時間を過ごすことができ、勉強を続けるモチベーションをいただきました。

FBCの日報に感想を書いていたので、一部を抜粋します。

  • プログラミングは誰かと一緒にやると、とても楽しいです。
  • コーチの方々が非常に優しく、説明が上手でした。エンジニアさんたちは、プログラミングが大好きでイキイキと働いている、素敵な人たちでした。
  • 現役エンジニア・デザイナー・人事・技術広報の方など様々な立場のコーチ・参加者の皆さんがいました。
  • プログラミングと全く無縁の生活を送っていた私にも、あたたかい応援の言葉をたくさんいただきました。初心者を積極的に受け入れ、多様性を尊重するRubyコミュニティの良さを感じました。
  • FBCのメンター・卒業生の方にも、対面でお会いできてモチベーションが100倍になりました。

この時のLTで、Rails Girls JapanのRubyKaigi 参加支援募集の話を聞き、RubyKaigiの存在を知ります。


5月11~13日:Rails Girlsの支援でRubyKaigi 2023に参加

Rails Girls Japanの参加支援を使って参加しました。何も分からない自分が本当に参加してもいいの?ぼっちになって寂しい思いはしたくない・・・という不安がありましたが、参加して良かったと心から思っています。

宿泊費・交通費・チケット代の経済的な支援に加え、関係者の皆さんとのランチ会など、交流の支援もしていただきました。

詳しい感想はこちら:
プログラミング歴1ヶ月でRubyKaigiに参加しました - すずかのプログラミング勉強記
Rails Girls - RubyKaigi 2023 参加支援についてのご報告

プログラミングを楽しみながら働いているエンジニアさんたちが輝いて見え、この辺りから本気で就職を目指すことを考えるようになります。


7月8日:Rails Girls Tokyo, More!に参加

Rails Girls卒業生向けのアフターフォロー勉強会です。

少人数で穏やかな雰囲気でした。とても親切にしていただいたので、もっと前から参加すれば良かったと後悔しています😅


8月19日:Rails Girls Tokyo, More!に参加(2回目)

RubyKaigiのfollow upイベントを眺めながら、もくもくしました。

後半はつきっきりでVSCodeのPrettierの設定を手伝ってもらい、夏休みのお土産もいただけて嬉しかったです!


11月10日:RubyWorld Conference 2023の配信を見る

江森さんの基調講演「Rubyコミュニティで過ごした10年」を聞きました。

Rubyコミュニティの良さや10年間の発展、Rails Girlsの根底にある考え方などを発表されていて、感銘を受けました。 RubyWorld Conference 2023 日本語チャンネル 2日目 - YouTube

Rails Girls Tokyoで、私の「知り合いのいない世界へ一歩踏み出す勇気」をサポートしてもらっていたことに気づき、改めて感謝の気持ちが湧きました。私もいつかコミュニティに貢献できたらいいなと思いました。


12月23日:Advent Calendarの記事を書いている ←今

プログラミングの勉強歴は約8ヶ月になり、LinuxRubyRuby on RailsJavaScript・Reactなどを学習しました。FBCのカリキュラムも後半に差し掛かり、卒業が少しずつ見えてきました。

4月当初は「文系未経験の自分にプログラミングなんてできるの?」と自信がありませんでしたが、今はスキルを身につけて就職し、幸せなエンジニアになることを目標としています!

終わりに

私がプログラミング始めたての段階を乗り越えられたのは、Rails Girls Tokyoで「プログラミングってなんか面白そう」と感じたおかげだと思います。

もし参加しなかったら、数週間で「プログラミングって難しくてつまらない」と挫折していたかもしれないです😅

貴重な機会を頂けたことや、その後も様々な面で支援していただいたことに、心から感謝しています。

FBC卒業→就職→一人前のエンジニアになるまで、まだまだ長い道のりですが、今後もよろしくお願いします🙏

フィヨルドブートキャンプでプログラミングの勉強をする【8ヶ月目】

4月からFJORD BOOT CAMP(フィヨルドブートキャンプ)で勉強して、あっという間に8ヶ月目が終了しました。今月も振り返りを書きます!

11月の過ごし方

前半は暖かくて過ごしやすかったので、お出かけをしたりバドミントンで遊んだりなど、なるべく外に出るようにしました。

特に、豊洲のWILDMAGICというインスタ映え全開の施設で、友人とバーベキューをしたのが楽しかったです❣️ バーベキュー会場の写真

後半になるとかなり冷え込むようになり、コタツにひきこもりがちなってしまいました😅

勉強の状況

11/4~12/3で、修了したプラクティスは3つだけでした😭😭😭

かなりの時間がかかった2つの課題(JavaScriptのクラス、自作npm)をまだ修了できていないのが原因だと思います。

1ヶ月間で修了したプラクティス一覧

Reactチュートリアル

非同期処理(JavaScript)

JavaScript入門


今月は、非同期処理・クラス・自作npmというJavaScriptの3つの課題にそれぞれ1週間強の時間をかけ、月末になってようやくReactに着手することができました。

勉強時間

学習時間は8ヶ月間累計(245日)で1547時間でした。

学習時間

今月だけの勉強時間で見ると、約200時間で、いつもとほぼ同じです。 課題の進捗はあまりないものの、勉強の習慣は継続できました。

できるようになったこと

  • 非同期処理の基本的な書き方を理解できた
    データベースを操作するプログラムを、callbackを使う・Promiseを使う・async/awaitを使うという3つの方法で作りました。Promiseがどんなものか分かっていなかったために、思ったような順番で動いてくれず、試行錯誤しました。
    メンターさんに熱心に教えていただいたお陰で、基本的な構文を理解でき、その後非同期処理を使う際にはあまり苦労せず書けるようになりました。

  • JavaScriptのクラス構文を使って、簡単なプログラムを作れるようになった
    クラス構文を使って、コマンドラインのメモアプリを作る課題に取り組みました。
    メモアプリの画面 オブジェクト指向への理解が十分でなかったこともあり、「何のクラスを作っていいのかわからない」状態で固まってしまいました。加えて作るクラスが決まった後も、コンストラクタやプライベートメソットの書き方・thisの使い方など、Rubyと違う部分にことごとく引っかかりました。
    メンターさんの助けもあり、必須でないプラスアルファの要件(選んだメモをエディタで開いて編集できる機能を作る)にも取り組んで、動作する状態にすることができました。

  • 自作のnpm(試作品)が動作するようになった
    FBCには「自分で作りたいnpmを作る」という課題があります。今までは要件に沿ったプログラムを作る経験しかしていなかったので、何を作るか決めるのに苦労しました。複数のAPIを触りながら考えた結果、私は「学校検索npm」を作ることにしました。
    まだ作業が残っているため提出していませんが、来月の振り返りブログでは、完成したnpmのことを書けると思います!

苦労していること

  • プロトタイプベースのオブジェクト指向への理解が浅い
    プロトタイプベース | TypeScript入門『サバイバルTypeScript』などで勉強し、「オブジェクトを素にして新しいオブジェクトを作る」「クラス構文はシンタックスシュガーのようなもの」ということはなんとなく理解できました。でも、「プロトタイプベースとはどんなもので、クラスベースとどう違うのか」を自分の言葉で説明できるほど理解できてはいません💦
    まだしばらくJavaScriptを勉強するので、徐々に理解していきたいです。

  • Reactの全体像がわからない
    フロントエンドのライブラリやフレームワークに触れるのが初めてなので、Reactの全てが新鮮です。見た目が変わっていくのが面白く、ワクワクします✨
    ただ、皆さんが分かりやすいと言っていたチュートリアルも私にとっては難しく、どこがどうなっているのか分からなくなってしまいました💦 もう少し基礎の基礎から勉強したいと思ったため、React.js&Next.js超入門を読み始めました。早く何か作れるようになりたいです!!

参加したイベント

今の気持ち

今月は思ったようにプラクティスを修了することができず、停滞気味でした。
「年内にチーム開発に入れたらいいな〜」と思っていたのですが、相当頑張らないと難しそうです💦

ただ目に見える進捗は少なくても、一ヶ月前の自分より確実に成長できているとは思います。特に自作npmの試作品を家族に見せびらかした時に、褒めてもらえたのが嬉しかったです。

進捗も大事ですが、焦らず一歩ずつ頑張りたいと思います!

12月の目標

  • ブログを3つ書く。
  • Reactのプラクティスの課題を全て提出する。
  • Webセキュリティの課題を提出する。

「FBCビブリオバトル」で発表した感想📚

この記事は「フィヨルドブートキャンプ Advent Calendar 2023 Part 1 」の3日目の記事です。昨日はsugiweさんの「Kaigi on Rails 2023 のデザイン #kaigionrails」でした。

はじめに

フィヨルドブートキャンプ(以下FBC)のオンライン忘年会内で開催された、FBCビブリオバトル」に参加しました。SOFT SKILLS ソフトウェア開発者の人生マニュアル』について発表した感想や反省を書きます。

FBCについて知りたい人、ビブリオバトルについて知りたい人、来年の参加を迷っているFBC生に読んでいただけたら嬉しいです。

発表者

プログラミング歴8ヶ月のFBC現役生です。前職は高校の教員で、プログラミングとは無縁の生活をしていました。

人前に立つことに抵抗はありませんが、いわゆる「プレゼンが得意な人」ではないと思います。アドリブ力が皆無なので、準備をしないと固まるタイプです。

ビブリオバトルとは?

ビブリオバトルは、誰でも開催できる本の紹介コミュニケーションゲームです。 知的書評合戦ビブリオバトル公式サイト

学校や企業など、様々なところで開催されているようです。

私が参加した「FBCビブリオバトル」(2023年)のルールは、以下の通りでした。

ルール

  • 技術書・仕事本・勉強本の中でオススメしたい1冊を1人5分間で紹介する。
  • レジュメやプレゼン資料などは使用しないで、できるだけライブ感をもって発表する。
  • 発表後に「どの本が一番読みたくなったか?」を基準とした投票を行う。
  • 最多票を集めた本を「チャンプ本」、2番目に票を集めた本を「準チャンプ本」に決定する。

公式ルールでは発表後にディスカッションがありますが、FBCバージョンではありません。その場の対応に自信のない私にとっては、ありがたかったです。

参加した動機

以前、高校生ビブリオバトル全国大会の動画を見たことがあり、非常に素晴らしい発表に感動しました。いつか参加してみたいと思っていたので、今回FBC内で開催されると知り、迷わず申し込みました。

加えて、私は本を読んでもすぐ忘れてしまい、「どんな本だった?」と聞かれても上手く答えることができません。人に伝えることで、選んだ本の内容をより理解したいと思ったのも理由の一つです。

準備したこと

1. ルールの確認

FBC内でのルールはもちろん、念のため公式のルールも確認しました。 ビブリオバトル公式サイトに載っています。

2. 本を選ぶ

最終的に『SOFT SKILLS ソフトウェア開発者の人生マニュアル(ジョン・ソンメズ 著, まつもとゆきひろ 解説, 長尾 高弘 翻訳) にしました。理由は、この本を読んでいるとモチベーションが上がったので、学習に悩んでいるFBC生に読んでほしいと思ったからです。

その他にも検討した本があるので書いておきます。

  • 理科系の作文技術木下 是雄 (著)
    タイトルの通り、理科系の作文について書かれた本です。私はこの本を読んで、今までなんとなく技術記事を書いてきたことを深く反省しました。 論理性を持った文章を書くのに役立つ本ですが、この本の内容を口頭で伝えるのはかなり難しいと思ったため、別の本にすることにしました。

  • 人工知能が俳句を詠む: AI一茶くんの挑戦川村 秀憲 (著), 山下 倫央 (著), 横山 想一郎 (著)
    俳句を詠むAIの開発について書かれた本です。「AI一茶くん」が改善されていく様子が面白いです。最近生成AI注目が集まっているので、興味を持ってもらえるかなと思いました。ただ、人工知能についての説明が難しく、私自身が十分に理解しきれていないため諦めました。

興味がある本を新しく読むことも検討しました。今回は他に紹介したい本があったのでやめましたが、いつか読みたいと思っているので書いておきます。

  • ピープルウエアトム・デマルコ (著), ティモシー・リスター (著), 松原友夫 (翻訳), 山浦恒央 (翻訳)
    メンターさんのおすすめ本です。サンプルだけ読みましたが面白かったです。

  • プログラミングの心理学ジェラルド・M・ワインバーグ (著), 矢沢久雄 (解説), 伊豆原 弓 (翻訳)
    「エゴレスプログラミングの十戒」の話を聞き、読んでみたいと思いました。

3. 発表メモを作る

発表する本が決まったら、箇条書きでざっくりと内容を決めました。 項目については、以下のサイトを参考にし、ほぼ同じ形式にしました。
【例文あり】ビブリオバトルの発表原稿を準備するための4ステップ - 岡本ビブリオバトル

## 問いかけ
プログラミングの勉強に悩みはある?私は沢山ある。(モチベーション、難しい課題など)

## 本の概要
- 約500ページと長いが、拾い読みでも学べることは多い。
- コードは書いておらず、キャリア・勉強法・その他生活全般。

## おすすめポイント3つ
- 勉強方法を変えるきっかけ
ポモドーロテクニック→集中力が上がった。
- キャリアの方向性を決めるヒント
キャリアをビジネスとして捉えて、専門分野を持って自分を売り出すことがいい。→専門分野の選び方のヒントが書いてある。
- コミュニケーションのヒント
人との関わり方が書いてある。→一日中人と話さず家にいるのは、独房に入れられる懲罰と同じ。

## まとめ
著者ジョンソンメズの本についてのインタビューを引用:
Q、ダメな自分を変えるにはどうしたらいい?
A、最初は、1つ、2つと(本に書いてある)小さなchangeから取り組めばいいんです。
そして、鏡をまっすぐ見て、自分を改めて評価してみてください。きっと、ダメじゃないあなたが写っているはずです。

キーワード:「悩んでいる人を励ましてくれる熱血教師本」

内容を決めるにあたって、以下のことを意識しました。

  • 共感できそうな内容を入れる
    FBCに入ったばかりの頃の自分のような人」を聞き手として想像して、話す内容を決めました。共感してもらうため、自分の経験をたくさん入れました。

  • 覚えてもらえそうなキーワードを入れる
    オンラインでも頭に残るよう、伝えたいことを端的なキーワードにしました。私は「悩んでいる人に読んでほしい熱血教師本」をキーワードにし、最後のまとめで伝えるようにしました。

4. 原稿に全ての言葉を書く⚠️

緊張すると何も話せなくなると思い、原稿に全ての言葉を書きました。

完成原稿

## 問いかけ
プログラミングの勉強に悩みはある?
私はモチベーションが上がらなかったり、難しい課題に心が折れたり、日報に書くことがなくて悩んだりしている。勉強に悩んでいる人に読んでもらいたい。

## 本の概要
- 読んだ理由
卒業生の〇〇さんにおすすめしてもらった。
- 著者
アメリカのソフトウェア開発者、ジョンソンメズ。Rubyのパパである、まつもとゆきひろさん解説。
- ページ数
500ページぐらい。ただ、この本の序文を書いたロバートCマーティンも、全部読まずに序文を書いたと公言している。加えてフィヨルドブートキャンプのメンターさんにも「全部読んでないけどいい本ですよね」とコメントをもらった。忙しい人は拾い読みでも学べることは多い。
- 内容
プログラミングのコードは一切書いておらず、キャリア・勉強法・その他生活全般。
実際最後3分の1は、筋肉の付け方や不動産投資・恋愛のやり方のことが書いてある。


## おすすめポイント3つ
- 勉強方法を変えるきっかけになる
25分で一つのタスクを決めて、タイマーをかけてそれだけに集中する、ポモドーロテクニックのことが書いてある。
実践してみて、勉強中いつの間にかTwitterを見ているのがなくなった。心構えや正しいやり方も書かれているので、すでにやったことがある人にもおすすめ。
- キャリアの方向性を決めるヒントがもらえる
自分のキャリアをビジネスとして捉えて、専門分野を持って自分を売り出すことがいいと書いてある。
例えば、
  - 苦痛に感じたことを振り返って、その苦痛を自分が解消できるか考える。
  - 就職サイトを見て、その専門が必要とされているかをチェック。
など。
何を専門として、どこで働きたいかをなかなか整理できない人におすすめ。
- コミュニケーションのヒントになる。
開発者として働くときに、望ましい人との関わり方、例えば「決して批判しない」「なんとしても議論を避ける」が書いてある。
リモートワークの章では、一日中人と話さず家にいるのは、独房に入れられる懲罰と同じ。→これを読んで、RubyコミュニテイやFBCのミートアップはプログラミングの勉強が独房にならないための役割も果たしていると思った。

## まとめ
著者ジョンソンメズの本についてのインタビューを引用:
Q、ダメな自分を変えるにはどうしたらいい?
A、最初は、1つ、2つと(本に書いてある)小さなchangeから取り組めばいいんです。そして、鏡をまっすぐ見て、自分を改めて評価してみてください。きっと、ダメじゃないあなたが鏡に写っているはずです。

一言で言うと、悩んでいる人を励ましてくれる熱血教師本。
熱血教師に励まされたい時、やる気のない時、悩んだ時に、ぜひ読んでみてほしい。

⚠️注意⚠️

FBCビブリオバトルはオンラインのため、PCに原稿を写して見ながら話すことができました。ただ録画を確認してみて、明らかに「原稿を読んでいます」という感じになっていたので、私のように細部まで原稿に書くことはおすすめしません。

またブログを書いていて初めて気づいたのですが、公式では「発表時に原稿を用意しない」が暗黙の了解になっているようです。

ビブリオバトルでは、原則 発表者は原稿やレジュメ、スライドを準備しません。

※話す内容のメモ書きや、本への付箋、ドッグイヤーなどは構わない。

これは、公式ルールには含められていませんが、ビブリオバトルの暗黙のルールです。
なぜ原稿を禁止していないのかというと、「原稿を読み上げる発表ではチャンプ本を獲得できないため、自然と読み上げない形の発表になる」という発想に基づいているためです。
知的書評合戦ビブリオバトル公式サイト - なぜ原稿を準備しないのか?
ビブリオバトルで原稿を書くべきなのか?|ビブリオバトル普及委員会

伝えたいことをメモ程度にまとめておくのが良さそうです。(暗黙の了解破ってごめんなさい🙇‍♀️)

5. 発表の練習をする

発表前に30分ぐらい時間をとり、発表時間(5分)を測って練習しました。タイムオーバーしそうなことに気づいたので、原稿を削りました。

それでも不安なので、発表中見えるところにストップウォッチを置いておき、残り時間がわかるようにしておくことにしました。

参加した感想

発表は非常に緊張しましたが、大きな問題なく終えることができ、良い経験になりました。参加してよかったことを以下に書きます。

  • 色々な本を知ることができた
    他の発表者方々の発表内容が、本当に素晴らしかったです。 読んだことのない本に興味を持つことができ、これから読もうと思いました。読んだことのある本も数冊ありましたが、私が理解できなかった部分をわかりやすく発表されていて、自分の知識不足を痛感しました。
    沢山本を読み、それを自分の言葉で伝えられるぐらい理解して、知識を増やしていきたいです。

  • 本への理解が深まった
    今回発表したのが「ソフトウェア開発者の人生マニュアル」ということで、キャリアや学習の章を簡単に読み直しました。忘れていた箇所を思い出し、内容について改めて考えるきっかけになりました。
    読んだ本を忘れてしまうのが悩みでしたが、この本については自信を持って説明できるようになりました。

  • 登壇へのハードルが下がった
    発表後に皆さんから温かい感想をいただきました。原稿の作り方やプレゼンには反省点が多々ありますが、自分が発表で大事にした「共感してもらうこと」「キーワードを覚えてもらうこと」が伝わったようで嬉しかったです。
    今回FBC内で何かを発表するのは2回目ですが、今後は今回よりもビビらずに登壇できそうです。

おわりに

発表するのも他の発表を聞くのも、とても勉強になり、読書へのモチベーションが上がりました。

大変恐縮ですが、今回「SOFT SKILLS」をチャンプ本に選んで頂くことができました。景品にAmazonギフト券をもらえるそうなので、新しい本を買うのに使います🙏

改めて、貴重な機会を作っていただいたFBCの運営の方々、素晴らしい発表を聞かせてくれた他の発表者の4名の方、発表を聞いてくれた皆さんに感謝します。ありがとうございました🙇‍♀️🙇‍♀️



12/13追記:賞品をいただきました!

初心者でもわかるRubyのコマンドラインオプション

はじめに

Ruby Silverの勉強をしていた時、Ruby技術者認定試験合格教本に、ruby -cruby -vなどのRubyコマンドラインオプションが出てきました。 面白そうだと思ったので公式リファレンスを確認しましたが、初心者には難易度が高く、量も膨大でした😖

今回は、プログラミング始めたての私でも使えると思ったオプションを5つ紹介します。 文章中に「公式リファレンスの説明」とある場合は、すべてRubyの起動 (Ruby 3.2 リファレンスマニュアル)から引用しています。

実行環境


ruby -hまたはruby --help

どんなオプション?

オプションの一覧を見ることができます。

公式リファレンスの説明: コマンドラインオプションの概要を表示します。

使える場面

すべての始まりはここからです。「Rubyの実行オプションを使いたくなったけどなんだっけ?」という時に使いましょう。

ruby --helpを使うと、ruby -hにない細かいオプションや、詳細なオプションの説明を読むことができます。ただruby -hでも20個以上のオプションが出てくるので、初心者はこちらで事足りると思います。

ruby -hの実行結果

❯ ruby -h
Usage: ruby [switches] [--] [programfile] [arguments]
  -0[octal]       specify record separator (\0, if no argument)
  -a              autosplit mode with -n or -p (splits $_ into $F)
  -c              check syntax only
  -Cdirectory     cd to directory before executing your script
  -d              set debugging flags (set $DEBUG to true)
  -e 'command'    one line of script. Several -e's allowed. Omit [programfile]
  -Eex[:in]       specify the default external and internal character encodings
  -Fpattern       split() pattern for autosplit (-a)
  -i[extension]   edit ARGV files in place (make backup if extension supplied)
  -Idirectory     specify $LOAD_PATH directory (may be used more than once)
  -l              enable line ending processing
  -n              assume 'while gets(); ... end' loop around your script
  -p              assume loop like -n but print line also like sed
  -rlibrary       require the library before executing your script
  -s              enable some switch parsing for switches after script name
  -S              look for the script using PATH environment variable
  -v              print the version number, then turn on verbose mode
  -w              turn warnings on for your script
  -W[level=2|:category]     set warning level; 0=silence, 1=medium, 2=verbose
  -x[directory]   strip off text before #!ruby line and perhaps cd to directory
  --jit           enable JIT for the platform, same as --mjit (experimental)
  --mjit          enable C compiler-based JIT compiler (experimental)
  -h              show this message, --help for more info


ruby -c

どんなオプション?

指定したファイルに文法エラーが無ければ、Syntax OKと出力し、構文エラーがあれば教えてくれます。 ruby -c example.rbのように、ファイル名を指定して使います。

公式リファレンスの説明:スクリプトの内部形式へのコンパイルのみを行い, 実行しません。コンパイル終了後, 文法エラーが無ければ, "Syntax OK"と出力します。

使える場面

プログラムを実行せず、構文エラーがあるかどうかを調べたい時に使います。

「文法が正しいかどうかは、試しに実行してみてSyntax Errorが出るかどうかでわかるじゃん」と思っていたのですが、ruby -cを使った方が良い場面があります。

例えば、こんなコードがあります。

File.open("example.txt", mode = "a+") do |f|
  100.times {f.write("I love Ruby\n")
end

指定したファイルに"I love Ruby"を100行追記するコードです。 2行目に}が足りないため、このまま実行してもファイルは操作されず、SyntaxErrorとなります。

しかし、エラーの有無がわからない状態だとどうなるでしょう。「試しに実行」してみて、もし構文が正しかった場合、100行が追記されてしまいますね💦

実行はしたくないけど、構文が正しいか調べたい場合に使うと良さそうです。

注意点

  • コマンドの順番を間違える(例えばruby example.rb -cとしてしまう)と、構文か正しかった場合、通常通り実行されてしまいました。気をつけましょう。

  • メソッド名のスペルミスや未定義の変数名などのエラーは検出されません。 こんなメチャクチャなコードでも、Syntax OKとなりました。

name = "suzuka"
if nama == "suzuka" # 正しくはname
  put OK # 正しくは`puts "OK"`
end
❯ ruby -c example.rb
Syntax OK


ruby -v

どんなオプション?

Rubyのバージョン情報と警告を表示したい時に使います。警告を表示する場合、ruby -v example.rbのようにファイル名を指定します。

公式リファレンスの説明: 冗長モード。起動時にバージョンの表示を行い, 組み込み変数 $VERBOSEをtrueにセットします。この変数がtrueである時, いくつかのメソッドは実行時に冗長なメッセージを出力します。`-v'オプションが指定されて, それ以外の引数がない時にはバージョンを表示した後, 実行を終了します(標準入力からのスクリプトを待たない).

使える場面

こんなコードがあったとします。

name = "suzuka"
text = "I love Ruby"

puts text

このコードでnameという変数は使われていません。しかし文法の誤りはないので、オプションなしのruby example.rbでは普通に実行できてしまいます。

このプログラムを-vオプションをつけて実行してみます。

❯ ruby -v example.rb
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]
example.rb:1: warning: assigned but unused variable - name
I love Ruby

assigned but unused variable - nameという警告を出力して、「nameは使ってないよ」と教えてくれました。

別のファイルをrequireした場合、読み込んだファイルに対しても警告を表示してくれます。

require "./reference.rb"
text = "I love Ruby"
name = "suzuka"

puts text
❯ ruby -v example.rb
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]
/Users/suzuka/blog/reference.rb:2: warning: assigned but unused variable - name
I love Ruby

注意点

  • ruby -cと違い、ファイルが実行されます。 例えば、ファイルの書き込み処理を行うファイルに対してruby -vを実行した場合、警告が表示されると同時に書き込みが行われます。


ruby -e

どんなオプション?

文字列をRubyのプログラムとして実行します。ruby -e "実行したいコード"のように実行します。

公式リファレンスの説明:コマンドラインからスクリプトを指定します。-eオプションを付けた時には引数からスクリプトファイル名を取りません。 -e オプションを複数指定した場合、各スクリプトの間に改行を挟んで解釈します。

使える場面

コマンドラインからコードを実行したい時に使います。

❯ ruby -e "puts 'ruby'"
ruby

複数行のコードも実行できます。

❯  ruby -e "3.times do
      puts 'ruby'
    end"
ruby
ruby
ruby

これだけだとirbの方が便利な気がしますが、後述する-nオプションと組み合わせると、指定されたファイルや標準入力に対してコードを実行できるので、使える幅が広がります。

注意点

  • ""または''スクリプトを囲まないと何も実行できないので気をつけましょう。 NG: ruby -e puts 'hello'
    OK: ruby -e "puts 'hello'"
  • 他のオプションと組み合わせる時は、順番に注意しましょう。-eは実行したいスクリプトの直前に置きます。以下の例で-ne-enと書いた場合、私の環境ではNameErrorが出ました。
    NG: ruby -en 'puts $_' example.rb
    OK: ruby -ne 'puts $_' example.rb


ruby -n

どんなオプション?

ファイルや標準入力から与えられた値を一行ずつ処理し、各行が $_ (最後にgetsまたは readlineで読み込んだ文字列を表す特殊変数) に入ります。ruby -n example.txtのように、ファイル名を指定して使います。

公式ドキュメントの説明: このフラグがセットされるとプログラム全体が sed -nやawk のように while gets ... end で囲まれているように動作します.

使える場面

前述した-eオプションと組み合わせることで、指定されたファイルから一行ずつ読み込み、その各行に対してスクリプトを実行することができます。 下のexample.txtというファイルに対して、-n-eを組み合わせて使う例を紹介します。

Ruby is fun!
Ruby is good.
Programming is difficult.
例1:ファイルの各行をそのまま出力

ファイルに対し、ruby -ne 'puts "#{$.}行目 #{$_}"' example.txtを実行してみましょう。
-nで各行を読み込み、-eオプションで読み込んだ各行と行番号を出力するよう指示しています。$.は行番号、$_は最後に読み込まれた行の中身を示します。

❯ ruby -ne 'puts "#{$.}行目 #{$_}"' example.txt
1行目 Ruby is fun!
2行目 Ruby is good.
3行目 Programming is difficult.
例2:ファイルの各行を加工して出力

受け取った入力は、加工して出力することもできます。
gsubメソッドを使って、"Ruby"という文字列を青色の「ルビー」に置き換えてみましょう。ruby -ne 'puts $_.gsub(/Ruby/, "\e[34mルビー\e[0m")' example.txtを実行します。

ターミナルでの実行結果

例3:ファイル内に特定の条件を満たす文字が含まれるか検索

ifで条件分岐させると、条件を満たした場合のみ処理を行うことができます。 各行に"Ruby"が含まれていた場合、行数を出力するようにしてみます。

❯ ruby -ne 'puts "#{$.}行目にRubyがあります" if $_.include?("Ruby")' example.txt
1行目にRubyがあります
2行目にRubyがあります

正規表現だと複雑になりそうな、「0以上18未満または60以上の数値を検索したい」場合にも使えます。

0
21
80
50
13
6
46
61
❯ ruby -ne 'puts "#{$.}行目 #{$_} "if ($_.to_i >= 0 && $_.to_i < 18) || $_.to_i >= 60 ' integer.txt 
1行目 0
3行目 80
5行目 13
6行目 6
8行目 61


終わりに

今回は5つの実行オプションについて調べました。
調べた中でも、-e-nは私にとって難しかったです。加えてリファレンスを確認して、想像以上にオプションの数が多く、奥が深いなと思いました。

実際にコードを書いていて使いこなすのには程遠いですが、調べていると「開発の現場でも使える」オプションの使い方が結構出てきたので、今後も勉強します❣️

参考文献

フィヨルドブートキャンプでプログラミングの勉強をする【7ヶ月目】

FJORD BOOT CAMP(フィヨルドブートキャンプ)で勉強して、7ヶ月目が終了しました。今月も振り返りを書いていきます😊

10月の過ごし方

すっかり秋になり、過ごしやすい季節になりました。気候の良い貴重な時期を無駄にするまいと、外にお出かけすることが多かったです🍁

印象に残っているのは、大江戸線を徒歩で一周したことです。最近気が緩みがちでしたが、根性を叩き直すことができました! 大江戸線徒歩チャレンジをしました! - すずかのプログラミング勉強記

また先日は、長瀞秩父に日帰り旅行しました。一年分ぐらいのマイナスイオンを浴びて、とてもリフレッシュできました✨

長瀞の船の上から撮った写真

勉強の状況

10/4~11/3で、修了したプラクティスは6つです。

1ヶ月間で修了したプラクティス一覧

ls コマンドを作るオブジェクト指向
カレンダーのプログラム(JavaScript)
Linter (ESLint) と Formatter (Prettier)
npm
FizzBuzz問題(JavaScript)
ボウリングのスコア計算プログラムオブジェクト指向


オブジェクト指向JavaScriptに向き合う一ヶ月でした。前半は「ls コマンドを作るオブジェクト指向版」の課題に苦戦し、後半は(まだ提出できていない)JavaScriptの非同期処理の勉強に詰まっていました。


卒業まで、残りの課題は約30個になりました。今後はJavaScript→React→Webセキュリティ→チーム開発→自作サービスの課題に取り組みます。年内にチーム開発に入れたらいいなと思っています。


勉強時間

学習時間は7ヶ月間累計(214日)で1350時間でした。

今月だけの勉強時間で見ると、約190時間です。 4~8月(コロナにかかり激減した9月を除く)と比べて微減傾向にあるので、気を引き締めて頑張りたいです💪


できるようになったこと

  • オブジェクト指向でやや複雑なプログラムを書けるようになった
    苦戦する人が多いらしい「lsコマンドを作るオブジェクト指向版」を修了することができました。 ネタバレになるのでコードは載せませんが、完成品はこちらです。

    本物のlsコマンド同様、オプション(`-l`・`-a`・`-r`の3つ)も使用できます。
    クラス図を何度も書き直して大変でした。先月「オブジェクト指向でなぜ作るのか」を読んで、あまりピンときていませんでしたが、実際に手を動かすとオブジェクト指向の考え方がちょっと分かってきた気がします❣️

  • JavaScriptの基本的なコードを書けるようになった
    JavaScript入門を一通り読み、カレンダーなど簡単なプログラムを作れるようになりました。条件分岐や繰り返しの書き方・厳密等価演算子など、Rubyの書き方と違う箇所に戸惑ってはいますが、調べながら基本的な処理は書けるようになりました。
    もっとスラスラ書けるよう、沢山コードを書きたいです!

苦労していること

  • オブジェクト指向プログラミングへの理解
    課題は合格したものの、自信を持って説明できるところまで辿り着けていません💦FBCでは他の受講生の提出物を見ることができるので、色々な人のコードを見て勉強中です。
    またメンターのjnchitoさんが作ってくれたライブコーディング&解説の動画(全部見ると6.5時間!)を見て、オブジェクト指向らしい設計とは何かを引き続き学んでいこうと思っています。
  • JavaScriptの非同期処理
    絶賛大苦戦中です!卒業生の方に教えてもらった「マンガでわかるJavaScriptのPromise」を読み、コードを書きながら足りない知識を補強しています。Promiseasync/awaitの存在は知っているけど、実際にどうやって使うの??という状態です。11月前半にはどうにかしたいです💧

参加したイベント

  • 大江戸Ruby会議10に現地参加
    ためになるかつ面白い内容ばかりで、大雨の中浅草まで行った甲斐がありました✨ 特に「WEB+DB PRESS」の編集をされていたinaoさんの発表を聞き、技術系の記事の書き方について勉強したいと思い、紹介されていた「理科系の作文技術」を読み始めました。
    花やしき貸切の懇親会にも参加しました。乗り物やけん玉を通じて、初めましての方ともかなりお話ができました。色々な会社のことを教えてもらったり、Rubyで作ったものを見せてもらったり、良い刺激をたくさんいただきました🙏

  • Kaigi on Rails 2023をオンラインで視聴
    こちらは金銭的理由から現地参加を諦め、配信視聴で参加しました。一人で見るのは寂しいな〜と思っていたら、FBC受講生の方が『Kaigi on Railsいけなかった人、みんなで見よう会』を開催してくれたので、孤独を感じずに参加できました🙏
    初心者でも理解できる発表が多く、非常に勉強になりました。特に3名のFBC卒業生で登壇していた「ペアプロしようぜ 〜3人で登壇!? 楽しくて速いペアプロ/モブプロ開発〜」で、ペアプロは楽しくて生産性が高まる方法だということを知り、私もやってみたくなりました😊以前から興味を持っていた、開発環境データの整備やコードカバレッジについての発表も、非常に勉強になりました。

今の気持ち

10月は自分的には難しい内容(オブジェクト指向・非同期処理)を勉強して、「何がわからないんだかわからない」状態に陥ることが多かったです。以前はこの状態になると、勉強が楽しくなくなったりモチベーションが低下したりしていました。

でも、最近はとてもハッピーです。おそらく気候が良いおかげだと思うのですが、勉強がわからなくても、とっても幸せに暮らしています✨

ただ、「わからないから早く理解しなきゃ」のような焦りを感じなくなってしまったので、幸せはキープしつつ気を引き締めて頑張りたいです💪

11月の目標

  • JavaScriptのプラクティス(非同期処理・クラス・自作npm)を修了する。
  • 「理科系の作文技術」を読み終える。
  • プログラミングに関わる記事を書く。

Jestでテストを書いたらReferenceErrorが出た【JavaScript】

はじめに

JavaScriptで「FizzBuzz」のプログラムを作り、Jestでテストを書いていた際に、ReferenceErrorが出てて詰まりました。調べたことの理解を深めるため、解決した手順をまとめます。

実行環境

  • macOS:Ventura v13.3.1
  • Node.js:v18.18.0
  • npm:v9.8.1
  • Jest:v29.7.0

やったこと

  • fizzbuzz.js」にプログラムを書く。
  • 公式ドキュメント(はじめましょう · Jest)の手順に従って、npm install --save-dev jestでJestを導入。
  • 「package.json」に以下を追記。
{
  "scripts": {
    "test": "jest"
  }
  • テストコードを作成する。
const fizzbuzz = require('./fizzbuzz.js');

 // 各項目のテスト
  • 本体のコードを書き換える。
const fizzbuzz = (n) => {
// n・"Fizz"・"Buzz"・"FizzBuzz"のどれかを表示するコード
};

module.exports = fizzbuzz; // これを追加

npm testをすると、テストコードはエラー無しでテストができました。 しかし、本体のコードを実行時すると、ReferenceErrorが出ました。

エラーの場所と中身

  • エラーが出た箇所
    fizzbuzz.js」のmodule.exports = fizzbuzz;
  • エラーの中身
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'ファイルのパス/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

和訳:
ReferenceError: モジュールが ES モジュール スコープで定義されていません。 このファイルは「.js」ファイル拡張子があり、「ファイルのパス/package.json」に"type": "module".が含まれているため、ES moduleとして扱われます。 CommonJS スクリプトとして扱うには、「.cjs」ファイル拡張子を使用するように名前を変更してください。


調べたこと

エラー文の内容が理解できなかったので、JavaScriptのモジュールシステムについて調べました。 ESModulesとして扱われるファイルに、CommonJSの書き方を混ぜたのがエラーの原因でした。

長いので折りたたみ

モジュールって何?

  • 変数や関数などをまとめたもの。
  • JavaScript のモジュールシステムには、CommonJS ・AMD ・ESModulesなどが存在する。
  • 変数や関数などを外部にエクスポートできる。エクスポートされた変数や関数などは、インポートして外部から利用できる。

    CommonJS (CJS)

  • サーバーサイドなどにおけるJavaScriptの標準仕様の策定を目的としている。
  • Node.jsはデフォルトで全てのモジュールをCommonJSで扱う。
  • require/exportsmodule.exportsキーワードを使用してモジュールを読み込む。

    ESModules (ESM)

  • ECMAScript 2015 (ES6) から導入された、JavaScriptの標準的なモジュールシステム。
  • Webブラウザがデフォルトで採用。
  • Node.jsは"type": "module"を設定すると、ESModulesに変えることができる。
  • import/exportキーワードを使用してモジュールを読み込む。

ESModulesとCommonJSを混ぜちゃダメ!

Fizzbuzzのプログラムは、package.json"type": "module"と記載がありました。そのため、本体ファイルはESModulesとして扱われます
しかしテストを実行できるようにするため、module.exportsというCommonJSの書き方を混ぜたため、エラーが出ました。


試したこと

エラー文には本体のコードをCommonJS スクリプトとして扱う方法が書いてありましたが、現在はESModulesが主流になりつつあるようなので、ESModulesのままにすることにしました。

全てESModulesの書き方に変更

  • 本体のコードを書き換える。module.exportsしていた部分を以下に変更。
export default fizzbuzz;
  • テストファイルを書き換える。requireをしていた部分を以下に変更。
import fizzbuzz from "./fizzbuzz.js";

上の修正で本体のファイルのエラーを解決できました。しかし、テストファイルの方でSyntaxErrorが出ました😅

エラー文

❯ npm test

> test
> jest

 FAIL  ./fizzbuzz.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
(略)
    SyntaxError: 'ファイルのパスfizzbuzz.test.js: Unexpected token (1:21)

JestはデフォルトではCommonJSを想定しており、importexportなど、ESModulesの構文をサポートしていないことが原因でした。

Node.jsの実行オプションを指定

JestがESModulesをサポートするためには、 Node.jsの実行オプションを指定する必要があります。公式ドキュメント(ECMAScript モジュール · Jest)に記載があったので、その手順で書き換えました。

  • 「package.json」を書き換える。
  "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js" // 追加
  }

または

  "scripts": {
    "test": "NODE_OPTIONS=--experimental-vm-modules jest" // 追加
  }

これでテストファイル・本体ファイルともにエラーなく実行できました。

参考文献