Saki Basken - freeCodeCamp.org

エンジニアへ転身するための完全ガイド: 在宅フリーランスと育児から開発者の道へ

Saki Basken — Tue, 22 Oct 2024 06:01:21 +0000

半年以上にわたり寝る間も惜しんで取り組んだ求人応募、ネットワーキング、勉強の末、晴れて今年 1 月にエンジニアとしてのフルタイムの仕事のオファーを受けました。それは決して簡単な道ではなく、正直に言えば、かなり荒れた獣道のようでした。

私のように仕事を探している人や私と同じようにテック業界に転身しようとしている人がたくさんいると思います。

就活中に何度も挫折しそうになりましたが、先にテックに移行した方々の話を聞くことはとても参考になりました。だからこそ、私がやって良かったなと思うことをいくつか共有して、少しでも同じ道を歩んでいる方々のサポートになればと思っています。

これまでの経歴

まずはこれまでの私がしていたことや、どのようにしてエンジニアとして働くようになったのかについて少し話したいと思います。私はコンピュータサイエンスのバックグラウンドを全く持っていません。もともとは生粋の文系で、大学では人類学と社会学を専攻して、興味深い分野で自分にとってとても合った分野だったのですが、就職の見通しはあまり良くありませんでした。

大学を卒業した後、社長秘書や倉庫 / 輸入のコーディネーターとして一般に言う事務の仕事をしていました。私は日本育ちですが、高校で短期留学、大学でイギリスに行っていたりしたことから、シカゴの日系企業で働いていた時に仕事の一環として翻訳作業をするようになりました。

2013 年に長女が生まれた後、当時働いていた会社では産前産後を含め、産休はなんと 6 週間しかありませんでした。当時のイリノイ州では標準的なことでした。10 年以上も前のことなので、今は少しは改善されているのかもしれませんが、産休が 6 週間しかないことにただただ驚いたのを今でも鮮明に覚えています。

そのため、お給料も格別良かったわけではなかったこと、夫とも子供は二人は欲しいねと話していたことも考えて、フルタイムのポジションを辞めて子育てに集中し、フレキシブルに働けるフリーランスの翻訳者として働くことに決めました。

なので学歴を含む経歴は、全くプログラミングとは程遠く、パソコン関係のスキルといえばマイクロソフトのオフィス程度で当時の私はエクセルが最先端のパソコンのスキルでした。

今も当時も、環境問題に興味があるので、「持続可能な開発」と言う分野を勉強して、ロンドン大学の準修士号を取得しました。言ってしまえば、出産育児の為修士号を取得するための単位がわずかに不足してしまったと言うことです。そのプログラムを通して環境科学やその他のサイエンス関連の授業を受けましたが、そこでもプログラミングに触れる機会はなく、私はコンピュータや理系向きではないとすら考えていました。

子育てとフリーランス: 見えないキャリアの空白

2 人の娘を育てながらフリーランスで翻訳をして平穏な日々を過ごしていましたが、子供達の小学校入学後は、自分の時間も増えてきてもっと仕事をしてみたいと感じました。『会社で働きたいな。』と漠然と思うようにもなりました。産後何をしたいかを考えたとき、今あるスキルをそのまま使えたからという理由で翻訳はやっていたけれど、翻訳者としてフルタイムで働く気にはどうもなれませんでした。

私は環境問題について興味を持っていたので、環境問題関連の仕事をしたいと思いました。数ヶ月間仕事を探しましたが、アメリカの一次面接でよくある電話面接をどうしても突破することができませんでした。その 15 分から長くても 30 分位の短い通話の間に、私はよく 10 年以上前のオフィスで働いていた時の経験について聞かれました。

特に最初の面接は辛いものでした。私が今何をしていて、今何ができるかに興味を持ってもらえると思っていたので、まさか 10 年前のはるか昔の経験について尋ねられるとは思っていませんでした。そんな面接をする度、自分が過去 10 年間してきたことがあまり重要ではないと言われたように感じ、かなり落ち込むこともありました。

育児やフリーランスは非常に大変な仕事だと思います。時間、仕事、ストレス、顧客、請求書などをすべて自分で管理しなければなりません。それでも社会や企業は、専業主婦やフリーランサーが私たちの社会に対して行う仕事を見落としてしまいがちですね。Career break と言われていることすら、問題視されるべきかもしれません。決して break とは感じられませんでしたので！

しかも 10 年以上も前の経験を使って behavioral question (行動面接の質問) に細かく答えることなんて、AI でない限り無理ですよね。

転機: 私がコーディングに興味を持ったきっかけ

そんなこんなで、就活をしながら環境関連のテック企業が必要とするスキルを持っていないことにも気付いてしまいました。まず、そういった企業はインハウスの翻訳者を大抵募集していない上に、一般事務的な経験もそこまで年数があるわけでもないと言うとても残念な事態。

多くの環境テック系企業がソフトウェアエンジニアを求めているのに気づき始めた頃、夫がたまたま私にコーディングを勉強してみたら？と言ってきました。それに加えて、第二のシリコンバレーと言われるだけあって、私の住むシアトルはエンジニアが本当に多いんです。出会う二人に一人はエンジニアです。そんな影響もあり、就活も長期戦になりそうだったので、損することはないだろうと軽い気持ちで勉強を始めました。

初めの一歩: 技術翻訳者としての初めての経験

夫がスタートアップを持っているので、その会社のソフトウェア開発を担当している女性にすぐ連絡を取りました。と言うのも、何から始めたらいいか全くわからなかったからです。彼女はそのスタートアップの創立者三名のうち一人のお姉さんであり、私たち夫婦の友人でもあります。彼女に私がどこから始めるべきかを聞いたら、実際に仕事をしてみることが一番勉強になると教えてくれました。そして彼女の指導のもと、スタートアップでお手伝いをさせてもらえることになりました。

翻訳のバックグラウンドと新しいテックへの興味から、私はモバイルアプリの技術的なローカライゼーション (他言語でも使用可能にすること) を始めました。大学で CS を勉強したわけではなかったけど、それが私の最初のソフトウェアエンジニアのポジションとなりました。でもそれはファミリービジネスで、走り始めたばかりのスタートアップなので、給料はもちろんもらえませんでした。とはいえ、コーディングだけでなく、git (コードのバージョン管理) についても学べて、ソフトウェア開発の流れを学ぶ絶好のチャンスでした。

何でもいいんです。ご家族や友人のビジネスで、ウェブサイトの更新や全面的なリニューアルが必要か確認してみてください。どんなことでも、手をかけて何かを作り、それを通じて学び、成果を示すことができれば、それが経験になります。

お手伝いをしながら、もっと学びたいと感じたので、2022 年の感謝祭セールで Codecademy に半額割引で登録して、そこで思いつくすべてのレッスンを制覇しました。(その当時残念ながら freeCodeCamp で無料で勉強できると知らず、Codecademy で登録してしまいました。freeCodeCamp.org は無料なので、プログラミング興味のある方にとってもオススメです！)

彼女と一緒に働かせてもらいながら、独学でプログラミングの勉強もして、充実していました。彼女は今でもすばらしいメンター (サポートやアドバイスをしてくれる先輩) です。その時点で、私はこれを自分のキャリアにし、もっと学びたいと感じました。

私は興味を持つと、いつも深く突き進むタイプなので、プログラミングの前は韓国ドラマにハマり、その前は株式市場の勉強も独自でしたりしていました。普段は大体 3、4 ヶ月間で興味が失せてしまうんですが、プログラミングは自分でも驚く程飽きませんでした。良くも悪くもプログラミングには無限に問題があって、常に学習していないといけないので、勉強好き、新しいことへの挑戦好きな私にとっていい分野を見つけたのではないかと思っています。

こういった経緯で修行をさせてもらっている中、ある日夫が前住んでいた家のお隣さんの家に遊びに行き、たまたまそこの奥さんが Flatiron というスクールでプログラミングのブートキャンプ式プログラムを卒業して、それがすごく良かったという話を聞いてきました。彼女も私と同じようなキャリアチェンジャーで、その後エンジニアとして働いています。夫がその話を家に持ち帰ったなんと翌日にはすぐに同じプログラムに申し込みをしました。

大きな決断: 血と汗と涙のブートキャンプの日々

結果的に、プログラミングのブートキャンプはとても良かったです！その名前の通りブートキャンプなので非常に厳しいものでしたが、一人で学んでいるときに週に 60 時間も費やすことはありませんし、学習のスピードをかなり早めてくれました。

始めた時点では、クラスに 30 人以上の学生がいましたが、1 週間後には 25 人、次の週には 20 人と、みるみるうちに脱落者が続出しました。卒業時にはクラスメートは 12 人だけになってしまいました。すごくハードなスケジュールで精神的にも追い詰められるような時もあったし、トラウマになるんじゃないかと思うようなこともあったり。でもそんな経験を一緒に乗り越えた仲間たちなので、そこで出会ったクラスメートたちには特別な想いがあります。

ブートキャンプといっても、その編成には色々あって、私のブートキャンプは 15 週間のプログラムで、各フェーズが 3 週間の 5 フェーズに分かれていました。各フェーズでコーディングチャレンジと言われるテストとグループプロジェクトがあり、プログラム最後のフェーズにはソロプロジェクトがありました。

ブートキャンプ後のサポート: キャリアコーチと就活戦略

Flatiron では、卒業後 180 日間のキャリアサービスを受けることができます。学費は高いと思いましたが、私は面接にこぎつけることや、面接に進めても面接自体で挫折していたので、それが魅力で Flatiron を選びました。

ワークショップなどを含むキャリアサービスは、プログラム中に始まりました。卒業後は、専属キャリアコーチが割り当てられ、最初の月は週 1、その後は隔週で面談しました。私の LinkedIn プロフィールをチェックしてくれたり、履歴書を添削してもらったり、面接前には模擬面接で特訓など、仕事探し全てにおけるサポートをしてくれました。

また、Flatiron には「Global Community」というサブグループもあったので、私はプログラム中やプログラム終了後も積極的にそのグループのオンラインミーティングにも参加していました。

人数が少なかったので、同じ外国人の方や、多文化の環境で育った方々と一緒にキャリアに関することを教えてもらったり、先輩の話を聞いたり、不安を分かち合ったりできる場でもあり、かなり勉強になりました。

2023 年 1 月に私がプログラムを開始したときには、Flatiron のキャリアサービスの人に『平均で卒業後就活は 3〜6 か月かかる』と言われていましたが、その時期大手テック企業で大量のリストラが続いていたので、卒業時には平均で 6 か月はかかると言われるようになっていました。

私が就職するまでには実際に 7 か月かかりました。その間多くのネットワーキングイベントに参加しましたが、私の就職にとって、キャリアコーチとの時間は本当に必要不可欠だったと思っています。質問ができる人やアドバイスをくれる人がいるということはスキルの面でも、精神的なサポートとしても、本当に助けになりました。

転機と躍進: 初めてのフルタイムの仕事を得るまで

卒業後すぐに、就職活動を開始しました。ボランティア活動やオープンソースプロジェクトへの貢献、ネットワーキングイベントへの参加を通じて学び続け、AWS CP 試験にも合格しました。忙しい日々を送りながら、LinkedIn でも積極的に活動し、プログラミングやサステナビリティに関連するマイルストーンを投稿していました。

Flatiron のキャリアワークショップで、求人の 80 % は公募されず、多くの人が人脈や過去のコラボレーションを通じて仕事を見つけると学びました。当初は半信半疑でしたが、まさにその方法で私は初めての仕事を得ました。

夫のスタートアップで一緒に働いていたメンターが、LinkedIn で私のシェアした React で作成したフルスタックのウェブアプリを見てくれました。彼女の会社が携わっているプロジェクトで React 開発者を必要としていた時、彼女は私に直接連絡をくれ、仕事のオファーをくれたのです。

この経験を通じて、私にとって大きな成長につながるポイントがいくつかあったので、私が役立ったことをいくつか共有したいと思います。

ネットワーキング: ぎこちなさを克服し、関係を築く

ネットワーキングって必要なの？と思う方も多くいるかもしれませんが、私の就活ではネットワーキングはキャリアコーチとの時間と同じ位重要なものでした。そのようなイベントに出たからといって、速攻で仕事を貰えるということはありませんが、面接の練習をする場として、本当に役立ちます。

ブートキャンプのプログラム在籍中は、meetup.com や LinkedIn などのウェブサイトで見つけた地元のイベントに色々参加しようと努力はしていたものの、勉強が大変でなかなか時間が取れませんでした。コーディングの課題提出の前日にイベントがあったり、プロジェクトで切羽詰まっている状態だったり、なかなか参加できませんでした。しかし、卒業後はすぐに仕事を探し始めたかったので、プログラム中に卒業後のイベントをどんどん予約していました。

今回就活をするまで、私は今まで同業界の人たちと繋がる場に積極的に行くというようなネットワーキングをした経験は全くありませんでした。Flatiron 在籍中に、それはとても重要だとコーチに何度も言われていたので、重要性は把握してたのですが、自分の中で勝手に『採用イベント』なんだと誤解してしまっていました。

正直、初めて行ったネットワーキングイベントはもう気まずかったとしか言いようがありません。誰も知らない人が 100 人ほど集まっている結構大きめのイベントで、仕事を見つけると言う目的の婚活パーティーのスピードデーティングのような感じで、できるだけ多くの人と会話しなければならないと勝手にプレッシャーを感じていました。そんな状況が居心地いいはずはないですよね。

ほとんどの団体やグループは月に 1 回など、定期的にミートアップやイベントを開催しているので、私は大体 10 グループのミートアップに毎月参加するようにしていました。環境系テック業界に興味があったので、環境テックのイベントや開発者向けのイベントなどに参加していました。

ネットワーキングから学んだこと: 会話をチャンスに変える方法

ネットワーキングのイベントは決して「採用イベント」ではありません。30 人以上の人に会って、30 人以上の新しい LinkedIn のつながりを作る必要は全くありません。少数でも意味のある会話をして、覚えていられる人達との良いつながりを作ることに焦点を合わせると、より意味のあるものになるんじゃないかと思います。

そういう場で自然と次々に色々な人と話して行くと言うのが得意な方もいると思うので、人によって得意不得意を見極め、自分に合うスタイルで参加して行くことがオススメです。

同じ団体やグループが主催するイベントに毎回参加していると、だんだん顔なじみが増えてきて、行くたびに楽しさが増していきます。こういったイベントは直接仕事につながるわけではないかもしれませんが、私にとっては面接の練習にもなり、就活の大変さがわかる仲間に出会える場でもありました。

初対面の人に「お仕事は何をしているのですか？」と聞かれたり、会の初めに「簡単な自己紹介をお願いします。」と言われる事がよくありました。これって面接官が聞く質問ですよね。それで、面接官の方もただ面接を受ける人のことを知りたいだけなんだ！と思ったらそれまで尋問のように考えていた面接も、かなり気が楽になったのを覚えています。

また、同じ興味を持つ人と話すことで、自分が知らなかったリソースを教えてもらうことも多々ありました。

例えば、私はシアトルの Amazon AWS スキルセンターが、世界中どこからでもアクセスできる AWS のクラス (対面＆オンライン) を無料で提供していることを知りました。また、他のエンジニアの方に、環境テック関連の中小企業は人をトレーニングする資金や人材が不足しがちなため、経験豊富な人を雇うことが多いということも教えてもらいました。さらに、大手テック企業がブートキャンプ卒業生など、CS (Computer Science) の学位を持たない人向けにやっているプログラム (Microsoft Leap Program など) の存在も教えてもらいました。

