<![CDATA[ まつだようこ - freeCodeCamp.org ]]> https://www.freecodecamp.org/japanese/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ まつだようこ - freeCodeCamp.org ]]> https://www.freecodecamp.org/japanese/news/ Eleventy Fri, 08 May 2026 07:54:06 +0000 60 <![CDATA[ 2025 年に freeCodeCamp カリキュラムが大幅リニューアル ]]> https://www.freecodecamp.org/japanese/news/christmas-2025-freecodecamp-curriculum-updates/ 67976ed8e49fb9043ff76af4 Mon, 27 Jan 2025 12:04:11 +0000 原文: Major freeCodeCamp Curriculum Updates Now Live in 2025

2024 年のホリデーシーズンに、freeCodeCamp では無料学習ツールを多数リリースしました。

🏗️ 新しい「認定フルスタック開発者」カリキュラムが登場！

🗨️ 開発者のための英語講座「CEFR B1 レベル」

🤳 モバイルアプリの大幅アップデート

freeCodeCamp 認定フルスタック開発者カリキュラム

新しい「認定フルスタック開発者 (Certified Full Stack Developer)」カリキュラムのコンテンツは以下の通りです。完了させるにはそれなりの努力が必要な内容となっています。

🛠️ 64 件のワークショップ - HTML から SQL、Python まで、さまざまなツールを学べるインタラクティブかつ段階的なコーディングコース (42 件が公開中)

🏛️ 513 件のレクチャー - コンピュータサイエンスのさまざまな概念を教える短い動画と、理解度チェック用の選択肢問題 (313 件が公開中)

⚗️ 83 件のラボ - 空のエディターとテストスイートが用意された状態から、すべてのテストがパスするようにコードを書いて完成させるプロジェクト (60 件が公開中)

📰 62 件の復習ページ - クイズや試験に向けた復習用に、各モジュールのトピックを網羅したリスト (46 件が公開中)

🔬 66 件のクイズ - フルスタック開発の概念やツールが理解できたことを確認する小テスト (46 件が公開中)

🏔️ 1 件の最終プロジェクト - ポートフォリオ用に構築する大規模でユニークなプロジェクト。提出内容は freeCodeCamp コミュニティの講師がレビューします (2025 年公開予定)

🤺 1 件の最終試験 - 包括的な 90 問の認定試験。freeCodeCamp が新たに作成したオープンソースの試験環境内で、プロクター (監督者) 付きで実施します。(2025 年公開予定)

一部のトピックの学習経験がある場合でも、最初から取り組むことをお勧めします。

新しい認定フルスタック開発者カリキュラムを今すぐ始めましょう。

開発者のための英語 CEFR B1 レベル カリキュラム

2023 年のクリスマスには CEFR A2 レベルの英語カリキュラムをリリースしました。

5eec4303-900b-4423-980a-cfa68a2962a0

それから一年、A2 レベルの講座が全て公開されただけでなく、B1 レベルの大部分が提供できるところまでたどり着きました。

認定試験については 2025 年に公開予定となっています。

新しい認定カリキュラム「開発者のための CEFR B1 レベル英語」を試してみてください。

freeCodeCamp の iPhone および Android アプリ

freeCodeCamp モバイルアプリがさらに使いやすくなりました。(Flutter で書かれたコードベースも 1,000 コミットに到達しました！)

以下の機能が追加されました:

📺 講座動画の視聴

📚 書籍を読む

🤳 スマホからカリキュラムに取り組む

iPhone/Android でダウンロードして、ぜひ 5 つ星のレビューをお願いします⭐️⭐️⭐️⭐️⭐️ 😉

Android アプリをダウンロード

iPhone アプリをダウンロード

2025 年は素晴らしい年になるでしょう

freeCodeCamp のカリキュラムやオープンソースプロジェクトに貢献してくださっている皆様、いつもありがとうございます。

また、フォーラムや Discord にいつでも質問に答えてくれるアクティブなキャンパーがいることにも感謝しています。

ぜひ周りにもこの活動を広めてください。まずはコントリビュータードキュメントに目を通すのが良いでしょう。

最後に、寄付を通して freeCodeCamp の使命を支えてくださる皆様、本当にありがとうございます。これからの展開を楽しみにしていてください。🥞

ご友人や同僚にも声をかけて、私たちのチャリティーをサポートしていただけると助かります。力を合わせて、あらゆるの場所のあらゆる人々が無料で質の高い教育を受けられる世界にしていきましょう。サポーターとして、世界中にいる 11,043 人の親切な人々の輪に加わってください。

]]> <![CDATA[ freeCodeCamp 10 周年 + 認定講座の大幅アップデート ]]> https://www.freecodecamp.org/japanese/news/freecodecamp-turns-10-major-curriculum-updates/ 672197fedc2c390443798eb0 Wed, 30 Oct 2024 16:40:00 +0000 原文: freeCodeCamp Turns 10 + Major Certification Updates

10 年前の今日、私はサンフランシスコのアパートのクローゼットで、freeCodeCamp の始まりとなる数百行のコードを書きました。

Quincy のクローゼット・オフィス

その時は知る由もありませんでしたが、あっという間に freeCodeCamp は、日々忙しい大人たちが共にプログラミングを学ぶ世界的なコミュニティへと成長しました。

これまでに「キャンパー」(コミュニティメンバーをそう呼んでいます) の多くがソフトウェアエンジニアとして職を得ました。また、freeCodeCamp のオープンソース・コードベースに貢献しているキャンパーも多数います。

NYC freeCodeCamp イベントでのキャンパーたち

この 10 年間で私たちが作り上げてきたものを挙げてみましょう。

  1. 数学、プログラミング、コンピュータサイエンスを教える、3,000 時間におよぶインタラクティブなコアカリキュラム
  2. 12,000 件を超えるプログラミングチュートリアル記事、および書籍レベルの長編記事数十件を、freecodecamp.org/news にて公開 (日本語版はこちら)
  3. 1,000 件を超える無料の長編動画コースを YouTube チャンネルにて公開し、チャンネル登録者数 1,000 万人に到達
  4. 世界で最も親切で協力的なプログラミングフォーラムと、同じく親切な Discord サーバー

私 1 人から始まったチームは、35 人の講師とエンジニアから成るスタッフチームへと成長しました。そしてこれは氷山の一角にすぎません。作業の大部分はオープンソースコミュニティの手によって行われています。日々、ボランティアのコントリビューターたちが自発的に、コードベースを改善したり、新しい教材を作成したり、フォーラムでお互いに助け合ったりしています。

freecodecamp GitHub リポジトリのスクリーンショット

そして、私たちはまだ歩み始めたばかりです。ですから freeCodeCamp のこれまでの 10 年間について感傷的な記事を書くのではなく、これからの 10 年間に向けた計画にフォーカスしたいと思います。

私たちの慈善団体としての使命は、数学・プログラミング・コンピュータサイエンスの学習を支援するための、無料の学習リソースを作成することです。やるべきことはまだまだあります。

この記事では、今後 10 年間の主要な取り組みや改善計画について紹介します。クリスマスシーズンにリリース予定の内容もあります。

包括的な認定資格への統合

最大の改善点として、現在のカリキュラムの大部分を包括的な Certified Full Stack Developer (CFSD) 認定資格に統合します。加えて、他にもいくつかの新しい認定資格プログラムをゼロから開発中です。

私たちは CompTIA や (ISC)² のような高く評価されている開発者認定資格を運営する非営利団体からインスピレーションを得て、より業界標準に近い認定資格を目指しています。

新しい認定資格では以下の点を強化します。

  • さらに幅広い学習内容
  • 最終試験
  • 最終プロジェクト
  • 3 年間の有効期限と更新プロセス

そして freeCodeCamp のすべての成果物と同じく、新しい認定資格も完全に無料です。

Certified Full Stack Developer 認定資格の準備用カリキュラムでは、以下のトピックをカバーします。

  • セマンティック HTML
  • アクセシビリティ
  • CSS 基礎
  • CSS フレックスボックス
  • 開発者のためのデザイン
  • タイポグラフィ
  • コードエディター
  • JavaScript 基礎
  • 関数型プログラミング
  • 高階関数とコールバック
  • DOM 操作とイベント
  • Web 標準
  • React 基礎
  • TypeScript 基礎
  • テストの概念
  • Bash スクリプト
  • SQL とリレーショナルデータベース
  • Git と GitHub
  • セキュリティとプライバシー
  • Node.js
  • Express.js
  • Python 基礎
  • アルゴリズム的思考
  • データ構造
  • オブジェクト指向プログラミング
  • 動的プログラミング
  • ウェブ開発者向けセキュリティ
  • ツールとデプロイメント
  • API の利用
  • AI エンジニアリング基礎
  • 開発者としての就職活動
  • 他

そして多数のリクエストに応えて、コアカリキュラムで理論についてももっと深く扱うようにします。

これまで、私たちの認定講座はプロジェクト構築に 100% 注力していました。しかし、多くのキャンパーから実践学習に偏りすぎているというフィードバックがあり、理論の解説を求める声が多く寄せられていました。

今後は動画講座やチュートリアル記事でコアカリキュラムを補完しなくても進められるよう、必要なすべての理論をカリキュラム中でカバーします。

そのために、freeCodeCamp の教育デザインチームの Beau Carnes や Ania Kubów などが担当する短い動画レクチャーを追加します。動画よりテキストを好むキャンパーのために、文字起こしも提供予定です。

また、理論を復習したり理解度を確認したりできるように、クイズ (小テスト) も多数追加します。これらの要素と組み込みの反復学習システムにより、主要な概念とコーディング手法をより効率的に学習できるでしょう。

そして新たなカリキュラムでは、真っ白なキャンバスからスタートするスタイルのコーディング・ラボを早い段階から取り入れ、学習の自由度を高めます。

以下が新しい Certified Full Stack Developer コースの全コンテンツです。簡単ではありません。

  • 64 のワークショップ - HTML、SQL、Python など幅広いツールについて学ぶ、インタラクティブなステップ・バイ・ステップのコーディングコース
  • 513 のレクチャー - コンピュータサイエンスの概念をカバーする短い動画と、理解度を確認するための選択式問題
  • 83 のラボ - 空のエディタとテストスイートからスタートしてコードを書き、すべてのテストを通過させることを目指すプロジェクト
  • 62 の復習ページ - 小テストや試験の準備をサポートする、各モジュールのトピックを復習できる包括的なリスト
  • 66 のクイズと 6 つの中間試験 - フルスタック開発の概念やツールの理解力を確認する質問
  • 1 つの最終プロジェクト - ポートフォリオ用に構築する大規模かつユニークなプロジェクト (freeCodeCamp コミュニティの講師が成果物を確認)
  • 1 つの最終試験 - 90 問の総合的な、不正防止機能付きの資格試験 (freeCodeCamp の試験環境システムを利用)

すべての講座内容を修了すると、最終試験の受験資格を得られます。ここまで学んだことを評価する厳格な試験を実施するためのシステムとして、私たちは独自のオープンソース試験環境を開発しました。

試験に不合格となった場合は 24 時間ごとに再試験が可能で、試験問題は大規模な問題集からランダムに生成されます。

オンライン試験で謂れのない不正行為を疑われたという話を耳にしたことがあるかもしれませんが、私たちは学問的行動規範の厳格な執行にあたって慎重に配慮し、このような決定には常に人間が関与するようにしています。

「赤ちゃんが泣きだしたので席を立った」というだけで自動的に失格になるようなことはありません。試験の運営においてさまざまな点を考慮します。