かといって、ネットワーキングのために必ずしも知らない人ばかりのミートアップに参加する必要はないと思います。子供を学校に迎えに行ったときに他の保護者の方と話したり、友達や近所の人と「最近どう？」といった日常の会話の中で『今プログラミング勉強してるよ。』とか、『仕事探してるよ。』と伝えるのも一つだと思います。プログラミングを学んでいることや仕事を探していることを周囲に伝えてみてください。

人は助けられるなら助けたいと思うものです。それがブログを書いたり、オープンソースプロジェクトに貢献したり、リソースを共有したりする一番の理由だと思います。すぐには結果が出ないかもしれませんが、いい機会があれば、そういった人が教えてくれるでしょう。

実際、私もオファーを受けた後に、友人から彼女の部署でバックエンドエンジニアのポジションの募集があると声をかけてもらった経験があります。それは私が、ブートキャンプを卒業して仕事を探していること、バックエンドがすごく気に入っていることを世間話のように話していたからこそあったチャンスだと思います。

残念ながらその時はもうすでに仕事のオファーを受けていたので断ることになってしまったのですが、ネットワーキングによって、まだ公募していないポジションに出会える事だってあるのです！

求人応募の攻略と企業へのアプローチ法

昨年 2023 年の米国ジョブマーケットではインタビューを得ることはかなり大変でした。特に、私のように 1 つの分野で 10 年以上の経験があるにもかかわらず、完全に新しい分野に挑戦しようとしている人にとってはなおさらです。

実際に、翻訳関係の仕事は申し込むとすぐ面接に繋げられ、一つは一次面接をしたものの、こちらからどうしてもやる気がでずお断りしてしまったほどでした。

テック業界では、エントリーレベルの職種でさえも 2 年、時には 4 年以上の経験を求められることがよくあります。謎すぎます。その上たとえその条件を満たしていても、5 次面接までさせられたり。テック業界はかなり疑心暗鬼のようです😂

私にとって仕事に応募する際の鍵となった戦略は、応募後に必ず採用担当の方やその会社の誰かにメッセージを送ることでした。企業は、本当にその会社や仕事に関心を持っている人を採用したいと考えています。自分の興味やなぜ適任であるか、スキルがどのように役立つかを伝える人間味のあるメッセージを送ることで、彼らの目に留まる可能性が高くなります。

もしその会社に知り合いがいるなら、通常の方法で応募するのではなく、まずその人に連絡を取り、推薦してもらえるかどうかを確認してみることも大切です。私が 7 ヶ月間に得た面接の約 90 % は、そういったメッセージからこぎつけたものでした。

また、メッセージを送ることで、その会社の文化を垣間見ることもできます。ある会社はまるで自動返信のように、「そういったご用件でしたら、ウェブサイトで直接ご応募ください。」とだけ返ってきたり、無視される事が大半でしたが、その中でもとても親切な対応をしてくれる会社の方々もあり、一層こんな優しい人ばかりの会社で働きたい！と思ったのを覚えています。

厳しい就活環境では選り好みするのは難しいですが、私は働きやすい文化を持つ会社で働きたいと思っています。連絡を取ることで、面接にもつながる可能性が高くなる上、その会社がどんな雰囲気か少し感じ取ることができました。

面接突破法: 会話を仕事のオファーに繋げる方法

五万とある応募の中から選んでもらって面接を取り付けるまでが一番難しいと思いますが、普段ネットワーキングイベントに参加している人なら、事前準備をしていれば面接自体は大抵うまくいくと思います。

例えば、私は Amazon だけでも恥ずかしながら 100 以上のポジションに応募し、その中で 25 件ほどは推薦で応募しましたが、実際に面接をしてもらえたのはたった 1 つのポジションだけでした。そう、たった 1 つだけなのです。他は全部書類面接で経験が足りず落とされてしまいました。

結局カリフォルニアへの引越しが出来ず内定をお断りすることになってしまったのですが、その 1 つのポジションで、合計 5 時間以上の面接の後オファーをもらえたので、通い詰めたネットワーキングイベントのおかげで、面接獲得後の成功率は 100 % でした😎

私が色々なポジションの面接を受けて感じたのは、面接官の方はあなたが何をできるかということよりも、『どのように考えるか』と言う事をもっと重視しているということです。その職種、会社、ポジションにもよると思いますが、私の経験では質問は常にあなたの思考プロセスや、過去にどのような状況でどのように対応したかについてでした。

何ヶ月もネットワーキングイベントに参加したことで、面接官との会話が自然にできるようになり、リラックスして臨めました。Flatiron に入る前の面接を振り返ると、あれは会話というよりも完全に取り調べにあっているようでした。

面接は、面接官の人達が一緒に働きたい人を見つけるためのものなので、会話をするように心がけると自然にやり取りができました。もし月曜日の面接なら、「週末はどうでしたか？」と尋ねるようにしていました。「元気ですか？」と聞かれたら、「元気です、ありがとうございます。あなたはどうですか？」とよくある英語の受け答えではなく、週末に何をしたのか、ペットや子供について、体調を崩していたことなど、何か個人的なことを話しました。

日本の面接だったら無駄話が多いと印象付いてしまうかもしれませんが、アメリカではこういった人間らしい会話をすることで、他の面接を受ける人と差別化を図ると、相手に強い印象を残せ覚えてもらえます。こちらが長い返答をすると、自然と相手も長い返答をしてくれ、お互いをもっと知る機会となります。

トップから学ぶ: メンターシップが技術の成長を加速

冒頭で 1 人のメンターについて触れましたが、実際には数人のメンターがいました。メンターは本当に素晴らしい存在で、これはテックカルチャーの一部なのか、それとも西海岸の文化なのかはわかりませんが、サポートしてくれる人が本当にたくさんいます。

1 人目のメンターは、前にもお話しした通り、私をこの道に導いてくれた人で、彼女はソフトウェア会社を経営しており、現在私は彼女の会社で働いています。

もう 1 人のメンターは、昨年 PNW Climate Week でボランティアをした際知り合った方です。イベントが終わった後も、就職が決まるまで 2 週間に一度オンラインで面談していました。彼女は私の就職活動の進捗を気にかけてれて、その二週間で私が就活でしたことを確認し、アドバイスをくれました。

私はとても働きたいと思っていた会社から面接の一環で課題をもらったのですが、残念ながらその課題提出後不採用となってしまいました。今となっては恥ずかしい話なのですが、自分では結構課題の出来に自信があったので、なぜ不採用になったのかわからず、かなり落ち込んでいました。彼女にその課題を見せると、シニアエンジニアとして色々助言をくれて、それまでわからなかった不採用の理由が彼女と話すことで明確になりました。彼女との会話は本当に勉強になりました。そういう機会を隔週で設けてもらえたことで、面接官と話す特訓にもなっていたと今では思っています。ボランティアでここまでしてもらえて、本当に感謝しかありません。

3 人目のメンターは、なんと LinkedIn を通じて知り合った人でした。私は LinkedIn で積極的に活動しており、しょっちゅう投稿していたので、彼はたまたま私を見つけて「メンターをするのが好きだから」と言って向こうから申し出てくれて、次になんのプログラミング言語を勉強したらいいか、このサイトでプロフィールを作った方がいいよなど、あらゆる指導や相談に乗ってくれました。プロフィールを作ると今度はその内容を添削してくれたりもしました。

テック業界にはサポートしてくれる人がたくさんいるので、遠慮せずに周りの人に聞いたり、そういったオファーがあればぜひ遠慮しないで受けてみてください。世の中には本当に素晴らしい人たちがいて、かなり助けてもらったので、私もいつかどこかの誰かに同じことをすることで恩返しできるといいなと思っています️。

オープンソースの可能性: 経験と信頼性の構築

オープンソースとは、誰でも自由にアクセスできるソフトウェアのことを指します。コードが公開されていて誰でも閲覧、修正、機能追加などができます。多くの人が共同で開発に参加することで、ソフトウェアの品質向上や新しいアイデアの実現が促進されます。

GitHub などのプラットフォームを通じて、世界中のエンジニアがオープンソースプロジェクトに貢献しています。実際のコード関連のオープンソースだけでなく、freeCodeCamp.org では、テック関連の学習内容を翻訳するオープンソースプロジェクトもあります。

そのようなオープンソースプロジェクトをまだ始めていなくて、テック業界の経験があまりないのであれば、オープンソースプロジェクトへの貢献をできるだけ早く始めることをお勧めします。ブートキャンプ中のキャリアワークショップで、オープンソースは業界経験がない人にとって特に価値があると言うことを学びました。卒業する頃には、すでに 2 ヶ月以上の実務経験を積んでいることだって可能になります。大学生なら数年の経験だってあり得ます。

私は昨年の 3 月、Flatiron 在学中にオープンソースプロジェクトへの貢献を始め、その最初のプロジェクトの 1 つがこの freeCodeCamp.org でした。

freeCodeCamp.org のプロジェクトの素晴らしいところは、私が記事に取り組み始めるとすぐに、以下のようなプロフィールページを作成してくれたことです。それを履歴書やポートフォリオにすぐに活用することができました。

freeCodeCamp.org のプロフィール

Meta の React プロジェクトへの貢献は、私の GitHub のアクティビティーのステータスを緑に保つのにも役立ちました。Git の使い方もわからないところを経験豊富なモデレーターのエンジニアの方に教えもらったり、とても勉強になりました。

ブートキャンプを卒業した後、環境テック系のイベントで The Climate Tech Handbook というオープンソースプロジェクトの創設者に出会い、React のディベロッパーを探していると聞き、すぐに参加させてもらいました。張り切ってまるでパートタイムの仕事のように取り組んでいました。そのプロジェクトを通して、ウェブデザイナーや Figma デザイン、さまざまなチームと協力して働くようになり、プログラミングのコードだけでなく、Software Development という分野の開発サイクルを勉強することもできました。

これらの経験はポートフォリオや履歴書に追加できるだけでなく、面接でも大いに活用することができました。面接で聞かれたほとんどの質問には、これらの経験を基に答えることができました。

テック業界での経験がまだ浅かったにもかかわらず、非常に関連性の高い話題を話す事ができたのです。そしてもちろん、これらの経験を履歴書に追加することで、同じキャリアレベルの他の人と比べて差別化することもできます。

freeCodeCamp、The Climate Tech Handbook、React Project をはじめ、他のオープンソースコミュニティのおかげで、ポートフォリオを豊かにする事ができました。自分一人では到底達成できなかったことだと思います。心から感謝です。

テックジャーニーを振り返って: 型破りな道を楽しむ

キーポイント

積極的に行動することは、履歴書とポートフォリオの内容の改善に大いに役立ちました。ボランティアやオープンソースプロジェクトへの貢献は、同じ経験レベルの候補者の中で差別化を図る素晴らしい方法で、面接時に使える貴重な題材にもなります。
できるだけ多くの人と出会い、新しいリソースを発見し、アドバイスをもらったり、面接スキルを向上させましょう。これらを続けることで、新しい業界で特に感じがちな、「インポスター症候群」を和らげる助けにもなります。
学び続けることは大事ですが、無理のないペースで行うことが重要です。私のメンターの 1 人が言っていたように、学びにも「季節」があります。この記事を読んでいるのであれば、あなたも私のように常に学び続けていないと罪悪感を感じるタイプの人かもしれません。ですが、学んだことを消化するには時間がかかること、休息は学習の過程の一部として必要不可欠だということを忘れないようにしましょう。
他の分野から技術業界に転職することは、意外かもしれませんが実は大きな強みになると思っています。あなたの独自の背景のおかげで、他の人が持っていない視点から物事を見ることができますし、私が技術と翻訳スキルを活かして専門分野に踏み出したように、あなたしかできない分野があるはずです。

メンターの紹介で入ったソフトウェア開発の会社で働き始めて、早くももう 9 ヶ月が経ちました。本当にあっという間で、毎日多くのことを学びながら、仕事を楽しむことができています。ひょんなことから始めたプログラミングでしたが、数年前にこの新しいテックという分野に挑戦して本当に良かったと思っています。

仕事がすぐに見つからなかったことは精神的にも辛く、時には心が折れそうになることもありましたが (アメリカで就活経験がある人は共感してくれる方も多いかもしれません)、そのおかげで今の自分があると思うと、結果的にはそれで良かったんだと思います。これからの自分の成長が楽しみです。

React、Node、Socket.io、HarperDB を使用してリアルタイムのチャットアプリケーションを作成する方法

Saki Basken — Wed, 28 Feb 2024 09:31:42 +0000

原文: How to Build a Real-time Chat App with React, Node, Socket.io, and HarperDB

この記事では、Socket.io と HarperDB を使用して、チャットルームを備えたフルスタックのリアルタイム・チャットアプリケーションを作成します。

このプロジェクトを通して、フルスタックアプリケーションの作り方や、バックエンドがフロントエンドとリアルタイムで通信できるウェブアプリの作り方を学ぶことができます。

通常、HTTP リクエストを使用する場合、サーバーはリアルタイムでデータをクライアントにプッシュすることはできません。しかし、Socket.io を使用することで、サーバーはサーバー上で発生したいくつかのイベントに関するリアルタイム情報をクライアントにプッシュすることができるようになります。

これから作成するウェブアプリには 2 つのページがあります。

チャットルームに参加するページ。

そしてチャットルームのページ。

このウェブアプリ作成に使用するものは次のとおりです。

フロントエンド: React (インタラクティブなアプリケーションを構築するためのフロントエンド JavaScript のフレームワークです)
バックエンド: Node と Express (Express は、API とバックエンドを簡単に作成できる非常に人気のある NodeJS のフレームワークです)
データベース: HarperDB (SQL または NoSQL を使用してデータをクエリできるデータ + アプリケーションのプラットフォーム。HarperDB には API も組み込まれているため、大量にバックエンドのコードを書く必要がなくなります)
リアルタイム通信: Socket.io (以下を参照してください！)

ソースコードはここをご覧ください。(星を付けるのをお忘れなく⭐)

Socket.io とは

Socket.IO を使用することで、サーバー上でイベントが発生したときに、サーバーはリアルタイムで情報をクライアントにプッシュすることができます。

たとえば、マルチプレイゲームをしているとします。「友達」があなたに対してものすごいゴールを決めてしまうというイベントが発生するかもしれません。

Socket.IO を使用することで、失点について (ほぼ) 瞬時に知ることができるのです。

Socket.IO を使用しない場合では、クライアントはサーバーでイベントが発生したかどうかを確認するために複数のポーリング AJAX 呼び出しを行う必要があります。例えば、クライアントは JavaScript を使用して、サーバー上のイベントを 5 秒ごとに確認することも可能でしょう。

Socket.IO を使用することで、クライアントはサーバー上でイベントが発生したかどうかを確認するために複数のポーリング AJAX 呼び出しを行う必要がなくなります。代わりに、サーバーは情報を取得したら直ちにそれをクライアントに送信します。はるかに効率的ですね。👌

そのため、Socket.IO を使用すると、チャットアプリやマルチプレイヤーゲームなどのリアルタイムアプリケーションを簡単に構築することができます。

プロジェクトのセットアップ

1. フォルダーの設定方法

お好みのテキストエディター (私の場合は VS Code) で新しいプロジェクトを立ち上げ、ルートフォルダーにクライアント (client) とサーバー (server) という 2 つのフォルダーを作成します。

フロントエンド React アプリケーションをクライアントフォルダーに、Node/Express バックエンドをサーバーフォルダーに作成していきます。

2. クライアントの依存関係をインストールする方法

プロジェクトのルートディレクトリでターミナルを開きます。(VS Code では、Ctrl+' を押すか、ターミナル -> 新しいターミナルを選択してください。)

次に、React をクライアントディレクトリにインストールします。

$ npx create-react-app client

React がインストールされたら、ディレクトリをクライアントフォルダーに変更し、次の依存関係をインストールします。

$ cd client
$ npm i react-router-dom socket.io-client

React-router-dom を使用することで、さまざまな React コンポーネントへのルートを設定でき、それによって色々なページを作成することができます。

Socket.io-client は、socket.io のクライアント版であり、イベントをサーバーに「送信」できます。サーバーが受信すると、socket.io のサーバー版を使用して、送信者と同じルーム内のユーザーにメッセージを送信したり、ユーザーをソケットルームに参加させたりすることができます。

後で実際にコードを使って実践してみると、それが何を意味するのか、もっとわかるかと思います。

3. React アプリの起動方法

クライアントディレクトリから次のコマンドを実行して、すべてが順調に稼働していることを確認してみましょう。

$ npm start

Webpack は React アプリをビルドし、http://localhost:3000 で起動します。

次に、ユーザーが送信したメッセージを永続的に保存するために使用する HarperDB データベースを設定しましょう。

HarperDB のセットアップ方法

まず、HarperDB でアカウントを作成します。

次に、新しい HarperDB クラウドインスタンスを作成します。

クラウドインスタンスを選択すると、設定が楽になるのでおすすめです。

クラウドプロバイダーを選択します (私は AWS を選択しました)。

クラウドインスタンスに名前を付け、インスタンスの認証情報を作成します。

HarperDB には、有難いことに充分な無料枠があるため、このプロジェクトにはそれを選択します。

全ての詳細が正しいことを確認してから、インスタンスを作成します。

インスタンスの立ち上げには数分かかるので、早速最初の React コンポーネントを作成してみましょう！

「チャットルームに参加する」ページ作成方法

私たちのホームページは最終的には次のようになる予定です。

ユーザーはユーザー名を入力し、ドロップダウンからチャットルームを選択して、Join Room (ルームに参加) をクリックします。すると、ユーザーはチャットルームのページへ移動します。

ということで、早速このホームページを作ってみましょう。

1. HTML フォームの作成とスタイルの追加方法

新しいファイル、src/pages/home/index.js を作成します。

CSS モジュールを使用してアプリに基本的なスタイルを追加するため、新しいファイル src/pages/home/styles.module.css を作成します。

ディレクトリの構成は次のようになります。

次に、基本的な HTML のフォームを作成しましょう。

// client/src/pages/home/index.js

import styles from './styles.module.css';

const Home = () => {
  return (
    
      
        {`<>DevRooms`}
        

        

        
      
    
  );
};

export default Home;

上では、ユーザー名を取得するための単純なテキスト入力と、ユーザーが参加するチャットルームを選択するためのいくつかのデフォルトオプションを含む select ドロップダウンがあります。

このコンポーネントを App.js にインポートし、react-router-dom パッケージを使用してコンポーネントのルートを設定します。これはホームページとなるため、パスは単に「/」になります。

// client/src/App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/home';

function App() {
  return (
    
      
        
          } />
        
      
    
  );
}

export default App;

次に、アプリの見栄えを良くするためにいくつか基本のスタイルを追加していきます。

/* client/src/App.css */

html * {
  font-family: Arial;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(63, 73, 204);
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
.btn {
  padding: 14px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
.btn-outline {
  color: rgb(153, 217, 234);
  border: 1px solid rgb(153, 217, 234);
  background: rgb(63, 73, 204);
}
.btn-primary {
  background: rgb(153, 217, 234);
  color: rgb(0, 24, 111);
}
.btn-secondary {
  background: rgb(0, 24, 111);
  color: #fff;
}

ホームページコンポーネントに固有のスタイルも追加していきます。

/* client/src/pages/home/styles.module.css */

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63, 73, 204);
}
.formContainer {
  width: 400px;
  margin: 0 auto 0 auto;
  padding: 32px;
  background: lightblue;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgb(63, 73, 204);
  font-size: 0.9rem;
}
.input option {
  margin-top: 20px;
}

また、スタイル属性を追加して、「ルームに参加」ボタンを全幅にしてみましょう。

// client/src/pages/home/index.js

なかなか良くなってきましたね。

2. ルーム参加フォームに機能を追加する方法

基本的なフォームとスタイルができたので、次に機能を追加して行きたいと思います。

ユーザーが「ルームに参加」ボタンをクリックしたときに起きて欲しい事項を、以下にまとめました。

ユーザー名と部屋のフィールドが入力されていることを確認する。
確認できたら、ソケットイベントをサーバーに送信する。
ユーザーをチャットページ (後で作成予定) にリダイレクトする。

username と room の値を保存する state の作成が必要です。また、ソケットインスタンスの作成も必要です。

これらの state をホームコンポーネント内で直接作成することもできますが、チャットページもユーザー名、ルーム、ソケットにアクセスする必要があります。そこで、state を App.js に引き上げ、そこでこれらの変数をホームページコンポーネントとチャットページコンポーネントの両方に渡します。

なのでまず、App.js 内で state の作成とソケットの設定をし、これらの変数を props としてコンポーネントに渡しましょう。から state の値を更新できるように、state の set 関数も渡します。

// client/src/App.js

import './App.css';
import { useState } from 'react'; // Add this
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client'; // Add this
import Home from './pages/home';

const socket = io.connect('http://localhost:4000'); // Add this -- our server will run on port 4000, so we connect to it from here

function App() {
  const [username, setUsername] = useState(''); // Add this
  const [room, setRoom] = useState(''); // Add this

  return (
    
      
        
          
            }
          />
        
      
    
  );
}

export default App;

これで、Home コンポーネント内でもこれらの props にアクセスできるようになりました。以下のように、分割代入 (デストラクチャリング) を使って、props にアクセスします。

// client/src/pages/home/index.js

import styles from './style.module.css';

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    // ...
  );
};

export default Home;

ユーザーがユーザー名を入力するか、チャットルームを選択したとき、ユーザー名とルームの state を更新する必要があります。

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    
      // ...
         setUsername(e.target.value)} // Add this
        />

        

        // ...
    
  );
};

export default Home;

ユーザーが入力したデータを取得しているので、ユーザーが「ルームに参加」ボタンをクリックしたときのコールバック関数、joinRoom() を作成できます。

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  
  // Add this
  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }
  };

  return (
    
      // ...
      
        
      // ...
    
  );
};

export default Home;

上では、ユーザーがボタンをクリックすると、ユーザーのユーザーネームと選択したルームを含むオブジェクトとともに、join_room というソケットイベントが発行されます。このイベントはその後サーバーに聞き取りされます。

ホームページコンポーネントを完成するには、ユーザーを /chat ページに誘導するリダイレクトロジックを joinRoom() 関数の最後に追加する必要があります。

// client/src/pages/home/index.js

// ...
import { useNavigate } from 'react-router-dom'; // Add this

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  const navigate = useNavigate(); // Add this

  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }

    // Redirect to /chat
    navigate('/chat', { replace: true }); // Add this
  };

 // ...

テストしてみましょう: ユーザー名を入力してルームを選択し、[ルームに参加] をクリックします。現在は空のページですが、http://localhost:3000/chat というルートに転送されるはずです。

フロントエンドのチャットページを作成する前に、まずは少しサーバーの立ち上げをしてみましょう。

サーバーの設定方法

サーバー側は、イベントリスナーを使ってフロントエンドで発生したソケットイベントの通知を待ちます。現在、React に発生しているイベントは join_room のみなので、まずはこのイベントリスナーを追加します。

ただその前に、サーバーの依存関係をインストールし、サーバーを起動して実行する必要があります。

1. サーバーの依存関係をインストールする方法

新しいターミナルを開き (VS コード: [ターミナル] -> [新しいターミナル])、ディレクトリをサーバーフォルダーに変更し、package.json ファイルを初期化し、次の依存関係をインストールします。

$ cd server
$ npm init -y
$ npm i axios cors express socket.io dotenv

Axios は、API へのリクエストを簡易化するために一般的に使用されているパッケージです。
Cors を使用すると、クライアントは他のオリジンにもリクエストを送ることができます。これは socket.io が適切に作動するために不可欠です。CORS についてまだ聞いたことがない方は、ぜひ「CORS とは」を参照してみてください。
Express は、少ないコードでより簡単にバックエンドを作成できる NodeJS のフレームワークです。
Socket.io は、標準の HTTP リクエストでは実現不可能な、クライアントとサーバーのリアルタイム通信を可能にするライブラリです。
Dotenv は、秘密キーとパスワードを安全に保管し、必要に応じてコードに読み込むことができるようにするモジュールです。

また、nodemon を開発依存関係としてインストールすることで、コードを変更するたびにサーバーを再起動する必要がなく、時間と労力を節約することができます。

$ npm i -D nodemon

2. サーバーを起動する方法

サーバーディレクトリのルートに index.js というフォルダーを作成し、次のコードを追加してサーバーを起動して実行します。

// server/index.js

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

server.listen(4000, () => 'Server is running on port 4000');

サーバー上の package.json ファイルを開き、開発で nodemon を使用できるようにするスクリプトを追加します。

{
  ...
  "scripts": {
    "dev": "nodemon index.js"
  },
  ...
}

次に、下記のコマンドでサーバーを起動しましょう。

$ npm run dev

GET リクエストハンドラーを追加することで、サーバーが正しく実行されていることをすぐに確認することができます。

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

// Add this
app.get('/', (req, res) => {
  res.send('Hello world');
});

server.listen(4000, () => 'Server is running on port 3000');

http://localhost:4000/ に移動します。

サーバーは問題なく稼働しています。今度は、サーバー側の Socket.io の作業を行います。

サーバー上で最初の Socket.io イベントリスナーを作成する方法

クライアント側から、join_room イベントを送りましたね。これからそのイベント情報をサーバー側で聞き取り、ユーザーをソケットルームに追加していきます。

しかしまず、クライアントが Socket.io のクライアント経由でサーバーに接続したかを確認する必要があります。

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');
const { Server } = require('socket.io'); // Add this

app.use(cors()); // Add cors middleware

const server = http.createServer(app); // Add this

// Add this
// Create an io server and allow for CORS from http://localhost:3000 with GET and POST methods
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST'],
  },
});

// Add this
// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // We can write our socket event listeners in here...
});

server.listen(4000, () => 'Server is running on port 3000');

これで、クライアントがフロントエンドから接続すると、バックエンドが接続イベントをキャプチャし、その特定のクライアントの一意のソケット ID を使用して User connected とログに記録します。

一度、サーバーがクライアントからの接続イベントをキャプチャしているかどうかをテストしてみましょう。http://localhost:3000/ にある React アプリに移動し、ページを更新してみてください。

サーバー端末コンソールに次のログが表示されているはずです。

見事、クライアントが socket.io 経由でサーバーに接続しました。これでクライアントとサーバーがリアルタイムで通信できるようになりました。

Socket.io のルームの仕組み

Socket.io ドキュメントより:

「ルームとは、ソケットが出入り (join と leave) できる任意のチャネルです。クライアントのサブセットにイベントをブロードキャストするために使用できます。」

したがって、ユーザーをルームに参加させると、サーバーはそのルーム内のすべてのユーザーにメッセージを送信できるため、ユーザーはリアルタイムで相互にメッセージを送信できるようになるのです。素晴らしい！

ユーザーを Socket.io ルームに参加させる方法

ユーザーが Socket.io を介して接続したら、クライアントから通知されたイベントを聞き取るために、サーバー上でソケットイベントリスナーを追加することができます。また、サーバー上でイベント情報を発行し、クライアント上で聞き取ることもできます。

早速 join_room イベントの発生を待ち、データ (ユーザー名とルーム) をキャプチャして、ユーザーをソケットルームに追加しましょう。

// server/index.js

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add this
  // Add a user to a room
  socket.on('join_room', (data) => {
    const { username, room } = data; // Data sent from client when join_room event emitted
    socket.join(room); // Join the user to a socket room
  });
});

ルーム内のユーザーにメッセージを送信する方法

まずは、参加したばかりのユーザー以外のルーム内すべてのユーザーにメッセージを送信して、新しいユーザーが参加したことを通知しましょう。

// server/index.js

const CHAT_BOT = 'ChatBot'; // Add this
// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add a user to a room
  socket.on('join_room', (data) => {
    const { username, room } = data; // Data sent from client when join_room event emitted
    socket.join(room); // Join the user to a socket room

    // Add this
    let __createdtime__ = Date.now(); // Current timestamp
    // Send message to all users currently in the room, apart from the user that just joined
    socket.to(room).emit('receive_message', {
      message: `${username} has joined the chat room`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

上記では、現在のユーザーが参加したばかりのルーム内にいる全クライアントに、receive_message イベントを発行しています。そしてそのイベントには、メッセージ本文、メッセージを送信したユーザー名、メッセージの送信時刻などのデータが含まれています。

少し後で React アプリケーションにイベントリスナーを追加して、このイベントをキャプチャし、画面にメッセージを出力します。

新しく参加したユーザーにも、ウェルカムメッセージを送信しましょう。

// server/index.js

io.on('connection', (socket) => {
  // ...

    // Add this
    // Send welcome msg to user that just joined chat only
    socket.emit('receive_message', {
      message: `Welcome ${username}`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

ユーザーを Socket.io のルームに追加すると、Socket.io は各ユーザーのソケット ID のみを保存します。しかし今後、ルーム名だけでなく、ルームにいる全員のユーザー名も必要になってきます。そこで、これらのデータをサーバー上の変数に保存しておきましょう。

// server/index.js

// ...

const CHAT_BOT = 'ChatBot';
// Add this
let chatRoom = ''; // E.g. javascript, node,...
let allUsers = []; // All users in current chat room

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    // ...
    
    // Add this
    // Save the new user to the room
    chatRoom = room;
    allUsers.push({ id: socket.id, username, room });
    chatRoomUsers = allUsers.filter((user) => user.room === room);
    socket.to(room).emit('chatroom_users', chatRoomUsers);
    socket.emit('chatroom_users', chatRoomUsers);
  });
});

上記では、chatroom_users イベントを介して全ユーザー (chatRoomUsers) の配列もクライアントに送り返しています。それによって、フロントエンドでルーム内のすべてのユーザー名をリストすることができるようになります。

サーバーにもっとコードを追加する前に、フロントエンドに戻ってチャットページを作成しましょう。そうすることによって、receive_message イベントをフロントエンドできちんと受信できているかどうかをテストすることができます。

チャットページを作成する方法

クライアントフォルダーに、2 つの新しいファイルを作成します。

src/pages/chat/index.js
src/pages/chat/styles.module.css

まずはチャットページとコンポーネントで使用するスタイルをいくつか追加しましょう。

/* client/src/pages/chat/styles.module.css */

.chatContainer {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 20px;
}

/* Room and users component */
.roomAndUsersColumn {
  border-right: 1px solid #dfdfdf;
}
.roomTitle {
  margin-bottom: 60px;
  text-transform: uppercase;
  font-size: 2rem;
  color: #fff;
}
.usersTitle {
  font-size: 1.2rem;
  color: #fff;
}
.usersList {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 60px;
  color: rgb(153, 217, 234);
}
.usersList li {
  margin-bottom: 12px;
}

/* Messages */
.messagesColumn {
  height: 85vh;
  overflow: auto;
  padding: 10px 10px 10px 40px;
}
.message {
  background: rgb(0, 24, 111);
  border-radius: 6px;
  margin-bottom: 24px;
  max-width: 600px;
  padding: 12px;
}
.msgMeta {
  color: rgb(153, 217, 234);
  font-size: 0.75rem;
}
.msgText {
  color: #fff;
}

/* Message input and button */
.sendMessageContainer {
  padding: 16px 20px 20px 16px;
}
.messageInput {
  padding: 14px;
  margin-right: 16px;
  width: 60%;
  border-radius: 6px;
  border: 1px solid rgb(153, 217, 234);
  font-size: 0.9rem;
}

追加できたら、チャットページが下のようになるかを見てみましょう。

このページのすべてのコードとロジックを 1 つのファイルにまとめてしまうと、読みにくく管理が難しくなってしまうため、せっかく便利なフロントエンドフレームワーク (React) を使用しているので、このページをコンポーネントに分けます。

チャットページのコンポーネント:

A: チャットルーム名、そのチャットルーム内にいるユーザーリスト、およびユーザーをチャットルームから削除する「退出」ボタンが含まれる部分。

B: 送信されたメッセージ。最初のレンダリング時に、そのチャットルームで送信された最新 100 件のメッセージがデータベースから取得され、ユーザーに表示されます。

C: メッセージを入力して送信するための入力フィールドとボタン。

まずはコンポーネント B を作成して、ユーザーにメッセージを表示できるようにします。

メッセージコンポーネント (B) を作成する方法

新しいファイル src/pages/chat/messages.js を作成し、次のコードを追加してください。

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  // Runs whenever a socket event is recieved from the server
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

	// Remove event listener on component unmount
    return () => socket.off('receive_message');
  }, [socket]);

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    
      {messagesRecieved.map((msg, i) => (
        
          
            {msg.username}
            
              {formatDateFromTimestamp(msg.__createdtime__)}
            
          
          {msg.message}
          

        
      ))}
    
  );
};