試験に合格すると、履歴書や LinkedIn アカウントに追加可能な、無料の、検証機能・シリアルナンバー付き認定証を取得できます。この認定証は 3 年間有効で、その後は無料の継続教育プロセスを完了することで再認定が可能です。

以上のアップデート内容をこちらの動画で 3 分間にまとめて紹介しています。

他 3 種の認定資格を開発中

新しい Certified Full Stack Developer 資格をリリース次第、私たちの教育デザインチームは以下 3 種の認定資格の開発に注力します。

Certified Machine Learning Engineer 認定資格 (fCC-CMLE)

この認定資格では Python と数多くのライブラリを学び、数学と理論も幅広く学習します。大多数のプロジェクトでは、独自のモデルを作成することが要求されます。現在 Kylie Ying が機械学習エンジニアと共に講座設計に取り組んでおり、一部は 2025 年のリリースを予定しています。

Certified Software Systems Engineer 認定資格 (fCC-CSSE)

低レベルプログラミングと高性能コンピューティングを扱う認定資格です。C や C++ でのプログラミングを学び、独自のコンパイラや検索エンジンなどを構築する多数のプロジェクトに取り組みます。一部は 2026 年にリリース予定です。

Certified Data Scientist 認定資格 (fCC-CDS)

freeCodeCamp ではこの数年間、包括的なデータサイエンスカリキュラムの開発に取り組んでいます。ご存知のように、すでに freeCodeCamp コミュニティの YouTube チャンネルでは Python、R、統計ツールなどデータサイエンスに関連した無料講座が多数公開され、人気を博しています。

データサイエンスを教える際の課題は、この分野で必要となる膨大な量の数学をどのように教えるかです。その学習成果をプログラムで評価できるようなプロジェクト指向の学習を組み込む必要もあります。

私たちの目標は、博士課程以外でアクセス可能な最高のデータサイエンス教育を提供することです。これは最も大きな挑戦になりますが、何としても成し遂げたいと思います。一部は 2027 年にリリース予定です。

これらの認定資格と講座内容の詳細はいつごろ提供されますか？

現在カリキュラムのアウトラインを作成中で、いくつかは 2025 年に公開予定です。

現行の freeCodeCamp 認定講座はどうなりますか？

freeCodeCamp には旧認定講座の内容も引き続き公開するという伝統があります。今回も例外ではありません。

新しい Certified Full Stack Developer 認定資格のカリキュラムは今年のクリスマスを目処に公開を予定しており、公開後は新講座に移行することをお勧めします。プロジェクトの多くは現行の認定講座と共通となっているため、すでに一部のプロジェクトを完了した状態からスタートできる可能性もあります。

引き続き旧認定講座に取り組みたい場合は、そのまま続行することも可能です。

旧認定証も有効期限切れになるのでしょうか？

はい。旧認定証は 2027 年 12 月 31 日に有効期限切れとなります。過去に取得された freeCodeCamp 認定証も対象となります。

受講者の皆さんが新しい Certified Full Stack Developer 認定資格を取得するまで、現行の認定証を引き続き利用できる猶予期間を十分に設けたいと考え、3 年間が妥当と判断しました。

この有効期限は freeCodeCamp のすべての認定証に適用されます。

以降、Certified Full Stack Developer 認定資格や今後追加予定の 3 種の認定資格は取得日から 3 年間有効となります。

また、3 年後に資格を更新するための継続教育プロセスも開発中です。こちらも完全に無料で提供されます。

試験を必須にしたり、認定資格に有効期限を追加したりするのはなぜですか？

他の IT 業界の認定資格と整合性を持たせるためです。主要な認定資格の多くは、認定試験の合格を必要とし、3 年で期限切れとなる形式となっています。

私たちの目的は、freeCodeCamp の認定資格をより業界の慣習に従った形にすることで、雇用者にアピールしやすいものにすることです。

freeCodeCamp が求人や職業紹介の分野に参入する予定はありますか？

その計画はありません。当団体の使命はシンプルで、無料の学習リソースを提供することです。教育以外の分野の人材を多数雇うより、少数精鋭の教育チームを維持していくつもりです。

認定資格間で講座内容の重複はどのくらいありますか？

認定資格の中には、一部のプロジェクトやレクチャーが共通するものもあります。例えば、すでに Certified Full Stack Developer 認定資格で Python の入門コースを完了した場合、Certified Machine Learning Engineer 認定資格で再度完了する必要はありません。

旧認定証は引き続きオンラインで表示できますか？検証用リンクは引き続き有効ですか？

期限切れの認定証もプロフィールに表示され、URL も機能し続けます。ただし認定証には期限切れとなった日付が明記され、資格が更新されるまで変わりません。なお、このような有効期限の設定は、2027 年 12 月 31 日までは行われません。

現在 freecodecamp.org/learn の一覧にある 11 種の認定講座はどうなりますか？

少なくとも数年間は「旧認定講座 (レガシー認定講座)」として引き続き利用可能です。ほとんどの講座内容は新しい認定資格の一部として改良され、再利用されます。

すでに完了したプロジェクトを再度完了しなければなりませんか？

旧認定講座の講座内容の一部は新しい認定資格に引き継がれます。そしてほとんどの場合、すでに完了したプロジェクトを再度行う必要はありません。すでにいくつかプロジェクトを完了済みであれば、新しい認定資格の閲覧時に一部セクションが完了済みとして表示されるでしょう。

Rust や Java といったプログラミング言語や NoSQL データベースツールについての講座はありますか？

freeCodeCamp では、キャンパーが開発者として働く上で最も需要のあるツールにターゲットを絞っています。これには、Python、JavaScript、SQL、そして Git や Linux のようなツールが含まれます。

その他の人気ツールについては、YouTube チャンネルの動画講座や freeCodeCamp ニュースのチュートリアル記事を多数提供しています。これらの技術については引き続き、希望者向けのカリキュラム外講座として提供します。

英語カリキュラムの進捗状況は？

引き続き、キャンパーが英語力を磨くためのインタラクティブな英語カリキュラム作成に取り組んでいます。

動画とインタラクティブな演習を組み合わせた講座の最後に、正式な認定試験を設ける予定です。

freeCodeCamp の英語カリキュラム、ユーザーインターフェースのスクリーンショット

現在 A2 レベル講座が完成間近となっており、B1 レベル講座の作業にも着手しています。

CEFR レベルのチャート

無料の大学学位プログラムの進捗状況は？

数学の準学士号とコンピュータサイエンスの学士号の提供に向け、着実に進んでいます。既に 2 つの数学コースを開発し、残り 38 の米国大学レベルコースと、関連するレクチャー、ラボ、試験の開発に全力を注いでいます。

freeCodeCamp の教育デザイナーチームは小規模で、現在は主に Certified Full Stack Developer 認定資格の講座内容と英語カリキュラムに集中しています。これらが完了次第、学位プログラムにさらにリソースを割り当て、開発を加速させる予定です。

10 年はほんの始まり

freeCodeCamp チームの一部、ダラスの公立図書館前にて

コミュニティとして、たった 10 年間でこれだけのことを成し遂げられたのは本当に素晴らしいと思っています。

  • 3,000 時間のインタラクティブな学習リソースからなる無料カリキュラム
  • 数千件の動画講座、電子書籍、チュートリアル記事
  • 数万人のキャンパーが開発者として仕事を得たこと
  • 数万人のコントリビューターがボランティアとして時間やスキルを提供し、OSS 活動や他のキャンパーとの助け合いを通して経験を積んでいること

あなたもぜひ、この世界的な freeCodeCamp コミュニティに加わりませんか？こちらの記事で 2024 年度のトップコントリビューター一覧をご覧いただけます。コントリビューター活動に興味があれば、コントリビューターガイドを参照してください。

また、サポーターになる方法もあります。すでに毎月支援してくださっている方で、当チャリティに年末の贈り物をとお考えであれば、ぜひともお願いいたします。こちらの記事でさまざまな支援方法を紹介しています。

当チャリティのミッションを支援する方法について質問がある場合や、税控除用の寄付受領証が必要な場合は、直接私までメールでお問い合わせください: quincy@freecodecamp.org

次の 10 年を祝して。

– Quincy

]]> <![CDATA[ freeCodeCamp トップコントリビューター 2024 ]]> https://www.freecodecamp.org/japanese/news/freecodecamps-top-open-source-contributors-of-2024/ 672193e8dc2c390443798e92 Wed, 30 Oct 2024 16:30:00 +0000 原文: freeCodeCamp's Top Open Source Contributors of 2024

2024 年も freeCodeCamp コミュニティにとって非常に生産的な一年となりました。「誰もがアクセスできる学習リソースを作る」という私たちのミッションに向かって、力強く進み続けた一年でした。

この 12 か月で freeCodeCamp コミュニティは次のような成果を上げました。

  • 2,455 件のコードコントリビューションを GitHub 上のオープンソースリポジトリにマージ
  • 193 件の無料長編動画講座を YouTube で公開
  • 850 件のテキストベースのプログラミングチュートリアルと 5 件の無料電子書籍を freeCodeCamp ニュースにて公開
  • 150 万ワードのカリキュラムとチュートリアル記事を、英語から世界中のさまざまな言語へと翻訳

この一年、ボランティアとして活動してくださった心優しいコントリビューターの皆さんに感謝を申し上げます。おかげでさまざまな面で大きな発展を遂げることができました。

以下は、本年のトップコントリビューターの一覧です。コントリビューションのカテゴリーごとにリストが分かれています。

GitHub トップコントリビューター

フォーラム トップコントリビューター