export default Messages;

上記には、ソケットイベントが受信されるたびに実行される useEffect フックがあります。次に、receive_message というイベントリスナーに渡されたメッセージデータを取得します。そこから、messagesReceived の state を設定します。これは、メッセージ、送信者のユーザー名、メッセージが送信された日付を含むメッセージオブジェクトの配列です。

今作ったこのメッセージコンポーネントをチャットページにインポートし、App.js でチャットページのルートを作成しましょう。

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';

const Chat = ({ socket }) => {
  return (
    
      
        
      
    
  );
};

export default Chat;

// client/src/App.js

import './App.css';
import { useState } from 'react';
import Home from './pages/home';
import Chat from './pages/chat';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client';

const socket = io.connect('http://localhost:4000');

function App() {
  const [username, setUsername] = useState('');
  const [room, setRoom] = useState('');

  return (
    
      
        
          
            }
          />
          {/* Add this */}
          }
          />
        
      
    
  );
}

export default App;

一度テストしてみましょう。ホームページにアクセスしてルームに参加してみてください。

チャットページに移動し、ChatBot からウェルカムメッセージを受け取ります。

ユーザーは受信したメッセージを確認できるようになりました。上出来です！

次は、メッセージを永続的に保存できるようにデータベースを設定します。

HarperDB でスキーマとテーブルを作成する方法

HarperDB のダッシュボードに戻り、「browse (参照)」をクリックします。次に、realtime_chat_app という新しいスキーマを作成します。スキーマというのは、単に複数のテーブルをまとめたもののことです。

そのスキーマ内に、ハッシュ属性が id の messages というテーブルを作成します。

これで、メッセージを保存する場所ができたので、SendMessage コンポーネントを作成しましょう。

メッセージ送信コンポーネント (C) の作成方法

ファイル src/pages/chat/send-message.js を作成し、次のコードを追加してください。

// client/src/pages/chat/send-message.js

import styles from './styles.module.css';
import React, { useState } from 'react';

const SendMessage = ({ socket, username, room }) => {
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message !== '') {
      const __createdtime__ = Date.now();
      // Send message to server. We can't specify who we send the message to from the frontend. We can only send to server. Server can then send message to rest of users in room
      socket.emit('send_message', { username, room, message, __createdtime__ });
      setMessage('');
    }
  };

  return (
    
       setMessage(e.target.value)}
        value={message}
      />
      
    
  );
};

export default SendMessage;

上では、ユーザーが「メッセージの送信」というボタンをクリックすると、send_message のソケットイベントがメッセージオブジェクトとともにサーバーに送信されます。後ほどこのイベントをサーバー上で処理します。

SendMessage をチャットページにインポートします。

// src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';
import SendMessage from './send-message';

const Chat = ({ username, room, socket }) => {
  return (
    
      
        
        
      
    
  );
};

export default Chat;

チャットページは次のようになります。

次に、データベースとのやり取りを開始できるように、HarperDB の環境変数を設定する必要があります。

HarperDB の環境変数を設定する方法

HarperDB にメッセージを保存できるようにするには、HarperDB インスタンスの URL と API パスワードが必要です。

HarperDB ダッシュボードでインスタンスをクリックし、「config (設定)」に移動します。インスタンス URL とインスタンス API 認証ヘッダー (データベースへのあらゆるリクエストを許可する「super_user」パスワード) が表示されます。絶対に誰とも共有しないでください！

これらの変数を .env ファイルに保存します。警告: .env ファイルは絶対に GitHub にプッシュしないでください。このファイルは一般に公開すべきものではありません。これらの変数はバックグラウンドでサーバー経由で読み込みされます。

次のファイルを作成し、あなたの HarperDB の URL とパスワードを追加します。

// server/.env

HARPERDB_URL=""
HARPERDB_PW="Basic "

また、.env が node_modules フォルダーとともに GitHub にプッシュされるのを防ぐための .gitignore ファイルも作成します。

// server/.gitignore

.env
node_modules

注意: Git や GitHub をうまく使いこなすことは全ての開発者にとって必須です。もし Git の流儀がまだ曖昧な方は、私の Git のワークフローに関する記事を見てみてください。

または、同じ Git コマンドをいつも検索している方や、コマンドを検索、修正、コピー/ ペーストする簡単な方法をお探しの方はぜひ、私が作った人気 Git コマンドチートシートの PDF 版と Git チートシートポスター版をチェックしてみてください。

最後に、次のコードをメインサーバーファイルの先頭に追加して、環境変数をサーバーに読み込みましょう。

// server/index.js

require('dotenv').config();
console.log(process.env.HARPERDB_URL); // remove this after you've confirmed it working
const express = require('express');
// ...

Socket.io を利用してユーザーが相互にメッセージを送信できるようにする方法

サーバー上で send_message のイベントを聞き取り、ルーム内のすべてのユーザーにメッセージを送信します。

// server/index.js

const express = require('express');
// ...
const harperSaveMessage = require('./services/harper-save-message'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    
  // ...

  // Add this
  socket.on('send_message', (data) => {
    const { message, username, room, __createdtime__ } = data;
    io.in(room).emit('receive_message', data); // Send to all users in room, including sender
    harperSaveMessage(message, username, room, __createdtime__) // Save message in db
      .then((response) => console.log(response))
      .catch((err) => console.log(err));
  });
});

server.listen(4000, () => 'Server is running on port 3000');

次に、harperSaveMessage という関数を作成する必要があります。server/services/harper-save-message.js に新しいファイルを作成し、以下のコードを追加します。

// server/services/harper-save-message.js

var axios = require('axios');

function harperSaveMessage(message, username, room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  var data = JSON.stringify({
    operation: 'insert',
    schema: 'realtime_chat_app',
    table: 'messages',
    records: [
      {
        message,
        username,
        room,
      },
    ],
  });

  var config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperSaveMessage;

上記では、データの保存には少し時間がかかる場合があるため、データが正常に保存された場合は解決され、失敗した場合は拒否される Promise を返しています。

上記のコードをどこで入手したか気になりましたか？HarperDB のスタジオダッシュボードには、便利な「コードサンプル」というセクションが用意されており、それを使うことによって作業がはるかに簡単になります。

テストの時間です！ユーザーとしてルームに参加し、メッセージを送信します。次に、HarperDB に移動し、「browse (参照)」をクリックして、「メッセージ」テーブルをクリックします。データベースにメッセージが表示されているはずです。

素晴らしい😎これができたら次は、ユーザーがチャットルームに参加したときに、ルーム内で送信された最新 100 件のメッセージが読み込まれるようになれば最高だと思いませんか？

HarperDB からメッセージを取得する方法

サーバー上で、特定のチャットルームで送信された最新 100 件のメッセージを取得する関数を作成しましょう (HarperDB では SQL クエリも使用できるんですよ👌):

// server/services/harper-get-messages.js

let axios = require('axios');

function harperGetMessages(room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  let data = JSON.stringify({
    operation: 'sql',
    sql: `SELECT * FROM realtime_chat_app.messages WHERE room = '${room}' LIMIT 100`,
  });

  let config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperGetMessages;

ユーザーがチャットルームに参加するたびにこの関数を呼び出します。

// server/index.js

// ...
const harperSaveMessage = require('./services/harper-save-message');
const harperGetMessages = require('./services/harper-get-messages'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add a user to a room
  socket.on('join_room', (data) => {
      
    // ...

    // Add this
    // Get last 100 messages sent in the chat room
    harperGetMessages(room)
      .then((last100Messages) => {
        // console.log('latest messages', last100Messages);
        socket.emit('last_100_messages', last100Messages);
      })
      .catch((err) => console.log(err));
  });

 // ...

上記では、メッセージが正常にフェッチされると、last_100_messages という Socket.io イベントが発行されます。そうすると、フロントエンドでこのイベントを聞き取ります。

クライアントで最新メッセージ 100 件を表示する方法

以下では、last_100_messages イベントのための、Socket.io イベントリスナーを含む useEffect フックを追加します。そこから、メッセージは日付順に並べ替えられ、最新のメッセージが一番下に表示され、messagesReceived の state が更新されます。

messagesReceived が更新されると、useEffect が実行され、messageColumn div が最新のメッセージまでスクロールされます。これにより、アプリのユーザーエクスペリエンスが向上します👍。

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect, useRef } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  const messagesColumnRef = useRef(null); // Add this

  // Runs whenever a socket event is recieved from the server
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Remove event listener on component unmount
    return () => socket.off('receive_message');
  }, [socket]);

  // Add this
  useEffect(() => {
    // Last 100 messages sent in the chat room (fetched from the db in backend)
    socket.on('last_100_messages', (last100Messages) => {
      console.log('Last 100 messages:', JSON.parse(last100Messages));
      last100Messages = JSON.parse(last100Messages);
      // Sort these messages by __createdtime__
      last100Messages = sortMessagesByDate(last100Messages);
      setMessagesReceived((state) => [...last100Messages, ...state]);
    });

    return () => socket.off('last_100_messages');
  }, [socket]);

  // Add this
  // Scroll to the most recent message
  useEffect(() => {
    messagesColumnRef.current.scrollTop =
      messagesColumnRef.current.scrollHeight;
  }, [messagesRecieved]);

  // Add this
  function sortMessagesByDate(messages) {
    return messages.sort(
      (a, b) => parseInt(a.__createdtime__) - parseInt(b.__createdtime__)
    );
  }

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    // Add ref to this div
    
      {messagesRecieved.map((msg, i) => (
        
          
            {msg.username}
            
              {formatDateFromTimestamp(msg.__createdtime__)}
            
          
          {msg.message}
          

        
      ))}
    
  );
};

export default Messages;

チャットルームとユーザー (A) の表示方法

コンポーネント B と C の作成が完了したので、最後に A を作成しましょう。

サーバー上では、誰かユーザーがチャットルームに参加すると、ルーム内全ユーザーをそのルーム内の全クライアントに送る chatroom_users イベントが発行されます。RoomAndUsers というコンポーネントでそのイベントの聞き取りをしてみましょう。

下のコードには、「Leave (退室)」ボタンもあり、これを押すとサーバーに leave_room イベントが発行されます。その後、そのユーザーをホームページへリダイレクトします。

// client/src/pages/chat/room-and-users.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const RoomAndUsers = ({ socket, username, room }) => {
  const [roomUsers, setRoomUsers] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    socket.on('chatroom_users', (data) => {
      console.log(data);
      setRoomUsers(data);
    });

    return () => socket.off('chatroom_users');
  }, [socket]);

  const leaveRoom = () => {
    const __createdtime__ = Date.now();
    socket.emit('leave_room', { username, room, __createdtime__ });
    // Redirect to home page
    navigate('/', { replace: true });
  };

  return (
    
      {room}

      
        {roomUsers.length > 0 && Users:}
        
          {roomUsers.map((user) => (
            
              {user.username}
            
          ))}
        
      

      
    
  );
};

export default RoomAndUsers;

このコンポーネントをチャットページにインポートしましょう。

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import RoomAndUsersColumn from './room-and-users'; // Add this
import SendMessage from './send-message';
import MessagesReceived from './messages';

const Chat = ({ username, room, socket }) => {
  return (
    
      {/* Add this */}
      

      
        
        
      
    
  );
};

export default Chat;

Socket.io のルームからユーザーを削除する方法

Socket.io には、Socket.io ルームからユーザーを削除するために使用できる leave() メソッドが用意されています。また、サーバーメモリー上の配列でユーザー情報を管理しているため、この配列からもユーザーを削除します。

// server/index.js

const leaveRoom = require('./utils/leave-room'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    
  // ...

  // Add this
  socket.on('leave_room', (data) => {
    const { username, room } = data;
    socket.leave(room);
    const __createdtime__ = Date.now();
    // Remove user from memory
    allUsers = leaveRoom(socket.id, allUsers);
    socket.to(room).emit('chatroom_users', allUsers);
    socket.to(room).emit('receive_message', {
      username: CHAT_BOT,
      message: `${username} has left the chat`,
      __createdtime__,
    });
    console.log(`${username} has left the chat`);
  });
});

server.listen(4000, () => 'Server is running on port 3000');

次に、leaveRoom() という関数を作成する必要があります。

// server/utils/leave-room.js

function leaveRoom(userID, chatRoomUsers) {
  return chatRoomUsers.filter((user) => user.id != userID);
}

module.exports = leaveRoom;

なぜこの短い関数を別の utils フォルダーに置いておく必要があるのでしょうか。それは、後で再び使用することになるので、同じことを繰り返さなくてもいいようにです。(コードを DRY に保つことができます。)

さあ、テストしてみましょう。2 つのブラウザーを並べて開き、両方のブラウザーでチャットに参加してみてください。

次に、ブラウザー 2 の Leave (退室) ボタンをクリックします。

ユーザーはチャットから削除され、他のユーザーに、退席したことを通知するメッセージが送信されます。ナイス！

Socket.io 接続を切断するイベントリスナーを追加する方法

インターネットの接続が切断された場合など、ユーザーが何らかの理由でサーバーから切断された場合はどうなるのでしょうか？Socket.io にはそのような時のために、ビルトインの切断イベントリスナーがあります。これをサーバーに追加して、接続の切断時にユーザーをメモリから削除します。

// server/index.js

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    
  // ...
    
  // Add this
  socket.on('disconnect', () => {
    console.log('User disconnected from the chat');
    const user = allUsers.find((user) => user.id == socket.id);
    if (user?.username) {
      allUsers = leaveRoom(socket.id, allUsers);
      socket.to(chatRoom).emit('chatroom_users', allUsers);
      socket.to(chatRoom).emit('receive_message', {
        message: `${user.username} has disconnected from the chat.`,
      });
    }
  });
});

server.listen(4000, () => 'Server is running on port 3000');

これで、React フロントエンド、Node/Express バックエンド、HarperDB データベースを備えたフルスタックのリアルタイムチャットアプリケーションが構築されました。お見事！

次回は、ユーザーが HarperDB 内で独自の API エンドポイントを定義できるようにする HarperDB のカスタム関数をご紹介する予定です。こうすることで、アプリケーション全体を 1 か所でまとめて構築できます。HarperDB でスタックを縮小 (シンプル化) する例は、この記事でご覧ください。

挑戦状💪

チャットページでページを更新すると、ユーザーのユーザーネームとルームが失われてしまいます。ユーザーがページを更新してもこの情報が失われないようにする方法を探し出してみてください。ヒント: ローカルストレージが役立つかもしれません！

最後まで読んでいただきありがとうございます！

この記事が少しでもお役に立てたのであれば、ぜひ以下もお願いします。

私の YouTube チャンネルに登録。React/NextJS/Node/Express に関する詳細なチュートリアルとプロジェクトビデオを投稿していく予定です。
Twitter でフォロー。私のフリーランス活動、趣味のプロジェクトや、最近学んでいることについてツイートしています。
私の Gumroad ストアをチェックする。そこでは、便利で人気な早見表やポスターを作成していて、執筆現在までに 8000 ダウンロードを達成しています。
私の Web 開発ブログをチェックする。

Python Do While – ループの例

Saki Basken — Wed, 06 Dec 2023 11:54:32 +0000

原文: Python Do While – Loop Example

ループは、すべてのモダンなプログラミング言語で頻繁に使用されている便利な機能です。

特定の反復的なタスクを自動化したい場合や、プログラム内で反復的なコードを書くのを避けたい場合は、ループを使用するのが最適です。

ループは、条件が満たされるまで繰り返し実行される一連の指示です。Python でループがどのように機能するかについて詳しく学びましょう。

Python におけるループ

Python には 2 種類のループが組み込まれています。

for ループ
while ループ

Python で while ループを作成する方法とその仕組みに焦点を当てましょう。

Python における while ループとは何か

Python の while ループの一般的な構文は次のようになります。

while condition:
    execute this code in the loop's body

while ループは、条件が True の間コードを実行します。その条件が True でなくなるまで、必要なコード文のセットを実行し続けます。

while ループは、実行する前に必ずまず条件をチェックします。

条件が True となった場合、ループはループ内のコードを実行します。

たとえば、次のループは、number が 10 未満である限り実行されます。

number = 0
while number < 10:
    print(f"Number is {number}!")
    number = number + 1

出力:

Number is 0!
Number is 1!
Number is 2!
Number is 3!
Number is 4!
Number is 5!
Number is 6!
Number is 7!
Number is 8!
Number is 9!

ここでは、最初に変数 number が 0 に設定されています。

コードが実行される前に、Python は条件 (number < 10) をチェックします。True と判断されるため、print 文が実行され、Number is 0! とコンソールに出力されます。

その後、number の値は 1 増加します。条件が再確認され、再び True であるため、number が 9 に等しくなるまで全体の手順が繰り返されます。

Number is 9! と出力された後、number の値は増加しますが、number は 10 に等しくなるため、その時点で条件が満たされなくなり、ループは終了します。

下の例のように、条件を満たさない場合、while ループが全く実行されない可能性もあります。

number = 50
while number < 10 :
    print(f"Number is {number}!")

条件は常に False であるため、ループ内のコードは実行されません。

無限ループを作らない

上の例でもわかるように、while ループには通常、ループ内に値が変化する変数が伴います。そして最終的にループがいつ終了するかが決まっています。

この 1 行を追加しないと、無限ループが作成されてしまいます。

number の値は増加も更新もされません。常に最初に設定された 0 のままであるため、number < 10 という条件は永久に True となってしまいます。これは、ループが永遠に続いてしまうことを意味します。


# don't run this

number = 0
while number < 10:
    print(f"Number is {number}!")

出力：

Number is 0!
Number is 0!
Number is 0!
Number is 0!
Number is 0!
Number is 0!
Number is 0!
...

このコードは無限に実行されてしまいます。

これは、下のコードと同じことです。


#don't run this
while True:
    print("I am always true")

このような状況に陥ったらどうしますか？

Ctrl + C を押すと、ループを終了することができます。

do while ループとは何か

他のプログラミング言語における do while ループの一般的な構文は次のようになります。

do {
  loop block statement to be executed;
  }
while(condition);

たとえば、C の do while ループは次のようになります。

#include 
 
int main(void)
 {
   int i = 10;
   do {
      printf("the value of i: %i\n", i);
      i++;
      }
  while( i < 20 );
 }

do while ループのユニークな点は、ループブロック内のコードが少なくとも 1 回は実行されるということです。

ブロック内のコードは 1 回実行され、コードの実行後にのみ条件が確認されます。

したがって、最初にコードが 1 度実行されてから、条件がチェックされます。

チェックされた条件が true と判断されると、ループが続行されます。

コードを少なくとも一度は実行したい場合に、do while ループは便利です。

たとえば、ユーザーからの入力を受け取るプログラムを作成している場合に、正数のみを求めることがあります。コードは少なくとも 1 回は実行されます。ユーザーが送信した数値が負数の場合、ループは実行し続けます。プラスの場合は停止します。

Python には他の言語のように do while ループを明確に作成するための組み込み機能はありません。しかし、Python でも do while ループと同じ機能を果たすことは可能です。

Python で do while ループを作成する方法

Python で do while ループを作成するには、他の言語の do while ループと同様な機能を果たすように、while ループに少し手を加える必要があります。

これまでのおさらいですが、do while ループは少なくとも 1 回実行されます。条件が満たされると、再度実行されます。

一方で、while ループは必ず一度は実行されるというわけではなく、実際には一度も実行されないこともあります。条件が満たされたときのみに実行されます。

では、コード行を少なくとも 1 回は実行したいとしましょう。

secret_word = "python"
counter = 0

while True:
    word = input("Enter the secret word: ").lower()
    counter = counter + 1
    if word == secret_word:
        break
    if word != secret_word and counter > 7: 
        break

このコードは少なくとも一度は実行され、ユーザーに入力を求めます。

True があることによって、少なくとも 1 回は実行されることが保証されます。この True は使い方を誤ると無限ループになってしまうため注意してください。

ユーザーが正しいシークレットワードを入力することで、ループは終了します。

ユーザーが間違ったシークレットワードを 7 回以上入力すると、ループは終了します。

break 文を使用すると、while ループのフローを制御し、無限ループに陥ってしまうのを防ぐことができます。

break 文は現ループを直ちに終了させます。

これが、Python で do while ループと同様の機能を作る方法です。

このループのコードは必ず少なくとも 1 回は実行されます。条件が満たされない場合はループを継続し、条件が満たされた時点で終了します。

まとめ

これで、Python で do while ループを作成する方法がわかりました。

Python についてさらに詳しく知りたい場合は、freeCodeCamp の YouTube チャンネルの動画、Python 12 のプロジェクトをご覧ください。初心者向けの動画で、12 個のプロジェクトを作成しながら学べます。

また、freeCodeCamp には、Python の基礎を十分に理解し、包括的な理解を深められる、無料の Python 認定講座もあります。

認定講座の最後には、学んだことを実践するために 5 つのプロジェクトを作成します。

読んでいただき、ありがとうございました。Happy learning!

Python における %.2f – その意味とは？

Saki Basken — Sun, 22 Oct 2023 11:28:40 +0000

原文: %.2f in Python – What does it Mean?

Python では、データ型をフォーマットするためのさまざまな方法があります。

%f フォーマッタは、主に浮動小数点数 (小数を含む数値) を書式設定する際に使用されます。

%f フォーマッタを使うと、浮動小数点数を切り上げたときに返される小数点以下の位を指定することができるのです。

Python で `%f` フォーマッタを使用する方法

このセクションでは、%f フォーマッタの使い方と、異なるパラメータを使うことで、違う結果を返す使用例をいくつか紹介します。

最初の例は次のとおりです。

floatNumber = 1.9876

print("%f" % floatNumber)
# 1.987600

上の例のように %f を使用すると、数値に 2 つのゼロが追加されました。しかし、特筆すべきことは何もありません。結果の値を変更するために他に何ができるかを見ていきましょう。

%f フォーマッタは引用符で囲んでネストする必要があり、フォーマットする浮動小数点数とはモジュロ演算子 (%) で、"%f" % floatNumber のように区切らなければなりません。

他の例もみてみましょう。

floatNumber = 1.9876

print("%.1f" % floatNumber)
# 2.0

上記のコードでは、%f 演算子 % と f の間に .1 を追加しました。これは、数字を小数点第 1 位まで切り上げることを意味します。

% と f の間に渡した数字の前にあるピリオドまたはドット記号 (.) を省略すると、最初の例と似た結果が得られることに注意してください。

例で得られた結果は、1.9876 が小数点第 1 位まで切り上げられて 2.0 になったものです。

%.2f を使うとどうなるかみてみましょう。

floatNumber = 1.9876

print("%.2f" % floatNumber)
# 1.99

予想どおり、浮動小数点数 (1.9876) は小数点第 2 位に切り上げられ、1.99 になりました。したがって、%.2f は小数点以下第 2 位に切り上げることを意味します。

コードを使って、フォーマッタで数値を変更すると何が起こるかをいろいろ試してみてください。

Python で `%d` フォーマッタを使用する方法

Python で浮動小数点数に使用できるもう 1 つの書式設定方法は、%d フォーマッタです。これは浮動小数点数の整数部分を返します。

以下はその例になります。

floatNumber = 1.9876

print("%d" % floatNumber)
# 1

上の例では、floatNumber = 1.9876 という浮動小数点数を作成しました。

floatNumber 変数が %d を使用してフォーマットされたので、1 のみが返されました。

%d フォーマッタは小数部分を無視し、整数のみを返します。

まとめ

この記事では、Python の %f フォーマッタについて説明しました。これを使用することによって、浮動小数点数の位を指定することができます。

指定されたパラメータに応じて、%f フォーマッタは浮動小数点値を指定された最も近い小数点以下の桁に切り上げます。

浮動小数点数の整数部分のみを返す %d フォーマッタについても説明しました。

Happy coding!

40 以上の言語でコンパイルおよび実行できる React を使用したコードエディターを構築する方法

Saki Basken — Mon, 28 Aug 2023 10:18:00 +0000

原文: How to Build a Code Editor with React that Compiles and Executes in 40+ Languages

オンラインのコード実行プラットフォームを利用すれば、あなたのお気に入りのプログラミング言語でコードを書き、そのコードを同じプラットフォーム上で実行することができます。

自分で作成したプログラム (たとえば、JavaScript で作成されたバイナリ検索プログラム) の出力を確認できると理想的です。

今日は、40 以上の異なるプログラミング言語でコードをコンパイルおよび実行できる CodeRush と呼ばれるオンラインコード実行プラットフォームを構築していきます。

構築するもの

Source Code | Live Demo

以下の機能を備えた多彩なコードエディターを構築します。

VS Code にも使われているコードエディター (Monaco Editor)。
40 を超えるプログラミング言語をサポートし、標準入出力を使用して Web アプリ上のコードをコンパイルできる。
利用可能なテーマのリストからエディターのテーマを変更できる。
実行されたコードに関する情報 (コードにかかった時間、使用されたメモリ、ステータスなど) を取得できる。

技術スタック

このプロジェクトでは、以下の技術スタックを使用します。

React.js – フロントエンド用
TailwindCSS – スタイル用
Judge0 – コードのコンパイルおよび実行用
RapidAPI – Judge0 コードの迅速なデプロイ
Monaco Editor – プロジェクトを支えるコードエディター

プロジェクトの構造

プロジェクトの構造は非常にシンプルで理解しやすくなっています。

Components: すべてのコンポーネント又は再利用可能なコードスニペットがここにあります。(例: CodeEditorWindow や Landing)
hooks: ここにすべてのカスタムフックがあります。(キーボードイベントを使用してコードをコンパイルするためのキープレスフックを使用する予定です。)
lib: すべてのライブラリ関数はここにあります。(ここでテーマを定義する関数を作成します。)
constants: ドロップダウンの languageOptions や customStyles などのすべての定数がここに入力されます。
utils: コードの保守に役立つ一般的なユーティリティー関数がここにあります。

アプリケーションの流れ

コードを深く掘り下げる前に、まずアプリケーションの流れと、ゼロからコードを書いていく方法を把握しましょう。

ユーザーは Web アプリケーションにアクセスし、好みのプログラミング言語 (デフォルトは JavaScript) を選択できます。
ユーザーがコードの作成を完了すると、コードをコンパイルし、出力ウィンドウで出力、結果を確認できます。
コード出力ウィンドウには、コードスニペットの成功または失敗が表示されます。すべての情報がコード出力ウィンドウで確認できます。
ユーザーはコードスニペットにカスタム入力を追加でき、Judge0 (オンラインコンパイラー) はユーザーが指定したカスタム入力を考慮します。
ユーザーは、実行されたコードに関する関連情報を確認できます。(例: コードのコンパイルと実行に 5 ms かかり、2024 kb のメモリが使用され、ランタイムステータスは成功)

フォルダー構造とアプリケーションの流れについて少し理解できたところで、コードを詳しく見て、すべてがどのように機能するかをみてみましょう。

コードエディターコンポーネントを構築する方法

コードエディターコンポーネントは主に、使用およびカスタマイズできる NPM パッケージ、Monaco Editor で構成されます。

// CodeEditorWindow.js

import React, { useState } from "react";

import Editor from "@monaco-editor/react";

const CodeEditorWindow = ({ onChange, language, code, theme }) => {
  const [value, setValue] = useState(code || "");

  const handleEditorChange = (value) => {
    setValue(value);
    onChange("code", value);
  };

  return (
    
      
    
  );
};
export default CodeEditorWindow;

Editor コンポーネントは @monaco-editor/react パッケージから取得されたもので、指定された高さ 85vh でコードエディターを起動できます。

Editor コンポーネントはいくつかの props を受け取ります:

language: 構文ハイライトやインテリセンスのために必要な、言語を指定する必須項目。
theme: コードスニペットの色と背景 (チュートリアルの後半で構成します)。
value: コードエディターに入力される実際のコード値。
onChange: これは、コードエディターの値が変更されたときにトリガーされます。後で Judge0 API を呼び出してコンパイルできるように、変更された値を状態に保存する必要があります。

エディターは、その親コンポーネントである Landing.js から、onChange、language、code、theme の props を受け取ります。コードエディター内の値が変更されるたびに、親コンポーネントの Landing 内にある onChange ハンドラーが呼び出されます。

ランディングコンポーネントを構築する

ランディングコンポーネントは主に 3 つの部分で構成されています。

language と theme のドロップダウンコンポーネントを備えた Actions Bar
Code Editor Window コンポーネント
Output and Custom Input コンポーネント

// Landing.js

import React, { useEffect, useState } from "react";
import CodeEditorWindow from "./CodeEditorWindow";
import axios from "axios";
import { classnames } from "../utils/general";
import { languageOptions } from "../constants/languageOptions";

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import { defineTheme } from "../lib/defineTheme";
import useKeyPress from "../hooks/useKeyPress";
import Footer from "./Footer";
import OutputWindow from "./OutputWindow";
import CustomInput from "./CustomInput";
import OutputDetails from "./OutputDetails";
import ThemeDropdown from "./ThemeDropdown";
import LanguagesDropdown from "./LanguagesDropdown";