翻訳 トップコントリビューター

  • Afonso Branco
  • rustamdocstranslator
  • Madlen
  • Alan Luo
  • LisaGo
  • majidah
  • Karel Vanhelden
  • SeunghyunKim
  • Nadja Sellinat
  • Kevin Matthew
  • Siyana Zdravkova
  • Ricardo Cuauro
  • Liu dakang
  • Álvaro Dávila
  • Ira Bohach
  • Laureline
  • Nils Goeke
  • ViktoriaKushnir0-
  • ピンク人
  • sohyun
  • kimploo
  • franciscomelov
  • Andriana Cabrera
  • Kostiantyn Melnyk
  • athen
  • JulianLobonAguilar
  • moonki kim
  • Suzie
  • Kasia
  • mamaruo
  • VL
  • Solomiia Karpachova
  • Diana Kolosovska (Діана Колосовська)
  • steven ding
  • Elias Pereyra
  • nin3lee
  • Juanma
  • Naelko
  • Álvaro Dávila
  • Tamiris
  • Devan
  • Leslie Suh
  • Dario
  • mix bo
  • Eduardo Lima
  • isaura-ribeiro
  • nighttheduck
  • Caroline Andrade
  • salvatore luciano
  • Nikolai
  • Frankline Were
  • Mikadifo
  • MaxiNZ
  • SleepyGogo
  • Brendo Arruda
  • rkang13
  • TikaZ
  • shaudvetis
  • Minh Tuấn Nguyễn
  • wdthor
  • BeGeosDev
  • Kristian Pavic
  • Dalton Cuenca
  • jonathanq
  • Erick
  • Sreya Satheesh
  • Freddy R
  • Wilmer Gulcochía Sánchez
  • Shannon
  • André Garcia
  • Saikrishna Anumula
  • Sharvio
  • David Gómez Redondo
  • Jimmy Yem
  • Lucy Macartney
  • vLeov
  • Sunce
  • 1615_P._Enrique
  • Ener Octavio Buitrago Camelo
  • ProjektMing
  • nrached
  • Camila
  • Maria Luz Davico
  • EricF
  • Bobby M
  • lime
  • irabucha
  • Filippo Crespi
  • MrTL3
  • Li Chuan (李川)
  • Rodrigo Lajas
  • Jarvis Hack
  • invoker
  • claudiomavi
  • Kato Tsune (加藤恒)
  • yk1537
  • Jose Zambrano
  • Takkapi
  • BlackAndRed.eth
  • leopard355
  • DariaShu
  • Daniel R. da Silva
  • Adham Muhammadjonov
  • Davi Stadlinger
  • w w
  • KenGan
  • cezin17
  • Dylan Gabriel Diroché
  • luluhwenceslau
  • Chinchu Ori
  • albasantalo
  • Dira R P
  • William Hincapié
  • aldid95
  • Fran Martinez
  • Yao990815
  • Miracle
  • Julian Andres Lasso Figueroa
  • pame.gon
  • watanaki
  • Faisal Hanafi
  • Jiwon
  • Abo_AbdelSalam
  • Vé
  • Lu Mu (辂木)
  • martinvostatek
  • Patrick Hähnel
  • Stanley S
  • Alexia Javadd
  • peperluiz
  • Lina Guio
  • adnen rebai
  • Pasan Hewavitharana
  • Monir Adam
  • Adi Nugroho
  • YumiClmpn
  • Daniel Garcia Sanchez
  • bugrahankaramollaoglu
  • Hannibal_TN
  • Ucky Deni Ulinnuha
  • David Beyer
  • Nicolás Folli
  • IM Grigore
  • Bill Gao
  • Baris
  • Simón San Juan Gallardo
  • Eralpozcan
  • Maria Fernanda Rios
  • Tsukistar (月落星河)
  • Tao
  • Gabriel Kraemer
  • mementog
  • petyaDeveloper
  • TrueJackWu
  • Nicolvs
  • Juan Diego Jaimes
  • Cássio Barth
  • Aekkapob Pangtan
  • Sergitxin
  • Bettina Neuwirth
  • juanalbglz
  • Marta Escriche
  • adrianna
  • pcaballero
  • Nico Van Pletzen
  • Rafael Quintero
  • Ozat21
  • Dinto
  • orikes
  • fanqie
  • Kamil Kliczbor
  • Francisco Mancuello
  • Roberto Perez
  • Luis Aguilar
  • kersen
  • miller-danilo
  • castrovca
  • ChristianMoya
  • Felipe Navarro
  • Felipe Hernández
  • DongHyeon
  • Denisse Lemos
  • Meer Sajib
  • AR Dhrubo
  • Paola Rosati
  • Andrea Sisti
  • Charlotte Stone
  • Saki Basken
  • Yuki Shibata
  • YUUSUKE OKAMOTO
  • Constanza Areal
  • Elias Ezequiel Pereyra Gomez
  • Diego Lopez
  • Cristian Fernando Villca Gutierrez
  • Francisco Melo V.
  • HeZean
  • Mingxun Liu
  • Tsukistar
  • James Z. Zhang
  • huqi
  • JunoWei
  • YiWei
  • luojiyin
  • herosql
  • 李小宁
  • Afonso Branco
  • Kris Lagerström
  • Filipe Barbosa
  • David Esdras
  • João Eduardo Gomes
  • Luis Felipe L. C.
  • Marcelo Pena
  • Gabriel Balbueno
  • Sabrina Alves
  • Ana Laura Reis
  • Isabel de Souza

YouTube トップコントリビューター

ニュース トップコントリビューター

Discord トップコントリビューター

  • plamoni
  • jeremylt
  • Versailles
  • Science99
  • rhombert
  • localhost
  • goks563
  • Razzle Dazzle
  • hana
  • SaintPeter
  • Maestro
  • xCoffeeMan
  • Tex
  • Jim
  • bradtaniguchi
  • Mohammed_malleck
  • andrewdmitriev39r
  • ilenia
  • ArialLeslie
  • Chara
  • SaintElGandoSmokio
  • CapslockHero
  • g0vX
  • tgrtim
  • alpox
  • AlexG
  • dark
  • Lycelia
  • WangGang
  • Saburo
  • Bordin
  • Dylan
  • bulhaa
  • bro keeps whining
  • Tek

このリストに名前があるのは、何千人もの freeCodeCamp コミュニティ参加者の中でも特に多く貢献してくださったほんの一部のコントリビューターです。

オープンソースコントリビューターとして freeCodeCamp コミュニティで活動することに興味があれば、まずはコントリビューターガイドに目を通し、Discord サーバーに参加することをおすすめします。日本語用の Discord サーバーもあります。

ありがとうございました。これからもコーディングを楽しんでください。🏕️

]]> <![CDATA[ freeCodeCamp.org に寄付する方法 – 慈善団体による教育活動を支援するには ]]> https://www.freecodecamp.org/japanese/news/how-to-donate-to-free-code-camp/ 67065b1b698df104473131ba Wed, 09 Oct 2024 10:56:00 +0000 原文: How to Donate to freeCodeCamp.org – Ways to Give and Support our Charity's Mission

freeCodeCamp.org は、寄付によって支えられている 501(c)(3) 慈善団体です。

私、Quincy Larson は、2014 年に freeCodeCamp ウェブサイトの最初のバージョンを構築しました。今では 50 万人以上の人々が毎日 freeCodeCamp を利用しています。

テクノロジーの力と何千人ものボランティアの助けを借りることで、私たちのような小さな非営利団体でも多くの人々をサポートできています。

この記事では、私たちのミッションを寄付を通して支援する方法を紹介します。また、その際必要なあらゆる情報を提供します。

freeCodeCamp.org の透明性はどのような状態ですか？

極めて高いと評価されています。私たちは GuideStar.org からプラチナグレードの透明性評価を受けています。

こちらから私たちの IRS Determination Letter をダウンロードできます。

また、こちらから最新の 990 (年間税務報告書) をダウンロードできます。

Free_Code_Camp_Inc_-_GuideStar_Profile
非営利団体透明性サイト GuideStar.org のスクリーンショット

freeCodeCamp はどのくらい効率的ですか？

freeCodeCamp の予算は、同規模の他非営利団体に比べて以上に少ない状況です。その一因としては、私が資金調達活動が不得手だということもあるでしょう。私たちは資金調達の専門家を雇用することなく、私自身がその役目をすべて担っています。

もっと上手いやり方があるのかもしれません。ですがこのおかげで、私は資金がどこにどう使われているのかを明確に説明できます。すべてを私自身で監督しているからです。

そして、年間予算がわずか数十万ドルであるにもかかわらず、私たちは何百万人もの人々を支援することができています。

freeCodeCamp_historic_usage_-_Google_Sheets
freeCodeCamp.org のウェブサイトと YouTube チャンネルは 2015 年以降、毎年着実に成長しています。2022 年には、時間にして 40 億分以上、つまり 8,000 年分の学習機会を提供しました。

freeCodeCamp を支援する最も一般的な方法は何ですか？

ここから月額 5 ドルの寄付を設定できます。私たちは非常に効率的に寄付を活用しており、あなたからの 5 ドルの寄付によって、世界中の人々に 250 時間以上の学習を提供することができます。

このように毎月寄付してくださっているサポーターは 8,000 人以上にのぼります。

地域にもよりますが、月額 5 ドルでは大したことができるような金額に感じられないかもしれません。しかし、積み重なれば大きな力となります。毎月の定期的な寄付であることも、私たち非営利団体がミッションのための予算を計画する際に非常に役立ちます。

一回ごとの寄付をするにはどうすればいいですか？

一回ごとの寄付をご希望の場合も、自由なタイミングで freeCodeCamp のミッションを支援することが可能です。PayPal 経由で任意の金額を寄付するには、こちらのリンクをご利用ください。

クレジットカードで一回の寄付を行いたい場合、以下のリンクがご利用いただけます。リンク先のページで「This link will take you to Stripe for secure check-out.」というリンクをクリックすると、Stripe のページに遷移し、情報を安全に入力できます (クレジットカード情報は Stripe 側でのみ確認でき、私たちには見えません)。

freeCodeCamp はビットコインやその他の暗号通貨での寄付を受け付けていますか？

はい。暗号通貨での寄付も歓迎しています。希望される方は、quincy@freecodecamp.org までメールにてご連絡ください。ご希望の通貨のウォレットアドレスをお知らせします。

小切手での寄付も可能ですか？

はい、小切手での寄付も受け付けています。こちらの宛先までお送りください。

Free Code Camp, Inc.
3905 Hedgcoxe Rd
PO Box 250352
Plano, TX 75025

職場からのマッチングギフトや給与控除を設定するにはどうすればいいですか？

これは企業ごとに異なりますが、私たちの非営利団体はすでに多くの大手寄付マッチングデータベースに登録されています。

中には、freeCodeCamp のためにボランティア活動をすると、雇用主がその活動時間に応じた固定金額を寄付してくれるという制度を利用できる人もいます。また、雇用主が、ドナーが行った寄付に対して一定金額を上乗せしてくれる場合もあります。

サポートが必要な場合は、私まで直接メールにて quincy@freecodecamp.org ご連絡ください。

freeCodeCamp.org のために基金を設立するにはどうすればいいですか？

これは大変助かります。手作業による処理が必要になりますので、個別にご案内いたします。メールにて直接 quincy@freecodecamp.org までご連絡ください。

freeCodeCamp.org へ遺贈寄付するにはどうすればいいですか？

そのような寄付を、世界中の人々のプログラミング学習支援に役立てさせていただけることを光栄に思います。お住まいの地域によっては、税制上免除される場合もあります。

遺言書に以下の文章、またはこれに類似した内容を含めていただければと思います:

私は、[**_**USD (または他の通貨) または遺産の残余の **_ パーセント] を freeCodeCamp.org (Free Code Camp, Inc. 納税者番号 82-0779546) に遺贈します。同団体は米国デラウェア州の法律に基づき設立された慈善法人で、現在の所在地は 3905 Hedgcoxe Rd, PO Box 250352, Plano, Texas, 75025 United States です。この寄贈は、freeCodeCamp.org の裁量による一般的な慈善目的のために使用されます。

この文面を提供して下さったウィキメディア財団に感謝申し上げます。

この手続きに関するお問い合わせにつきましては、quincy@freecodecamp.org までメールにてご連絡ください。

株式を freeCodeCamp.org に寄付するにはどうすればいいですか？

株式による寄付も歓迎しております。詳細な手続きや当団体の証券口座の情報につきましては、quincy@freecodecamp.org まで直接メールにてお問い合わせください。

寄付金控除のための領収書はいただけますか？

もちろんです。取引の領収書を donors@freecodecamp.org に転送し、領収書を希望する旨と、その他特別な指定があればお知らせください。領収書をお送りします。

月額寄付の設定を変更または一時停止したいのですが、どうすればいいですか？

月額寄付の領収書の内一通を donors@freecodecamp.org に転送し、希望する変更内容をお知らせください。こちらで変更手続きを行い、確認のメールをお送りします。

freeCodeCamp.org への寄付に関して他に知るべきことはありますか？

この記事でほぼ全てカバーできたかと思います。私は非営利団体の経営者としてはまだ未熟な一教師で、非営利団体の運営に関してはまだまだ学び続けています。

ここに掲載されていない形での支援についてや、その他ご質問があれば、ぜひ quincy@freecodecamp.org までメールにてご連絡ください。

私たち freeCodeCamp.org を信頼し、グローバルな開発者コミュニティの担い手としての役割を任せてくださることに感謝いたします。当団体への寄付やご質問には真摯に対応いたします。皆様に平和が訪れますように。

]]> <![CDATA[ Java の Hello World プログラム – サンプルコード解説 ]]> https://www.freecodecamp.org/japanese/news/hello-world-in-java-example-program/ 66ffb26856e86387d1b8c2b2 Fri, 04 Oct 2024 09:47:00 +0000 原文: Hello World in Java – Example Program

新しいプログラミング言語を学ぶ際、初めてのプログラムとして「Hello World」と呼ばれるプログラムをよく目にすると思います。これは初心者向けのシンプルなプログラムとして広く使われています。

この記事を読んでいるということは、あなたはおそらく Java の初心者か、懐かしい Hello World プログラムを思い出したいのでしょう。いずれにしても、手順はシンプルです。

この記事では、Java での Hello World プログラムを紹介するだけでなく、Java を学ぶ上で知っておくべき基本的な用語についても説明します。

記事に沿ってプログラムを実行するには、コードを書いてコンパイルするための統合開発環境 (IDE) が必要です。任意の IDE を PC にインストールするか、インストール手順を省きたい場合はオンライン IDE を利用してください。

Java での Hello World プログラム

このセクションでは、シンプルな Hello World プログラムを作成し、その動作を理解できるように分解して説明します。

以下がサンプルコードです:

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!"); 
        // Hello World!
    }
}

このコードを実行すると、コンソールに「Hello World!」と表示されます。コード内にコメントとして書いてありますね。コメントについては後ほど説明します。

それではコードを分解して説明します。

Java のクラス

クラスは Java のアプリケーションを組み立てるための部品のような要素です。それぞれ異なる機能ごとに別々のクラスを用意することが多いでしょう。

クラスは、そのクラスの持つ情報を定義する「属性」や、何をするのかを定義する「メソッド」を持つことができます。

例えば、「人間」を表す Human クラスは、髪の色や身長といった属性を持ち、走る、食べる、寝るといったメソッドを持つことができるでしょう。

上記の Hello World プログラムには、HelloWorld というクラスがあります。慣例として、クラス名は必ず大文字で始めます。

クラスを作成するには、class キーワードの後にクラス名を書きます。Hello World プログラムの例がこちらです:

class HelloWorld {

}

Java の main メソッド

すべての Java プログラムには main メソッドが必要です。Java コンパイラはコードの実行を main メソッドから開始します。

main メソッドは次のようになります:

public static void main(String[] args) {

    }

この記事では、簡略化のため上記の public, static, void といったキーワードについての詳しい説明は省きます。

System.out.println() ステートメント

コンソールに情報を出力するには、System.out.println() ステートメントを使います。このステートメントは引数を取ります。引数は丸括弧内に書かれます。

構文は次の通りです:

System.out.println(引数)

この記事のコードでは、"Hello World!" を引数として渡しています。テキストがダブルクォーテーションで囲まれているのが分かりますね。これにより、引数が string (文字列) であることをコンパイラに伝えます。プログラミングにおける文字列とは、私たちが普段書いているテキストと同じような文字の集合体ですが、必ずクォーテーションで囲む必要があります。

コードは次のようになります:

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!"); 
        // Hello World!
    }
}

このコードを実行すると、「Hello World!」と表示されます。

// Hello World! の部分は、この記事を読んでいるあなたにコードの出力結果を伝えるためのコメントです。このコードブロックを実行しても、コメント部分はコンパイラによって無視されるため、コメントがコンソールに出力されることはありません。

Java の単一行コメントは 2 つのスラッシュ (//) で始めます。

まとめ

この記事では、Java での Hello World プログラムについて説明しました。

プログラムを作成した後、各コード行がどのように動作するのかを見てきました。

Java におけるクラス、main メソッド、System.out.println() ステートメント、文字列、コメントについても触れました。

皆さんもぜひ、コーディングを楽しんでください！

]]> <![CDATA[ .htaccess を使用して HTTP から HTTPS へリダイレクトする方法 ]]> https://www.freecodecamp.org/japanese/news/how-to-redirect-http-to-https-using-htaccess/ 66d072201ba26f044de3996c Thu, 29 Aug 2024 13:11:00 +0000 原文: How to redirect HTTP to HTTPS Using .htaccess

Chrome や Firefox は、SSL 証明書がないサイトに「安全でない」という警告を表示するようになりました。つまり、訪問者から見ても、あなたのウェブサイトが安全でないことが一目でわかります。安全性、アクセシビリティ、あるいは PCI 準拠などの理由からも、SSL 暗号化接続を使用することは不可欠です。HTTP から HTTPS へリダイレクトすることがますます重要になっています。

0_wUTFJrRSM2vh1H7v

SSL とは？

SSL (Secure Sockets Layer) は、オンライン通信において、ウェブサーバーとブラウザの間で暗号化リンクを確立するための標準的なセキュリティプロトコルです。

SSL 技術を利用することで、ウェブサーバーとブラウザの間で送信されるすべてのデータが暗号化されます。

SSL 接続を作成するためには SSL 証明書が必要です。ウェブサーバーで SSL を有効化する際には、あなたのウェブサイトと会社に関するさまざまな情報を提供する必要があります。その後、秘密鍵と公開鍵の 2 つの暗号鍵が生成されます。

さらに詳しく: SSL が不可欠な理由とは？(英語)

ウェブトラフィックを強制的に HTTPS にリダイレクトするには、.htaccess ファイルのコードを編集します。

HTTP から HTTPS へリダイレクトする手順の前に、.htaccess ファイルの編集方法を確認しましょう。既にご存じの方はリダイレクト手順に進んでください。

.htaccess ファイルの編集

.htaccess ファイルには、サーバーが特定の状況でどのように動作するべきかを指示する命令が含まれており、ウェブサイトの機能に直接影響を与えます。.htaccess ファイルの一般的な命令に以下のものがあります:

  • リダイレクト
  • URL の書き換え

.htaccess ファイルを編集するさまざまな方法:

  1. ローカルのコンピューターでファイルを編集し、FTP を使用してサーバーにアップロードする。
  2. リモートでファイルを編集できる FTP プログラムで「編集」モードを使用する。
  3. テキストエディタと SSH を使用してファイルを編集する。
  4. cPanel のファイルマネージャーを使用してファイルを編集する。

cPanel ファイルマネージャーで .htaccess を編集する方法

注: 万一のために、ウェブサイトのバックアップを作成してください。

  1. cPanel にログインする。
  2. 「Files」＞「File Manager」＞「Document Root for:」を選択する。
  3. アクセスしたいドメイン名を選択する。
  4. 「Show Hidden Files (dotfiles)」にチェックを入れる。
  5. 「Go」をクリックする。
  6. 新しいタブまたはウィンドウが開いたら、.htaccess ファイルを探す。
  7. .htaccess ファイルを右クリックし、メニューから「Code Edit」を選択する。
  8. エンコーディングに関するダイアログボックスが表示された場合は、「Edit」ボタンをクリックして続行する。
  9. ファイルを編集する。
  10. 編集が完了したら「Save Changes」をクリック。
  11. ウェブサイトをテストして、正しく変更が適用されたか確認する。エラーが発生した場合は、以前のバージョンを復元してやり直す。
  12. 完了したら、「閉じる」をクリックしてウィンドウを閉じる。

HTTP から HTTPS へのリダイレクト

1. すべてのウェブトラフィックをリダイレクト

.htaccess に既存のコードがある場合、以下を追加してください:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]

2. 特定のドメインのみリダイレクト

特定のドメインを HTTPS にリダイレクトする場合、以下を追加してください:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourdomain\.com [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]

3. 特定のフォルダのみリダイレクト

特定のフォルダのみを対象に HTTPS にリダイレクトする場合、以下を追加してください:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{REQUEST_URI} folder
RewriteRule ^(.*)$ https://www.yourdomain.com/folder/$1 [R,L]

注: yourdomain を実際のドメイン名に置き換えてください。また、フォルダ (ディレクトリ) についても /folder を実際のフォルダ名に置き換えてください。

この記事が参考になりましたか？周りの人もスムーズに HTTPS に移行できるようにシェアしてください。

0_P6EKtlMMzyIXNRMw
]]> <![CDATA[ conda remove コマンド – Conda 環境を削除する方法 ]]> https://www.freecodecamp.org/japanese/news/how-to-delete-an-environment-in-conda/ 66c8cd13c256b2043a4a470b Sat, 24 Aug 2024 23:37:00 +0000 原文: Conda Remove Environment – How to Delete an Env

Conda とは、隔離されたコード環境を作成できるオープンソースのパッケージ管理および環境管理システムです。

Conda を使えば、プロジェクトごとに個別の環境を作成できます。例えば、機械学習用の環境とデータ分析用の環境を別々に用意することが可能です。

各環境にはそれぞれ独自のパッケージを含めることができます。ある環境にインストールされたパッケージは、他の環境からアクセスできません。

この記事では、Conda 環境を削除する組み込みコマンドの使い方を解説します。

Conda で環境を削除する方法

以下のコマンドを実行すると、既存の Conda 環境のリストを取得できます。

conda env list

環境を削除する前に、まずその環境を非アクティブ化 (deactivate) する必要があります。以下のコマンドで現在の環境を非アクティブ化できます。

conda deactivate

環境を非アクティブ化すると、自動的に base 環境に切り替わります。

次に、環境を削除するには以下のコマンドを実行します。

conda remove --name ENV_NAME --all

ENV_NAME は、削除したい環境の名前を指定します。前述の通り、conda deactivate コマンドで当該環境を非アクティブ化してから削除するようにしてください。

--all フラグは、その環境にインストールされているすべてのパッケージを削除します。

Conda で環境を削除する手順をまとめると、次のようになります。

  • conda deactivate コマンドを使って環境を非アクティブ化する。
  • conda remove --name ENV_NAME --all コマンドを使って環境を削除する。

まとめ

Conda というパッケージ及び環境管理システムを使うと、独立したコーディング環境とそのパッケージをインストール・管理することができます。

この記事では、Conda 環境を非アクティブ化し、削除するためのコマンドを紹介しました。

Happy coding!

]]> <![CDATA[ Python エラー 'int' object is not iterable の対処法 ]]> https://www.freecodecamp.org/japanese/news/int-object-is-not-iterable-python-error-solved/ 66c8bcdfc256b2043a4a46eb Fri, 23 Aug 2024 23:30:00 +0000 原文: Int Object is Not Iterable – Python Error [Solved]

Python コードの実行中に「TypeError: 'int' object is not iterable」というエラーに遭遇した場合、それは、反復処理ができないはずの整数などのデータ型に対してループ処理を試みていることを意味します。

Python では、リスト、タプル、セット、辞書などが反復可能なデータにあたります。

また、このエラーが「TypeError」であることからも、不適切なデータ型で操作を行おうとしていることがわかります。例えば文字列と整数を足し合わせようとした場合などと同じエラーです。

この記事では、このエラーの対処法だけでなく、__iter__ マジックメソッドをチェックしてオブジェクトが反復可能かどうかを確認する方法も紹介します。この方法を知っていれば、もうこのエラーに悩まされることはありません。

'int' object is not iterable エラーの対処法

整数をループしようとすると、このエラーが発生します:

count = 14

for i in count:
    print(i)
# 出力: TypeError: 'int' object is not iterable

これを修正する方法の 1 つとして考えられるのが、変数を range() 関数に渡すことです。

Python における range 関数は、渡された変数をチェックして、0 から指定された数の直前までの一連の数値を返します。

次のようにすると、ループは正常に動作するようになります:

count = 14

for i in range(count):
    print(i)

# 出力: 0
# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10
# 11
# 12
# 13

この方法を使用したコード例をもう 1 つ示します:

age = int(input("あなたの年齢を入力してください: "))

for num in range(age):
    print(num)

# 出力: 
# あなたの年齢を入力してください: 6
# 0
# 1
# 2
# 3
# 4
# 5