const javascriptDefault = `// some comment`;

const Landing = () => {
  const [code, setCode] = useState(javascriptDefault);
  const [customInput, setCustomInput] = useState("");
  const [outputDetails, setOutputDetails] = useState(null);
  const [processing, setProcessing] = useState(null);
  const [theme, setTheme] = useState("cobalt");
  const [language, setLanguage] = useState(languageOptions[0]);

  const enterPress = useKeyPress("Enter");
  const ctrlPress = useKeyPress("Control");

  const onSelectChange = (sl) => {
    console.log("selected Option...", sl);
    setLanguage(sl);
  };

  useEffect(() => {
    if (enterPress && ctrlPress) {
      console.log("enterPress", enterPress);
      console.log("ctrlPress", ctrlPress);
      handleCompile();
    }
  }, [ctrlPress, enterPress]);
  const onChange = (action, data) => {
    switch (action) {
      case "code": {
        setCode(data);
        break;
      }
      default: {
        console.warn("case not handled!", action, data);
      }
    }
  };
  const handleCompile = () => {
    // We will come to the implementation later in the code
  };

  const checkStatus = async (token) => {
    // We will come to the implementation later in the code
  };

  function handleThemeChange(th) {
    // We will come to the implementation later in the code
  }
  useEffect(() => {
    defineTheme("oceanic-next").then((_) =>
      setTheme({ value: "oceanic-next", label: "Oceanic Next" })
    );
  }, []);

  const showSuccessToast = (msg) => {
    toast.success(msg || `Compiled Successfully!`, {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };
  const showErrorToast = (msg) => {
    toast.error(msg || `Something went wrong! Please try again.`, {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };

  return (
    <>
      
      
      
        
          
        
        
          
        
      
      
        
          
        

        
          
          
            
            
          
          {outputDetails && }
        
      
      
    
  );
};
export default Landing;

ランディングページの基本構造をさらに詳しくみてみましょう。

CodeEditorWindow コンポーネント

上記に説明したように、CodeEditorWindow コンポーネントは (変更され続ける) コードと、コード内の変更を追跡する onChange メソッドを考慮します。

// onChange method implementation

 const onChange = (action, data) => {
    switch (action) {
      case "code": {
        setCode(data);
        break;
      }
      default: {
        console.warn("case not handled!", action, data);
      }
    }
  };

code の状態を設定し、変更を追跡するだけでいいのです。

CodeEditorWindow コンポーネントは、構文の強調表示とインテリセンスが必要な現在選択されている言語である language の props も考慮します。

Monaco Editor によって受け入れられた language props を追跡し、コンパイルも処理する languageOptions 配列を作成しました。(judge0 API によって受け入れられる languageId を追跡します)

// constants/languageOptions.js

export const languageOptions = [
  {
    id: 63,
    name: "JavaScript (Node.js 12.14.0)",
    label: "JavaScript (Node.js 12.14.0)",
    value: "javascript",
  },
  {
    id: 45,
    name: "Assembly (NASM 2.14.02)",
    label: "Assembly (NASM 2.14.02)",
    value: "assembly",
  },
    ...
    ...
    ...
    ...
    ...
    ...
    
  {
    id: 84,
    name: "Visual Basic.Net (vbnc 0.0.0.5943)",
    label: "Visual Basic.Net (vbnc 0.0.0.5943)",
    value: "vbnet",
  },
];

すべての languageOptions オブジェクトには、id、name、label、および value キーが含まれています。languageOptions 配列全体を取得してドロップダウン内に配置し、オプションとして指定できます。

ドロップダウンの状態が変化するたびに、onSelectChange メソッドは選択された id を追跡し、状態を適切に変更します。

// LanguageDropdown.js

import React from "react";
import Select from "react-select";
import { customStyles } from "../constants/customStyles";
import { languageOptions } from "../constants/languageOptions";

const LanguagesDropdown = ({ onSelectChange }) => {
  return (
     ({
        label: themeName,
        value: themeId,
        key: themeId,
      }))}
      value={theme}
      styles={customStyles}
      onChange={handleThemeChange}
    />
  );
};

export default ThemeDropdown;

ここでは、Monaco Editor 用にネット上で入手可能で、多種のきれいなデザインテーマを使用することができる、MonacoThemes というパッケージを利用します。

自由に利用できるテーマのリストがこちらです。

// lib/defineTheme.js

import { loader } from "@monaco-editor/react";

const monacoThemes = {
  active4d: "Active4D",
  "all-hallows-eve": "All Hallows Eve",
  amy: "Amy",
  "birds-of-paradise": "Birds of Paradise",
  blackboard: "Blackboard",
  "brilliance-black": "Brilliance Black",
  "brilliance-dull": "Brilliance Dull",
  "chrome-devtools": "Chrome DevTools",
  "clouds-midnight": "Clouds Midnight",
  clouds: "Clouds",
  cobalt: "Cobalt",
  dawn: "Dawn",
  dreamweaver: "Dreamweaver",
  eiffel: "Eiffel",
  "espresso-libre": "Espresso Libre",
  github: "GitHub",
  idle: "IDLE",
  katzenmilch: "Katzenmilch",
  "kuroir-theme": "Kuroir Theme",
  lazy: "LAZY",
  "magicwb--amiga-": "MagicWB (Amiga)",
  "merbivore-soft": "Merbivore Soft",
  merbivore: "Merbivore",
  "monokai-bright": "Monokai Bright",
  monokai: "Monokai",
  "night-owl": "Night Owl",
  "oceanic-next": "Oceanic Next",
  "pastels-on-dark": "Pastels on Dark",
  "slush-and-poppies": "Slush and Poppies",
  "solarized-dark": "Solarized-dark",
  "solarized-light": "Solarized-light",
  spacecadet: "SpaceCadet",
  sunburst: "Sunburst",
  "textmate--mac-classic-": "Textmate (Mac Classic)",
  "tomorrow-night-blue": "Tomorrow-Night-Blue",
  "tomorrow-night-bright": "Tomorrow-Night-Bright",
  "tomorrow-night-eighties": "Tomorrow-Night-Eighties",
  "tomorrow-night": "Tomorrow-Night",
  tomorrow: "Tomorrow",
  twilight: "Twilight",
  "upstream-sunburst": "Upstream Sunburst",
  "vibrant-ink": "Vibrant Ink",
  "xcode-default": "Xcode_default",
  zenburnesque: "Zenburnesque",
  iplastic: "iPlastic",
  idlefingers: "idleFingers",
  krtheme: "krTheme",
  monoindustrial: "monoindustrial",
};

const defineTheme = (theme) => {
  return new Promise((res) => {
    Promise.all([
      loader.init(),
      import(`monaco-themes/themes/${monacoThemes[theme]}.json`),
    ]).then(([monaco, themeData]) => {
      monaco.editor.defineTheme(theme, themeData);
      res();
    });
  });
};

export { defineTheme };

monaco-themes というパッケージは、コードエディターのデザインの方向性を定義するために使用できる多数のテーマを提供します。

defineTheme 関数は、ユーザーが選択するであろうさまざまなテーマを扱います。defineTheme 関数は、monaco.editor.defineTheme(theme,themeData) アクションを使用して実際に Monaco Editor のテーマを設定する Promise を返します。このコード行は、Monaco Editor コードウィンドウ内のテーマを実際に変更する役割を担っています。

defineTheme 関数は、先ほど ThemeDropdown.js コンポーネントで見た onChange コールバックを利用して呼び出されます。

// Landing.js - handleThemeChange() function

function handleThemeChange(th) {
    const theme = th;
    console.log("theme...", theme);

    if (["light", "vs-dark"].includes(theme.value)) {
      setTheme(theme);
    } else {
      defineTheme(theme.value).then((_) => setTheme(theme));
    }
  }

handleThemeChange() 関数は、テーマが light か dark かをチェックします。これらのテーマはデフォルトで MonacoEditor コンポーネントで利用できるため、defineTheme() メソッドを呼び出す必要はありません。

そうでない場合は、defineTheme() コンポーネントを呼び出して、選択したテーマの状態を設定します。

Judge0 を使用してコードをコンパイルする方法

アプリケーションの根幹部である、さまざまな言語でコードをコンパイルする方法を見ていきましょう。

コードをコンパイルするには、Judge0 を使用します。Judge0 は、対話可能でかつシンプルな、オープンソースのコード実行システムです。

いくつかの引数 (ソースコード、言語 ID) を使用して単純な API 呼び出しを実行し、応答として出力を取得することができます。

Judge0 をセットアップして、次のステップに進みましょう。

Judge0 に移動し、ベーシックプランを選択します
Judge0 は実際は RapidAPI でホスティングされています。ベーシックプランに登録してください。
登録すると、コード実行システムへの API 呼び出しを行うために必要な RAPIDAPI_HOST と RAPIDAPI_KEY をコピーできます。

ダッシュボードは以下のようなものになります。

API 呼び出しには X-RapidAPI-Host 引数と X-RapidAPI-Key 引数が必要です。後ほど使用できるように、次のように .env ファイルに保存します。

REACT_APP_RAPID_API_HOST = YOUR_HOST_URL
REACT_APP_RAPID_API_KEY = YOUR_SECRET_KEY
REACT_APP_RAPID_API_URL = YOUR_SUBMISSIONS_URL

React では、環境変数に REACT_APP というプレフィックスを最初に含めることが重要です。

SUBMISSIONS_URL は、使用する URL です。これは基本的に host とそれに続く /submission ルートで構成されます。

例えばこの場合では、https://judge0-ce.p.rapidapi.com/submissions が submissions URL になります。

変数を正しく設定したら、compilation (コンパイル) ロジックを処理できるようになります。

コンパイルフローとロジック

コンパイルの流れは以下の通りです。

Compile and Execute ボタンをクリックすると、handleCompile() 関数が呼び出されます。
handleCompile() 関数は、languageId、source_code、stdin (この場合は customInput) を本体引数として、submissions URL 上で Judge0 RapidAPI のバックエンドにリクエストします。
the options は host と secret をヘッダーとして受け取ります。
base64_encoded と fields は、渡すことができるオプションの引数です。
submission POST リクエストはリクエストをサーバーに登録し、プロセスを作成します。post リクエストの応答は、後で実行のステータスを確認するために使用する token です。(処理中、承認済み、時間制限超過、実行時間の例外など、さまざまなステータスがあります。)
結果が返されると、結果が成功か失敗かを条件付きで確認し、結果を出力画面に表示します。

実際にコードを見てみて、handleCompile() メソッドを理解しましょう。

const handleCompile = () => {
    setProcessing(true);
    const formData = {
      language_id: language.id,
      // encode source code in base64
      source_code: btoa(code),
      stdin: btoa(customInput),
    };
    const options = {
      method: "POST",
      url: process.env.REACT_APP_RAPID_API_URL,
      params: { base64_encoded: "true", fields: "*" },
      headers: {
        "content-type": "application/json",
        "Content-Type": "application/json",
        "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
        "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
      },
      data: formData,
    };

    axios
      .request(options)
      .then(function (response) {
        console.log("res.data", response.data);
        const token = response.data.token;
        checkStatus(token);
      })
      .catch((err) => {
        let error = err.response ? err.response.data : err;
        setProcessing(false);
        console.log(error);
      });
  };

上記の通り、handleCompile() メソッドは languageId、source_code、stdin を受け取ります。特に source_code と stdin の前に btoa が使用されていることに注目してください。これは、API に渡すパラメータで base64_encoded: true を使用しているのにあわせて、文字列を Base64 エンコードするためのものです。

応答が成功でトークンを入手したら、checkStatus() メソッドを呼び出して /submissions/${token} ルートをポーリングします。

const checkStatus = async (token) => {
    const options = {
      method: "GET",
      url: process.env.REACT_APP_RAPID_API_URL + "/" + token,
      params: { base64_encoded: "true", fields: "*" },
      headers: {
        "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
        "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
      },
    };
    try {
      let response = await axios.request(options);
      let statusId = response.data.status?.id;

      // Processed - we have a result
      if (statusId === 1 || statusId === 2) {
        // still processing
        setTimeout(() => {
          checkStatus(token)
        }, 2000)
        return
      } else {
        setProcessing(false)
        setOutputDetails(response.data)
        showSuccessToast(`Compiled Successfully!`)
        console.log('response.data', response.data)
        return
      }
    } catch (err) {
      console.log("err", err);
      setProcessing(false);
      showErrorToast();
    }
  };

以前に送信したコードの結果を取得するには、応答として受け取った token を使用して submissions API をポーリングする必要があります。

上記のように、エンドポイントに対して GET リクエストを行います。レスポンスがあると、statusId === 1 || statusId === 2 をチェックしていますが、これはどういう意味なのでしょうか。

私たちが API に提出したコードに関連する合計 14 のステータスがあります。それらは以下の通りです:

export const statuses = [
  {
    id: 1,
    description: "In Queue",
  },
  {
    id: 2,
    description: "Processing",
  },
  {
    id: 3,
    description: "Accepted",
  },
  {
    id: 4,
    description: "Wrong Answer",
  },
  {
    id: 5,
    description: "Time Limit Exceeded",
  },
  {
    id: 6,
    description: "Compilation Error",
  },
  {
    id: 7,
    description: "Runtime Error (SIGSEGV)",
  },
  {
    id: 8,
    description: "Runtime Error (SIGXFSZ)",
  },
  {
    id: 9,
    description: "Runtime Error (SIGFPE)",
  },
  {
    id: 10,
    description: "Runtime Error (SIGABRT)",
  },
  {
    id: 11,
    description: "Runtime Error (NZEC)",
  },
  {
    id: 12,
    description: "Runtime Error (Other)",
  },
  {
    id: 13,
    description: "Internal Error",
  },
  {
    id: 14,
    description: "Exec Format Error",
  },
];

したがって、statusId ===1 または statusId ===2 の場合、コードがまだ処理中であり、API を再度呼び出して結果が得られるかどうかを確認する必要があることを意味します。

このため、if 文の条件に checkStatus() 関数を再度呼び出す setTimeout() があり、内部で API を再度呼び出してステータスを確認します。

ステータスが 2 または 3 以外の場合は、コードの実行が完了し、結果が得られたことを意味します。successfully compiled (コンパイル成功) か、Time Limit Exceeded (タイムリミット超過) か、あるいは Runtime Exception (ランタイム例外の発生) のいずれかになります。statusId は各シナリオを表し、これらを再現することができます。

例えば、while(true) では time limit exceeded のエラーが発生します。

または、構文に誤りがあると、コンパイルエラーが発生します。

どの場合においても、何らかの結果を得ることになります。そして、この結果を outputDetails の状態に保存します。これは、画面の右側 (出力ウィンドウ) に表示するものがあることを保証するためです。

出力ウィンドウコンポーネント

import React from "react";

const OutputWindow = ({ outputDetails }) => {
  const getOutput = () => {
    let statusId = outputDetails?.status?.id;

    if (statusId === 6) {
      // compilation error
      return (
                  {atob(outputDetails?.compile_output)}
        
      );
    } else if (statusId === 3) {
      return (
                  {atob(outputDetails.stdout) !== null
            ? `${atob(outputDetails.stdout)}`
            : null}
        
      );
    } else if (statusId === 5) {
      return (
                  {`Time Limit Exceeded`}
        
      );
    } else {
      return (
                  {atob(outputDetails?.stderr)}
        
      );
    }
  };
  return (
    <>
      
        Output
      
      
        {outputDetails ? <>{getOutput()} : null}
      
    
  );
};

export default OutputWindow;

これは、成功または失敗のシナリオのみを表示する、シンプルなコンポーネントです。

getOutput() メソッドは、テキストの色がどのように見えるか、および何を表示するかを決定します。

statusId が 6 の場合: コンパイルエラーが発生しています。この場合、API は compile_output を返し、それを使用してエラーを表示できます。
statusId が 3 の場合: これは Accepted という成功のシナリオです。この場合、API は stdout (標準出力) を返します。これは、API に提供したコードから返されたデータを表示するために使用されます。
statusId が 5 の場合: 時間制限超過エラーが発生しています。コード内に無限ループ条件があるか、またはコード実行の標準の 5 秒時間を超えていることを表示するのみです。
その他すべてのステータスについては、標準的な stderr オブジェクトを取得し、エラーを表示するために使用します。
atob() メソッドが使用されている点に注意してください。これは、出力を Base64 文字列として受け取るためです。デコードするために atob() メソッドを使用します。

以下は、JavaScript での Binary Search プログラムの成功シナリオです。

出力詳細コンポーネント

OutputDetails コンポーネントは、最初にコンパイルしたコードスニペットに関連する詳細を表示するためのシンプルなマッパーです。データはすでに outputDetails 状態変数に設定されています。

import React from "react";

const OutputDetails = ({ outputDetails }) => {
  return (
    
      
        Status:{" "}
        
          {outputDetails?.status?.description}
        
      
      
        Memory:{" "}
        
          {outputDetails?.memory}
        
      
      
        Time:{" "}
        
          {outputDetails?.time}
        
      
    
  );
};

export default OutputDetails;

time、memory、status.description はすべて API 応答から受信された後、outputDetails に保存され表示されます。

キーボードイベント

最後は、ctrl+enter を使って、コードをコンパイルする機能です。これには、Web アプリケーションでさまざまなキーボードイベントのイベントリスナーの役割をする、カスタムフックを作成します (カスタムフックは非常に便利で、コードもきれいに保てます)。

// useKeyPress.js

import React, { useState } from "react";

const useKeyPress = function (targetKey) {
  const [keyPressed, setKeyPressed] = useState(false);

  function downHandler({ key }) {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  }

  const upHandler = ({ key }) => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };

  React.useEffect(() => {
    document.addEventListener("keydown", downHandler);
    document.addEventListener("keyup", upHandler);

    return () => {
      document.removeEventListener("keydown", downHandler);
      document.removeEventListener("keyup", upHandler);
    };
  });

  return keyPressed;
};

export default useKeyPress;

// Landing.js

...
...
...
const Landing = () => {
    ...
    ...
      const enterPress = useKeyPress("Enter");
      const ctrlPress = useKeyPress("Control");
   ...
   ...
}

ここでは、純粋な JavaScript の Event Listeners を使用して、目的の target キーのイベントを待ち、応答します。

この Hook は、keydown と keyup のイベントを待ちます。Enter と Control のターゲットキーを使用してフックを初期化します。

targetKey === key かどうかを確認し、それに応じて keyPressed を設定しているため、keyPressed で返されたブール値 (true または false) を使用することができます。

これで、useEffect フックでこれらのイベントにリスナーを付け、両方が同時に押されたことを確認できます。

useEffect(() => {
    if (enterPress && ctrlPress) {
      console.log("enterPress", enterPress);
      console.log("ctrlPress", ctrlPress);
      handleCompile();
    }
  }, [ctrlPress, enterPress]);

これにより、ユーザーが control キーと enter キーを連続して押すか、同時に押すたびに、handleCompile() メソッドが呼び出されます。

注意事項

楽しいプロジェクトではありますが、Judge0 の基本プランには、1 日 100 回までのリクエスト制限があります。

その対策法として、独自のサーバーやドロップレットを (Digital Ocean 上で) 起動し、オープンソースプロジェクトを独自にホストすることができます (これについての素晴らしいドキュメントも用意されています)。

まとめ

最終結果は以下になります。

40 以上の言語でコンパイルできるコードエディター
コードエディターのデザインを変更するためのテーマ切り替え
RapidAPI 上での API の相互作用とホスティング
カスタムフックを使用した React でキーボードイベントの使用
楽しい時間！ ;)

最後に、プロジェクトをさらに掘り下げたい方は、以下の機能を追加してみてはどうでしょうか。

ログインおよび登録モジュール: コードを自分の個人ダッシュボードに保存できるようにします。
インターネット上で他の人とコードをシェアする方法
プロフィールページとカスタマイズ
Socket プログラミングと操作変換を使用した、単一のコードスニペットでのペアプログラミング
お気に入りのコードスニペットをブックマークする
CodePen のような、保存されたコードスニペットのカスタムダッシュボード

私にとって、このアプリケーションをゼロからコーディングすることはとても楽しく、TailwindCSS は私のお気に入りであり、アプリケーションのスタイリングには欠かせないリソースです。

もしこの記事が役に立ったのなら、GitHub Repository に⭐️をつけていただけると嬉しいです。
質問があれば、Twitter や Website からお気軽にご連絡ください。喜んでサポートさせていただきます。

Source Code | Live Demo

JavaScript を使ったドロップダウンメニューを作成する方法

Saki Basken — Thu, 13 Jul 2023 23:30:00 +0000

原文: How to Build a Dropdown Menu with JavaScript

インターネットを使うかたなら、おそらくドロップダウンメニューを使ったことがあるでしょう。ドロップダウンメニューは主に 2 つの目的で使用されます。1 つはウェブフォームでユーザーの入力を収集するため、もう 1 つはウェブアプリケーションにアクションやナビゲーションメニューを実装するためです。

ドロップダウンは、似たようなの要素の集まりに対して多数のオプションを提供する最良の方法の 1 つです。これにより、アプリケーションの一般的なレイアウトの流れを崩さずに多くの選択肢を提供することができます。ウェブアプリ以外にも、ドロップダウンメニューはスタンドアロンのソフトウェアやオペレーティングシステムなどでも使用されています。

このガイドでは、HTML、CSS、JavaScript を使用してドロップダウンナビゲーションメニューを作成する方法を学びます。

以下は、これから作成するもののスクリーンショットです。このガイドの最後に、CodePen ファイルを提供しているので、それを使って実際に試してみることができます。

ドロップダウンメニューの最終成果物

ドロップダウンメニューの基礎についての説明を終えたので、次はその作成手順について説明します。

ステップ 1 – ドロップダウンのマークアップを追加する

このガイドではアイコンを使用するため、まず初めにアイコンをインポートしなければなりません。その分かりやすさから、Boxicons という無料のライブラリを使用します。他にもあるので、ぜひお好きなライブラリを使ってみて下さい。

Boxicons を設定する方法はいくつかありますが、最も簡単な方法は、次のように HTML ファイルの head で script タグを定義することです。

アイコンをインポートした後、クラス名が container の div 要素を作成します。この要素内に、ボタンとドロップダウンメニューを入れていきます。

コンテナ内でボタン要素を作成し、それに btn というクラスと ID を与えます。そのボタンに、テキストと矢印アイコンを渡します。

ボタンのマークアップは以下のとおりです。

次に、ドロップダウンメニュー自体のマークアップを追加します。button タグの下に div 要素を作成し、それに dropdown というクラスと ID を与えます。div 要素内で、個々のドロップダウン項目ごとに a タグを作成し、それぞれのアイコンとテキストを渡します。

マークアップは以下のようになります。


  
    
    Create New
  
  
    
    All Drafts
  
  
    
    Move To
  
  
    
    Profile Settings
  
  
    
    Notification
  
  
    
    Settings

出力は以下のようになります。

ドロップダウンメニューのマークアッププレビュー

このままではまだ見栄えがよくないので、メニューのスタイリングをしましょう。

ステップ 2 – ドロップダウンメニューのスタイルを設定する

まず、ページ上のすべての要素のデフォルトのマージンとパディングをリセットし、いくつかの値を変数に保存して、CSS ファイル全体で再利用できるようにします。次に、body 要素にグローバルなスタイルを適用します。

@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
  --color: #166e67;
  --gap: 0.5rem;
  --radius: 5px;
}

body {
  margin: 2rem;
  background-color: #b3e6f4;
  font-size: 0.9rem;
  color: black;
}

次のステップでは、ボタンとドロップダウンコンテナー自体のスタイリングを行います。作業をスピードアップするため、重要なスタイリングの部分のみを説明します。

以下のマークアップをコピーして、CSS ファイルに貼り付けてください。

.btn {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--gap);
  padding: 0.6rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  position: relative;
}

.bx {
  font-size: 1.1rem;
}

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
}

.dropdown a {
  display: flex;
  align-items: center;
  column-gap: var(--gap);
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: black;
}

.dropdown a:hover {
  background-color: var(--color);
  color: white;
}

ドロップダウンメニューは通常、要素の上に重なるように表示されるため、ボタンを相対的 (relative) に、ドロップダウンメニューを絶対的 (absolute) に配置しています。これにより、両方の要素が近くに配置され、ドロップダウンメニューが他の要素の上に表示されることが保証されます。こうすることで、切り替え時にページのフローに影響を与えなくなります。

出力は以下のようになります。

ドロップダウンメニューのスタイリング

ドロップダウンのスタイルが設定されたので、即座に表示されるのではなく、ボタンがクリックされたときにのみドロップダウンが表示されるようにしたいと思います。非表示にするには CSS を使用します。

以前 JavaScript でモーダルを作成する方法という記事では、最初にビューポートからモーダル要素を非表示にするために、display: none を使用しました。しかし、MDN Docs によると、このプロパティを利用する場合の欠点は、アニメーション化できないことです。

したがってこのガイドでは、別の方法を用いてドロップダウンメニューを非表示にしたいと思います。これには、visibility と opacity のプロパティを組み合わせることで、達成することができます。そしてこの方法は、GitHub がドロップダウンメニューを実装している方法です。

GitHub のドロップダウンメニュー

前に作成したドロップダウンクラス内に、visibility プロパティを追加し、値を hidden に設定したら、不透明度を 0 に設定します。そうすることで、ページからドロップダウンメニューが非表示になります。

ドロップダウンメニューを表示するために、show という別のクラスを作成します。このクラスは、visible の値と不透明度 1 の visibility プロパティを保持します。そして、後ほど JavaScript を使用してこのクラスをドロップダウンメニューに追加します。

コードは以下のとおりです。

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
  transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
    
  transform: translateY(0.5rem);
  visibility: hidden;
  opacity: 0;
}

.show {
  transform: translateY(0rem);
  visibility: visible;
  opacity: 1;
}

.arrow {
  transform: rotate(180deg);
  transition: 0.2s ease;
}

ドロップダウンメニューの要素を非表示にするスタイルに加えて、ドロップダウンボタンをクリックしたときに矢印アイコンを回転させる、別のクラスも追加しました。

ステップ 3 – ドロップダウン機能を追加する

まず、それぞれの要素を変数に保存して再利用できるようにしましょう。

const dropdownBtn = document.getElementById("btn");
const dropdownMenu = document.getElementById("dropdown");
const toggleArrow = document.getElementById("arrow");

次のステップでは、ボタンがクリックされたときにドロップダウン要素の show というクラスの切り替えと、ドロップダウンの矢印の回転を行う関数を作成します。この関数の名前を toggleDropdown とします。

const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

そして、addEventListener メソッドを使用して、ドロップダウンボタンでこの関数を呼び出すことができます。そうすれば、ボタンをクリックするたびにドロップダウンメニューの表示と非表示を制御する関数が起動されます。

dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

もうお気づきかもしれませんが、ドロップダウン関数内に stopPropagation() メソッドを追加しました。これにより、ボタン要素の機能が親要素に伝達されるのを防ぎ、関数が 2 回実行されるのを防ぐことができます。次のセクションでこれについて詳しく説明します。

出力は以下のようになります。

ドロップダウンメニューの切り替え

DOM 要素をクリックしたときにドロップダウンメニューを閉じる方法

ドロップダウンメニューは通常、次の 4 つの異なる方法で閉じられます。

ドロップダウンメニューを有効にするボタンをクリックすること
子要素のいずれかをクリックすること
メニューの外側 (ボディ部分) をクリックすること
Esc キーまたは下矢印キーを押すこと

ただし、このガイドでは、最初の 3 つに焦点を当てましょう。

まず、document.documentElement を使用してルート要素を選択します。そうしたら、先ほどと同様に toggleDropdown() 関数を渡します。

しかし、今回はドロップダウンメニューが show というクラスを持っているかどうかをチェックする条件を設定したいと思います。show というクラスを持っている場合にのみ、ドロップダウンメニューを閉じる関数を実行したいからです。

document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});

その結果が、最終的にこのようになります。

DOM 要素をクリックするとドロップダウンが閉じる

これが JavaScript でドロップダウンメニューを作成する方法です。以下は、このドロップダウンメニューをテストするための CodePen ファイルです。

まとめ

この投稿が興味深かったり、役に立ったと感じていただければ幸いです。今後の投稿を見逃さないよう、お友達と共有するか、私のブログを読者登録してみてください。読んでくださりありがとうございます。

GitHub | Twitter | Blog | Portfolio

Python で文字列を追加する – STR 追加

Saki Basken — Fri, 09 Jun 2023 09:07:59 +0000

原文: Append a String in Python – STR Appending

この記事では、Python で文字列を追加するさまざまな方法を学びます。

文字列の追加について話すときによく使用されるもう 1 つの用語は、連結です。そのため、追加と連結という用語が同じ意味で使用されることがよくあります。

いずれにしても、文字列を追加または連結するとは、ある文字列の値を別の文字列に追加または結合することを意味します。

簡単なコード例を使って、文字列追加のさまざまな方法を見ていきましょう。

`+` 演算子を使用して Python で文字列を追加する方法

+ 演算子を使用して 2 つ以上の文字列を結合できます。例えば、以下のようにすることができます。

first_name = "John"
last_name = "Doe"

print(first_name + last_name)
# JohnDoe

上の例では、first_name と last_name という 2 つの文字列変数を作成しました。それぞれ「John」と「Doe」という値を持ちます。

これらの変数を追加するには、first_name + last_name のように、+ 演算子を使用しました。

出力された JohnDoe から、2 つの変数がスペースを入れずに結合されたことがわかります。

"John " のように、first_name の値の後にスペースを追加することができます。または、" Doe" のように、last_name の値の前にスペースを追加することもできます。すると、以下のようになります。

first_name = "John "
last_name = "Doe"

print(first_name + last_name)
# John Doe

文字列を追加するときに引用符を使用して、次のとおりにスペースを追加することもできます。

first_name = "John "
last_name = "Doe"

print(first_name + "" + last_name)
# John Doe

`join()` メソッドを使用して Python で文字列を追加する方法

Python で文字列を追加するもう 1 つの方法は、join() メソッドを使用することです。

join() メソッドは、反復可能なオブジェクト (リスト、タプル、文字列、セット、ディクショナリー) をパラメーターとして受け取ります。構文は次のようになります。

string.join(iterable_object)

以下は、join() メソッドを使用して文字列を追加する方法の一例です。

first_name = "John"
last_name = "Doe"

print("".join([first_name, last_name]))
# JohnDoe