データまたはオブジェクトが反復可能かどうかの確認方法

あるデータが反復可能かどうかを確認するために、dir() メソッドが使用できます。このメソッドで __iter__ マジックメソッドが見つかれば、そのデータは反復可能です。見つからない場合、そのデータは反復可能ではないため、ループを試みるべきではありません。

perfectNum = 7

print(dir(perfectNum))

# 出力: ['__abs__', '__add__', '__and__', '__bool__', '__ceil__', '__class__', '__delattr__', '__dir__', '__divmod__', '__doc__', '__eq__', '__float__', '__floor__', '__floordiv__', '__format__', '__ge__', '__getattribute__', '__getnewargs__', '__gt__', '__hash__', '__index__', '__init__', '__init_subclass__', '__int__', '__invert__', '__le__', '__lshift__', '__lt__', '__mod__', '__mul__', '__ne__', '__neg__', '__new__', '__or__', '__pos__', 
# '__pow__', '__radd__', '__rand__', '__rdivmod__', '__reduce__', '__reduce_ex__', '__repr__', '__rfloordiv__', '__rlshift__', '__rmod__', '__rmul__', '__ror__', '__round__', '__rpow__', '__rrshift__', '__rshift__', '__rsub__', '__rtruediv__', '__rxor__', '__setattr__', '__sizeof__', '__str__', '__sub__', '__subclasshook__', '__truediv__', '__trunc__', '__xor__', 'bit_length', 'conjugate', 'denominator', 'from_bytes', 'imag', 'numerator', 'real', 'to_bytes']

上記の出力には __iter__ マジックメソッドが含まれていないため、変数 perfectNum は反復可能ではないとわかります。

jerseyNums = [43, 10, 7, 6, 8]

print(dir(jerseyNums))

# 出力: ['__add__', '__class__', '__contains__', '__delattr__', '__delitem__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__getitem__', '__gt__', '__hash__', '__iadd__', '__imul__', '__init__', '__init_subclass__', '__iter__', '__le__', '__len__', '__lt__', '__mul__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__reversed__', '__rmul__', '__setattr__', '__setitem__', '__sizeof__', '__str__', '__subclasshook__', 'append', 'clear', 'copy', 'count', 'extend', 'index', 'insert', 'pop', 'remove', 'reverse', 'sort']

上記の出力では __iter__ マジックメソッドが含まれています。つまり、リスト jerseyNums は反復可能です。

結論

この記事では、「'int' object is not iterable」エラーの原因と解決法について学びました。

また、オブジェクトやデータが反復可能かどうかを確認する方法についても紹介しました。

データに __iter__ マジックメソッドが含まれていない場合、そのデータをループしようとするのは避けるようにしましょう。

お読みいただきありがとうございました。

]]> <![CDATA[ freeCodeCamp からクリスマスプレゼント – Python と JavaScript の新講座、英語カリキュラム、The Odin Project ]]> https://www.freecodecamp.org/japanese/news/a-very-freecodecamp-christmas/ 6588c354b302c504a10e7bf1 Sun, 24 Dec 2023 23:56:11 +0000 原文: A Very freeCodeCamp Christmas – Python & JavaScript Upgrades, English Curriculum, The Odin Project

freeCodeCamp から世界中のデベロッパー・コミュニティへ、クリスマスプレゼントをお届けします。

No. 1: 新バージョンの「JavaScript のアルゴリズムとデータ構造」認定講座。ブラウザ上でコードを書いて学べる 21 のプロジェクトを用意しました。プロジェクトに取り組みながら学ぶプロジェクトベース形式の講座で、1,000 以上のステップに細分化されたコーディングチャレンジで段階的に学習できます。

No. 2: 新バージョンの「Python を用いた科学計算」認定講座。ブラウザ上で Python のコードを書いて、12 のプロジェクトに取り組みながら学べます。

No. 3: かの有名な The Odin Project のインタラクティブ版。The Odin Project とは、私 (Quincy) の友人であり freeCodeCamp サポーターでもある Erik Trautman によって 2013 年に作成されたコーディング・カリキュラムです。

No. 4: そして私が個人的に最も楽しみにしていたのが「開発者のための英語」カリキュラムです。今年はまず CEFR A2 レベルの講座をリリースしました。B1、B2、C1 レベルの講座も 2024 年から 2025 年にかけてリリース予定です。開発者として働く上で役立つ表現を中心に学べる講座です。

なぜ freeCodeCamp はこんなにたくさんの教材を一度にリリースしたの？

なぜなら freeCodeCamp コミュニティにふさわしいクリスマスプレゼントだと思ったからです。🎄

freeCodeCamp ではこの数年間をかけて JavaScript カリキュラムのアップデートに取り組んできました。

そして英語カリキュラム、Python カリキュラムの作成にも 2023 のほとんどを費やしました。

残りの認定講座についても、プロジェクトを通して学ぶ形式にアップデートすることを目指しています。

この取り組みには少なくとももう 1 年かかると見込んでいます。いつものことですが、サポーターとして支援していただくことで、追加の人材を採用できるようになり、開発のスピードアップにつながります。

新バージョンの Python カリキュラムと認定講座

Learn_Recursion_by_Solving_the_Tower_of_Hanoi_Puzzle__Step_54___freeCodeCamp_org_---1
古典的なコンピューターサイエンスの問題「ハノイの塔」に取り組む様子。ブラウザ上で、段階的な手順に沿って進められます。

freeCodeCamp では先日、Python を用いた科学計算認定講座のメジャーアップグレードを公開しました。Python プログラミングの基礎を、ブラウザ上で 15 のプロジェクトを作成しながら学ぶことができます。

以下が全 15 プロジェクトの一覧です。

  1. 文字列操作の学習: 暗号プログラムを作成する
  2. 数値と文字列を扱う学習: Luhn アルゴリズムを実装する
  3. ラムダ式の学習: 経費記録ツールを作成する
  4. リスト内包表記の学習: ケース変換プログラムを作成する
  5. 正規表現の学習: パスワード生成プログラムを作成する
  6. アルゴリズムデザインの学習: 最短経路アルゴリズムを作成する
  7. 再帰処理の学習: パズル「ハノイの塔」を解く
  8. データ構造の学習: マージソートアルゴリズムを作成する
  9. クラスとオブジェクトの学習: 数独ソルバーを作成する
  10. 木構造の走査の学習: 二分探索木を作成する
  11. 認定プロジェクト: 計算の縦書き整形プログラム
  12. 認定プロジェクト: 時刻計算プログラム
  13. 認定プロジェクト: 予算アプリ
  14. 認定プロジェクト: 四角形の面積計算プログラム
  15. 認定プロジェクト: 確率計算プログラム

これは 500 問以上のコーディング・チャレンジに相当します。そして 5 件の認定プロジェクトでは、数十件の自動テストをパスするように、洗練されたプロジェクトを作成します。

freeCodeCamp では、Python をブラウザでスムーズに実行できるようにするため尽力してきました。結果として非常にスムーズな動作を実現できました。どこかにあるサーバーで Python のコードが実行されて結果が返ってくるまで待つ必要はありません。

ミリ秒未満でテスト結果が返ってくる freeCodeCamp の JavaScript 講座での体験が気に入っているなら、きっとこの新しい Python 講座も気に入ることでしょう。

freeCodeCamp カリキュラムで Python プログラミングを始めましょう。

新バージョンの JavaScript アルゴリズムとデータ構造認定講座

RPG-game
JavaScript ロールプレイングゲームのステップ 53

以下がこの講座で作成する全プロジェクトの一覧です。

  1. JavaScript 基礎の学習: ロールプレイングゲームを作成する
  2. フォームバリデーションの学習: カロリー計算機を作成する
  3. 文字列と配列の基礎的なメソッドの学習: 音楽プレイヤーを作成する
  4. Date オブジェクトの学習: 日付フォーマッターを作成する
  5. 認定プロジェクト: 回文チェッカー
  6. モダンな JavaScript メソッドの学習: サッカーチームカードを作成する
  7. localStorage の学習: Todo リストを作成する
  8. 再帰処理の学習: 十進数・二進数変換ツールを作成する
  9. 認定プロジェクト: ローマ数字への変換
  10. アルゴリズム的思考の学習: 数値ソートを作成する
  11. 文字列と配列の応用的なメソッドの学習: 統計計算機を作成する
  12. 関数プログラミングの学習: スプレッドシートを作成する
  13. 正規表現の学習: スパムフィルターを作成する
  14. 認定プロジェクト: 電話番号の検証
  15. 基礎的なオブジェクト指向プログラミングの学習: ショッピングカートを作成する
  16. 中級オブジェクト指向プログラミングの学習: 横スクロールゲームを作成する
  17. 中級アルゴリズム的思考の学習: ダイスゲームを作成する
  18. 認定プロジェクト: キャッシュレジスター
  19. Fetch と Promise の学習: freeCodeCamp 著者ページを作成する
  20. 非同期プログラミングの学習: freeCodeCamp フォーラムリーダーボードを作成する
  21. 認定プロジェクト: ポケモン検索アプリ

新バージョンの JavaScript アルゴリズムとデータ構造認定講座についての詳細情報と実際に動作する様子は、freeCodeCamp スタッフの Jessica によるプロジェクトの解説記事で見ることができます。

開発者のための英語カリキュラム

CEFR (Common European Framework of Reference) に馴染みのない方のために、こちらの画像を作成しました。

freeCodeCamp-CEFR-Levels-Explained-3
6 段階の CEFR レベルを説明した画像。freeCodeCamp では A2 レベルの講座からスタートし、B1、B2、C1、C2 レベルも開発予定です。

freeCodeCamp がスタートしてから 9 年間、私たちは主に数学、コンピューターサイエンス、プログラミングの教育に注力してきました。なぜここで急に英語を教えることにしたのでしょうか？

それは、何百万人もの開発者が、自分のキャリアの可能性を最大限発揮するために英語力の向上を必要としているからです。

国際的に、英語がテクノロジー業界の主要言語となっており、多くの重要なテクノロジーが英語圏から生まれている状況です。

また、英語は多くの国でビジネスに使われる言語でもあります。英語圏以外の国に住んでいても仕事で英語を使っているという人が、私の友人にも多くいます。

つまり、多くの人にとって、英語を上手く話せるようになるために時間を費やす価値があるということです。そして freeCodeCamp はそのような人々の力になりたいと考えています。もちろん無料でです。

カリキュラムの前半では、多数の実践的練習を通して、英語の文法や使い方に慣れることを目指します。自己紹介、雑談、仕事についての話し合いなどの基礎的な内容を学びます。

後半では、ソフトウェア開発特有の語彙を練習します。コードを説明したり、テクノロジーのトレンドについて議論したり、スタンドアップ・ミーティングに参加したりする方法を学びます。

この A2 レベルカリキュラムには 105 種類のダイアログが含まれます。それぞれのダイアログは、語彙力を強化し、テクノロジーのプロとしての環境で自信をもって話せるようになることを目指して設計されています。

ぜひ開発者のための英語カリキュラムを試してみてください。そして周りに英語を学んでいる人がいたら勧めてあげてください。

大学学位プログラムの最新情報 (数学準学士、コンピューターサイエンス学士)

大学学位取得プログラムについても着実に進めており、作成中の全 40 のコースのうち 2 番目のコースが完成間近となっています。

まだやるべきことがかなり残っているように聞こえますね。

幸い、私たちがあらゆる開発者に学習を推奨するトピックについての一連の認定講座である freeCodeCamp コアカリキュラムのアップグレードが完了次第、より多くの講師陣が学位取得プログラムの作業にまわる予定です。