ここでは、2 つの文字列変数をパラメーターとして join() メソッドに渡します。

また、変数が角括弧 [] でネストされており、文字列のリスト [first_name, last_name] になっていることがわかります。これは、join() メソッドが 1 つのパラメーターしか受け取らず、そのパラメーターは反復可能なオブジェクトである必要があるためです。

join() メソッドの一つ不思議な点は、ピリオド (ドット) の前にくる引用符です。

これらの引用符を使用して、反復可能なオブジェクトの値の間に表示される内容を指定することができます。例を挙げて説明しましょう。

first_name = "John"
last_name = "Doe"

print("#".join([first_name, last_name]))
# John#Doe

上の例では、"#".join([first_name, last_name]) のように、# 記号を引用符に追加しました。この # は、John#Doe でわかるように、文字列の間に追加されました。

前のセクションでは、文字列間にスペースを追加するためにさまざまな方法を使用する必要がありました。join() メソッドの前にある引用符の中にスペースを追加することで、これを簡単に実現できます。

first_name = "John"
last_name = "Doe"

print(" ".join([first_name, last_name]))
# John Doe

String `format()` メソッドを使用して Python で文字列を追加する方法

string format() メソッドの構文は次のようになります。

{}.format(value)

基本的に、文字列の format メソッドは、上記の構文で指定した値のパラメーターを受け取り、それを波括弧の中に挿入します。結果として得られる値は文字列となります。

以下はその例になります。

first_name = "John"
last_name = "Doe"

print("{} {}".format(first_name, last_name))
# John Doe

この例では、2 つの波括弧と 2 つのパラメーター (first_name and last_name) を指定したため、string format() メソッドは文字列をそれぞれの波括弧に挿入します。

波括弧のある引用符内には、さらに文字列を追加することができます。これによって string format() メソッドの処理機能が影響されることはありません。それらの文字列は依然として波括弧に挿入されます。つまり、こうなります。

first_name = "John"
last_name = "Doe"

print("My name is {} {}".format(first_name, last_name))
# My name is John Doe

f-string を使用して Python で文字列を追加する方法

この方法は比較的、理解しやすいものです。f-string は、文字列の書式設定と補間を容易にするために Python に導入されましたが、文字列を追加するために使用することもできます。

f-string を使用するには、f"" のように、f の後に引用符を続けるだけです。そうすると、引用符の間に文字列と変数名を挿入できます。変数名はすべて波括弧で囲む必要があります。

以下の例をご覧ください。

first_name = "John"
last_name = "Doe"

print(f"{first_name} {last_name}")
# John Doe

まとめ

この記事では、Python で文字列を追加するために使用できるさまざまな方法について説明しました。

文字列を別の文字列に追加するということは、文字列を結合することを意味します。

この記事とコード例で説明したように、Python では + 演算子、join() メソッド、string() フォーマットメソッド、および f-string を使用して文字列を追加できます。

Happy coding!

初心者向け React フックの基礎

Saki Basken — Wed, 24 May 2023 13:40:00 +0000

原文: React Hooks Fundamentals for Beginners

React.js は、オープンソースの JavaScript ベースのユーザーインターフェイスライブラリーです。ウェブおよびモバイルアプリの開発で非常に人気があります。

React はコンポーネントベースの構成を原則としています。React のコンポーネントは、それぞれ独立していて、再利用可能なコード部分のことを指します。コンポーネントには、クラスコンポーネントと関数コンポーネントの 2 つのタイプがあります。

React バージョン 16.8 までは、開発者はクラスコンポーネントを使用してのみ、state などの React の機能を扱うことができました。しかし、バージョン 16.8 で、React にフックと呼ばれる新しいパターンが導入されました。

React のフックを使用することで、関数コンポーネントで state を含めさまざまな React の機能を使用することができます。これにより、開発者は React で関数型プログラミングを実行できるようになりました。

この記事では、React フックについての基礎を学んでいきます。この記事を書く背景には、「React のフックは学びやすく、作成や使用も簡単」という考え方を初心者の方々に持ってもらいたいという思いがあります。基礎さえしっかり理解していれば、本当に簡単なのです。

もし動画で学ぶことがお好きなら、この記事の内容はビデオチュートリアルでもご利用いただけます。ぜひこちらからご覧ください🙂

フックについて学ぶ前に

フックの前に、まず基本の JavaScript の関数 (バニラ JS の関数) について考えてみましょう。

JavaScript というプログラミング言語では、関数は繰り返し行うタスクのための再利用可能なコードロジックです。関数はコンポーザブル (合成可能) です。つまり、関数を別の関数内で呼び出してその出力を使用することができます。

以下の図では、関数 someFunction() が関数 a() と b() をコンポーズ (合成使用) しています。b() の関数は関数 c() を使用しています。

関数のコンポーザビリティー (合成可能性)

これをコードで書くと、次のようになります。

function a() {
    // some code
}

function c() {
    // some code
}

function b() {
    // some code
    
    c();
    
    // some code
}

function someFunction() {
    // some code
    
	a();
    b();
    
    // some code
}

React の関数コンポーネントが単なるバニラ JavaScript の関数であることは周知の事実です。したがって、関数が合成可能な場合、React コンポーネントも
合成可能な性質を持つことになります。以下の図のように、これは 1 つ以上のコンポーネントを別のコンポーネントに合成使用できることを意味します。

コンポーネントのコンポーザビリティー (合成可能性)

ステートフルコンポーネントとステートレスコンポーネント

React のコンポーネントには、state を持つものと、持たないものがあります。

state を持つコンポーネントは、その中で状態を確立し管理します。
state を持たないコンポーネントは、状態や副作用の管理をしない、純粋な関数です。

純粋関数とは、副作用のない関数のことです。つまりこれは、関数が同じ入力に対して常に同じ出力を返す、ということを意味します。

関数コンポーネントから、state や副作用のロジックを取り除けば、state を持たないステートレスコンポーネントになります。また、取り除いた state を持つロジックや副作用のロジックは、アプリ内の他の場所で再利用することもできます。そのため、それらをできる限りコンポーネントから隔離することが、合理的なのです。

状態に関するロジックを持つ、ステートフルコンポーネント

React フックとステートフルロジック

React フックを使用することで、ステートフルロジックと副作用を関数コンポーネントから切り離すことができます。フックとは、状態の変化や副作用をコンポーネントから切り離して管理することができる、JavaScript の関数のことです。

これにより、すべてのステートフルロジックをフックとして分離し、他のコンポーネントに使用できるようになるのです。(フックも関数であるため、合成可能。)

ステイトフルロジックをフックとして切り離した状態

では、このステートフルロジックとは何なのでしょうか？状態変数をローカルで宣言および管理しているものであれば、何でも当てはまります。

たとえば、データをフェッチし、ローカル変数でデータを管理するロジックは「ステートフル」ということになります。複数のコンポーネントでそのような取得ロジックを再利用すると良い場合もあります。

では、React フックとは一体なんなのでしょうか？

React フックをわかりやすい言葉で定義するとどうなるでしょうか。関数、コンポーザビリティー、コンポーネント、状態、副作用について理解した今、React フックとは何かをご説明します。

React フックとは、関数コンポーネント内の再利用可能な部分を切り離して使用できるシンプルな JavaScript の関数です。フックは状態を持つことができ、副作用を管理することもできます。

React は、標準の組み込みフックを多数提供しています。

useState: 状態を管理するためのフックです。状態の値と、それを更新するための更新関数を返します。
useEffect: API 呼び出し、サブスクリプション、タイマー、ミューテイションなどのような副作用を管理するためのフックです。
useContext: コンテキストの現在の値を返します。
useReducer: 複雑な状態管理をサポートするための、useState の代替となるフックです。
useCallback: 子コンポーネントが必要以上にレンダリングされないように、コールバックをメモ化されたものを返します。
useMemo: パフォーマンスの最適化に役立つメモ化された値を返します。
useRef: .current プロパティを持つ ref オブジェクトを返します。そのような ref オブジェクトはミュータブル (変更可能) です。これは主に子コンポーネントに直接アクセスするために使用されます。
useLayoutEffect: すべての DOM ミューテーションの最後に始動します。useLayoutEffect は同期的に始動するため、できればこれよりも useEffect を使用する方がオススメです。
useDebugValue: React DevTools でカスタムフックのラベルを表示するのに役立ちます。

これらのフックについて詳しくは、こちらから読むことができます。全てのフック名が use で始まることに注目してください。これは React コードベースでフックを素早く特定するための標準的な慣例です。

データのフェッチ、ディスクへのログ、タイマーなど、様々な用途に合わせて独自のカスタムフックを作成することもできます。

なのでもし、コードベースで React フックを見かけたり、作成するように求められた場合は、心配しないでください。それは、単に関数コンポーネントの外で状態や副作用を扱うための別の JavaScript 関数なだけなのです。

カスタムフックを作成するためのステップバイステップガイドをお探しであれば、この記事が役立つかもしれません。

最後に

この React フックの紹介が少しでもお役に立てば幸いです。React 経験も長くなり、React のあらゆる側面を網羅することを目指した YouTube 動画シリーズを始めました。もしお役に立てそうであれば、ぜひチャンネル登録をお願いします。

私は、次のプラットフォームでも JavaScript、ウェブ開発、ブログについて学んだことを共有しているので、ぜひ繋がりましょう。

それではまた、次の記事でお会いしましょう。それまで、心身ともに体に気をつけてお過ごしください。

JavaScript の forEach – JS の配列をループする方法

Saki Basken — Mon, 08 May 2023 13:40:16 +0000

原文: JavaScript forEach – How to Loop Through an Array in JS

JavaScript の forEach メソッドは、配列をループするいくつかの方法の 1 つです。それぞれの方法には独自の機能があり、目的に応じて、どの方法を使用するかを決めるのはあなた次第です。

この投稿では、JavaScript の forEach メソッドを詳しく見ていきます。

まず、以下の配列があるとします。

const numbers = [1, 2, 3, 4, 5];

従来の「for ループ」を使用して配列をループすると、次のようになります。

for (i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

forEach( ) メソッドが特別な理由。

forEach メソッドも配列をループするために使用されますが、従来の「for ループ」とは異なる方法で関数を使用します。

forEach メソッドは、コールバック関数を次のパラメーターと共に配列の各要素に渡します。

現在の値 (必須) - 現在の配列要素の値
インデックス (オプション) - 現在の要素のインデックス番号
配列 (オプション) - 現在の要素が属する配列オブジェクト

これらのパラメーターを一つずつ説明していきます。

まず、forEach メソッドを使用して配列をループするには、コールバック関数 (または無名関数) が必要です。

numbers.forEach(function() {
    // code
});

この関数は、配列のすべての要素に対して実行されます。配列の要素を少なくとも 1 つ、パラメーターとして受け取る必要があります。

numbers.forEach(function(number) {
    console.log(number);
});

配列をループするために必要なことはこれだけです。

代わりに、コードを簡素化するために ES6 の、アロー関数表現を使用することもできます。

numbers.forEach(number => console.log(number));

アロー関数表現

オプションのパラメーター

インデックス

それでは、オプションのパラメーターも見てみましょう。1 つ目は「インデックス」パラメーターで、各要素のインデックス番号を表します。

基本的に、2 番目のパラメーターとしてインデックスを含めることで、それぞれの要素のインデックス番号を確認できます。

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

配列

配列パラメータとは、配列そのものを表します。これもオプションであり、必要に応じてさまざまな用途で使用することができますが、基本、呼び出した場合には、配列の要素数と同じ回数だけ印刷されます。

numbers.forEach((number, index, array) => {
    console.log(array);
});

このビデオで forEach( ) メソッドの使用例を見ることができます。

ブラウザーのサポート

Array.forEach メソッドは、IE バージョン 8 以前を除くすべてのブラウザでサポートされています。

caniuse.com

ウェブ開発についてもっと詳しく知りたい方は、ぜひ私の YouTube チャンネルにアクセスしてみて下さい。

最後まで読んでいただきありがとうございます！

Saki Basken - freeCodeCamp.org

エンジニアへ転身するための完全ガイド: 在宅フリーランスと育児から開発者の道へ

これまでの経歴

子育てとフリーランス: 見えないキャリアの空白

転機: 私がコーディングに興味を持ったきっかけ

初めの一歩: 技術翻訳者としての初めての経験

大きな決断: 血と汗と涙のブートキャンプの日々

ブートキャンプ後のサポート: キャリアコーチと就活戦略

転機と躍進: 初めてのフルタイムの仕事を得るまで

ネットワーキング: ぎこちなさを克服し、関係を築く

ネットワーキングから学んだこと: 会話をチャンスに変える方法

求人応募の攻略と企業へのアプローチ法

面接突破法: 会話を仕事のオファーに繋げる方法

トップから学ぶ: メンターシップが技術の成長を加速

オープンソースの可能性: 経験と信頼性の構築

テックジャーニーを振り返って: 型破りな道を楽しむ

キーポイント

React、Node、Socket.io、HarperDB を使用してリアルタイムのチャットアプリケーションを作成する方法

目次

Socket.io とは

プロジェクトのセットアップ

1. フォルダーの設定方法

2. クライアントの依存関係をインストールする方法

3. React アプリの起動方法

HarperDB のセットアップ方法

「チャットルームに参加する」ページ作成方法

1. HTML フォームの作成とスタイルの追加方法

{`<>DevRooms`}

2. ルーム参加フォームに機能を追加する方法

サーバーの設定方法

1. サーバーの依存関係をインストールする方法

2. サーバーを起動する方法

サーバー上で最初の Socket.io イベントリスナーを作成する方法

Socket.io のルームの仕組み

ユーザーを Socket.io ルームに参加させる方法

ルーム内のユーザーにメッセージを送信する方法

チャットページを作成する方法

チャットページのコンポーネント:

メッセージコンポーネント (B) を作成する方法

HarperDB でスキーマとテーブルを作成する方法

メッセージ送信コンポーネント (C) の作成方法

HarperDB の環境変数を設定する方法

Socket.io を利用してユーザーが相互にメッセージを送信できるようにする方法

HarperDB からメッセージを取得する方法

クライアントで最新メッセージ 100 件を表示する方法

チャットルームとユーザー (A) の表示方法

{room}

Users:

Socket.io のルームからユーザーを削除する方法

Socket.io 接続を切断するイベントリスナーを追加する方法

挑戦状💪

最後まで読んでいただきありがとうございます！

Python Do While – ループの例

Python におけるループ

Python における while ループとは何か

無限ループを作らない

do while ループとは何か

Python で do while ループを作成する方法

まとめ

Python における %.2f – その意味とは？

Python で %f フォーマッタを使用する方法

Python で %d フォーマッタを使用する方法

まとめ

40 以上の言語でコンパイルおよび実行できる React を使用したコードエディターを構築する方法

構築するもの

技術スタック

プロジェクトの構造

アプリケーションの流れ

コードエディターコンポーネントを構築する方法

ランディングコンポーネントを構築する

CodeEditorWindow コンポーネント

LanguageDropdown コンポーネント

Judge0 を使用してコードをコンパイルする方法

コンパイルフローとロジック

出力ウィンドウコンポーネント

Output

出力詳細コンポーネント

キーボードイベント

注意事項

まとめ

Python で `%f` フォーマッタを使用する方法

Python で `%d` フォーマッタを使用する方法

`+` 演算子を使用して Python で文字列を追加する方法

`join()` メソッドを使用して Python で文字列を追加する方法

String `format()` メソッドを使用して Python で文字列を追加する方法