私たちの計画は変わりません。2020 年代中頃に全 40 のコースの完成、2020 年代後半に最初の学生の入学、そして卒業生から 5 年間の長期的なデータが得られ次第正式な認定を得ることを目指しています。

これは非常に長い期間に渡る取り組みです。スタートアップ企業がこのような事業に取り組むことを許してくれる投資家はほとんどいないでしょう。その点、私たちはパブリック・チャリティーです。私たちには投資家も株主もいません。私たちにあるのはボランティアとサポーターのグローバル・コミュニティだけです。

freeCodeCamp はいなくなったりしません。世界中の教育制度は多くの問題に溢れ、新しいスキルを学ぶ必要に駆られている多忙な社会人が多数存在しています。freeCodeCamp を始めとする教育機関の力が必要とされているのです。🏕️

従来の JavaScript および Python 認定講座はどうなりますか？

従来の認定講座・認定証も引き続きご利用いただけます。従来の認定講座は freecodecamp 学習プラットフォームの最下部に移動しました。旧カリキュラムはそちらに保管されています。

新しい JavaScript、Python、英語カリキュラム、The Odin Project のセクションはいつまでベータ版ですか？

こうしてこの記事を書いている間にも、引き続きプルリクエストをマージしている状況です。freeCodeCamp の講師陣は、この教材のリリースをクリスマスに間に合わせるため尽力してきました。

今後数週間に渡って、「coming soon」のラベルが付いたセクションをリリース予定です。来年中にはベータ版のラベルを外し、正式版としてリリースすることを目指しています。

freeCodeCamp が初めての場合、どこからスタートするのが良いですか？

これまで通り、freecodecamp 学習プラットフォームの一番上から順に取り組むことをおすすめします。何千時間にもおよぶ学習内容が含まれるので、2024 年中ずっと退屈しないでしょう。率直に言えば、プログラミングをしっかりと学ぶにはそれだけの時間がかかるのです。

コアカリキュラムでは、何百ものプロジェクトを通して大量の演習に取り組みます。そして今後リリース予定の数学・コンピューターサイエンス学位プログラムでは理論を学ぶことができます。

長い期間をかけて、あなたの学習をサポートします。千件以上の YouTube 動画講座、1 万件以上のチュートリアル記事も公開しています。1 冊の本に相当するようなボリュームの記事も複数あります。すべて無料で利用可能です。

2014 年に freeCodeCamp をスタートした時には、私たちの教材がこれほど包括的なものになるとは予想していませんでした。しかし私たちは今、オープンソースの力、無料の教育を支援したいという何千人もの講師・開発者達の力を目の当たりにしています。

私たちは今、数学、プログラミング、そして英語について地球上で最も詳しいだけでなく、桁違いに詳しいと言える学習リソースとなることを目指しています。

freeCodeCamp はまだ 9 歳です。

毎日百万人以上の人々が freeCodeCamp で学んでいるという、freeCodeCamp コミュニティの現在の姿には驚かされるばかりです。

この 1 年だけでも、freeCodeCamp コミュニティは以下のことを成し遂げました。

  • YouTube にて長編講座を 114 件投稿
  • プログラミングチュートリアル記事を 1,045 件、freeCodeCamp Press として無料の電子書籍を 20 冊投稿
  • GitHub にて 2,753 件のコードコントリビューションをマージ
  • カリキュラムとチュートリアル記事の多言語化において 200 万ワード以上を翻訳

そしてこれはまだほんの始まりです。この先やるべきことがもっとあります。

再度になりますが、サポーターとして支えていただければ幸いです。

すでに月次サポーターの方でも、当チャリティーのために年末のギフトをご検討いただけるのであればぜひお願いいたします。

当チャリティー団体の使命を支援する方法についての質問や、単に寄付の領収書が必要な場合でも、直接 quincy@freecodecamp.org までお問い合わせいただいて構いません。

あなたが良いクリスマスを過ごしながら、新しいスキルを学ぶ時間を持てることをお祈りします。Happy coding! 🎅⌨️

]]> <![CDATA[ freeCodeCamp トップコントリビューター 2023 ]]> https://www.freecodecamp.org/japanese/news/top-open-source-contributors-2023/ 6581c0fd6bb4c703decbaf35 Tue, 19 Dec 2023 16:34:21 +0000 原文: freeCodeCamp's Top Open Source Contributors of 2023

2023 年も、freeCodeCamp コミュニティにとって素晴らしい一年となりました。

無料の学習リソースを提供するという当団体のミッションのためご協力くださった、親切なボランティアの皆さんに感謝申し上げます。

freeCodeCamp コミュニティは直近 12 か月間で以下のことを達成しました。

  • GitHub のオープンソースリポジトリにて、2,753 件のコードコントリビューションをマージ
  • YouTube にて長編講座を 114 件投稿
  • プログラミングチュートリアル記事を 1,045 件、freeCodeCamp Press として無料の電子書籍を 20 冊投稿
  • カリキュラムとチュートリアル記事の多言語化において 200 万ワード以上を翻訳
  • freeCodeCamp モバイルアプリ (Android、iOS) をリリース

また、スペイン語、ポルトガル語、中国語のポッドキャストを始めました (週一配信)。英語版ポッドキャストでは、ソフトウェア開発者に私 (Quincy) がインタビューするエピソードを 19 件配信しました。

freecodecamp-podcasts
freeCodeCamp モバイルアプリ、ポッドキャストプレーヤー画面のスクリーンショット。全 4 種の freeCodeCamp ポッドキャスト番組が表示されています。

2023 年は、419 人を freeCodeCamp トップ・オープンソース・コントリビューターとして認定し、感謝を述べたいと思います。

以下がトップコントリビューターの一覧です。コントリビューションのカテゴリーごとに分かれています。トップコントリビューターの方々には近日中にメールをお送りする予定です。

GitHub コードベース トップコントリビューター

ニュース (チュートリアル記事) トップコントリビューター

フォーラム トップコントリビューター

翻訳 トップコントリビューター

YouTube トップコントリビューター

Discord トップコントリビューター

  • plamoni
  • texas2010
  • Unrecover#5311
  • bradtaniguchi
  • AndreyDmitriev39r#1929
  • bordin12
  • neclo#0
  • wanggang
  • amineabdo
  • tobyplaystheuke
  • greatoverlordx
  • alpox
  • lycelia.com
  • Randomized#0667
  • vedamruta
  • thaitiesthetie
  • thebringerofcakes
  • wistful_ocean
  • dotty.dev
  • sazk07
  • sboon
  • xcoffeeman
  • materialisolari
  • jluboff
  • secondarymonitor
  • cyclokitty

このリストに名前のある方々は、何千人にも及ぶ freeCodeCamp コミュニティの中で特に多くの貢献があった一部の方々です。

オープンソース・コントリビューターとして freeCodeCamp コミュニティに参加することに興味があれば、まずはコントリビューターガイドに目を通し、コントリビューター向け Discord チャンネルに参加することをおすすめいたします。

ありがとうございました。これからもコーディングを楽しんでください。🏕️

]]> <![CDATA[ Antimalware Service Executable とは？CPU やディスクの使用率が高いのはなぜ？ ]]> https://www.freecodecamp.org/japanese/news/what-is-antimalware-service-executable-why-is-it-high-cpu-disk-usage/ 643f0f4de5e4fe05af4957c3 Wed, 19 Apr 2023 23:30:00 +0000 原文: What is Antimalware Service Executable? Why is it High CPU Disk Usage?

Antimalware Service Executable とは、バックグラウンドで実行される Windows セキュリティのコンポーネントです。

しかし、時に Antimalware Service Executable が CPU を過剰に使用して、Windows 10 マシンに悪影響を与えることがあります。

この記事では、Antimalware Service Executable とは何か、なぜ CPU 使用率が高いのか、Windows 10 マシンを最適化して CPU 使用率を抑えるにはどうしたら良いかを解説します。

Antimalware Service Executable とは？

Antimalware Service Executable は、不正なプログラムに対するリアルタイム保護を実行する Windows セキュリティのプロセスです。

msmpeng.exe と呼ばれることもあり、ファイルやプログラムを随時スキャンできるようにバックグラウンドで実行されています。

ウイルスやその他悪意のある攻撃を検出すると、Antimalware Service Executable はそれを削除または隔離します。

Antimalware Service Executable の CPU 使用率が高いのはなぜ？

Antimalware Service Executable の CPU 使用率が高くなる主な理由は、バックグラウンドで常に実行されているからです。

バックグラウンド実行中、Antimalware Service Executable はプログラムやファイルをスキャンして適切なアクションを取ります。

さらに、Antimalware Service Executable 自体のフォルダーである C:\Program Files\Windows Defender までもスキャンしているために、必要以上の CPU が使われます。

つまり、Antimalware Service Executable が自身のフォルダーをスキャンしないようにするのも CPU 使用率を下げる 1 つの方法です。

Antimalware Service Executable の CPU 使用率を抑えるには

Antimalware Service Executable が過剰に CPU を使うのを止める方法は、主に 2 つあります。Windows セキュリティによるスキャンのスケジュールを変更することと、自身のフォルダーをスキャンしないようにすることです。

スケジュールを変更して常時のスキャン実行を停止し、さらに自身のフォルダーはスキャンしないようリアルタイム保護を無効にします。

対策 1: Antimalware Service Executable 自体のフォルダーをスキャンしないようにする

手順 1: キーボードの Win (Windows) キーを押し、歯車のアイコンを選択して設定アプリを開きます。

opensettings

手順 2: メニューから「更新とセキュリティ (Update and Security)」をクリックします。

ss-2-3

手順 3:「Windows セキュリティ (Windows Security)」を選択し、「ウイルスと脅威の防止 (Virus and threat protection)」をクリックします。

ss-3-2

手順 4: Windows セキュリティアプリが開きます。「ウイルスと脅威の防止の設定 (Virus & threat protection settings)」の下にある「設定の管理 (Manage Settings)」というリンクをクリックします。

ss-4-2

手順 5:「除外 (Exclusions)」という項目までスクロールし、「除外の追加または削除 (Add or remove exclusions)」というリンクをクリックします。

ss-5-2

手順 6: 次の画面で「除外の追加 (Add an exclusion)」をクリックして、「フォルダー (Folder)」を選択します。

ss-6

手順 7: 入力欄に C:\Program Files\Windows Defender と入力し、「フォルダーの選択 (Select Folder)」をクリックします。

ss-7

手順 8:「フォルダーの選択」をクリックすると重々しいモーダルが表示されますが、「はい (Yes)」をクリックしてください。

選択したフォルダーが除外する項目として追加され、スキャンされなくなります。

ss-8

対策 2: リアルタイム保護を無効にしてスキャンのスケジュールを変更する

手順 1: WIN + R キーを押下して、「ファイル名を指定して実行 (Run)」画面を開きます。

手順 2:「taskschd.msc」と入力し、「OK」をクリックします。すると「タスク スケジューラ (Task Scheduler)」アプリが開きます。

ss-9

手順 3:「タスク スケジューラ ライブラリ (Task Scheduler Library)」、「Microsoft」、「Windows」の項目を展開します。

ss-10

手順 4: 下にスクロールして、「Windows Defender」を選択します。

ss-11

手順 5:「Windows Defender Scheduled Scan」を右クリックして、「プロパティ (Properties)」を選択します。

ss-12

手順 6:「全般 (General)」タブで「最上位の特権で実行する (Run with highest privileges)」のチェックを外します。

ss-13

手順 7:「条件 (Conditions)」タブに移動し、すべての項目のチェックを外します。

ss-14

手順 8:「トリガー (Triggers)」タブに移動し、「新規 (New)」をクリックします。

ss-15

手順 9: Windows Defender のスキャンを実行したいスケジュールを設定します。頻度や日時を選択し、「OK」をクリックします。次の画面も「OK」で閉じます。

ss-16

手順 10: コンピューターを再起動します。これで Antimalware Service Executable の CPU 使用率を抑えることができるでしょう。

まとめ

Antimalware Service Executable が提供する保護機能は言うまでもなく重要です。この機能が不正プログラムの攻撃を防いでくれるおかげで、Windows 10 マシンを安心して使えるのです。

この記事で説明した 2 つの方法で Antimalware Service Executable の CPU 使用率を下げようとしても変化が見られない場合には、Windows セキュリティプログラムを完全に無効化してみる必要があるかもしれません。

しかしその場合は、コンピューターが攻撃にさらされることのないよう、他のウイルス対策ソフトを導入してください。

お読みいただきありがとうございました。

]]> <![CDATA[ React コンポーネント間でデータ・イベントを受け渡す方法 ]]> ) } Parent.jsimport React from 'react' ]]> https://www.freecodecamp.org/japanese/news/pass-data-between-components-in-react/ 643d4a4ce5e4fe05af495758 Mon, 17 Apr 2023 23:30:00 +0000 原文: How to Pass Data and Events Between Components in React

API エンドポイントを利用する CRUD 操作を実装しようとすると、複数のコンポーネントにまたがるデータ管理の難しさに気付くでしょう。

あるいはモーダルを異なるコンポーネントからトリガーしたいこともあるでしょう。

そのような場合の対応方法は、なかなか理解が難しいかもしれません。

このチュートリアルでその方法を解説します。

親コンポーネントから子コンポーネントにデータを受け渡す方法

はじめに、親コンポーネントと子コンポーネントの間でデータを受け渡す場合を考えます。

まず、親と子にあたる 2 つのコンポーネントを作成します。

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}
Parent.js
import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}
Child.js

次に、Parent コンポーネントで Child コンポーネントをインポートして返します。

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}
Parent コンポーネント内で Child コンポーネントを呼び出す

そして関数と、その関数をトリガーするボタンを作成します。さらに useState フックを使用して、データを管理する state を作成します。

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

上記のコードでは、Click Parent ボタンがクリックされた時に parentToChild 関数を呼び出します。Click Parent ボタンがクリックされると、data 変数に "This is data from Parent Component to the Child Component" が格納されます。

では次に、その data という state を Child コンポーネントに受け渡します。これは props を用いて実現できます。

下記のように、Child コンポーネントを呼び出す際に data を props として受け渡します。

<Child parentToChild={data}/>
Parent.js

ここでは data というデータを Child コンポーネントに受け渡しています。

data が受け渡したいデータで、parentToChild が props の名前です。

次は、そのデータを Child コンポーネント側で受け取ります。これはとてもシンプルです。

これには 2 通りのケースがあります。

ケース 1: 関数コンポーネントを使用している場合は、引数で parentToChild を受け取ります。

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}
React の関数コンポーネント

ケース 2: クラスコンポーネントの場合は、this.props.parentToChild を使用します。

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}
React のクラスコンポーネント

どちらのやり方でも同じ結果になります。

Screenshot-2021-06-06-132836

Click Parent ボタンをクリックすると、データが画面に出力されます。

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Parent コンポーネントの完成形のコードは上記の通りです。

子コンポーネントから親コンポーネントにデータを受け渡す方法

こちらは少し厄介です。

まず、Parent コンポーネント内に childToParent という名前の関数と、data という名前の空の state を作成します。

const [data, setData] = useState('');

const childToParent = () => {
   
}
Parent コンポーネント

次に、childToParent 関数を props として Child コンポーネントに受け渡します。

<Child childToParent={childToParent}/>
Child コンポーネントに childToParent を受け渡す

そして Child コンポーネント内で、この関数を props として受け取り、onClick イベントに割り当てます。

さらに、文字列または数値形式のデータを持つ state (data) を宣言します。

その data を parentToChild 関数に引数として渡します。

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}
Child コンポーネント

次に、Parent コンポーネント側で、このデータを childToParent 関数内で引数として受け取ります。

そして useState フックを使用して data を設定します。

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;
Parent コンポーネント

次に、return 文の中でその data 変数を表示します。

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;
Parent コンポーネント

Click Child ボタンがクリックされると、子コンポーネントの data が親コンポーネントの data を上書きします。

Screenshot-2021-06-06-134803

これで、子コンポーネントから親コンポーネントへ、そして親コンポーネントから子コンポーネントへデータを受け渡す方法が分かりました。

onClick や OnChange のようなイベントを受け渡す

childToParent 関数の中で alert メソッドを呼び出すようにして、その関数を props として Child コンポーネントに受け渡します。

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;
Parent コンポーネント

そして Child コンポーネントで childToParent を props として受け取り、ボタンの onClick イベントに割り当てます。

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}
Child コンポーネント

Child コンポーネント内のボタンをクリックすると、Parent コンポーネント内の関数が呼び出され、次のようなアラートが表示されます。

Screenshot-2021-06-06-140405

以上です！

もっといろいろ実験したければ、GitHub にコードを公開していますのでご利用ください。

この記事は以上です。学習を楽しんでください。

]]> <![CDATA[ JavaScript 配列への追加 – push、unshift、concat メソッドで配列に要素を追加する方法 ]]> https://www.freecodecamp.org/japanese/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/ 643324a6e5e4fe05af49571b Mon, 10 Apr 2023 11:59:28 +0000 原文: JavaScript Array Insert - How to Add to an Array with the Push, Unshift, and Concat Functions

JavaScript の配列は筆者のお気に入りのデータ型です。動的で、使いやすく、多数の組み込みメソッドが提供されているからです。

しかし選択肢が多ければ多いほど、どれを使うべきか分かり辛くなることもあります。

この記事では、JavaScript の配列に要素を追加する一般的な方法をいくつか解説します。

配列への追加方法のインタラクティブな Scrim

(訳注: Scrimba というサイトの機能で、インタラクティブなエディタと動画がセットになっています。)

push メソッド

1 つ目の、そしておそらく最もよく見かけるであろう JavaScript 配列のメソッドは push() です。push() メソッドは、配列の末尾に要素を追加するために使われます。

ではここである配列を例に考えます。配列の各要素は、あなたがやらなければならないタスクを表す文字列になっているとしましょう。先にあったタスクから順に完了できるように、新しい要素は配列の末尾に追加するのが良いでしょう。

この例をコードで見てみましょう。

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

push のおかげで、シンプルな構文で配列の末尾に要素を追加できました。

では一度に 2 つや 3 つの要素を追加したいとしましょう。その場合はどうしたらいいでしょうか？実は、push() は一度に複数の要素を受け取って追加することができます。

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item', 'Fifth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

では配列にいくつかタスクを追加できたところで、次は抱えているタスクが多すぎないかチェックするために、配列に要素がいくつあるか数えたいと思います。

幸いなことに、push() は戻り値として、要素を追加した後の配列の長さを返します。

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.push('Fourth item', 'Fifth item');

console.log(arrLength); // 5 
console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

unshift メソッド

すべてのタスクは平等に造られているとは限りません。配列にタスクを追加していく中で、突然他より緊急性の高いタスクが出てくることもあるでしょう。

そんな時に強い味方となる unshift() を紹介します。unshift() を使うと、配列の先頭に要素を追加することができます。

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2');

console.log(arrLength); // 5 
console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

上記の例を見て気付いたかもしれませんが、push() メソッドと同様に unshift() も、追加後の配列の長さを返します。また、2 つ以上の要素を一度に追加することも可能です。

concat メソッド

concatenate (連結) の略である concat() メソッドは、2 つ以上の配列を連結するために使われます。

上で説明したように、unshift() メソッドと push() メソッドは追加後の配列の長さを返します。一方、concat() は真新しい配列を返します。

これは重要な特徴で、このため concat() は、変更 (mutate) したくない配列 (例えば React の state に保存されている配列) を扱う場合にとても便利です。

シンプルな使用例は次のようになります。

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // ["?", "?", "?", "?"]

では連結したい配列が複数あるとしましょう。心配いりません。この場合も concat() が助けてくれます！

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];

const arr4 = arr1.concat(arr2,arr3);

console.log(arr4); // ["?", "?", "?", "?", "?", "?"]

理解を深めるためのインタラクティブな Scrim

concat を利用したクローン

concat() は既存の配列を変更したくない場合に役立つと言ったのを覚えていますか？この特徴を活用して、ある配列の中身を新しい配列へとコピーする方法を見ていきましょう。

const arr1 = ["?", "?", "?", "?", "?", "?"];

const arr2 = [].concat(arr1);

arr2.push("?");

console.log(arr1) //["?", "?", "?", "?", "?", "?"]
console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

素晴らしい！このように、concat() を使って配列を "クローン" することができます。

しかし、この方法にはちょっとした落とし穴があります。新しい配列は、コピー元の配列の「シャローコピー (shallow copy)」です。つまりオブジェクトはすべて参照コピーで、実体のあるオブジェクトではありません。

もっと分かりやすく説明するために、例を見てみましょう。

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}]

const arr2 = [].concat(arr1);

// arr1 と arr2 両方が変更される
arr2[1].food = "!";
// arr2 だけが変更される
arr2.push({food:"*"})

console.log(arr1) // [ { food: '?' }, { food: '!' }, { food: '?' } ]

console.log(arr2) // [ { food: '?' }, { food: '!' }, { food: '?' }, { food: '*' } ]

元の配列を直接変更していないにもかかわらず、クローン後の配列に加えた変更によって、元の配列も影響されています。

配列を適切に "ディープクローン" する方法は複数ありますが、この記事では解説しませんので調べてみてください。

TL;DR

配列の末尾に要素を追加したい場合、push() を使います。配列の先頭に要素を追加する場合には unshift() を使います。そして複数の配列を連結するには concat() を使います。

もちろん、配列に要素を追加する方法は他にもたくさんあります。ぜひ自分でも調べて、便利な配列メソッドを見つけてください！

筆者の Twitter もありますのでお気軽にご連絡ください。要素の追加に使うお気に入りの配列メソッドなどもぜひ教えてください。

]]> <![CDATA[ HTML 背景色のチュートリアル – div の背景色の変更方法をコード例付きで解説 ]]> I love HTML
I ]]> https://www.freecodecamp.org/japanese/news/html-background-color-tutorial-how-to-change-a-div-background-color-explained-with-code-examples/ 642f10f5c549af058e3885aa Thu, 06 Apr 2023 23:30:00 +0000 原文: HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples

ウェブ開発を行う上で、HTML 要素の背景色の変更はよくある作業です。しかし、CSS の background-color プロパティの使い方を理解していないとややこしく感じるかもしれません。

この記事では以下の内容を扱います。

  • HTML 要素のデフォルトの背景色
  • よく使われる要素である div の背景色を変更する方法
  • background-color プロパティは CSS ボックスモデルのどの部分に影響するか
  • background-color プロパティに指定できるさまざまな値

要素のデフォルトの背景色

div のデフォルトの背景色は transparent (透明) です。そのため、div に background-color を指定しなかった場合にはその親要素の背景色で表示されます。

div の背景色の変更

この例では、次の div 要素の背景色を変更します。

<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

スタイルを何も指定しなかった場合は次のような見た目になります。

Screen-Shot-2020-05-08-at-12.22.48-PM

では、クラスにスタイルを追加して div の背景色を変更します。コード例を HTML ファイルに入力して試してみましょう。

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

次のような表示になります。

Screen-Shot-2020-05-08-at-11.12.29-AM-1

これでこの div 要素の背景色を変更することができました。では次は、このプロパティについてもっと詳しく学びましょう。background-color プロパティが CSS ボックスモデルのパーツにどう影響するか見ていきます。

背景色と CSS ボックスモデル

CSS ボックスモデルでは、すべての HTML 要素が長方形のボックスとして表されます。各ボックスは、下記の図に示した 4 つのパーツで構成されます。

Screen-Shot-2020-05-08-at-11.07.00-AM-1
CSS ボックスモデル

ボックスモデルについてよく知らない場合は詳しく調べてみるのもいいでしょう。ここでの疑問は、div の背景色を変更すると、ボックスモデルのどの部分が影響されるかという点です。答えはずばり、パディング領域とコンテンツ領域です。例を用いて確認してみましょう。

<style>
    body {
        background-color: #ABBAEA;
    }
    .child {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div class="child">
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>

このコードは次のような表示になります。

Screen-Shot-2020-05-08-at-11.07.10-AM-1

上の例を見ると、マージン領域と境界線の領域は、背景色の変更に影響されないことが分かります。境界線の色は border-color プロパティを使って変更できます。マージン領域は透明のままとなり、親要素の背景色が反映されます。

最後に、background-color プロパティが取ることのできる値について説明します。

background-color の値

color プロパティと同様に、background-color プロパティも 6 種類の値を取ることが可能です。ここでは最もよく使われる 3 種類の値の例を見ていきましょう。次の例では、異なる値を使用して div の背景色を赤に設定しています。

<style>
    /* キーワード値 (色の名前) */
    .div-1 {
        background-color: red;
    }
    
    /* 16 進の値 */
    .div-2 {
       background-color: #FF0000;
    }
    
    /* RGB 値 */
    .div-3 {
    	background-color: rgb(255,0,0);
    }
    
</style>

<body>
    <div class="div-1">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-2">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-3">
        <p>The background property can take six different values.</p>
    </div>
</body>

どれも同じ背景色になることが分かります。

Screen-Shot-2020-05-08-at-11.07.24-AM-1

background-color プロパティが取ることのできる値には他に、HSL 値、特殊なキーワード値、グローバル値があります。それぞれの例は以下の通りです。

/* HSL 値 */
background-color: hsl(0, 100%, 25%;

/* 特殊なキーワード値 */
background-color: currentcolor;
background-color: transparent;

/* グローバル値 */
background-color: inherit;
background-color: initial;
background-color: unset;

これらの値について詳しくはこちらを参照してください。

補足

要素に背景色を設定する際は、背景色と文字色のコントラスト比が十分大きくなるようにすることが重要です。これは、テキストを目の悪い人にも読みやすくするためです。

次の 2 つの div を見てください。

Screen-Shot-2020-05-08-at-11.11.44-AM-1

1 つ目の div は背景色と文字色のコントラストが十分でないため、誰にでも読みやすい状態ではありません。あなた一人だけが見るウェブサイトを作っていて、しかもあなたがとても目が良いのでない限りは、このような組み合わせは避けるべきでしょう。

2 つ目の div の背景色と文字色のコントラスト比は、はるかに良くなっています。したがって、こちらの方が多くの人にとってアクセスしやすく、はっきりと読みやすいでしょう。

結論

この記事では、div の背景色を変更する方法を説明しました。また、背景色の変更が CSS ボックスモデルのどの部分に影響するかについても述べました。最後に、background-color プロパティが取ることのできる値について述べました。

この記事がお役に立てば幸いです。お読みいただきありがとうございました。

]]> <![CDATA[ Python の print で変数を出力 – 文字列と変数の出力方法 ]]> https://www.freecodecamp.org/japanese/news/python-print-variable-how-to-print-a-string-and-variable/ 64242311c549af058e38854d Wed, 29 Mar 2023 23:30:00 +0000 原文: Python Print Variable – How to Print a String and Variable

Python は幅広い用途に使える柔軟性の高い言語で、何かを実現する方法が複数存在することもよくあります。

このチュートリアルでは、文字列と変数を一緒に出力する方法をいくつか紹介します。

では始めましょう。

Python の print() 関数の使い方

Python で何かを出力に表示するには print() 関数を使います。キーワード print の後に 1 組の丸括弧 () を続ける構文です。

# 文字列の出力方法
print("Hello world")

# 整数の出力方法
print(7)

# 変数の出力方法
# 変数の内容だけを出力するには、括弧に変数名を入れます

fave_language = "Python"
print(fave_language)

# 出力

# Hello world
# 7
# Python

括弧を省略するとエラーが発生します。

print "hello world"

# コードを実行した際の出力内容:
# File "/Users/dionysialemonaki/python_articles/demo.py", line 1
#     print "hello world"
#     ^^^^^^^^^^^^^^^^^^^
# SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?

Visual Studio Code で Python 拡張機能を使って Python のコードを書いている場合には、誤りがあることを示す下線とヒントも表示されることでしょう。

Screenshot-2021-12-07-at-3.08.14-PM

先ほど述べたように、print 文はさまざまな情報を出力するために使われます。テキストデータ、数値データ、変数やその他のデータ型などを出力できます。

そして 1 つの文でテキスト (文字列) と変数を組み合わせて出力することも可能です。

ここから、その方法をいくつか見ていきましょう。

連結 + を使用して、Python の変数と文字列を出力する

concatenate (連結) を辞書で調べると、何かを鎖状やひと続きに繋げることという意味が出てきます。

連結は、Python の加算演算子 + を使用して、さまざまな物 (データ) を互いに足し合わせて実行します。

連結は文字列に対してのみ使用できることに注意してください。つまり、文字列と連結したい変数が整数型の場合、変数を str() 関数で文字列に変換しなくてはなりません。

下記は、変数の値を他のテキストと一緒に出力したい場合の例です。

ダブルクォートで囲んだ文字列と、囲んでいない変数名を、加算演算子を使って連結しています。

fave_language = "Python"

print("I like coding in " + fave_language + " the most")

# 出力
# I like coding in Python the most

文字列の連結では、スペースを自分で追加しなければなりません。もし上記の例で引用符の内側にスペースを入れなかった場合、出力は次のようになります。

fave_language = "Python"

print("I like coding in" + fave_language + "the most")

# 出力
# I like coding inPythonthe most

スペースを分けて連結しても構いません。

fave_language = "Python"

print("I like coding in" + " " + fave_language + " " + "the most")

# 出力
# I like coding in Python the most

ただこの方法はエラーを引き起こしがちで、手間もかかるため、最善の方法ではありません。

カンマ区切りを使用して、Python の変数と文字列を出力する

テキストと変数をカンマで区切って並べて、1 つの print 文で出力できます。

first_name = "John"

print("Hello",first_name)

# 出力
# Hello John

上記の例では、まずダブルクォートで囲んだテキスト (文字列 Hello) を入れました。

その後にカンマを追加して区切り、そして変数名 (first_name) を入れました。

次のように、変数の後にさらにテキストを追加することも可能です。

first_name = "John"

print("Hello",first_name,"good to see you")

# 出力
# Hello John good to see you

複数の変数を使うこともできます。

first_name = "John"
last_name = "Doe"

print("Hello",first_name,last_name,"good to see you")

# 出力
# Hello John Doe good to see you

各項目をカンマで区切ることを忘れないでください。

上記の例のように、テキストと変数の間にも、変数と変数の間にもカンマを入れて区切ります。

first_name と last_name の間にカンマがないと、次のようなエラーが発生します。

first_name = "John"
last_name = "Doe"

print("Hello",first_name last_name,"good to see you")

# 出力
# File "/Users/dionysialemonaki/python_articles/demo.py", line 4
#     print("Hello",first_name last_name,"good to see you")
#                  ^^^^^^^^^^^^^^^^^^^^
# SyntaxError: invalid syntax. Perhaps you forgot a comma?

上記のように Python のエラーメッセージはとても分かりやすく、デバッグ作業を楽にしてくれます。

文字列のフォーマットを使用して、Python の変数と文字列を出力する

変数の値を追加したい場所に 1 組の波括弧 {} を含めることで、文字列のフォーマットを使用できます。

first_name = "John"

print("Hello {}, hope you're well!")

この例では first_name という変数が 1 つあります。

print 文にはダブルクォートで囲まれた出力対象のテキストが入っています。

その中で、変数 first_name の値を追加したい場所に 1 組の波括弧を入れてあります。

ここでこのコードを実行してみると、次のように出力されます。

# 出力
# Hello {}, hope you're well!

これだけでは変数 first_name の値が出力されませんでした。

変数の値を出力するには、文字列の終わりに文字列メソッド .format() を追加しなければなりません。閉じる側のダブルクォートの直後に、次のように追加します。

first_name = "John"

print("Hello {}, hope you're well!".format(first_name))

# 出力
# Hello John, hope you're well!

複数の変数がある場合には、出力したい変数の数に合わせて波括弧を追加します。

first_name = "John"
last_name = "Doe"

print("Hello {} {}, hope you're well!")

この例では 2 つの変数を作成して、その両方を続けて出力したいので、変数と置き換えたい場所に 2 組の波括弧を追加しました。

ここで .format() メソッドについて、変数名をどの順で渡すかが重要になります。

つまり、メソッドに 1 つ目として渡された変数の値が 1 つ目の波括弧の場所に入り、2 つ目の変数の値が 2 つ目の波括弧の場所に入ります。

メソッドに変数名を渡す際にはカンマで区切ることを忘れないでください。

first_name = "John"
last_name = "Doe"

print("Hello {} {}, hope you're well!".format(first_name,last_name))

# 出力
# Hello John Doe, hope you're well!

メソッドに渡す変数名の順番を入れ替えると、出力も変わります。

first_name = "John"
last_name = "Doe"

print("Hello {} {}, hope you're well!".format(last_name,first_name))

# 出力
# Hello Doe John, hope you're well!

f-strings を使用して、Python の変数と文字列を出力する

f-strings は、文字列のフォーマットを、一つ前のセクションで説明したメソッドよりも読みやすく簡潔に書ける方法です。(訳注: フォーマット済み文字列リテラルとも呼ばれます)

構文が簡単で、手作業が少なく済みます。

f-string を作成する一般的な構文は次の通りです。

print(f"I want this text printed to the console!")

# 出力
# I want this text printed to the console!

まず、print() 関数の中でダブルクォートの前に f の文字を入れます。

変数 1 つと文字列を一緒に出力する場合も、同じようにダブルクォートの前に f の文字を入れます。

そしてダブルクォートの間に出力したいテキストを入れ、変数の値を入れたい場所に波括弧を追加したら、波括弧の中に変数名を入れます。

first_name = "John"

print(f"Hello, {first_name}!")

# 出力
# Hello, John!

複数の変数を出力したい場合は、波括弧の組を追加して 2 つ目の変数名を入れます。

first_name = "John"
last_name = "Doe"

print(f"Hello, {first_name} {last_name}!")

# 出力
# Hello, John Doe!

変数名は順番通りに出力されるため、出力したい順番に合わせて記述してください。

変数名の順番を逆にすると、出力は次のようになります。

first_name = "John"
last_name = "Doe"

print(f"Hello, {last_name} {first_name}!")

# 出力
# Hello, Doe John!

まとめ

最後までお読みいただきありがとうございます！これで、Python で文字列と変数を組み合わせて出力する方法をいくつか学ぶことができました。

Python をもっと詳しく学びたいなら、freeCodeCamp の Python 認定講座をおすすめします。

基礎からスタートして徐々に高度な概念を学んでいくため、初心者にも最適です。また、最後には 5 つのプロジェクトの開発を通して学習した内容を実践できます。

Happy coding!

]]>