Manabu Matsumoto - freeCodeCamp.org

プログラミングの学習方法 – 私がコードを学び始めた時に求めていたガイド

Manabu Matsumoto — Sat, 03 Dec 2022 23:30:00 +0000

原文: How to Learn Programming – The Guide I Wish I Had When I Started Learning to Code

コーディングを学ぶなんて、考えるだけでも恐ろしいと感じるかもしれません。まずコードという言葉が定義からして謎めいています。コードとは、人ではなくコンピューターが理解できることを目的とした、技術的なコミュニケーションの形です。

多くの人がコードを学び始める方法の 1 つは、有名なプログラミング言語を選んで、方針も定めずとりあえず飛びついてみるというものです。オンラインのコーディング講座を受講したり、チュートリアルプロジェクトを作成したり、もしくはあるトピックについての本を無作為に購入したりするでしょう。

開発者を目指す人でも、ロードマップを持って学び始める人はめったにいません。ここで言うロードマップとは、関連するプログラミングの概念、言語、よく使われるツールなどの概要を説明する、コーディングの世界を見渡す鳥瞰図のようなものです。

この記事では、そのようなロードマップの 1 つを提案します。そのために 14 のステップをお伝えします。各ステップで、重要な概念、言語、もしくはツール (プロの開発者がコードを記述し、共同作業を行い、専門的なプロジェクトを作成するのに使用するツール) を説明します。

私 (原著者) 個人の 20 年近くにも及ぶコーディング学習の旅をもとにして、この 14 のステップを慎重に選びました。

開発者として自信を持つのにそのような長い時間がかかった一因は、広いコーディングの世界の全体像が見えないまま、特定のトピックについて学んでいたからです。

この記事の中の各ステップは「コーディングに不可欠なもの」、コーディングを学び始める際に少なくともその存在を知っておくことが欠かせないと思うものについて述べています。

ロードマップの各ステップをリストアップする前に、最後に注意点があります。当然ですが、この記事を読んだから熟練のプログラマーになれるというわけではありません。そういったつもりはありません。この記事の目的は、各ステップの扱う事柄の存在を知らせることと、その仕組みの基本を教え、そこを基礎にして読者が自力で学べるようにすることです。

新米開発者向けの 14 ステップのロードマップ

コンピューターアーキテクチャとデータの基本を理解する
プログラミング言語の仕組みについて学ぶ
インターネットの仕組みを理解する
コマンドラインの基本を練習する
Vim を使用してテキストエディタスキルを鍛える
HTML をある程度習得する
CSS にある程度取り組む
JavaScript でプログラミングを始める
Python でプログラミングを継続する
Java で知識を深める
Git を使用してコードを追跡する
データベースと SQL を使用してデータを保存する
ウェブフレームワークと MVC (Model-View-Controller: モデル・ビュー・コントローラ) について読む
パッケージマネージャーに触れる

さっそく最初のステップから始めていきましょう！

1) コンピューターアーキテクチャとデータの基本を理解する

モダンなプログラミング言語の素晴らしい点のひとつは、水面下で動作しているハードウェアの本質的な詳細部分について (ほとんどの場合は) 悩むことなく、凝ったアプリケーションを作成できるようにしてくれるところです。

これは抽象化と呼ばれます。抽象化とは、理解とスキルの求められる範囲を簡素化し、絞り込んだ上位ツール (上記の例ではプログラミング言語) を扱えるようにする機能です。

とはいえ、これは、自分のコードを実行しているハードウェアの基礎について知っていても無駄であるということではありません。最低限、その一部について認識しておくと、職場で CPU やメモリの使用率が高いというような会話についていくのに役に立ってくれるでしょう。

では、ここからコンピューターアーキテクチャの必要最小限の基礎を学び始めましょう:

コンピューターの最重要部品は (集積回路とも呼ばれている) マイクロチップ上にあります。

マイクロチップの機能は、トランジスターと呼ばれる電子部品に依存しています。トランジスターとは、特定のタイミングにおいてオフ (0) もしくはオン (1) している小さな電子スイッチのことです。1 つのマイクロチップには数百万、または数十億もの小さなトランジスターが組み込まれています。

ほとんどの最新のコンピューターは、中央演算処理装置 (CPU - Central Processing Unit) と呼ばれるマイクロチップを備えています。CPU は、コンピューターの頭脳だと考えることができます。それはコンピューターが実行する複雑な計算や、論理的なタスクのほとんどを処理しています。

各 CPU は命令セットと呼ばれるものを備えています。これは、CPU が理解できるバイナリ形式 (0 と 1) で書かれた命令の集まりのことです。幸運なことに、ソフトウェア開発者としてこれらのことを気に掛ける必要はありません！それが抽象化の力なのです。

CPU が脳の論理的思考を担っているのであれば、一時的に、または長期的に情報を記憶できるメモリもあると便利です。

コンピューターは、プログラムの実行中にアクティブに使用される情報を記憶するために、ランダムアクセスメモリ (RAM) を「ワーキングメモリ」(作業記憶もしくは短期記憶) として備えています。

RAM は、複数のビットのデータを記憶するのに使用されている、メモリアドレスの集まりで構成されています。C のような古くからある言語では、プログラマーは、ポインタと呼ばれる機能を使用してメモリアドレスを直接操作しますが、それは C よりもモダンな言語では、まれなことです。

最後に、ハードドライブという、誰もが必ず知っている部品について触れておきましょう。脳にたとえると、これは長期記憶にあたります。ハードドライブは、コンピューターの電源を切った後も持続するデータを記憶する、内部または外部デバイスです。

では、プログラミング言語の詳細について話を進める前に、データについての説明に少し時間をとります。ところで、データという言葉は、正確には何を意味するのでしょうか？

大まかに言うと、テキストドキュメントや画像、動画、電子メール、ファイル、およびフォルダなどが思い浮かびます。これらは、ふだん私たちがコンピューター上で作成し保存している、ハイレベルな (抽象度が高い) データ構造です。

ただ、(CPU や RAM チップのような) コンピューターチップは、その内部では「画像」や「動画」が何であるかを認識しません。

チップから見ると、これらの構造すべてが、長い 1 と 0 が連続しているものとして保存されています。この 1 と 0 はビットと呼ばれています。

一般的には、ビットは一度に、バイトとして知られている 8 つのセットで保存されます。バイトとは、00000001、01100110、00001111 というように、単にビットが 8 つ連続したものです。このように情報を表現する方法のことを二進表現 (binary representation) と呼びます。

2) プログラミング言語の仕組みについて学ぶ

前のセクションの中で、ほとんどのコンピューターが CPU に依存しており、CPU が、特定の命令セットを 1 と 0 の形式で理解するということを説明しました。

つまり、理論的には、私たちは CPU に何をすべきかを伝えるコードを、CPU が理解できる、1 と 0 が長く連続してつながっている形式で記述できます。このようなバイナリ形式で記述された命令は機械語と呼ばれます。

これを扱うとなると、恐ろしいことになると感じませんか？ええ、たぶんそうでしょう。とはいえ私は、JavaScript、Python、および Java のような高水準プログラミング言語を主に使用してきたので、よくわかりませんが。

高水準プログラミング言語は、人が読みやすいキーワードや文、および、とても簡単に誰もが学び、デバッグし、扱うことができる構文ルールを提供しています。

プログラミング言語は、私たち人間の脳が世界を知る方法と、コンピューターの脳 (CPU) が同じことを行う方法の間にあるギャップを埋める手段を提供します。

最終的には、私たちが書くコードは、CPU が理解できるバイナリ形式の命令 (機械語) に翻訳されなければなりません。

言語によりますが、コードは CPU によって実行できる機械語へと翻訳 (compile) または解釈 (interpret) されます。ほとんどのプログラミング言語は、この変換ステップを実行する、コンパイラもしくはインタプリタと呼ばれているプログラムを含んでいます。

いくつか例を挙げてみましょう - JavaScript と Python はインタプリタ型言語であり、一方で Java はコンパイラ型言語です。言語がコンパイラ型かインタプリタ型 (または、この 2 つの組み合わせ) かどうかは、開発者の利便性、エラー処理、性能、および他の領域と密接な関係がありますが、ここではそれらの詳細に立ち入るのは控えます。

3) インターネットの仕組みを理解する

どの種類のプログラミングを志すにしても、コンピューターが相互に通信する仕組みを知っておくと、役に立つ場面に遭遇することになるでしょう。これは通常、インターネットを通して行われます。

インターネットは、接続されたコンピューターのグローバルな集合体にすぎません。いわば、グローバルネットワークです。このネットワーク内の各コンピューターは、互いに通信できるようにするために、ある一連のルールに同意しています。コンピューターにおいて、「通信」とはデータの移動を意味します。

前のセクションで説明したように、ウェブページ、画像、ビデオ、電子メールなど、すべての種類のデータは、どれも 1 と 0 で表すことができます。

したがってインターネットは、データの意味を保持したまま、1 と 0 を相互に転送できるコンピュータの非常に大きな集まりである、と考えることができます。インターネットは、デジタル伝送手段のひとつにすぎません。

ここで、インターネットが単なる巨大な会話の場であるとすれば、今度はその参加者を定義してみましょう。

まずは例え話です。ほとんどの人間の会話には少なくとも二人の参加者が必要です。たいていの場合、人が二人いて、準備ができていれば、片方の人が会話を開始し、もう片方の人が応答します。

インターネットにおいては、通信を開始するコンピュータはクライアント (client) と呼ばれます。返信または応答する側のコンピュータはサーバー (server) と呼ばれます。

例えば、ウェブブラウザーを開いて「www.google.com」にアクセスしたとします。この状況では、ウェブブラウザーがクライアントです。ひいては、自分の作業しているコンピューターをクライアントと考えることもできます。

さらに抽象的な意味では、あなたが通信を開始しているので、あなたがクライアントです。検索バーへ「www.google.com」と入力し <エンター> を押すことで、ブラウザーは、Google のコンピュータのひとつと通信を開始するように要求します。

この Google のコンピュータはサーバーと呼ばれます。これは、要求されている Google のウェブページをブラウザー内で表示するための、データを送ることによって応答します。それから、Google のウェブページが目の前に表示されるのです。このようなクライアント／サーバーの関係が、インターネットのすべてのデータ転送において利用されています。

4) コマンドラインの基本を練習する

コマンドラインは、一目見ただけでは威圧感があるかもしれません。これは、理解できないテキスト、数字、記号がスクロールする、謎めいたブラックスクリーンとして、たいていは悪意のあるハッカーか天才技術者の相棒という形で、映画の中にたびたび出てきます。

本当のところは、コマンドラインを使ったり理解するのに、特別な才能は必要ありません。実際には、マウス操作で快適に行っている多くのタスクと同じことを、コマンドラインを使って実行できます。

コマンドラインとマウスの大きな違いは、コマンドラインが主にキーボードからの入力を受け付けるところで、コツさえつかんでしまえば、入力スピードをかなり向上させることができます。

コマンドラインを使用すれば、フォルダの参照およびコンテンツの一覧表示、新しいフォルダの作成、ファイルの作成、移動、および削除、プログラムの実行など、他にもまだまだ多くのことが可能です。また、コマンドラインでコマンドを入力できるウィンドウは、ターミナルと呼ばれています。

ここからは、コマンドラインで作業している雰囲気をつかむために、基本的なナビゲーションコマンドの、短いチュートリアルを練習してみましょう。

ターミナルを開いたら、「自分がどこにいるのか」という疑問がまず浮かびます。(「Print Working Directory (ワーキングディレクトリを表示する)」の略である) pwd コマンドを使用すればそれがわかります。このコマンドは、ファイルシステムの中で、今自分がどのフォルダ内にいるのかを画面に表示してくれます。

では自分でも試してみてください:

コマンドラインの使い方

もし Mac を使用しているなら、ターミナルを開いてください。これは、本質的には Unix コマンドラインターミナルと同じものです。

Linux もしくは Unix のように、GUI (グラフィカルユーザーインターフェース - Graphical User Interface) を使用しないオペレーティングシステムを実行している場合は、コンピューターを起動した時に、デフォルトでコマンドラインが表示されます。使用している Linux のフレーバーもしくは Unix のオペレーティングシステムが、GUI を備えている場合は、手動でターミナルを開く必要があります。

では、プロンプトの後ろに pwd と入力し、<エンター> を押してください。するとコマンドラインが、今いるフォルダのパス (path) を出力します。

デフォルトでは、コマンドラインを開いた時のアクティブなフォルダは、ログインしているユーザーのホームディレクトリです。別の便利な場所から始めたい場合には、設定を変更できます。

便利なことに、チルダ (~) 文字を使用すれば、ホームディレクトリを参照できます。この先のいくつかの例の中でこの文字を使用します。

自分がどのフォルダの中にいるのかがわかったところで、ls コマンドを使用して、カレントディレクトリのコンテンツを一覧表示しましょう。ls コマンドは「List (一覧表)」の略です。

ls と入力し <エンター> を押してください。するとカレントディレクトリに属しているコンテンツ (ファイルとサブフォルダ) が、画面に表示されます。

今度はこのコマンドを ls -al というように入力し、<エンター> を押して再実行してください。これで、ファイルサイズ、修正日、およびファイルパーミッションを含む、ディレクトリのコンテンツに関する先ほどよりも詳細な情報を取得できます。

今入力したコマンドの中のハイフンは、コマンドの動作を変更する、特定のフラグを設定するのに使用します。先ほどの場合は、ディレクトリの (隠しファイルを含む) コンテンツのすべてを一覧表示する -a フラグと、ファイルの詳細を追加表示する -l フラグを追加しました。

次は、「Make Directory (ディレクトリの作成)」の略である mkdir コマンドです。このコマンドを使用すれば、新しいフォルダを作成できます。では「testdir」という名前の新しいフォルダを作成してみましょう。

mkdir testdir と入力し、<エンター> を押してください。それから、ls と入力して <エンター> を押してください。一覧の中に新しいディレクトリが確認できるはずです。

複数階層のディレクトリを一度に作成するには、-p フラグを使用して、mkdir -p directory1/directory2/directory3 のように一連のディレクトリ全体を作成します。

もし、ひとつの場所にしか滞在できないなら、コマンドラインはあまり役に立ってくれません。そこで、ファイルシステム内の別のディレクトリに移動する方法を学びましょう。それを行うには、「Change Directory (ディレクトリの変更)」の略である、cd コマンドを使用します。

まず、cd testdir と入力し <エンター> を押してください。次に、pwd と入力し <エンター> を押します。ここでは、cd コマンド内で指定した「testdir」ディレクトリの中にいますよ、と出力に表示されることに注目してください。その中に入ってから確認しているのです！

今度は cd .. と入力して <エンター> を押してください。.. は、親ディレクトリへ戻ることをコマンドラインに伝えています。

pwd と入力し <エンター> を押してください。ここでは元のディレクトリに戻っていますよ、と出力に表示されることに注目してください。さかのぼってから確認したのです！

では次に、カレントディレクトリ内に新しい空のファイルを作成する方法を学びましょう。

touch newfile1.txt と入力し <エンター> を押してください。ls コマンドを使用すれば、カレントディレクトリ内に新しいファイルが作成されているのを確認できます。

ここで、cp コマンドを使用して、あるフォルダから別のフォルダに、そのファイルをコピーしてみましょう。

cp newfile1.txt testdir と入力し <エンター> を押してください。ls と ls testdir コマンドを使用すれば、カレントディレクトリ内にこの新しいファイルが残っており、「testdir」ディレクトリにそのファイルがコピーされているのを確認できます。

また、mv コマンドを使用して、コピーする代わりにファイルを移動させることもできます。

touch newfile2.txt と入力し <エンター> を押して、新しいファイルを作成してください。次に、mv newfile2.txt testdir と入力し <エンター> を押して、そのファイルを「testdir」フォルダの中へ移動させます。

ls と ls testdir コマンドを使用すれば、作成したファイルが「testdir」フォルダの中に移動しているのが確認できます (コピーではなく移動させたので、ファイルは最初に作成した場所にはもうありません)。

また、mv コマンドはファイル名の変更にも使用できます。

それを行うには、touch newfile3.txt と入力し <エンター> を押して、新しいファイルを作成してください。次に、mv newfile3.txt cheese.txt と入力し <エンター> を押して、ファイル名を更新します。ls コマンドを使用して、ファイル名が変更されているのを確認してみましょう。

最後になりますが、rm コマンドを使用すれば、ファイルとフォルダを削除できます。

rm cheese.txt と入力し <エンター> を押して、ファイルを削除してください。ls コマンドを使用して、ファイルが削除されているのを確認してみましょう。

rm -rf testdir と入力し <エンター> を押すと、今度は「testdir」ディレクトリとそのコンテンツを削除できます。ls コマンドを使用して、ディレクトリが削除されているのを確認しましょう。

ディレクトリを削除する際は、-rf フラグを使用する必要があることに注意してください。このフラグは、フォルダとそのすべてのコンテンツを強制的に削除します。

5) Vim を使用してテキストエディタスキルを鍛える

ここまでの間に、コマンドラインの基本について説明し、さらに、マウスを使用せずにファイルを扱う方法の例を、いくつか見てきました。

ファイルの作成、複製、移動、名前の変更、および削除を、コマンドラインから行う方法についてはわかりましたが、ターミナル内でテキストファイルの内容を編集する方法については、まだわかっていません。

コンピューターコードは、体系づけられた一連のファイルに保存されたテキストにすぎないので、ターミナル内でテキストファイルを扱うのは重要なことです。

もちろん、Microsoft Word (もしくは Sublime や Atom のようなよりコード向けのエディター) のような凝ったテキストエディタを使用して、コードを記述または編集することもできますが、そこまでは必要ではありません。通常は、コマンドを実行するために事前にターミナルを開いているため、たいていはターミナルがコードを書いたり編集するのに最も適している場所なのです！

ターミナル内でテキストファイルを扱うために特別に作られた、優れたテキストエディタがいくつかありますが、私は、Vim と呼ばれるテキストエディタの基本を学ぶことをお勧めしています。

Vim は最も古くからあるテキストエディタであり、実績のある素晴らしいツールです。Vim とは「Vi IMproved」の略であり、vi と呼ばれるツールの後を継ぐものです。

前述のとおり、Vim はターミナル内で直接動作するように作られているテキストエディターなので、別ウィンドウを開いて作業したり、マウスを使用したりする必要は全くありません。Vim には、キーボードのみを使用して、テキストコンテンツを簡便に作成し編集できる、一連のコマンドとモードが備わっています。

Vim を扱うには試行錯誤が多少は必要ですが、少し練習すれば、学んだスキルがコーディングのキャリアを通じて利益を生み出してくれます。

Vim は、多くのオペレーティングシステムにデフォルトでインストールされています。インストールされているかどうか確認するには、コマンドラインを開いて、vim -v と入力します。

ターミナル内で Vim が開いて、バージョンが表示されていれば、確認完了です！ (:q! と入力し <エンター> を押せば Vim を終了できる、ということを覚えておきましょう) 開かない場合は、システムにインストールする必要があります。インストールの詳細については、https://www.vim.org/ をご確認ください。

私見ではありますが、Vim の使用方法を最も早く、簡単に学ぶ方法は、Vim の組み込みチュートリアルである VimTutor (VIM 教本) を使用することです。これを起動するには、自分のシステムに Vim がインストールされていることを確認してから、コマンドラインを開き、vimtutor (日本語版は vimtutor ja ) と入力して、<エンター> を押してください。

ここで解説に時間を割く理由などないほどに、このチュートリアルはとても優れています。なので、今から VIM 教本を実際に学習してみましょう！では後ほど次のセクションで。

VIM 教本を完了した後でまだ余力がある場合は、Vim を使い始める際に、生産性を劇的に改善できる 7 つの Vim コマンドをチェックしてみてください。

6) HTML をある程度習得する

HTML (HyperText Markup Language - ハイパーテキストマークアップランゲージの略) は、ウェブページの骨組みであると考えることができます。HTML は、表示される要素と、その順序を指定することによって、ページの構造を定義します。

あなたがブラウザー内で訪問してきたすべてのウェブページには、それに関連付けられている HTML が備わっています。ウェブページを訪問すると、そのウェブページをホストしているウェブサーバーは、HTML をブラウザーへ送信します。その後、ブラウザーは受信した HTML を解釈し、表示します。

ほぼすべてのウェブページには、タイトル、テキストコンテンツ、画像リンク、ナビゲーションリンク、ヘッダーとフッターなど、標準的なコンテンツのセットが含まれています。ページの構造を定義している HTML に、これらすべての情報が保存されています。

ところで、HTML は、厳密にはプログラミング言語ではないにもかかわらず、「HTML コード」と呼ばれることがよくあるということを、知っておいた方がよいでしょう。

後述しますが、プログラミング言語は、一連の操作を順番に実行するなど、何か処理を行うコードを記述できます。しかし、HTML が何かを処理するということはありません。HTML を実行したり動作させるわけではないのです。HTML はファイル内に記述されており、その内容がエンドユーザーに表示できるウェブブラウザーへ送信されるのを、待つだけなのです。

実は、HTML は基本的にはデータにすぎません。ウェブページの見た目を定義するデータでしかないのです。

では、HTML はどのように記述するのでしょうか？HTML では、ウェブページを構成する要素を明示するのに、標準的な (基本的にはただのラベルである) タグのセットを使用します。それぞれのタグは山かっこを使用して記述します。

たとえば、タイトルタグは My Page Title、段落 (パラグラフ) タグは

たくさんのランダムなテキストコンテンツ。

、というように明示します。

各 HTML 要素は、開始タグと終了タグから成ります。開始タグとは、次のような山かっこで囲まれたタグラベルのことです。

これで新しい HTML タグが始まります。終了タグは本質的には同じものですが、終了タグであることを示すために、手前の山かっこ (小なり記号) の後ろに斜線を記述します。

実際のページには、この 2 つのタグの間にあるテキストが、コンテンツとして表示されます。

ここからは、最も一般的に用いられているタグをいくつか見ていきましょう。まずはタグです。このタグは HTML ページの始まりを明示します。これに対応するタグ (斜線に注目しましょう) は HTML ページの終わりを明示します。この 2 つのタグの間の、すべてのコンテンツがページの一部となります。

2 つ目はタグです。ブラウザーがページを把握するための追加情報を明示するために、このタグを使用します。このタグの中のほとんどのコンテンツはユーザーへ表示されません。これに対応するタグは HEAD セクションの終わりを明示します。

先ほど、</code> タグが出てきましたね。これはブラウザーのタブに表示される、ウェブページのタイトルを指定します。このタグは <code><head>...</head></code> セクション内に置く必要があります。</p><p>次は <code><body></code> タグです。このタグの中のすべてのコンテンツが、ウェブページの主なコンテンツを構成します。これら 4 つのタグを組み立てると、次のようになります:</p><pre><code class="language-html"><html> <head> <title>My Page Title

A bunch of random text content.

上記の簡素な HTML スニペットは、タイトルと、body のコンテンツに段落が 1 つ含まれている、シンプルなウェブページを表しています。

この例には、これまでのセクションでは言及していなかったポイントが含まれています。それは、HTML タグは互いに入れ子にできる、ということです。つまり、HTML タグは、他の HTML タグの内側に置くことができるのです。

HTML には、リッチな一連のコンテンツをウェブユーザーに提供できる、多くのタグが他にも用意されています。ここではそれらの詳細については取り上げませんが、参照用に短いリストを以下に示しておきます:

: テキストの段落を新しい行から始めます。
: ページの見出しであり、通常はページタイトルに用いられます。
: セクションの見出しであり、通常はセクションのタイトルに用いられます。
: 小見出しに用いられ、x には 3 から 6 の数字が入ります。
: 画像を配置します。
: リンクを配置します。
: ユーザーが記入し送信するための入力欄を含むフォームです。
: ユーザーが情報を入力するための入力欄で、通常は form 内に配置されます。
: コンテンツ区分要素で、いくつかの他の要素をグループ化して、間隔を調整するなどの目的で使用されます。
: もうひとつのグループ化要素で、通常は、他の要素内のテキストフレーズを囲み、テキストコンテンツの特定の部分だけに特別な書式を適用するのに使用されます。

7) CSS にある程度取り組む

CSS (カスケーディングスタイルシート - Cascading Style Sheets) が備わっていないウェブページは、フロスティングのないケーキのようなものです。フロスティングがなくてもケーキはケーキですが、美味しそうには見えませんよね。

CSS によって、HTML の要素に、背景色、フォントサイズ、幅、高さなどの、スタイルプロパティを適用できます。

各々のスタイルプロパティは、スクリーン上における必要な表示効果をブラウザーに指示します。HTML と同じで、CSS は厳密にはプログラミング言語ではありません。何かしらのアクションを実行するのではなく、骨組みである HTML に、スタイルを適用できるようにしてくれます。

では、HTML 要素に CSS スタイルを関連付ける方法を見ていきましょう。この方法を解き明かす要素は、以下の 3 つです:

CSS セレクター: スタイルを適用する HTML の 1 つまたは複数の要素を選択するのに使用されます。

CSS プロパティ名: セレクターに対応している HTML 要素に適用する、特定のスタイルのプロパティの名前です。

CSS プロパティの値: 適用するスタイルプロパティの値です。

これらの要素をまとめて、段落の文字色とフォントサイズを設定する例がこちらです:

p {
  color: red;
  font-size: 12px;
}

では、中かっこの手前から見ていきましょう。そこには CSS のセレクターがあります。上記の場合では、

(paragraph - 段落) の HTML タグを表す文字 p がこれにあたります。これは、ウェブページ上のすべての

タグに対して、中かっこ内に記述したスタイルが適用されることを意味しています。

今度は、中かっこ内に話題を移しましょう。そこには、指定した要素に適用するスタイルが記述されています。

コロンによって区切られた、CSS プロパティとその値のペアが確認できますね。コロンの左側がプロパティ (上記の場合は「color」と「font-size」) です。右側にはそのプロパティの値 (上記の場合は「red」と「12px」) があります。各プロパティ／値のペアの末尾にはセミコロンをつけます。

おそらく、あなたはこの動作を確認することができるでしょう。上記の CSS コードスニペットは、

タグ内に配置されているすべてのテキストを、赤色で、かつ文字サイズを 12 ピクセルで表示するよう、ブラウザーに指示します。

では、HTML ページに、これらの CSS スタイルを含むことを認識させるには、どうすればよいでしょうか？その答えは、 HTML タグを入れること、となります。CSS スタイルは、通常は HTML とは別のファイル (.css ファイル) 内に作成されます。つまり、適用するスタイルがあるということをブラウザーに伝えるには、何らかの方法で HTML ファイル内にそれらをインポートする必要があります。

要素はこのような目的のために存在しています。外部の CSS ファイルをインポートするには、次のように HTML ファイルのセクション内に要素を入れます:



    My Page Title

この例では、href 属性で指定した CSS スタイルをインポートしており、/home/style.css はそのファイルパスです。

この後の 3 つのセクションでは、厳密にプログラミング言語と呼べる言語に (ついに) 入っていきます！

JavaScript、Python、Java の全般的な概要と、その 3 つの言語に共通する、重要なコーディングの概念をいくつか説明します。各言語の特徴とサンプルコードを比較対照していきますので、できれば 3 つの言語の基本を、総合的に理解するようにしてみてください。

8) JavaScript でプログラミングを始める

まず次の質問に回答することから始めましょう: HTML を使用してウェブページの骨組みを作り、CSS でページの見た目をきれいに整えることができたならば、なぜ JavaScript が必要になるのでしょうか？

技術的には必要ありません、というのが答えです。見た目のきれいな静的サイトを用意するだけで十分ならば、HTML と CSS だけで大丈夫でしょう。

ここでのキーワードは「静的」です。一方で、コンテンツを変更したり、複雑なユーザーとの対話処理を行ったりするような、動的な機能をウェブページに追加しようとする場合には、JavaScript を使用しなければなりません。

JavaScript とは何か？

では、JavaScript とは一体何なのでしょうか？JavaScript は、特にウェブサイトおよびインターネットのために作られたプログラミング言語です。セクション 2 で説明しましたが、ほとんどのプログラミング言語はコンパイラ型かインタプリタ型であり、たいていプログラムは単独で動作する (スタンドアロンの) 環境内で実行されます。

JavaScript はこの点では少しユニークで、ウェブブラウザー内で直接実行できるように作られています。ウェブページ上で実行できる、一連の動作を表すコードを JavaScript で記述できるので、サイトをもっと動的なものにすることができるようになります。

JavaScript コードは、ファイル名の後に .js 拡張子が付けられているテキストファイル内に記述するか、もしくは HTML 内の

これにより、JavaScript コードがファイルから読み込まれ、ブラウザー内にウェブページを表示する際に実行されます。

JavaScript のスキルに慣れてきたら、こちらの初心者向けの楽しいプロジェクトをいくつか作成しながら練習してみましょう。

9) Python でプログラミングを継続する

JavaScript の基本について学んだところで、別のプログラミング言語である Python に飛び込んでみるのも有意義なことです。

多くのプログラミング言語は、変数、算術演算子、if/else 文、ループ、関数などを含む、似通った一連の機能を提供しています。

同じような機能を、別のプログラミング言語で実装する方法を調べてみると、役に立つことがあります。たいてい考え方はほとんど一緒ですが、構文 (コードを記述する上でのきまり) は言語によって異なります。

Python とは何か？

では Python の予備知識について少し説明するところから始めます。JavaScript のように、Python は実行速度よりも開発しやすさを優先している、高水準プログラミング言語です。

初心者が学ぶのに最適な言語のひとつが Python であると、私は考えています。その構文は、簡素かつ直感的であり、Python はオープンソースとビジネスの世界で、とても人気のある言語です。

この記事の前の方で、コンパイラ型言語とインタプリタ型言語について、対比しながら説明しました。Python はインタプリタ型言語です。Python のプログラムを実行する時には、Python インタプリタが、マシン上でコードを一行ずつ逐次的に読み込んで実行します。

この点が、コンパイラ型言語と異なります。コンパイラ型言語では、最初にコンパイラを使用してコードを最適化された形式 (実行ファイル) に変換し、その後で変換されたコードを実行します。

JavaScript とは違い、Python はウェブブラウザー内で直接実行されるように作られてはいません。Python は便利なスクリプト言語であり、通常はユーザーのローカル環境で実行される、任意のタスク用のコードを記述するために使用されます。

Python コードは、Python インタプリタがインストールされているコンピュータであれば実行できます。Python は現在も一般的に使用されているスクリプト言語ですが、データサイエンスやサーバーサイドアプリケーションにも広く使用されています。

Python における変数と代入

JavaScript と同じように、Python でも変数を定義できます。Python では、必要に応じて、次に示すように等号を使用して変数を作成し、値を代入します:

x = 10
y = "cheese"

変数を定義する構文において、Python と JavaScript の間には 2 つの違いがあります。Python では、let キーワードは必要ありませんし、行末にセミコロンを付ける必要もありません。

Python は、空白またはインデント (字下げ) に基づく、一連の構文規則を使用します。これによって、セミコロンのような行の終了文字をつけたり、中かっこを使用してブロックスコープを定義する必要がなくなります。

Python におけるデータ型

Python には、変数に代入できるデータ型一式も備わっています。これには、整数、浮動小数点数 (小数)、文字列、リスト、辞書が含まれます。

整数、浮動小数点数、および文字列は、本質的には JavaScript の対応するものと同じですから、同じ説明をここでは繰り返しません。

Python において、論理値型は JavaScript のものととても似ていますが、True と False キーワードは大文字で始めなければならないという点が異なります:

x = True

y = False

プログラムのフロー制御文について

JavaScript と同じように、Python にも一連のフロー制御文が備わっていますが、構文がわずかに異なります。

If / Else 文

JavaScript のセクションで説明した if/else の例を、Python で記述すると次のようになります:

x = 10

if ( x > 5 ):
    print('X is GREATER than 5!')
    
else:
    print('X is NOT GREATER than 5!')

x という名前の変数を定義して、その値を 10 に設定し、それから if 文が続いています。丸かっこ内の条件は True と評価されるので、if 文の後のインデントされたコードが実行され、画面に「X is GREATER than 5!」が表示されるのを確認できます。

Python では、print() 関数を使用して情報を画面に表示します。

また、else 文にも注目してみましょう。この文は、x の値を評価している条件が False である場合に、先ほどとは別の文字列を画面に表示します。

この記事の前の方で説明した JavaScript のコードと、すぐ上の Python のコードの間には、2 つの大きな違いがあります。Python では、if 文のブロックの始まりを示すために、中かっこの代わりにコロンが使用されます。

加えて、Python では print() 関数の前のインデントが重要です。JavaScript では、中かっこを使用してコードブロックを明確に記述したり、セミコロンを使用して文の終わりを示したりするので、文の間にあるインデントまたは空白についてあまり考慮する必要はありません。ところが、この Python の例では、セミコロンも中かっこも記述されていないのです！

なぜならば、実は Python では空白と改行文字をもとに、文の終わりやコードブロックを認識しているからです。

コロンは、if ブロックの始まりを Python インタプリタに伝えています。if ブロックを構成しているコードをインデントしています (1 タブ = 4 スペースが通例になっています) が、これは、そこから先が if ブロックの一部であることを Python インタプリタに理解させるために必要なことです。その後にインデントされていない行が来ると、それが if ブロックの終わりを表します。

While ループ

次は、Python のループについて説明します。Python の while ループも、本質的には JavaScript のセクションで解説したものと同じですが、以下のように、Python の構文を使用します:

x = 1

while ( x <= 100 ):
    print('とても重要なメッセージです!')
    x = x + 1

print('ここはループの中ではありません！')

この while ループと、JavaScript バージョンとの違いは、次の通りです:

変数の定義を行っているコードから let を削除しています。
行末のセミコロンを削除しています。
中かっこをコロンに置き換えています。
ループ内のコードをタブを使って確実にインデントさせています。

インデントされていない行は、ループの一部ではないので、繰り返し実行されない、ということを示すために、上記の例では、ループの外側で追加のメッセージを表示しています。

ここで、新米パイソニスタのために書かれた、禅オブ Python (the Zen of Python) に一度目を通してみることをお勧めします。これは、Python 的なコードを記述するための、20 個のゆるい規則のリストです。

Python の基本に慣れてきたら、こちらの初心者向けの楽しい Python プロジェクトをいくつか作成してみましょう。

10) Java で知識を深める

2 つの高水準プログラミング言語を扱ってきましたが、さらにもうひとつ Java を掘り下げてみましょう。

インタプリタを使用して、リアルタイムでソースコードを実行する JavaScript や Python とは違い、Java はコンパイラ型言語です。つまり、Java のソースコードをコンピューターが理解できる形式に変換するには、(インタプリタではなく) コンパイラを使用します。

ほとんどのコンパイラは、機械語でできた 1 つ以上の実行ファイルを生成します。これは、特定のオペレーティングシステムとハードウェアプラットフォームですぐに実行できる形式に、ソースコードからコンパイルされたものです。

ただ、Java は少し変わっていて、Java ソースコードを、バイトコードと呼ばれる中間コードに変換します。これは他のほとんどのコンパイラ型言語が作成する機械語とは異なります。Java バイトコードは、Java 仮想マシン (JVM - Java Virtual Machine) と呼ばれるものによって実行することを意図して作られています。

JVM は、コンピューターにインストールするプログラムだと考えることができます。このプログラムが、Java バイトコードを実行することによって、Java プログラムが動作します。だれかが「コンピューターに Java がインストールされているかどうか」について話しているときは、たいてい JVM がコンピューターにインストールされているかどうかを尋ねているのです。

JVM は、前の章で説明したインタプリタに似た機能を果たしています。ただし、入力としてソースコード (これは .java ファイル内に保存されています) を読み込む代わりに、コンパイルされたバイトコードを読み込みます。

この仕組みの利点は、特定のオペレーティングシステムとプラットフォームでコンパイルされたバイトコードを、JVM がインストールされている他のどのプラットフォームでも実行できるようにしてくれるところです。

たとえば、Windows オペレーティングシステムを実行しているコンピューターで記述された、Java コードのファイルがあり、それがバイトコードへコンパイルされたとしましょう。このバイトコードは、Windows、macOS、Linux などを含む、どのプラットフォームの JVM でも実行できます。

これは、他のプログラミング言語には当てはまりません。コンパイルされた実行ファイルはほとんどの場合、コンパイルされた環境内でのみ実行できます。

Java における変数と代入

これまで説明してきた言語 (Python と JavaScript) と Java の、大きく異なる点のひとつは、Java が静的型付け言語であることが挙げられます。

つまり、プログラムのコンパイル時に、変数のデータ型がわかっていなければならないので、あらかじめ型の設定を行う必要があります。

Java コードの中で変数を作成するときは、整数 (Integer)、文字列 (String) など、毎回必ずその変数のデータ型を明確に定義しなければなりません。これは変数の宣言と呼ばれます。

いったん変数のデータ型が宣言されると、プログラムの実行中は、宣言されたデータ型の値しかその変数は保持できません。

この点が、ランタイム (プログラムの実行中) に変数のデータ型が設定される、JavaScript や Python と大きく異なっています。このことから、JavaScript や Python のような言語は動的型付け言語と呼ばれています。動的型付け言語では、ソースコード内で変数のデータ型を明示せずに、任意の型の値を臨機応変に変数へ再代入できます。

Java では、次の構文を用いて変数を作成します:

Datatype name = value;

この Datatype が、整数 (Integer) や文字列 (String) など、変数に格納される値のデータ型です。次に、定義する変数名を name で表し、これをコードの中で使用します。value は、変数に代入する実際の値です。JavaScript と同じように、Java の文はすべてセミコロンで終わるということに注意してください。

Java におけるデータ型

Java では、基本的な組み込みデータ型はプリミティブ型と呼ばれます。Python や JavaScript のような高水準言語についてここまで学習した内容を踏まえると、見覚えがあると感じるでしょう。主なプリミティブ型を以下に示します:

整数型 int: −2,147,483,648 から 2,147,483,647 までの整数を格納できます。
浮動小数点型 float: 負の値は -3.4×10³⁸ から -1.4×10^-45、正の値は 1.4×10^-45 から 3.4×10³⁸ の間の小数を格納できます。
論理型 bool: true もしくは false の、2 つの論理値のいずれかを格納できます。

プリミティブ型は (short、long、byte、double など) 他にもいくつかあるということに注意が必要ですが、それらは上記のものほど頻繁に使用されないので、ここでは触れません。プリミティブ型の変数を初期化する方法はこちらです:

整数型: int x = 100;

浮動小数点型: float pi = 3.14;

文字型: char middleInitial = 'T';

論理型: bool isHuman = true;

ここで再度お伝えしたいのですが、データ型は一度宣言されると、その変数は特定のデータ型の値しか保持できません。

たとえば、1 文字の値 (character) を、整数型で宣言された変数に格納しようとすると、エラーが返ってきます。上記の例の整数型変数 x に、文字 'S' は代入できないのです。

では次に、文字、数値、および記号の連なりをテキストデータとして表す、文字列型について説明します。

Java の文字列型はプリミティブ型ではありません。つまり、文字列型は小さなパーツから構築されています。文字列を格納する変数を宣言するには、文字列型を使用し、変数に代入する値を二重引用符で囲みます:

String name = "Harry Potter";

Java におけるプログラムのフロー制御文

JavaScript と同じように、Java は if 文、ループ、および関数のコードブロックの定義に中かっこを使用します。ここからは、前の章で示したサンプルコードと同じ制御文をもつプログラムについて調べ、Java の構文を使用するために、それらを更新します。

If / Else 文

こちらが前の章のサンプルコードを反映した Java の if/else 文です:

int x = 10;

if ( x > 5 ) {
    System.out.println("X is GREATER than 5!");
} else {
    System.out.println("X is NOT GREATER than 5!");
}

この基本的な if 文の例は、JavaScript の場合のサンプルコードとほとんど同じです。違いは、x のデータ型を int と宣言していることと、メッセージを画面に表示するために console.log() の代わりに System.out.println() を使用していることだけです。

次に、Java におけるループに話題を移しましょう。Java と JavaScript の構文は非常に似ているので、Java の while ループは、JavaScript の例で見たものと基本的には同じです:

int x = 1;

while ( x <= 100 ) {

    System.out.println("とても重要なメッセージです!");
    
    x = x + 1;
    
}

この while ループは、指定したメッセージを 100 回画面に表示します。

以上で、特定のプログラミング言語を説明するセクションを終了します。同じ概念のセットを 3 つの言語について説明してきたので、ちょっと聞き飽きたかもしれませんが、これらの基本的で不可欠な考え方をしっかり理解するのに役に立つことを願っています。

以降は、ここで取り上げない限りはすぐに学び始めない可能性のある、いくつか中間的なテーマで記事を締めくくります。

まずは、Git と呼ばれる欠かせないコラボレーションツールについて説明します。次に、データベース内へデータを保存し、アクセスする方法を学びます。その後で、ウェブ開発フレームワークについて少し触れてから、最後にパッケージマネージャーにスポットを当てます。

11) Git を使用してコードを追跡する

Git は、現在使用されているものの中で、最も有名なバージョン管理システム (VCS) です。Git によって、多くの開発者が協働してソフトウェアを作れるようになります。このセクションでは、Git について、その仕組みと基本的なコマンドの使用方法について学びます。

Git の学習に入る前に、ほとんどのプログラミングプロジェクトに共通する概念について、いくつか具体的に見ていきましょう。

ソフトウェアプロジェクトを構成しているディレクトリとファイルのフルセットは、コードベースと呼ばれています。プロジェクトのディレクトリツリー内の、最上位のフォルダがプロジェクトルートです。ファイルは、プロジェクトルート内に直接含められたり、複数階層のフォルダに組織されたりします。

コードベースは、テストやデプロイの準備が整ったときに、コンピューター上で実行できるプログラムにビルドされます。ビルドプロセスには、人間が書いたコードを、コンピューターのプロセッサによって実行できるファイルに変換する、1 つ以上のステップが含まれます。

コードは一度ビルドされると、Linux、macOS、Windows などの特定のオペレーティングシステムで、いつでも実行できるようになります。

長い時間をかけて、開発者はプロジェクトコードを更新して、新しい機能を追加したり、バグを修正したり、セキュリティ更新プログラムを実装したりします。開発者がソフトウェアプロジェクトを変更する方法は、一般的には以下の 3 つが挙げられます:

新しいファイルとフォルダをプロジェクトに追加する
既存のファイルまたはフォルダ内のコードを編集する
既存のファイルまたはフォルダを削除する

新しい機能が追加されプロジェクトが大きくなるにつれて、ファイルとフォルダの数 (およびその中にあるコードの量) は増えていきます。大規模なプロジェクトは、何百、何千というファイルに何百万行ものコードが含まれるような規模まで拡大することもあります。

この拡大を後押しするために、大規模なプロジェクトのチームはたいてい増員します。大きなソフトウェアのプロジェクトでは、何百人、あるいは何千人もの開発者が協力して働いています。

これは次の疑問を投げかけます:「そのような多くの開発者が (世界中に散らばっている可能性さえあるのに) どのようにして 1 つのプロジェクトに協力して取り組めるように、ソフトウェアプロジェクトのコードを追跡しているのでしょうか？」

コードの変更内容、影響を受けたファイルもしくはフォルダ、および各変更が誰によって行われたのかについて正確に追跡する方法が、開発チームには必要です。また各開発者は、他のすべての開発者による変更内容を取得できなければなりません。

このプロセスは、バージョニングまたはバージョン管理と呼ばれています。開発者は、バージョン管理システム (Version Control Systems - VCS) と呼ばれる特殊なツールを使用して、ソフトウェアプロジェクトのバージョンを追跡し、管理し、共有しています。現在活発に使用されており、人気のあるバージョン管理システムを、いくつか以下に示します:

Git
Subversion (SVN)
Mercurial (Hg)

ただ、今のところは Git が頼れる VCS として王座についています。Git は今や世界中の政府機関、企業、およびオープンソースコミュニティで使用されている、最も有名な VCS です。

Git は GitHub や Bitbucket のような、有名なウェブベースの VCS プラットフォームの中核を成しています。Git は、どの有能な開発者にとっても、習得しておくべき必要不可欠なツールなのです。

基本的な Git コマンド

Git はリポジトリと呼ばれているものの中に、ソフトウェアプロジェクトに関する情報を作成、保存します。Git リポジトリとは、単なるコンピューター上の隠しフォルダであり、Git はそれを用いてソフトウェアプロジェクト内のファイルに関するデータを保存します。

私たちが扱うたいていのソフトウェアプロジェクトは、プロジェクトに関する情報を保存するための Git リポジトリをそれぞれ持っています。このようにして、1 台のコンピューター内のさまざまなプロジェクトに関するコードは、個別に追跡されます。

コンピューターに Git リポジトリを作成する方法は主に 2 つあります。1 つ目は、新しい Git リポジトリを、ファイルシステムの既存のフォルダ内に作成するという方法です。

これを行うには、単にコマンドラインを開いて、デスクトップのようなどこか便利な場所に新しいフォルダを 1 つ作成し、そのフォルダの中に移動します:

cd ~/Desktop

mkdir testgit
 
cd testgit/

これで新しいフォルダを作成してその中に移動できたので、以下のコマンドを使用して、新しい Git リポジトリを作成して初期化できます。

git init

コマンドを入力すると、次のような出力が表示されるはずです:

Initialized empty Git repository in /Users/me/Desktop/testgit/.git/

実行できる Git コマンドはすべて git という単語から始まり、その後にスペースを 1 つ入れて、実行する特定のコマンドが続きます。Git コマンドの後にフラグや引数を追加することもあります。

git init コマンドは、.git という名前の隠しフォルダを、カレントディレクトリ内に作成します。このフォルダが上述の Git リポジトリです。コマンド ls -al を実行すれば、このフォルダが確認できます。

コンピューターに Git リポジトリを追加する 2 つ目の方法は、Bitbucket もしくは GitHub のようなところから、リポジトリをダウンロードすることです。

Bitbucket と GitHub とは、コンピューターにダウンロード可能なオープンソースプロジェクトを、ユーザーがホストできるウェブサイトのことです。

Bitbucket もしくは GitHub で、面白そうなプロジェクトを見つけて目を通していると、Clone または Code というラベルの付いたボタンがあります。このボタンを押すと、コマンドラインターミナル内にコピー＆ペーストできるコマンドや、URL が表示されます。以下のような形式になっているでしょう:

git clone https://jacobstopak@bitbucket.org/jacobstopak/baby-git.git

git clone コマンドは、コンピューターの新しいフォルダの中に、指定した URL からリポジトリをダウンロードします。この URL は、上の例のようなウェブ URL でもいいですし、次のような SSH URL にもできます:

git clone git@bitbucket.org:jacobstopak/baby-git.git

git clone コマンドを実行すると、新しく作成されたフォルダが確認できるはずです。ダウンロードしたプロジェクトを構成している、すべてのファイルとサブフォルダを、その中で見ることができます。

では次に、git add コマンドについて説明します。git add コマンドは、Git にどのファイルを追跡するのかを伝えたり、既に追跡されているファイルの変更を、Git の staging area に追加するために使用されます。

新しいファイルまたは変更されたファイルをステージできたら、git commit -m "Commit message" を使用して、それらをリポジトリにコミットできます。これによって、Git リポジトリにステージされたすべてのファイル内の変更が保存されます。

ワーキングディレクトリの現在の状態と、プロジェクトのコミット履歴を見直すには、git status と git log コマンドを使用すると便利です。

ここでは Git のほんの一部だけしか説明していません。Git にはさらに多くの基本的なコマンドが備わっており、それらに慣れるのはとても有益なことです。

12) データベースと SQL を使用してデータを保存する

データベースとは、膨大な量のデータの保存、更新、取得、削除を、効率よく行えるように、特別に設計されたプログラムのことです。簡単に言うと、データベースはテーブルの集まりのコンテナと考えることができます。

もしかしたら、あなたは Microsoft Excel のテーブルを使ったことがあるかもしれませんね。テーブルとは、データを含む列と行の集まりに過ぎません。データベース内にテーブルを設定することで、プログラムが適切に処理しなければならない情報を保存できます。

JavaScript、Python、Java、または他のどの言語でプログラムを書いているかに関わりなく、必要に応じてデータベースと情報をやり取りするように、プログラムに指示できます。

ウェブページ上でユーザーに表示するデータは、データベースから取得できます。また、ユーザーから送信されたウェブ会員登録フォームを受け付け、そのユーザーの情報を、後で使用するためにデータベース内に保存しておくことができます。

プログラムは、アプリケーション内でイベントが発生すると同時に、リアルタイムでデータベースと情報をやり取りできます。ほとんどのデータベースでは、そのやり取りに Structured Query Language (構造化問い合わせ言語) を略した SQL と呼ばれる言語が使用されています。

SQL はデータベース専用に作り出されたプログラミング言語です。これを用いて、データベースに指示を出すことができます。

SQL コードの 1 つのかたまりのことを、クエリと呼びます。SQL クエリを記述することで、あるタイミングで必要になったデータを取得したり、特定のテーブルの中に新しいデータを挿入したりできます。おおまかに言うと、SQL クエリには、主に read-SQL と write-SQL の 2 つのタイプがあります。

read-SQL とは、データを確認または使用するために、シンプルにデータベースからデータを取得するものです。これは、データベース内のデータを全く変更しません。

一方で write-SQL クエリは、テーブル内への新しいデータの挿入や、既存のデータの更新または削除を行います。このセクションでは基本的な read-SQL の書き方をいくつか学んでみましょう。

クエリを書く前に、何をクエリ (問い合わせ) しているのかについて理解しておくと、それが役に立ちます！伝統的なデータベースは、列と行で構成されたテーブルを含んでいます。read-SQL クエリを書く際の目標は、通常はこれらの行と列の一部を、検索し取得することになります。

たとえば、4 つの列と、FIRST_NAME および LAST_NAME の列でできている、PERSON という名前のテーブルがあるとしましょう。以下のクエリを使用すると、FIRST_NAME の列のデータだけをすべて選択できます:

SELECT FIRST_NAME FROM PERSON;

SELECT キーワードは、データベースにデータの取得を指示します。このキーワードの後ろには、データを取得しようとしている列の名前 (この例では、FIRST_NAME) が続きます。

それから、FROM キーワードを使用して、データベースにどのテーブル (この場合は PERSON テーブル) からデータを取得するかを指示しています。また、すべての SQL コマンドは、セミコロンで終えるということにも注意しましょう。

データに関する最も一般的な要件の 1 つは、データを選別できることです。選別 (フィルタリング) とは、指定された条件に基づいて、SQL クエリの実行結果 (result set) を制限することです。

たとえば、PERSON テーブルから、「PHIL」という名前の人たちの行だけを選択したい場合があるかもしれません。その場合は、次のように SQL クエリ内で WHERE キーワードを使用すればフィルタリングできます:

SELECT * FROM PERSON WHERE FIRST_NAME = 'PHIL';

SELECT 句の中で、特定の列の名前をリストアップする代わりにアスタリスク * を使用しているので、このクエリは PERSON テーブル内のすべての列を返します。そこから、PERSON テーブル内の FIRST_NAME が「PHIL」に設定されている行のデータだけが取得されます。

最後に、ソートについて説明します。クエリの実行結果を特定の順序にソートして確認したい場合が多くあります。それを可能にしてくれるのが、以下に示す ORDER BY 句です:

SELECT *
FROM PERSON
ORDER BY LAST_NAME;

このクエリは、LAST_NAME のアルファベット順に並べ替えられた、PERSON テーブル内のすべての列を返します。

デフォルトでは、実行結果は A から Z の昇順に並び替えられます。以下の例のように、オプションの ASC または DESC をクエリに追加して、昇順または降順のどちらの順番で並び替えるかを指定できます。

SELECT *
FROM PERSON
ORDER BY LAST_NAME DESC;

13) ウェブフレームワークと MVC (Model-View-Controller: モデル・ビュー・コントローラ) について読む

私たちは、ごく普通のタイプのアプリケーション用のコードを書いているということに、たびたび気づきます。ウェブアプリケーション (または ウェブアプリ) とは、インターネットにその機能を依存しているアプリケーションのことです。作成されている最も一般的なタイプのソフトウェアアプリケーションの一部に、ウェブアプリが含まれます。

ウェブアプリとは、基本的にはウェブサイトをもっと機能的、かつロバスト (堅牢) にしたものです。ほとんどのウェブアプリには、ウェブサーバーに置かれ、アプリケーションの機能を水面下で支えるロジックを実行するバックエンドコードが実装されています。

ウェブアプリのバックエンドコードに使用される一般的な言語には、Python、Java、JavaScript などがあります。

ほとんどのウェブアプリに共通して含まれる機能を以下にいくつか挙げます:

ウェブページのコンテンツを動的に変更できる便利な方法を提供すること
ログインページによって安全なユーザー認証を実行すること
アプリケーションの堅牢なセキュリティ機能を提供すること
データベースとやり取りしてデータの取得や保存を行うこと

ウェブフレームワークは、多くのウェブアプリで使われる一般的な機能が、複雑な設定をすることなく使えるようになっているコードライブラリの集まりです。ウェブフレームワークは、多くのウェブアプリに共通する、水面下で行われる多くのタスクのためのコードを記述することについて悩まずに、アプリケーションを構築できるシステムを、開発者に提供します。

ウェブアプリの要件を満たせる、フレームワークのパーツを利用するだけで十分なのです。

たとえば、あるウェブアプリにおいて、データベースに接続する必要がない場合には、単にデータベース機能を省略して、必要な他の機能だけを利用すればいいのです。

その上で、アプリケーション、ユーザーフロー、およびビジネスロジックを形成するウェブページを自由にカスタマイズできます。ウェブフレームワークは、ウェブアプリを構築するために使用できる、プログラミングツール一式として考えることができます。

この記事のなかで取り上げた各プログラミング言語には、現在も利用されている、有名なウェブフレームワークが 1 つ、またはいくつか用意されています。これは素晴らしいことで、開発チームに、彼らが最も精通している言語のフレームワークを使用できるという、柔軟性を与えてくれます。

Java には、Spring Boot によって特に使いやすいものになった、Spring Framework があります。Python には Django というフレームワークがあります。JavaScript には Node.js ランタイム環境と、Express.js や Meteor.js を含む複数のフレームワークの選択肢があります。これらのフレームワークは、すべて無料でオープンソースです。

14) パッケージマネージャーに触れる

このガイドブックの最後に説明するテーマはパッケージマネージャーです。環境にもよりますが、パッケージとは、コンピューターにすぐにインストールできる単体プログラム、またはソフトウェアプロジェクトの一部で活用しようとしている、外部ライブラリのいずれかを表します。

アプリケーションは外部ライブラリに依存していることも多く、これらは依存関係と呼ばれています。

パッケージマネージャーとは、システムやソフトウェアプロジェクトの依存関係を、管理しやすくしてくれるプログラムです。ここでの「管理」は、必要に応じて依存関係のインストール、更新、一覧の作成、およびアンインストールを行うことを意味しています。

状況によりますが、これから説明するパッケージマネージャーは、オペレーティングシステム上にインストールされたプログラムの管理、またはソフトウェアプロジェクトの依存関係の管理を行うために使用できます。

macOS: Homebrew

Homebrew は、macOS オペレーティングシステム向けの、最も有名なパッケージマネージャーです。これは、Mac でパッケージとアプリケーションのインストール、更新、追跡、一覧の表示、およびアンインストールを行う、便利な方法を提供してくれます。

ダウンロードした .dmg ファイルによってインストールできる、多くのアプリケーションは、Homebrew を使って、同じようにダウンロードしインストールできます。

Homebrew で wget パッケージをインストールする例はこちらです:

brew install wget

Linux: Apt と Yum

Linux はコマンドラインを中心に作られているので、パッケージマネージャーが、プログラムをインストールするデフォルトの方法になっているのは当然のことです。

Linux の主流のフレーバーのほとんどは、組み込みのパッケージマネージャーと一緒に提供されています。Advanced Package Tool (APT) は、Debian と Ubuntu ベースの Linux ディストリビューション用の、ネイティブパッケージマネージャーです。Yellowdog Updater Modified (YUM) は、RedHat Linux ディストリビューション用のネイティブパッケージマネージャーです。

APT を使用して Vim をインストールする例はこちらです:

sudo apt-get install vim

Yum を使用すると次のようになります:

sudo yum install vim

JavaScript: Node Package Manager (NPM)

ここまでは OS レベルのパッケージマネージャーの使い方について見てきたので、今度は、プログラミング言語に特化したパッケージマネージャーをいくつか見ていきましょう。これらは、コーディングプロジェクトの多くが依存しているソフトウェアライブラリを、管理しやすくしてくれます。なお、Node Package Manager (NPM) は、Node.js にデフォルトでインストールされています。

NPM とこれまで説明してきたパッケージマネージャーの違いのひとつは、NPM がローカルもしくはグローバルモードで実行できることです。ローカルモードでは、作業中の特定のプロジェクト／ディレクトリの中だけにパッケージがインストールされ、一方でグローバルモードではシステム上にパッケージがインストールされます。

デフォルトでは、パッケージはローカルモードでインストールされますが、以下のように -g フラグを使用することで、パッケージをグローバルモードでインストールできます:

npm install request -g

Python: Pip

Python にも Pip と呼ばれるパッケージマネージャーがあります。最近のバージョンの Python には、Pip があらかじめ内包されているので、すでにあなたのシステムにインストールされているかもしれません。Pip のおかげで、次のように pip install コマンドを使用して、Python Package Index から、パッケージを簡単にインストールすることができるようになります:

pip install requests

Java: Apache Maven

Apache Maven (通常は単に Maven と呼ばれています) とは、依存関係の管理機能を含む無料のオープンソースツール一式です。

Maven は主に Java プロジェクトに使用されていますが、他の言語もサポートしています。Maven の使用方法はちょっと複雑で、できることが多いので、ここでは詳細に立ち入ることはしません。

要約

この記事では、私がコードを学び始めた時に知っていたらよかったと思うソフトウェア開発の概要を説明するために、一連の重要なコーディングの概念とツールを紹介しました。

インターネット、いくつかのプログラミング言語、バージョン管理システム、およびデータベースなどのテーマを取り上げ、これらが互いにどう関係し、組み合わさっているか説明することを目指しました。

次なるステップ

この記事を楽しんでいただけたならば、私が書いた Coding Essentials Guidebook for Developers という名前の本を紹介させてください。この本には 14 の章があり、この記事の中で取り上げたテーマを 1 つずつ、各章で説明しています。

本の中で、これら 14 のテーマについてさらに掘り下げているので、この記事からきちんと知識が得られたかどうか確認する、良い資料となってくれるかもしれません。

この記事を読んでいただいた後、特定の言語、ツール、または概念に惹かれることがあるかもしれません。その時は、その領域にさらに深く入り込むことをお奨めします。

この本に関する質問やご意見ご要望がございましたら、jacob@initialcommit.io までご連絡いただければ幸いです。

Python Discord ボットのチュートリアル – Discord ボットをコーディングして無料でホストする

Manabu Matsumoto — Tue, 13 Sep 2022 12:24:00 +0000

原文: Python Discord Bot Tutorial – Code a Discord Bot And Host it for Free

このチュートリアルでは、クラウド環境だけを利用して独自の Discord ボットを構築する方法をお伝えします。

ご自身のコンピューターに何かをインストールする必要も、ボットをホストするために料金を支払う必要もありません。

Discord API、Python のライブラリ、および Repl.it と呼ばれるクラウドコンピューティングプラットフォームなど、いくつかのツールを使用します。

このチュートリアルには動画バージョンもあります。下の埋め込み動画をご覧ください。テキストバージョンは動画の下に続きます。

Discord ボットのアカウントを作成する方法

Python のライブラリと Discord API を扱うには、まず Discord ボットのアカウントを作成しなければなりません。

Discord ボットのアカウントを作成する手順は次のとおりです。

1. Discord のウェブサイトにログインしているか確認します。

2. application ページに移動してください。

3.「New Application」ボタンをクリックします。

4. アプリケーションの名前を入力し、「Create」をクリックします。

5.「Bot」タブに移動してから、「Add Bot」をクリックしてください。その後で「Yes, do it!」をクリックして確定する必要があります。

PUBLIC BOT (チェック済み) と REQUIRES OAUTH2 CODE GRANT (チェックなし) は、デフォルトの設定のままにしておいてください。

これでボットが作成されました。次のステップは、トークンをコピーすることです。

このトークンはボットのパスワードなので、誰にも共有しないようにしてください。誰かがボットにログインして、さまざまな悪さを働いてしまいかねませんので。

もし誤って共有してしまったとしても、トークンは作り直せます。

ボットをサーバーに招待する方法

ここで、ボットユーザーをサーバーに追加しなければなりません。そのためには、ボット用の招待 URL を作成する必要があります。

では「OAuth2」タブに移動してください。次に、「SCOPES」セクション下の「bot」を選択します。

ここでは必要なボット用のパーミッションを選びます。ボットはもっぱらテキストメッセージを使用するので、多くのパーミッションは必要ありません。ボットに何をさせたいかによって、さらにパーミッションが必要になるかもしれません。「Administrator」パーミッションには注意してください。

適切なパーミッションを選んだら、その上にある「Copy」ボタンをクリックしてください。これで、ボットをサーバーに追加するのに使用する URL をコピーできます。

URL をブラウザーに貼り付け、ボットを招待するサーバーを選んで、「Authorize」をクリックしてください。

ボットを追加するには、あなたのアカウントに「Manage Server」パーミッションが必要です。

これでボットユーザーが作成されたので、ボット用の Python コードを記述し始めましょう。

基本的な Discord ボットを discord.py ライブラリを用いてコーディングする方法

ボット用のコードは、discord.py という Python ライブラリを使用して記述します。discord.py とは、Discord 用の API ラッパーであり、Python の中で Discord ボットを作成しやすくしてくれます。

repl (Read-Eval-Print Loop - 対話型実行環境) を作成し discord.py をインストールする方法

ボットは、ローカルコンピューター上で、任意のコードエディターを使用して開発できます。ですが、このチュートリアルでは、Repl.it を使用して、誰もがもっと簡単に理解できるようにしています。Repl.it とは、ウェブブラウザー内で使用できるオンライン IDE です。

Repl.it に移動することから始めましょう。次に、新しい repl を作成し、言語は「Python」を選びます。

discord.py ライブラリを使用するには、main.py の先頭に import discord を記述します。「RUN」ボタンを押すと、Repl.it は自動的にこの依存関係をインストールしてくれます。

ローカルでボットをコーディングしたい場合は、次のコマンドを使用して MacOS に discord.py をインストールできます:

python3 -m pip install -U discord.py

pip の代わりに、pip3 を使用しなければならないかもしれません。

Windows を使用している場合は、先ほどのコマンドではなく、次の行を使用する必要があります:

py -3 -m pip install -U discord.py

ボット用の Discord Events をセットアップする方法

discord.py の中心にあるのはイベントの概念です。イベントとは、なにかを検出してから応答するものです。たとえば、メッセージが起こると、そのメッセージに関するイベントを受けて応答できます。

特定のメッセージに応答するボットを作ってみましょう。このシンプルなボットのコードとその説明は、discord.py の公式ドキュメントから抜粋しています。後のセクションで、さらにボットへ機能を追加していきます。

次のコードを main.py に追加してください (discord.py でなければ、このファイルにお好きな名前をつけてもらってかまいません)。このコード全体で行われていることについては、コードの後で手短に説明します。

import discord
import os

client = discord.Client()

@client.event
async def on_ready():
    print('We have logged in as {0.user}'.format(client))

@client.event
async def on_message(message):
    if message.author == client.user:
        return

    if message.content.startswith('$hello'):
        await message.channel.send('Hello!')

client.run(os.getenv('TOKEN'))

Discord 上でボットユーザーを作成した時に、トークンをコピーしましたね。ではここで、.env ファイルを作成し、トークンを保存しましょう。コードをローカルで動作させている場合は、.env ファイルは必要ありません。os.getenv('TOKEN') をトークンに置き換えるだけです。

.env ファイルは、環境変数を宣言するのに使用します。Repl.it では、作成したファイルのほとんどは誰でも見ることができますが、.env ファイルはあなただけにしか見えません。公開されている repl を見ている他の人々には、.env ファイルの内容は見ることができないのです。

したがって、Repl.it 上で開発している場合は、トークンやキーなどの個人情報だけを .env ファイル内に入れるようにしましょう。

「Add file」ボタンをクリックして .env という名前のファイルを作成してください。

作成したファイル内に、前にコピーした実際のトークンを含む、以下の行を追加してください:

TOKEN=[トークンをこちらに貼り付けてください]

ここで、 Discord ボットのコードの、各行で行われていることを調べてみましょう。

最初の行で discord.py ライブラリをインポートしています。
2 行目で os ライブラリをインポートしていますが、これは TOKEN 変数を .env ファイルから取得するためだけに使用されています。.env ファイルを使用しない場合は、この行は必要ありません。
次に、Client のインスタンスを作成しています。これで Discord に接続します。
@client.event() デコレータはイベントを登録します。これは非同期ライブラリなので、コールバックを使用して処理を行います。コールバックとは、何らかの処理が実行された時に呼び出される関数のことです。このコード内では、ボットを使用する準備ができた時に、on_ready() イベントが呼び出されます。その後で、ボットがメッセージを受け取る時に、on_message() イベントが呼び出されます。
on_message() イベントはメッセージを受け取るたびに発生しますが、メッセージがボットからのものである場合には、イベントで何も処理しないようにする必要があります。そのため、Message.author が Client.user と同じ場合は、コードは単にリターンします。
次に、Message.content (メッセージの内容) が '$hello' で始まるかどうかをチェックします。もしそれで始まっていれば、ボットは使用されているチャンネルに 'Hello!' と返信します。
これでボットが設定できたので、最後の行でログイントークンを使用してボットを実行します。この行は、外部の .env ファイルからトークンを取得しています。

ボット用のコードが用意できたので、ここで動作させてみる必要があります。

ボットを動作させる方法

では、Repl.it 内の上側にある RUN ボタンをクリックして、ボットを実行してください。

ボットをローカルで記述している場合は、ターミナル内で以下のコマンドを使用すれば、ボットを実行できます:

Windows:

py -3 main.py

その他のシステム:

python3 main.py

次に、Discord のルームに移動し、「$hello」と入力してください。ボットが「Hello!」と返事をするはずです。

ボットを改良する方法

これで、基本的なボットを動作させることができたので、それを改良してみましょう。このボットは、次の理由から「励ましボット (Encourage Bot)」と呼ばれます。

このボットは、誰かが悲しい、または重苦しい言葉を含むメッセージを送った時に、必ず励ましのメッセージで答えてくれます。

使用する励ましのメッセージを誰もがボットに追加でき、またユーザーが提案したメッセージは、Repl.it データベース内に保存されます。

さらに、誰かが「$inspire」とチャット内で入力すると、ボットは、API でランダムに取得された心を動かす引用句を返信してくれます。

では、その「$inspire」機能の追加から始めましょう。

ボットに心を動かす引用句を追加する方法

zenquotes.io という API から、心を動かす引用句を取得します。Python モジュールをさらにいくつかインポートし、get_quote() 関数を追加し、その関数を呼び出すようにボットのコードを更新する必要があります。

こちらが更新されたコードです。新たな部分についてはコードの後で説明します。

import discord
import os
import requests
import json

client = discord.Client()

def get_quote():
  response = requests.get("https://zenquotes.io/api/random")
  json_data = json.loads(response.text)
  quote = json_data[0]['q'] + " -" + json_data[0]['a']
  return(quote)

@client.event
async def on_ready():
  print('We have logged in as {0.user}'.format(client))

@client.event
async def on_message(message):
  if message.author == client.user:
    return

  if message.content.startswith('$inspire'):
    quote = get_quote()
    await message.channel.send(quote)

client.run(os.getenv('TOKEN'))

ここでは、requests モジュールをインポートしなければなりません。このモジュールを使用すれば、コードで HTTP リクエストを作成して、API からデータを取得できるようになります。API は JSON を返すので、 json モジュールを使用することで、返ってきたデータが簡単に扱えるようになります。

get_quote() 関数は、その名のとおり引用句を取得する関数です。まず、この関数は requests モジュールを使用して API の URL からデータを要求しています。この API は、心を動かす引用句をランダムに 1 つ返します。この関数は、今回のものが機能しなくなった場合でも、別の API から引用句を取得するように、簡単に書き直せます。

次に、API からのレスポンスを JSON に変換するのに、json.loads() をこの関数内で使用します。試行錯誤の末に、私は JSON の引用句を必要な文字列形式に変える方法を発見しました。この関数は、引用句 (quote) を文字列として返してくれます。

コード内で最後に更新された部分は、コードの終わりの方にあります。これまで、この部分は「$hello」で始まるメッセージを待ち受けていました。ですが、ここでは「$inspire」を待ち受けています。そして「Hello!」を返す代わりに、quote = get_quote() で取得した引用句を返します。

ここまでくればコードを実行して試してみることができます。

励ましのメッセージをボットに追加する方法

では、悲しい言葉を含むメッセージをユーザーが投稿した際に、ボットが励ましのメッセージで応答する機能を実装しましょう。

ボットに悲しい言葉を追加する方法

まずは、ボットが反応する悲しい言葉を含む、Python のリストを作成する必要があります。

作成した client 変数の後に次の行を追加してください:

sad_words = ["sad", "depressed", "unhappy", "angry", "miserable"]

別の言葉を自由にリストに追加してみてください。

ボットに励ましのメッセージを追加する方法

次に、応答するときにボットが使用する、励ましのメッセージのリストを追加しましょう。

以下のリストを、作成した sad_words リストの後に追加してください:

starter_encouragements = [
  "Cheer up!",
  "Hang in there.",
  "You are a great person / bot!"
]

先ほどと同じように、自身で選択した語句を自由にリストに追加してみてください。ここでは、語句を 3 つしか使用していませんが、それは、ボットが使用する励ましの言葉をユーザーがさらに追加する機能を、後で追加するからです。

メッセージに応答する方法

ここで、作成した 2 つのリストを使用するために、ボットを更新する必要があります。まず、励ましのメッセージを、ボットがランダムに選べるようにするために、random モジュールをインポートします。コードの先頭のインポート文に次の行を追加してください: import random。

次に、すべてのメッセージをチェックして、それらが sad_words リストの言葉を含んでいるかどうか確認するために、on_message() 関数を更新します。これで、悲しい言葉を見つけると、ボットはランダムに励ましのメッセージを送ってくれます。

更新されたコードはこちらです:

async def on_message(message):
  if message.author == client.user:
    return

  msg = message.content

  if msg.startswith('$inspire'):
    quote = get_quote()
    await message.channel.send(quote)
    
  if any(word in msg for word in sad_words):
    await message.channel.send(random.choice(starter_encouragements))

ボットをテストする良い頃合いです。これで、独自のボットを作成するための十分な知識が得られました。ですが、さらに高度な機能を実装する方法と、Repl.it データベースを使用してデータを保存する方法を、これから学習しましょう。

ユーザーが投稿したメッセージを有効にする方法

ボットは完全に機能していますが、ここで、Discord から直接ボットを更新できるようにしてみましょう。悲しい言葉を見つけた時にボットが使用できる励ましのメッセージを、ユーザーがさらに追加できるほうがいいですよね。

ユーザーが投稿したメッセージを保存するのに、ここでは Repl.it の組み込みデータベースを使用します。このデータベースは、すべての repl に組み込まれているキーバリューストアです。

コードの先頭にある他のインポート文の下に、from replit import db を追加してください。これで、Repl.it データベースが使用できるようになります。

では、ユーザーが、使用する個別の励ましのメッセージを、Discord チャットからボットに直接追加できるようにしましょう。ボットに新しいコマンドを追加する前に、個別のメッセージをデータベースに追加し、またそれらを削除する、2 つの補助的な関数を作成します。

以下のコードを get_quote() 関数の後に追加してください:

def update_encouragements(encouraging_message):
  if "encouragements" in db.keys():
    encouragements = db["encouragements"]
    encouragements.append(encouraging_message)
    db["encouragements"] = encouragements
  else:
    db["encouragements"] = [encouraging_message]

def delete_encouragment(index):
  encouragements = db["encouragements"]
  if len(encouragements) > index:
    del encouragements[index]
  db["encouragements"] = encouragements

update_encouragements() 関数は、励ましのメッセージを 1 つ、引数として受け取ります。

最初に、この関数は「encouragements」というキーがデータベース内にあるかチェックします。そのキーがある場合は、データベース内の既存の励ましのリストを取得し、そのリストに新しい励ましのメッセージを加え、更新されたリストをデータベース内の「encouragements」キーに保存します。

データベースに「encouragements」が含まれていない場合は、その名前のキーが新たに作成され、新しい励ましのメッセージが、キーに保存するリストの中の最初の要素として追加されます。

delete_encouragement() 関数は、インデックスを 1 つ、引数として受け取ります。

この関数は、「encouragements」キーに保存されている、励ましのリストをデータベースから取得します。励ましのリスト内の項目数がインデックスよりも大きければ、そのインデックスの項目が削除されます。

最後に、更新されたリストをデータベース内の「encouragements」キーに保存します。

on_message() 関数で更新されたコードはこちらです。新たな部分については、コードの後で説明します。

async def on_message(message):
  if message.author == client.user:
    return

  msg = message.content
 
  if msg.startswith("$inspire"):
    quote = get_quote()
    await message.channel.send(quote)

  options = starter_encouragements
  if "encouragements" in db.keys():
    options = options + db["encouragements"]

  if any(word in msg for word in sad_words):
    await message.channel.send(random.choice(options))

  if msg.startswith("$new"):
    encouraging_message = msg.split("$new ",1)[1]
    update_encouragements(encouraging_message)
    await message.channel.send("New encouraging message added.")

  if msg.startswith("$del"):
    encouragements = []
    if "encouragements" in db.keys():
      index = int(msg.split("$del",1)[1])
      delete_encouragment(index)
      encouragements = db["encouragements"]
    await message.channel.send(encouragements)

上記のコードの最初の新しい行は、options = starter_encouragements です。ここで starter_encouragements のコピーを作成していますが、これはボットが送信するメッセージをランダムに選ぶ前に、ユーザーが投稿したメッセージを、コピーしたリストに追加しようとしているためです。

データベースのキーの中に、「encouragements」が含まれている (これは、ユーザーが個別のメッセージを、少なくとも 1 つ投稿したことを意味します) かどうかチェックします。含まれている場合は、starter encouragements にユーザーメッセージを追加します。

その後、starter_encouragements からランダムにメッセージを送る代わりに、ボットは options からランダムにメッセージを送ります。

次の新しいセクションのコードは、新しいユーザー投稿メッセージをデータベースに追加するのに使用されます。Discord メッセージが「$new」で始まっている場合は、「$new」の後ろのテキストが、新しい励ましのメッセージとして使用されます。

ここで、コード msg.split("$new ",1)[1] は「$new」コマンドをユーザー投稿メッセージから分離し、変数内にそのメッセージを格納しています。この行のコードの "$new " に含まれるスペースに注意してください。スペースの後にある文字列を取得したいからです。

新しいメッセージと一緒に update_encouragements という補助的な関数を呼び出すと、ボットは、Discord チャットへ新しいメッセージが追加されたことを確認するメッセージを送信します。

3 つ目の新しいセクション (上記のコードの最後部) は、新しい Discord メッセージが「$del」で始まっているかどうかチェックしています。
これは、データベース内の「encouragements」リストの項目を、1 つ削除するコマンドです。

まず、encouragements という名前の新しい変数を、空の配列で初期化しています。これを行っている理由は、「encouragement」キーがデータベースに含まれていない場合に、このセクションのコードに空の配列を送信させるためです。

もし「encouragement」キーがデータベース内にあれば、「$del」で始まる Discord メッセージから、インデックスが分離されます。それから、削除するメッセージのインデックスが渡された delete_encouragement() 関数を呼び出しています。更新された励ましのリストは encouragements 変数に格納され、ボットは現在のリストを含むメッセージを Discord へ送ります。

ボットに最後に追加する機能について

ボットは動作してくれるはずなので、テストするには良い頃合いでしょう。ではここで、最後にいくつか機能を追加します。

ユーザー投稿メッセージのリストを Discord から直接取得する機能と、ボットが悲しい言葉に応答する動作をオンまたはオフする機能を、追加してみましょう。

まずプログラムの最終的なコード全体を示し、更新された部分については、コードの下で説明します。

import discord
import os
import requests
import json
import random
from replit import db

client = discord.Client()

sad_words = ["sad", "depressed", "unhappy", "angry", "miserable"]

starter_encouragements = [
  "Cheer up!",
  "Hang in there.",
  "You are a great person / bot!"
]

if "responding" not in db.keys():
  db["responding"] = True

def get_quote():
  response = requests.get("https://zenquotes.io/api/random")
  json_data = json.loads(response.text)
  quote = json_data[0]["q"] + " -" + json_data[0]["a"]
  return(quote)

def update_encouragements(encouraging_message):
  if "encouragements" in db.keys():
    encouragements = db["encouragements"]
    encouragements.append(encouraging_message)
    db["encouragements"] = encouragements
  else:
    db["encouragements"] = [encouraging_message]

def delete_encouragment(index):
  encouragements = db["encouragements"]
  if len(encouragements) > index:
    del encouragements[index]
  db["encouragements"] = encouragements

@client.event
async def on_ready():
  print("We have logged in as {0.user}".format(client))

@client.event
async def on_message(message):
  if message.author == client.user:
    return

  msg = message.content

  if msg.startswith("$inspire"):
    quote = get_quote()
    await message.channel.send(quote)

  if db["responding"]:
    options = starter_encouragements
    if "encouragements" in db.keys():
      options = options + db["encouragements"]

    if any(word in msg for word in sad_words):
      await message.channel.send(random.choice(options))

  if msg.startswith("$new"):
    encouraging_message = msg.split("$new ",1)[1]
    update_encouragements(encouraging_message)
    await message.channel.send("New encouraging message added.")

  if msg.startswith("$del"):
    encouragements = []
    if "encouragements" in db.keys():
      index = int(msg.split("$del",1)[1])
      delete_encouragment(index)
      encouragements = db["encouragements"]
    await message.channel.send(encouragements)

  if msg.startswith("$list"):
    encouragements = []
    if "encouragements" in db.keys():
      encouragements = db["encouragements"]
    await message.channel.send(encouragements)
    
  if msg.startswith("$responding"):
    value = msg.split("$responding ",1)[1]

    if value.lower() == "true":
      db["responding"] = True
      await message.channel.send("Responding is on.")
    else:
      db["responding"] = False
      await message.channel.send("Responding is off.")

client.run(os.getenv("TOKEN"))

追加された最初のセクションは、starter_encouragements リストのすぐ下のコードです:

if "responding" not in db.keys():
  db["responding"] = True

データベース内に「responding」という名前のキーを新たに作成し、それを「True」に設定しています。ボットが悲しい言葉に応答すべきかどうかを決定するのに、これが使用されます。プログラムの動作が停止した後でも、データベースは保存されているので、データベースの中にないキーは新しく作るだけで済みます。

コードの次の新しい部分は if db["responding"]: で、悲しい言葉に応答するセクションを含んでいます。ボットは db["responding"] = True の時だけ、悲しい言葉に応答します。この値を更新する機能は、このセクションの後ろに記述されています。

次に、「$del」コマンドにボットを応答させるコードの後に、Discord メッセージとして送信される「$list」コマンドにボットを応答させる新しいコードがあります。

このセクションは、encouragements という名前で空リストを作成することから始まります。そしてもし、データベース内に「encouragements」キーが含まれていれば、たった今作成した空リストを、そのキーの値に置き換えます。

このセクションの最後で、ボットは励ましのリストを Discord メッセージとして送信しています。

次が最後の新しいセクションです。このコードはボットを「$responding」コマンドに応答させます。このコマンドは「true」または「false」のどちらか 1 つの引数を取ります。たとえば、「$responding true」という形で使用します。

このコードはまず、引数を value = msg.split("$responding ",1)[1] で取り出しています (上記の「$new」の場合と同じように、"$responding " の中のスペースに注意してください)。その下には、データベース内の「responding」キーを適切に設定し、Discord へ通知メッセージを送り返す if/else 文があります。引数が「true」以外の場合は、コードは「false」であると見なします。

ボットが継続的に動作するように設定する方法

ボットを Repl.it 内で実行してから、実行中のタブを閉じると、ボットはやがて停止してしまいます。

ところが、たとえウェブブラウザーを閉じた後でも、ボットが継続的に動作し続けられるようにする方法が 2 つあります。

最もシンプルな 1 つ目の方法は、Repl.it の有料プランで契約することです。 Hacker プランと呼ばれる安価な有料プランがあり、常時オンにできる repl を 5 つ利用可能です。

このプランにサインアップしたら、repl を開き上部にある名前をクリックします。次に、「always on」オプションを選択します。

もう少し複雑ですが、無料利用枠で、コードが動作し続けるようにする別の方法があります。Repl.it は、タブを閉じた後もウェブサーバーを動作させ続けてくれます。ただ、そのウェブサーバーさえも、使用しなければ 1 時間までしか動作しません。

Repl.it の公式ドキュメントには次のように記載されています:

Once deployed, the server will continue to run in the background, even after you close the browser tab. The server will stay awake and active until an hour after its last request, after which it will enter a sleeping stage. Sleeping repls will be woken up as soon as it receives another request; there is no need to re-run the repl. However, if you make changes to your server, you will need to restart the repl in order to see those changes reflected in the live version. (引用元)

(訳: サーバーは一度デプロイされると、ブラウザータブを閉じた後でも、バックグラウンド内で動作し続けます。このサーバーは、最後のリクエストから 1 時間後まで起動したままアクティブな状態を維持し、その後で休止状態に入ります。休止中の repl は、別のリクエストを受けるとすぐに起動されるので、repl を再実行する必要はありません。ただし、サーバーに変更を加えた場合は、ライブバージョンに変更が反映されていることを確認するために、repl を再起動する必要があります)

ボットを継続的に動作させ続けるには、Uptime Robot (https://uptimerobot.com/) と呼ばれる別の無料サービスを使用します。

Uptime Robot では、Repl.it 上のボットのウェブサーバーへの接続を、5 分ごとに確認する ping を設定できます。一定間隔で接続を確認することにより、ボットは休止状態に入ることが無くなり、動作し続けてくれます。

つまり、ボットを継続的に動作させるには、さらに以下の 2 つのことを行わなければなりません:

Repl.it 内でウェブサーバーを作成する
Uptime Robot でウェブサーバーへの接続を確認する ping を設定する。

Repl.it 内でウェブサーバーを作成する方法

ウェブサーバーの作成は思っているよりも簡単なことです。

その作成にあたり、keep_alive.py という名前の新しいファイルを、プロジェクト内で作成してください。

次に、新しいファイルに以下のコードを追加してください:

from flask import Flask
from threading import Thread

app = Flask('')

@app.route('/')
def home():
    return "Hello. I am alive!"

def run():
  app.run(host='0.0.0.0',port=8080)

def keep_alive():
    t = Thread(target=run)
    t.start()

このコード内では、Flask を使用してウェブサーバーを起動しています。サーバーは訪れる人へ、「Hello. I am alive.」を返します。サーバーは、ボットとは別のスレッドで動作します。残りのコードはボットとあまり関係がないので、そのすべてについての説明をここではしません。

ここで、このウェブサーバーを起動するボットが必要になります。

main.py の先頭に次の行を追加して、サーバーをインポートしてください。

from keep_alive import keep_alive

main.py を実行する際にウェブサーバーを起動するには、ボットを実行する直前の、最後から 2 番目の行に、次の行を追加してください。

keep_alive()

コードを追加してから Repl.it 上でボットを実行するときに、新しいウェブサーバーウィンドウが開きます。そこには、ウェブサーバーの URL が表示されます。次のセクションで使用できるように、この URL をコピーしてください。

Uptime Robot の設定方法

ここで、5 分ごとにサーバーへの接続を確認するために、Uptime Robot を設定する必要があります。

まずは https://uptimerobot.com/ で無料のアカウントを作成してください。

アカウントへログインしたら、「Add New Monitor」をクリックします。

新しいモニターに対し、Monitor Type は「HTTP(s)」を選択して、好きな名前をつけてください。それから、Repl.it のウェブサーバーの URL を貼り付けます。最後に、「Create Monitor」をクリックしてください。

やりました！これでボットは継続的に動作し、誰もが Repl.it 上でそれと対話できるようになりました。

結び

これで、クラウド内で Discord ボットを Python を使用して作成し、継続的に動作させる方法が理解できましたね。

discord.py ライブラリにできることは、まだまだたくさんあります。したがって、もし Discord ボットにさらに機能を追加したいならば、次のステップは discord.py の公式ドキュメントを調べてみることです。

GitHub プロジェクト用の優れた README ファイルの書き方

Manabu Matsumoto — Sun, 14 Aug 2022 23:30:00 +0000

原文: How to Write a Good README File for Your GitHub Project

GitHub を初めて知った時、私 (原著者) はそれがどういうものか、何ができるのかわかっていませんでした。ここだけの話、それがコードの置き場所で、すべての開発者が持つべきものだと言われるがままにアカウントを作成しました。

初心者だった私は、長い間そのアカウントで何もしませんでした。しかしその後、テクノロジーに興味を持ち、他の開発者をフォローし、GitHub 上にある彼らの作品をチェックし始めました。そして、彼らには共通点があることに気がついたのです。彼らはみな素晴らしいプロジェクトをもち、オープンソースに貢献しているとともに、彼らのプロジェクトには詳細な README ファイルが含まれていました。

こうして README についての関心が高まり、私のプロジェクトにも試しにそれを追加することにしました。正直に言うと、私は作法もわからないまま焦ってそれを追加しました。はっきり言って、それは全く優れたものではありませんでした。ここで実物を見ることができます。

しばらくはそのままでした。しかし、実践と学習を続けることで、このように多少は優れたドキュメントに変えることができました。この改善により、プロジェクトへのエンゲージメントが高まり、他の開発者の参加が促進されました。

優れた README は、GitHub 上に作品を置いている大勢の開発者の中であなたを際立たせるのに役立つということも特筆すべき点です。

この記事では、README ファイルがどういうものかとその書き方を学びます。では最初に、README ファイルとは何かを理解しましょう。

README ファイルとは何か？

簡単に言うと、README ファイルは、あなたのプロジェクトの詳しい説明をユーザーに提供するガイドです。

また、README はプロジェクトの使用方法に関するガイドラインを含むドキュメントであるとも言えます。通常は、プロジェクトのインストールおよび実行方法についての説明が含まれます。

開発者として、README であなたのプロジェクトについてのドキュメントを提供する方法を知っておくことは不可欠です。その理由を以下に挙げます:

README はプロジェクトに出会った人が最初に目にするファイルなので、ある程度簡潔に、とはいえ詳細なものにする必要があります。
他の数多くのプロジェクトから、あなたのプロジェクトを際立たせてくれます。もちろん、プロジェクト自体も優れたものであることが重要です。
プロジェクトが何をどのように提供する必要があるか、あなた自身が考えを集中させるのに役立ちます。
文書作成スキルを向上させます。フリードリヒ・ニーチェの格言によれば:

A good writer possesses not only his own spirit but also the spirit of his friends.

(訳: 優れた作家とは、彼自身の精神のみならず、仲間の精神もまた持ち合わせているものである)

プロジェクトに取り組む際、他の開発者にあなたのコードとその機能を理解してもらう必要があることを忘れないようにしましょう。そのために、コードとは別にガイドを添付しておくことが役に立ちます。

例えば、先ほどシェアした私の最初のプロジェクトの例には、優れた README がありません。そのため、プロジェクトが素晴らしい物だったとしても、リポジトリをクローンした後どうすれば良いのか初心者にとって理解しづらいものになっています。実はコンピューターウイルスである可能性すらあるかもしれません。

このような GitHub のプロジェクトでは、それがどんなに素晴らしいものであったとしても、優れた README がなければ、他の開発者は取り組んだり理解しようとはしないでしょう。

では、このプロジェクトを見てみましょう。ここでは、プロジェクトが何を行い、何を必要とするか、またプロジェクトを使用する場合やプロジェクトに貢献したい場合にどうやって始めたら良いかがわかります。

このように、うまく書かれた README は強力であり、プロジェクトを変えることができます。

それでは、優れた README の書き方に入りましょう。

優れた README の書き方 – 段階的なガイド

まず重要なことは、優れた README を作成する唯一の正しい方法というものはありません。ですが大きな誤りが一つあります。それは、README を全く含まないことです。

さまざまな README ファイルの研究と調査を行った結果、私が見つけたベストプラクティスがあります。それこそが私がシェアすることです。そして、私はいつも自分にこう言い聞かせています:

Every day is a learning day.

(訳: 日々精進)

つまり、あなたがキャリアを積む中で進歩し成長するにつれて、優れた README を作るものは何か、またどう改善するかについて、独自の考えを持つようになることでしょう。あなただけのユニークなガイドを思いつくかもしれません。

具体的な書き方に入る前に、もう一点、プロジェクトの README を書く際はプロジェクトに関する What、Why、How がわかるようにすることが重要です。

以下のような質問に沿って考えると書きやすいでしょう:

何が動機だったのか？
なぜこのプロジェクトを構築したのか？
このプロジェクトが解決する課題は何か？
何を学んだのか？
このプロジェクトの優れた点は何か？
プロジェクトに多くの機能がある場合は、「機能」セクションを追加して一覧を載せることを検討しましょう。

README に含めるもの

1. プロジェクトのタイトル

プロジェクトの名前です。1 文でプロジェクト全体を説明し、プロジェクトの主な目的や狙いが何か (What) を、人々に理解してもらいやすくします。

2. プロジェクトの説明

これは、多くの新米開発者が見落としてしまいがちな、プロジェクトの重要な構成要素です。

プロジェクトの説明は極めて重要な部分です。よく練られた説明は、他の開発者だけでなく、将来あなたの雇い主になる可能性のある人々にも、あなたの作品の魅力を伝えることができます。

README の説明の品質が、優れたプロジェクトか否かの差を付けることがよくあります。優れたプロジェクトは、以下のような内容を説明、紹介する場として README を活用します:

アプリケーションが何をするか、
使用した技術についてなぜそれを採用したか、
直面した困難について、また将来実装したいと考えている機能について。

3. 目次 (任意)

README がとても長い場合は、異なるセクションへ移動しやすくするために目次を追加することをお勧めします。そうすることで、読者がプロジェクト内を探索しやすくなります。

4. プロジェクトのインストールおよび実行方法

ユーザーがインストールしたり、「POS (販売時点情報管理)」のようなマシン上でローカル実行する必要があるプロジェクトに取り組んでいる場合は、プロジェクトのインストールに必要な手順と、もしあれば必要な依存関係も追加すべきです。

開発環境を設定して実行する方法の段階的な説明を提供するようにしてください。

5. プロジェクトの使用方法

ユーザー／コントリビューターがプロジェクトを使用できるように、手順や例を提供しましょう。そうすることで、問題に直面した場合にも対処しやすくなります。何をすべきか分からない時は常にここを参照すれば良いからです。

また、実行中のプロジェクトの例や、プロジェクト内で使用されている構造や設計方針を示すために、スクリーンショットなどの資料を追加して視覚的な補助資料として活用できます。

さらに、プロジェクトでパスワードまたはユーザー名などの認証が必要な場合には、このセクションに認証情報を含めるとよいでしょう。

6. クレジットを入れる

チームまたは組織としてプロジェクトに取り組んだ場合は、共同制作者／チームメンバーの一覧を載せるようにしましょう。その人たちの GitHub プロフィールやソーシャルメディアへのリンクも添えておくとよいでしょう。

また、プロジェクトの構築にあたってチュートリアルを参考にしたり、特定の資料を参照しており、それがユーザーにも役立つ可能性がある場合、それらへのリンクもここに含めるようにしましょう。

これは、あなたの感謝の気持ちを表明し、他の人がプロジェクトのコピーを直接入手しやすくする一つの方法です。

7. ライセンスの付与

ほとんどの README ファイルにおいて、ライセンスは最後の部分に置かれることが多いです。これは、他の開発者にプロジェクトを用いてできることとできないことを知らせるためのものです。

取り組んでいるプロジェクトの種類によって、さまざまなタイプのライセンスがあります。選んだライセンスがプロジェクトの得る貢献を決定します。

最も一般的なライセンスは GPL ライセンスで、これはコードを改変し、商用目的で利用することを他の人に許可します。ライセンスを選ぶ際に助けが必要な場合は、次のリンクをチェックしてください: https://choosealicense.com/

ここまで説明してきたことは、優れた README の最小要件です。では、以下のセクションを追加して、さらに人目を引きインタラクティブにすることも検討してみてください。

追加の README セクション

8. バッジ

バッジは必須ではありませんが、他の開発者にあなたが何を行っているかを伝えるシンプルな方法です。

このセクションを用意することで、重要なツールへリンクしやすくしたり、フォーク、コントリビューター、および未解決の問題の数などのような、プロジェクトのシンプルなステータスを表示するのに役に立ちます。

以下はバッジの活用方法の参考として、私のプロジェクトのスクリーンショットです:

このセクションの良い点は、自動的に更新されることです。

ではどこで入手すればいいでしょうか？ shields.io がホストしているバッジをチェックしてみてください。たくさんのバッジが用意されています。今は、何を表しているか全部は理解できないかもしれませんが、やがてわかるようになるでしょう。

9. プロジェクトに貢献する方法

これは、他の開発者に貢献してもらう必要があるオープンソースプロジェクトを開発している場合、最も役に立つものです。プロジェクトに貢献する方法を彼らに伝えるためのガイドラインを追加するとよいでしょう。

また、後の衝突を避けるためには、オープンソースプロジェクトのために適切なライセンスを選ぶことが重要です。コントリビューションガイドラインを追加することも、重要な役割を果たしてくれるでしょう。

最も一般的なガイドラインには、コントリビューター行動規範と貢献ガイドが含まれています。これらのドキュメントは、プロジェクトのためのルールを設定する際に、必要な支援を提供してくれます。

10. テストを追加する

もうひと頑張りして、アプリケーション用のテストを作成してみましょう。また、コード例と実行方法を備えるようにしてください。

これはプロジェクトが問題なく動作することをあなたが確信しており、信頼できるということを表すのに役に立ち、他の人々にも信頼を与えることができます。

補足事項

README を記述する際に注意する補足事項を以下にいくつか挙げます:

最新の状態を保つ - 必ず、ファイルを常に最新の状態にしておくことをお勧めします。変更がある場合は、必要に応じてファイルを更新してください。
言語を選択する - 私たちはさまざまな地域で生まれ育ち、異なる言語を話します。ですが、それはコードを自国語に翻訳する必要があることを意味してはいません。英語はグローバルに通用する言語であるため、英語で記述された README は機能してくれます。ターゲット層が英語に慣れていない場合は、翻訳ツールの使用も検討してください。

まとめ

これで、README ファイルを改善したり、初めての README ファイルを書き始めるために必要なすべてが揃いました。

あなたは次の、もしくは既存のプロジェクトにもインタラクティブで参考になるガイドを追加して、プロジェクトを際立たせることができるでしょう。

プロジェクトの README を自動的に生成できるツールも多数ありますが、自動化に移行する前に、まずは自分でやってみることが良い方法です。ツールをチェックしたい場合は、次のようなものがあります:

ここまでお読みくださいましてどうもありがとうございました。もしも記事を楽しんでいただき、それが役に立ったならば、他の開発者が彼らのプロジェクトを改善できるように記事をシェアしてください。

あなたが新しく作り上げた README ファイルを見ることができれば幸いです。以下のリンクのいずれかを通じてシェアしてください。

Twitter | YouTube | LinkedIn | GitHub でつながりましょう。

貴重なご意見をお聞かせください。率直なフィードバックをお待ちしております！

エンジョイコーディング ❤

Python で SQL データベースを作成して操作する方法

Manabu Matsumoto — Wed, 22 Jun 2022 23:30:00 +0000

原文: How to Create and Manipulate SQL Databases with Python

Python と SQL という 2 つの言語は、データアナリストにとって最も重要なものです。

この記事では、Python と SQL を結びつけるために知る必要があることについてすべてお伝えします。

リレーショナルデータベースから、機械学習パイプラインに直接データを取得したり、独自のデータベースの中に Python アプリケーションからデータを保存したり、あるいはあなたが思いつきそうな、他のあらゆるユースケースについて学習します。

一緒に学ぶ項目を以下に挙げます:

なぜ Python と SQL を一緒に使用する方法を学ぶのか？
Python の開発環境と MySQL サーバーの設定方法
Python で MySQL サーバーに接続する
新しいデータベースを作成する
テーブルとリレーションシップを作成する
テーブルにデータを追加する
データの読み取り
レコードを更新する
レコードを削除する
Python のリストからレコードを作成する
以上のことを将来にわたって実行できる、再利用可能な関数を作成する

非常に役に立つ素晴らしい内容がたくさんあります。さあ学習に入りましょう！

事前のお知らせ: このチュートリアルの中で使用されるすべてのコードを含む Jupyter Notebook のファイルを、こちらの GitHub リポジトリで入手できます。その内容に沿ってコーディングすることを強く推奨します！

このチュートリアルで使用されているデータベースと SQL コードは、以前に私が Towards Data Science 上で投稿した、Introduction to SQL (SQL 入門) という一連の記事からすべて引用しています。(記事を閲覧できない場合は、こちらから私 (原著者) に連絡していただければ、無料で閲覧できるリンクを送ることができます) 。

SQL とリレーショナルデータベースの背後にある概念について、あまりよく知らない場合は、前述の一連の記事をお勧めします。(もちろん、freeCodeCamp にも優れた資料がたくさんあります！)

なぜ Python と SQL を一緒に使用するのか？

データアナリストとデータサイエンティストにとって、Python には有利な点が多くあります。膨大なオープンソースライブラリによって、Python はデータアナリストにとって非常に便利なツールになっています。

データ解析向けの pandas、NumPy、Vaex や、データビジュアリゼーション (データ可視化) 向けの Matplotlib、seaborn、Bokeh、そして機械学習アプリケーション向けの TensorFlow、scikit-learn、PyTorch などがあります (まだまだたくさんあります) 。

その (比較的) やさしい学習曲線と用途の広さを思えば、Python が世界で最も急成長しているプログラミング言語のひとつであることも納得がいきます。

ではデータ解析に Python を用いるとして、次の質問をする価値があります - すべてのデータはどこからやってくるのでしょうか？

データセットには多種多様なソースがある一方で、多くの場合 - 特に企業活動のなかでは - データはリレーショナルデータベースの中に保存されています。
リレーショナルデータベースはきわめて効率的でパワフルであり、あらゆる種類のデータの create - 生成、 read - 読み取り、update - 更新、delete - 削除に広く使用されています。

最も広く使用されているリレーショナルデータベース管理システム (RDBMS) - Oracle、MySQL、Microsoft SQL Server、PostgreSQL、IBM DB2 - のすべては、Structured Query Language (構造化問い合わせ言語 - SQL) を使用して、データを取得し変更します。

各 RDBMS が、わずかに異なる SQL 風の言語を使用していることに注意してください。大抵の場合、ある RDBMS 向けに記述された SQL コードは、別の RDBMS 内では (通常はごくわずかな) 変更を加えない限り動作しません。しかし、概念、構造、操作はほとんど同じです。

これはつまり、RDBMS を扱っているデータアナリストにとって、SQL をしっかり理解していることが極めて重要であるということを意味します。Python と SQL を一緒に使用する方法を知っていると、データを扱う際にさらに有利です。

ここからは、その方法について詳しくお伝えします。

はじめに

事前に必要なものとそのインストール

このチュートリアルの内容に沿ってコーディングするためには、Python の開発環境を独自に設定する必要があります。

私は Anaconda を使用していますが、他にも多くの方法があります。さらにサポートが必要な場合は、「Pythonをインストールする方法」と google で検索してください。また、このチュートリアル用の Jupyter Notebook に沿ってコーディングする場合には、Binder が使用できます。

この記事では、無料であり業界内で広く用いられている、MySQL Community Server を使用します。Windows を使用しているならば、設定の際にこちらのガイドが役に立ちます。Mac と Linux ユーザー向けのガイドもあります。（ただし、linux のディストリビューションによって、設定方法が異なるかもしれません）。

以上の設定が済んだら、それらを相互につなげる必要があります。

そのためには、Python のライブラリである MySQL Connector をインストールしなければなりません。こちらの案内に従ってインストールするか、次の pip コマンドを使用してください:

pip install mysql-connector-python

また、pandas を使用するので、必ず同じようにインストールしておいてください。

pip install pandas

ライブラリのインポート

Python のあらゆるプロジェクトと同じで、まず最初にしたいことはライブラリのインポートです。

プロジェクトの最初に、使用するすべてのライブラリをインポートすることをお勧めします。そうすれば、コードを読んだりレビューする人が、何が起こるのかを大まかに知ることができるので、不意を打つようなことがなくなります。

このチュートリアルでは、MySQL Connector と pandas の 2 つのライブラリだけを使用します。

import mysql.connector
from mysql.connector import Error
import pandas as pd

Error 関数を個別にインポートしているので、それを自分で記述する関数のために簡単に利用できます。

MySQL サーバーに接続する

この時点で、自分のシステム上に MySQL Community Server が設定されていなければなりません。その次に、このサーバーへの接続を確立できる以下のコードを、Python で記述する必要があります。

def create_server_connection(host_name, user_name, user_password):
    connection = None
    try:
        connection = mysql.connector.connect(
            host=host_name,
            user=user_name,
            passwd=user_password
        )
        print("MySQL Database connection successful")
    except Error as err:
        print(f"Error: '{err}'")

    return connection

MySQL サーバーへ接続するための関数

再利用できる関数を、このようなコードで作成するのをお勧めします。そうすれば、その関数を何度も楽に使用できます。一度コードを記述してしまえば、それを今後のあらゆるプロジェクトでも再利用できるので、未来の自分も快適になります！

上記のコードで何が行われているのかを理解するために、行単位で見直していきましょう:

最初の行は関数名 (create_server_connection) と、関数が取る引数名 (host_name、user_name、および user_password) を定義しています。

多数の接続が開くことによってサーバーが混雑しないように、次の行で既存の接続を閉じます。

その次に、Python の try-except ブロックを使用して、起こり得るエラーを処理しています。はじめの部分は引数内でユーザーが指定する詳細情報を用いた mysql.connector.connect() メソッドを使用して、サーバーへの接続を試しています。接続に成功すると、関数がちょっとした成功メッセージを出力に表示してくれます。

ブロックの except の部分は、エラーが発生してしまうという残念な状況において、MySQL サーバーが返すエラーを出力に表示します。

最後に、もし接続に成功していれば、関数は connection オブジェクトを返します。

実務ではよく、関数の出力を変数に代入して使います。これが connection オブジェクトとなります。その後で、(cursor などの) 他のメソッドを connection オブジェクトに適用することで、別の便利なオブジェクトを作成できます。

connection = create_server_connection("localhost", "root", pw)

ここで、pw は MySQL サーバーのルートパスワードを文字列で含んでいる変数です。

これは次の成功メッセージを出力するはずです:

やりました!

新しいデータベースを作成する

接続を確立したので、次のステップではサーバー上に新しいデータベースを作成します。

このチュートリアルではこれを 1 度しか行いませんが、将来のプロジェクトで再利用できる、便利で優れた関数を手に入れるために、関数をもう 1 つ記述します。

def create_database(connection, query):
    cursor = connection.cursor()
    try:
        cursor.execute(query)
        print("Database created successfully")
    except Error as err:
        print(f"Error: '{err}'")

この関数は connection (connection オブジェクト) と query (次のステップで記述する SQL クエリ) の 2 つの引数を取ります。そして、接続を介してサーバー内でクエリを実行します。

connection オブジェクトに cursor メソッドを適用して、cursor オブジェクトを作成します (MySQL Connector はオブジェクト指向プログラミングパラダイムを使用しているので、親オブジェクトから特性を継承しているオブジェクトが多く存在します) 。

この cursor オブジェクトは、execute、executemany (このチュートリアル内でこれらを使用します) などのメソッドの他に、いくつかの便利なメソッドをもちます。

cursor オブジェクトが、MySQL サーバーのターミナルウィンドウ内で点滅しているカーソルへのアクセスを提供するものであると考えると、わかりやすいかもしれません。

これですね。

次に、データベースを作成するクエリを定義して関数を呼び出します:

このチュートリアルで使用するすべての SQL クエリは、私の Introduction to SQL tutorial series (SQL 入門チュートリアルシリーズ) の中で解説されており、すべてのコードは、こちらの GitHub リポジトリ内の関連する Jupyter Notebook の中で見つけることができるので、このチュートリアル内の SQL コードが、何を行うのかについての説明はいたしません。

とはいえ、これはおそらく考えられる最もシンプルな SQL クエリです。英語が読めるならば、何を行っているかはほぼ理解できます！

create_database 関数を、上記の引数を指定して実行することで、「school」という名前のデータベースがサーバー内に作成されます。

なぜこのデータベースは「school」と呼ばれるのでしょうか？このチュートリアル内で、本当は何を実装しようとしているのかについてより詳しく見るのに、今がちょうどいいタイミングかもしれません。

データベースについて

これがデータベースの実体関連図です。

先ほどご紹介したシリーズの中の例にならって、International Language School (国際語学校、ILS) - 法人顧客に専門的な語学レッスンを提供する架空の言語訓練校 - のためのデータベースを実装してみましょう。

この実体関連図 (Entity Relationship Diagram - ERD) は実体 (Teacher - 講師、Client - 法人顧客、Course - 講座、 Participant - 受講者) を配置し、それらの関係を定義します。

ERD とは何か、そしてそれを作成したり、データベースを設計したりする際に、何を考慮すべきなのかについてのすべての情報を、この記事の中で見つけることができます。

SQL のソースコード、データベース要件、およびデータベースに入るデータは、すべてこちらの GitHub リポジトリに含まれていますが、このチュートリアルを進めていくことでも、そのすべてを確認できます。

データベースに接続する

MySQL サーバー内にデータベースを作成したので、create_server_connection 関数を変更してこのデータベースに直接接続できるようにします。

1 つの MySQL サーバー上に複数のデータベースが存在する可能性がある (実際にはそれが一般的ですが) ことに注意し、私たちは常に、また自動的に、自らが関与するデータベースへ接続する必要があります。

データベースへの接続は次のようにして行うことができます:

def create_db_connection(host_name, user_name, user_password, db_name):
    connection = None
    try:
        connection = mysql.connector.connect(
            host=host_name,
            user=user_name,
            passwd=user_password,
            database=db_name
        )
        print("MySQL Database connection successful")
    except Error as err:
        print(f"Error: '{err}'")

    return connection

この関数は、引数 (データベースの名前) をもう 1 つ多く取って、それを connect() メソッドへ引数として渡していること以外は、create_server_connection 関数と全く同じものです。

クエリ実行関数を作成する

ここで (ひとまず) 最後に作ろうとしている関数は、クエリ実行関数という極めて重要なものです。これは、文字列として Python 内に保存されている SQL クエリを取り、それを cursor.execute() メソッドに渡して、サーバー上で実行します。

def execute_query(connection, query):
    cursor = connection.cursor()
    try:
        cursor.execute(query)
        connection.commit()
        print("Query successful")
    except Error as err:
        print(f"Error: '{err}'")

この関数は、connection.commit() メソッドを使用して、SQL クエリで詳細に記述されているコマンドが実行されているか確認していることを除けば、前の create_database 関数と全く同じです。

これが主力の関数になります。この関数を (create_db_connection と一緒に) 使用することで、テーブルを作成し、テーブル間の関係を設定し、データをテーブルに追加し、データベース内のレコードを更新または削除します。

SQL の専門家であれば、この関数を使用して、すべての複雑なコマンドとクエリを、Python のスクリプトから直接実行できるでしょう。これはデータを管理するためのとても強力なツールになってくれます。

テーブルを作成する

これで、サーバー内での SQL コマンドの実行と、データベースの構築を始める準備がすべて整いました。最初に行うことは、必要なテーブルの作成です。

では講師 (Teacher) のテーブルから始めましょう:

create_teacher_table = """
CREATE TABLE teacher (
  teacher_id INT PRIMARY KEY,
  first_name VARCHAR(40) NOT NULL,
  last_name VARCHAR(40) NOT NULL,
  language_1 VARCHAR(3) NOT NULL,
  language_2 VARCHAR(3),
  dob DATE,
  tax_id INT UNIQUE,
  phone_no VARCHAR(20)
  );
 """

connection = create_db_connection("localhost", "root", pw, db) # データベースに接続
execute_query(connection, create_teacher_table) # 定義したクエリを実行

まず最初に、適切な名前の変数へ SQL コマンド (こちらで詳しく解説されています) を代入します。

この場合、Python の複数行にわたる文字列に対する三連引用符表記を使用して、SQL クエリを保存してから、それを execute_query 関数へ渡して実行しています。

この複数行のフォーマットは、純粋に人間がコードを読むためのものであることに注意してください。もし SQL コマンドがこのように展開されていても、SQL も Python も「気にしません」。構文が正しい限り、両方の言語はそれを受け入れてくれるでしょう。

複数行のフォーマットを使用することは、コードを読む人 (たとえそれが将来のあなただけだとしても！) の利益のためではありますが、また一方で、コードをより読みやすく理解しやすいものにするのに非常に役立ちます。

同じことが SQL における演算子の大文字化についても当てはまります。これは幅広く使用されている慣習で強く推奨されますが、実際にコードを実行するソフトウェアは大文字と小文字を区別せず、「CREATE TABLE teacher」と「create table teacher」を同じコマンドとして扱います。

このコードを実行すると、成功メッセージが表示されます。また、MySQL サーバーのコマンドラインクライアント内で、テーブルが作成されているかを確認できます:

素晴らしい! では残りのテーブルを作成しましょう。

create_client_table = """
CREATE TABLE client (
  client_id INT PRIMARY KEY,
  client_name VARCHAR(40) NOT NULL,
  address VARCHAR(60) NOT NULL,
  industry VARCHAR(20)
);
 """

create_participant_table = """
CREATE TABLE participant (
  participant_id INT PRIMARY KEY,
  first_name VARCHAR(40) NOT NULL,
  last_name VARCHAR(40) NOT NULL,
  phone_no VARCHAR(20),
  client INT
);
"""

create_course_table = """
CREATE TABLE course (
  course_id INT PRIMARY KEY,
  course_name VARCHAR(40) NOT NULL,
  language VARCHAR(3) NOT NULL,
  level VARCHAR(2),
  course_length_weeks INT,
  start_date DATE,
  in_school BOOLEAN,
  teacher INT,
  client INT
);
"""


connection = create_db_connection("localhost", "root", pw, db)
execute_query(connection, create_client_table)
execute_query(connection, create_participant_table)
execute_query(connection, create_course_table)

これで 4 つの実体のために必要な、4 つのテーブルが作成できました。

ここで、テーブルの間の関係を定義し、さらに受講者と講座のテーブルの間の、多対多の関係を扱うために、もう 1 つテーブルを作成しなければなりません。 (詳細はこちらをご覧ください) 。

全く同じ方法でこれを行います:

alter_participant = """
ALTER TABLE participant
ADD FOREIGN KEY(client)
REFERENCES client(client_id)
ON DELETE SET NULL;
"""

alter_course = """
ALTER TABLE course
ADD FOREIGN KEY(teacher)
REFERENCES teacher(teacher_id)
ON DELETE SET NULL;
"""

alter_course_again = """
ALTER TABLE course
ADD FOREIGN KEY(client)
REFERENCES client(client_id)
ON DELETE SET NULL;
"""

create_takescourse_table = """
CREATE TABLE takes_course (
  participant_id INT,
  course_id INT,
  PRIMARY KEY(participant_id, course_id),
  FOREIGN KEY(participant_id) REFERENCES participant(participant_id) ON DELETE CASCADE,
  FOREIGN KEY(course_id) REFERENCES course(course_id) ON DELETE CASCADE
);
"""

connection = create_db_connection("localhost", "root", pw, db)
execute_query(connection, alter_participant)
execute_query(connection, alter_course)
execute_query(connection, alter_course_again)
execute_query(connection, create_takescourse_table)

これで、適切な制約、主キー (プライマリーキー) 、および外部キーの関係とともにテーブルが作成されました。

テーブルにデータを追加する

次のステップではテーブルにレコードを追加します。execute_query を再度使用して、用意した SQL コマンドをサーバーに与えます。では再び講師のテーブルから始めましょう。

pop_teacher = """
INSERT INTO teacher VALUES
(1,  'James', 'Smith', 'ENG', NULL, '1985-04-20', 12345, '+491774553676'),
(2, 'Stefanie',  'Martin',  'FRA', NULL,  '1970-02-17', 23456, '+491234567890'), 
(3, 'Steve', 'Wang',  'MAN', 'ENG', '1990-11-12', 34567, '+447840921333'),
(4, 'Friederike',  'Müller-Rossi', 'DEU', 'ITA', '1987-07-07',  45678, '+492345678901'),
(5, 'Isobel', 'Ivanova', 'RUS', 'ENG', '1963-05-30',  56789, '+491772635467'),
(6, 'Niamh', 'Murphy', 'ENG', 'IRI', '1995-09-08',  67890, '+491231231232');
"""

connection = create_db_connection("localhost", "root", pw, db)
execute_query(connection, pop_teacher)

これは機能するでしょうか？ MySQL コマンドラインクライアント内でもう一度確認してみましょう:

よさそうですね！

では残りのテーブルにデータを追加します。

pop_client = """
INSERT INTO client VALUES
(101, 'Big Business Federation', '123 Falschungstraße, 10999 Berlin', 'NGO'),
(102, 'eCommerce GmbH', '27 Ersatz Allee, 10317 Berlin', 'Retail'),
(103, 'AutoMaker AG',  '20 Künstlichstraße, 10023 Berlin', 'Auto'),
(104, 'Banko Bank',  '12 Betrugstraße, 12345 Berlin', 'Banking'),
(105, 'WeMoveIt GmbH', '138 Arglistweg, 10065 Berlin', 'Logistics');
"""

pop_participant = """
INSERT INTO participant VALUES
(101, 'Marina', 'Berg','491635558182', 101),
(102, 'Andrea', 'Duerr', '49159555740', 101),
(103, 'Philipp', 'Probst',  '49155555692', 102),
(104, 'René',  'Brandt',  '4916355546',  102),
(105, 'Susanne', 'Shuster', '49155555779', 102),
(106, 'Christian', 'Schreiner', '49162555375', 101),
(107, 'Harry', 'Kim', '49177555633', 101),
(108, 'Jan', 'Nowak', '49151555824', 101),
(109, 'Pablo', 'Garcia',  '49162555176', 101),
(110, 'Melanie', 'Dreschler', '49151555527', 103),
(111, 'Dieter', 'Durr',  '49178555311', 103),
(112, 'Max', 'Mustermann', '49152555195', 104),
(113, 'Maxine', 'Mustermann', '49177555355', 104),
(114, 'Heiko', 'Fleischer', '49155555581', 105);
"""

pop_course = """
INSERT INTO course VALUES
(12, 'English for Logistics', 'ENG', 'A1', 10, '2020-02-01', TRUE,  1, 105),
(13, 'Beginner English', 'ENG', 'A2', 40, '2019-11-12',  FALSE, 6, 101),
(14, 'Intermediate English', 'ENG', 'B2', 40, '2019-11-12', FALSE, 6, 101),
(15, 'Advanced English', 'ENG', 'C1', 40, '2019-11-12', FALSE, 6, 101),
(16, 'Mandarin für Autoindustrie', 'MAN', 'B1', 15, '2020-01-15', TRUE, 3, 103),
(17, 'Français intermédiaire', 'FRA', 'B1',  18, '2020-04-03', FALSE, 2, 101),
(18, 'Deutsch für Anfänger', 'DEU', 'A2', 8, '2020-02-14', TRUE, 4, 102),
(19, 'Intermediate English', 'ENG', 'B2', 10, '2020-03-29', FALSE, 1, 104),
(20, 'Fortgeschrittenes Russisch', 'RUS', 'C1',  4, '2020-04-08',  FALSE, 5, 103);
"""

pop_takescourse = """
INSERT INTO takes_course VALUES
(101, 15),
(101, 17),
(102, 17),
(103, 18),
(104, 18),
(105, 18),
(106, 13),
(107, 13),
(108, 13),
(109, 14),
(109, 15),
(110, 16),
(110, 20),
(111, 16),
(114, 12),
(112, 19),
(113, 19);
"""

connection = create_db_connection("localhost", "root", pw, db)
execute_query(connection, pop_client)
execute_query(connection, pop_participant)
execute_query(connection, pop_course)
execute_query(connection, pop_takescourse)

すばらしい！これで、Python のコマンドだけを使用して、MySQL の関係、制約、およびレコードを含むデータベースを、完全に作成しました。

データベースの作成について段階を追って理解しやすいように進めました。とはいえ、これまでの内容でそのすべてが 1 つの Python スクリプトだけで非常に簡単に記述でき、ターミナル内の 1 つのコマンドだけで実行できるということが確認できます。これは強力なものです。

データの読み取り

これで機能するデータベースができ、それを扱う仕事ができるようになりました。データアナリストとして、あなたは働いている組織内の既存のデータベースと関わることがあるかもしれません。既存のデータベースの外にデータを取り出す方法を知っていると、それを Python のデータパイプラインへ与えることができるようになるので、非常に役に立ちます。それこそが次に取り組もうとしていることです。

そのためには、もうひとつ関数が必要になります。今回は cursor.commit() ではなくて cursor.fetchall() を使用します。この関数を使用して、何も変更することなくデータベースからデータを読み取ります。

def read_query(connection, query):
    cursor = connection.cursor()
    result = None
    try:
        cursor.execute(query)
        result = cursor.fetchall()
        return result
    except Error as err:
        print(f"Error: '{err}'")

ここでもう一度、execute_query とよく似た方法でこれを実装します。この関数がどのように動作するのかを確認するために、シンプルなクエリを試してみましょう。

q1 = """
SELECT *
FROM teacher;
"""

connection = create_db_connection("localhost", "root", pw, db)
results = read_query(connection, q1)

for result in results:
  print(result)

まさに期待していた結果が得られました。次のような講座と法人顧客のテーブルの結合 (JOIN) を含む、より複雑なクエリでもこの関数は機能してくれます。

q5 = """
SELECT course.course_id, course.course_name, course.language, client.client_name, client.address
FROM course
JOIN client
ON course.client = client.client_id
WHERE course.in_school = FALSE;
"""

connection = create_db_connection("localhost", "root", pw, db)
results = read_query(connection, q5)

for result in results:
  print(result)

とてもいいですね。

Python におけるデータパイプラインとワークフローでは、さらに役に立つようにするため、または操作するための準備を行うために、読み取ったデータを異なる形式で取得したいと考えることがあるかもしれません。

それができるようになる方法の例をいくつか見ていくことにしましょう。

出力をリストの形式に変換する

# 空リストで初期化します
from_db = []

# results をループ処理してデータをリストの中に追加します

# タプルのリストを返します
for result in results:
  result = result
  from_db.append(result)

出力を 2 次元リストの形式に変換する

# 2 次元リストを返します
from_db = []

for result in results:
  result = list(result)
  from_db.append(result)

出力を pandas の DataFrame 形式に変換する

Python を使用するデータアナリストにとって、pandas は非のうちどころがなくて信頼できる昔からの友達です。データベースの出力をデータフレームに変換するのは非常に簡単で、さらにそこから無限の可能性が得られます！

# 2 次元リストを返し、さらにそこから pandas のデータフレームを作成します
from_db = []

for result in results:
  result = list(result)
  from_db.append(result)


columns = ["course_id", "course_name", "language", "client_name", "address"]
df = pd.DataFrame(from_db, columns=columns)

うまくいけば、ここで目の前に広がっている可能性を見ることができるでしょう。たった数行のコードで、処理できるすべてのデータを、リレーショナルデータベースがあるところから簡単に取り出すことができ、さらにそれを最先端のデータ分析パイプラインの中に取り込むことができます。これは本当に役に立つものです。

レコードを更新する

データベースを管理している時に、既存のレコードの変更が必要な場合があります。このセクションではその方法について見ていきましょう。

例えば ILS が、既存の法人顧客のひとつである Big Business Federation から、オフィスを 23 Fingiertweg, 14534 Berlin に移転します、という通知を受けたとしましょう。この場合、データベースの管理者 (私たちのことです！) は、いくつか変更を行う必要があります。

幸い、SQL の UPDATE 文と一緒に execute_query 関数を使用することで、それができるようになります。

update = """
UPDATE client 
SET address = '23 Fingiertweg, 14534 Berlin' 
WHERE client_id = 101;
"""

connection = create_db_connection("localhost", "root", pw, db)
execute_query(connection, update)

ここでは、WHERE 句が非常に重要である点に注意してください。 WHERE 句無しでこのクエリを実行した場合、法人顧客テーブル内の全レコードのすべての住所が、23 Fingiertweg に更新されます。それは私たちが望んでいることではありません。

また、UPDATE クエリの中で「WHERE client_id = 101」を使用していることにも注意してください。「WHERE client_name = 'Big Business Federation'」または「WHERE address = '123 Falschungstraße, 10999 Berlin'」も使用できますし、さらに「WHERE address LIKE '%Falschung%'」を使用することも可能でした。

ここで重要なことは、WHERE 句を使用すると、更新しようとしているひとつ (または複数) のレコードを一意的に特定できるということです。

レコードを削除する

DELETE 文とともに execute_query 関数を使用することでレコードを削除できます。

リレーショナルデータベースで SQL を使用する場合は、DELETE 演算子の使用には注意が必要です。Windows とは違い、「削除してもよろしいでしょうか？」という警告ポップアップはありませんし、ごみ箱もありません。一度何かを削除してしまうと、本当になくなってしまうのです。

とはいえ、本当に物事を削除する必要がある時もあります。それでは、コーステーブルからコースを 1 つ削除して、その方法を見てみましょう。

まずはじめに、どういったコースがあるのかを思い出してみましょう。

仮に、20 番のコース「Fortgeschrittenes Russisch」(これは「上級ロシア語」という意味です) がもうすぐ廃止になるので、それをデータベースから削除する必要があるとしましょう。

ここまで来れば、それを行う方法について驚かされることは全くないでしょう - SQL コマンドを文字列として保存し、それを主力の execute_query 関数に渡します。

delete_course = """
DELETE FROM course 
WHERE course_id = 20;
"""

connection = create_db_connection("localhost", "root", pw, db)
execute_query(connection, delete_course)

意図した結果となったか確認してみましょう:

期待していた通りに、「上級ロシア語」はなくなりました。

この方法は DROP COLUMN コマンドを使用して列全体を削除したり、DROP TABLE コマンドを使用してテーブル全体を削除する場合にも機能しますが、このチュートリアル内ではそれらは扱いません。

ですが、思い切ってそれらを試してみてください - 架空の学校用のデータベースから列やテーブルを削除してもかまいません。本番環境を手掛ける前にこれらのコマンドに慣れておくことをお勧めします。

おぉ、CRUD です

この時点で、永続的なデータ記憶装置の 4 つの主な操作を完了させることができるようになりました。

学習した操作を以下に挙げます:

生成 (Create) - 全く新しいデータベース、テーブル、レコードを生成する
読み取り (Read) - データベースからデータを取り出し、複数の形式でそのデータを保存する
更新 (Update) - データベース内の既存のレコードに変更を加える
削除 (Delete) - 不要になったレコードを削除する

これらは途方もなく便利で、実行可能なものです。

ここで学習を終える前に、もう 1 つとても便利なスキルを学びます。

リストからレコードを作成する

テーブルを追加する際に、execute_query 関数内で SQL の INSERT コマンドを使用して、データベースの中にレコードを書き込めることを確認しました。

私たちが SQL データベースを操作するのに Python を使用していることを考慮すると、Python の (リストなどの) データ構造を使用して、データベースの中に直接レコードを挿入できると便利です。

これは例えば、Python で記述したソーシャルメディアアプリ上のユーザーの活動履歴を保存したい場合、または作成した Wiki の中にユーザーからの入力を保存したい場合に役に立ちます。これについては考えられる限り多くの、実行できる用途があります。

この方法は、データベース全体を破損または破壊さえする可能性のある、SQL インジェクション攻撃を防ぐのに役に立つので、データベースがいつでもユーザーに公開されている場合にはより安全です。

ではこれを行うために、これまでに使用していたより単純な execute() メソッドの代わりに、executemany() メソッドを使用する関数を記述しましょう。

def execute_list_query(connection, sql, val):
    cursor = connection.cursor()
    try:
        cursor.executemany(sql, val)
        connection.commit()
        print("Query successful")
    except Error as err:
        print(f"Error: '{err}'")

これで関数ができたので、SQL コマンド ('sql') と、データベースの中に入れようとしている値を含むリスト ('val') を定義する必要があります。この値は、タプルのリストとして保存されなければなりません。これは Python においてデータを保存するのに広く定着している方法です。

では次のようなコードを記述して、新しい 2 人の講師をデータベースに追加します:

sql = '''
    INSERT INTO teacher (teacher_id, first_name, last_name, language_1, language_2, dob, tax_id, phone_no) 
    VALUES (%s, %s, %s, %s, %s, %s, %s, %s)
    '''
    
val = [
    (7, 'Hank', 'Dodson', 'ENG', None, '1991-12-23', 11111, '+491772345678'), 
    (8, 'Sue', 'Perkins', 'MAN', 'ENG', '1976-02-02', 22222, '+491443456432')
]

'sql' コードの中で、値のプレースホルダーとして '%s' を使用していることに注意してください。 Python の文字列に対する '%s' プレースホルダーとの類似はただの偶然です (そして実のところ、非常に紛らわしいです) 。Python の MySQL Connector では (文字列、整数、日付などの) すべてのデータ型に '%s' を使用します。

Python で '%d' プレースホルダーを整数に対して使用することに慣れてしまっているために、そうしようとして混乱してしまっている人からの数多くの質問を、Stackoverflow で見ることができます。'%d' は、ここでは機能しません - 値を追加しようとする列ごとに '%s' を使用する必要があります。

その後で、executemany 関数は 'val' リスト内の各タプルを取得し、プレースホルダーの代わりにその列に関連する値を挿入し、リストの中に含まれている各タプルに対して SQL コマンドを実行します。

これは適切にフォーマットしてさえいれば、複数行のデータに対して実行できます。この例では、説明のために新しい講師を 2 人だけ追加しますが、原則として、必要な数を追加できます。

では先に進んで、このクエリを実行してデータベースに講師を追加しましょう。

connection = create_db_connection("localhost", "root", pw, db)
execute_list_query(connection, sql, val)

ILS へようこそ、Hank さんと Sue さん！

これはもう 1 つの非常に便利な関数で、Python スクリプトやアプリケーション内で生み出されたデータを取得して、それらをデータベースの中に直接入れることができます。

結論

このチュートリアルでは多くの話題を取り扱いました。

Python と MySQL Connector を使用して、全く新しいデータベースを MySQL サーバー内に作成し、そのデータベースの中にテーブルを作成し、それらのテーブルの間の関係を定義し、テーブルにデータを追加する方法を学びました。

データベース内のデータを生成し、読み取り、更新し、削除する方法を取り上げました。

既存のデータベースからデータを取り出し、それらを pandas の DataFrame に投入し、分析の準備を整え、PyData スタックによって提供されるすべての可能性を活用してさらに作業する方法を見てきました。

逆に、Python のスクリプトとアプリケーションによって生み出されたデータを取得し、そのデータを後の検索や操作のために安全に保存できるデータベースの中に書き込む方法についても学習しました。

Python と SQL を一緒に使用して、データをより効率的に操作できる方法を調べるために、このチュートリアルが役に立てたならば幸いです！

もし私のプロジェクトや仕事をさらに見てみたいならば、craigdoesdata.de にある私のウェブサイトを訪問してください。このチュートリアルに関するフィードバックがあれば、直接私までご連絡ください 。すべてのフィードバックを温かくお迎えいたします！

Python の For ループ - For i in Range の使用例

Manabu Matsumoto — Sun, 15 May 2022 23:30:00 +0000

原文: Python For Loop - For i in Range Example

ループはあらゆるプログラミング言語の主要な制御構造のひとつで、Python においても例外ではありません。

この記事では、for ループを Python の range() 関数とともに使用する例をいくつか見ていきましょう。

Python の For ループ

for ループは、一組の値についてコードの一部を繰り返し実行します。

Python の公式ドキュメントで述べられているように、Python における for ループの動作は、JavaScript や C 言語などにおける動作と少し異なります。

for ループはイテレータ変数に、与えられたリスト、配列、文字列などの各値を設定し、イテレータ変数のそれぞれの値について for ループのボディ内のコードを繰り返し実行します。

以下の例では、for ループを使用して配列内のそれぞれの数値を出力に表示します。

# for ループの例
for i in [1, 2, 3, 4]:
    print(i, end=", ") # 1, 2, 3, 4, を出力に表示

さらに、より複雑なロジックを for ループのボディに加えることもできます。次の例では、イテレータ変数の値に応じて簡単な計算を行い、その結果を出力に表示します。

# より複雑な例
for i in [1, 3, 5, 7, 9]:
    x = i**2 - (i-1)*(i+1)
    print(x, end=", ") # 1, 1, 1, 1, 1, を出力に表示

for ループに連続した値の配列を使用する場合は、配列の中身をすべて記述する代わりに、Python の range() 関数を使用できます。

Python の Range 関数

range() 関数は、その引数に基づいた整数列を返します。range() 関数についての詳細な情報は、Python の公式ドキュメントを参照してください。

range(stop)
range(start, stop[, step])

start 引数は、整数列の最初の値です。range() がただ 1 つの引数とともに呼び出される場合は、Python は start = 0 であると見なします。

stop 引数は、整数列の上限値です。重要なことですが、この上限値は整数列には含まれないことを理解しておきましょう。

以下の例では、デフォルトの値である 0 からスタートし、5 より小さい整数で構成される整数列が得られます。

# 1 つの引数での例
for i in range(5):
    print(i, end=", ") # 0, 1, 2, 3, 4, を出力に表示

次の例では、start = -1 を設定し、同じく 5 より小さい整数で構成するようにしています。

# 2 つの引数での例
for i in range(-1, 5):
    print(i, end=", ") # -1, 0, 1, 2, 3, 4, を出力に表示

オプションの step の値は、整数列の値の間の増加分を制御します。デフォルトの値は step = 1 です。

最後の例では、-1 から 5 までの整数列を使用し、step = 2 に設定しています。

# 3 つの引数での例
for i in range(-1, 5, 2):
    print(i, end=", ") # -1, 1, 3, を出力に表示

まとめ

この記事では、Python の for ループと range() 関数について説明しました。

for ループは、リスト、配列、文字列、または range() 内のすべての値について、コードのブロックを繰り返し実行します。

range() を使用することにより、for ループをシンプルに記述できます。range() の stop の値は必ず指定する必要があり、また range() の start の値と、整数の間の step の値は変更できます。

Python における空リストのチュートリアル – Python で空リストを作成する方法とは

Manabu Matsumoto — Sun, 08 May 2022 23:30:00 +0000

原文: Python Empty List Tutorial – How to Create an Empty List in Python

Python で、空リストを効率的に作成する方法を学びたいと思われているならば、この記事がお役に立てるでしょう。

ここでは以下の内容について学べます:

角括弧 [] を使用して空リストを作成する方法。
list() を使用して空リストを作成する方法。
この 2 つの方法のユースケース。
それらの効率について (片方はもう一方の方法よりも高速です！)。この記事では、timeit モジュールを使用して効率を比較します。

さあはじめましょう！✨

🔹角括弧を使用して空リストを作成する

空の角括弧のペアを使用して、次のように空リストを作成できます:

💡ヒント: 空リストを変数に代入して、その変数を後のプログラムで使用するようにしています。

これを例えば次のように記述します:

num = []

こちらで確認できるように、空リストの長さは 0 です:

>>> num = []
>>> len(num)
0

空リストは偽値なので、ブール値コンテキストにおいて False と評価されます:

>>> num = []
>>> bool(num)
False

空リストに要素を追加する

append() メソッドと insert() メソッドを使用して、空リストに要素を追加できます:

append() はリストの末尾に要素を追加します。
insert() はリストの特定のインデックスを選び、そこに要素を追加します。

リストは空であるかどうかに応じて、真値か偽値のどちらかに評価されるため、次のように条件文内で使用できます:

if num:
	print("This list is not empty")
else:
	print("This list is empty")

このコードの実行結果は次のようになります:

This list is empty

リストが空なので、False と評価されていますね。

一般に:

リストが空でなければ、True と評価され、上記の例では if 節が実行されます。
リストが空であれば、False と評価され、上記の例では else 節が実行されます。

例:

以下の例では空リストを作成し、それを変数 num に代入しています。次に for ループを使用して、最初は空だったリストに整数列の要素を追加します:

>>> num = []
>>> for i in range(3, 15, 2):
	num.append(i)

変数の値をチェックして、正常に要素が追加され、リストが空ではなくなったことを確認します:

>>> num
[3, 5, 7, 9, 11, 13]

💡ヒント: 空リストに最初の要素を加える際、通常は append() を使用しますが、insert() メソッドをインデックス 0 と一緒に呼び出すことでも、この要素を加えられます:

>>> num = []
>>> num.insert(0, 1.5) # 浮動小数点数の 1.5 をインデックス 0 に追加
>>> num
[1.5]

🔸list() コンストラクタを使用して空リストを作成する

別の方法として、新しいリストオブジェクトを作成する型コンストラクタの list() を使用することで、空のリストを作成できます。

Python の公式ドキュメントでは次のように説明されています:

If no argument is given, the constructor creates a new empty list, [].

(訳: もし引数が与えられなければ、コンストラクタは新しい空リスト [] を作成します。)

💡ヒント: これにより、新しいリストオブジェクトがメモリ内に作成され、ここでは list() に引数を渡さなかったので空リストが作成されます。

これを例えば次のように記述します:

num = list()

こちらで確認できるように、空リストの長さは 0 です:

>>> num = list()
>>> len(num)
0

また、空リストは偽値です (ブール値コンテキストでは False と評価されます):

>>> num = list()
>>> bool(num)
False

例:

この空リストは完全にリストとして機能するので、要素を加えることができます:

>>> num = list()
>>> for i in range(3, 15, 2):
	num.append(i)

こちらで確認できるように、上記のコードを実行すると空ではないリストが得られます:

>>> num
[3, 5, 7, 9, 11, 13]

🔹ユースケース

通常、list() は文字列、辞書 (dictionary)、タプル (tuple) といった、既存のイテラブルからリストを作成するのに使用されます。
Python で空リストを作成するのに、角括弧 [] がよく使用されますが、それは構文がより簡潔で高速だからです。

🔸効率性

ちょっと待ってください！私はたった今 [] は list() よりも高速であるとお伝えしましたね...

では速さはどれくらいでしょうか？

timeit モジュールを使用してこれらの時間効率をチェックしてみましょう。

このモジュールを Python のプログラム内で使用するには、モジュールをインポートする必要があります:

>>> import timeit

具体的には、次の構文を用いて呼び出せる、このモジュールの timeit 関数を使用します:

💡ヒント: テストしたいコードを何回も繰り返し実行することで、その瞬間に実行される、他の処理などの外部要因によって起こりうる時間差を減らしています。こうすることで、比較されるテストの結果がより信頼できるものになります。

🚦では位置について ... 用意 ... ドン！テストコードとその実行結果についてこれから解説します:

まずは、モジュールをインポートします。

>>> import timeit

次に各構文のテストを開始します。

`[]` のテスト:

>>> timeit.timeit('[]', number=10**4)
0.0008467000000109692

`list()` のテスト:

>>> timeit.timeit('list()', number=10**4)
0.002867799999989984

💡ヒント: 実行時間を計ろうとしているコードは、シングルクォーテーション '' またはダブルクォーテーション "" で囲む必要があるということに注意してください。timeit 関数が返す計測時間は秒で表されます。

2 つの結果を比較してみましょう:

[]: 0.0008467000000109692
list(): 0.002867799999989984

[] は list() よりもかなり速いことが確認できますね。このテストではおよそ 0.002 秒の違いがありました:

>>> 0.002867799999989984 - 0.0008467000000109692
0.0020210999999790147

ここで次のような疑問をお持ちになることでしょう: 全く同じ処理を行っているのに、なぜ list() は [] ほど効率的ではないのでしょうか？

そうですね... list() がより遅いのは、関数の名前を検索し、呼び出してから、メモリ内にリストオブジェクトを作成する必要があるからです。それに対して、[] はメモリ内にリストを作成するためにそれほど多くの中間ステップを必要としない、「ショートカット」のようなものです。

この時間差はプログラムの性能にあまり影響を及ぼしませんが、どちらがより効率的であるかを、また背後でどのように動作しているのかを知っておくと便利です。

🔹まとめ

空の角括弧のペア [] を使用して、もしくは引数が渡されない場合に空リストを作成する組み込み関数の型コンストラクタ list() を使用して、空リストを作成できるようになりましたね。

角括弧 [] は、空リストを高速に、より簡潔に作成できるので、Python ではよく用いられます。

この記事があなたのお役に立ち、気に入っていただければ幸いです。これで、Python のプロジェクト内で空リストを作成できるようになりましたね。もしよろしければ私 (原著者) のオンライン講座をチェックしてみてください。Twitter のフォローもよろしくお願いします。⭐️

もしリストについてさらに深く掘り下げたい場合は、以下の記事も気に入っていただけるかもしれません:

Python の剰余演算子 - Python における % 記号の意味するものとは？ (解決済み)

Manabu Matsumoto — Wed, 04 May 2022 23:30:00 +0000

原文: The Python Modulo Operator - What Does the % Symbol Mean in Python? (Solved)

% 記号を見た時に、それが「パーセント」であると思われるかもしれませんが、Python や他の多くのプログラミング言語では、% 記号は違った意味をもちます。

Python において % 記号は剰余演算子と呼ばれています。この演算子は、左辺の項を右辺の項で除算した余りを返します。割り算の問題の余りを得るのに使用されます。

剰余演算子は +, -, /, *, **, // とともに算術演算子と見なされます。

基本的な構文は次のようになります:

a % b

上の例では、a を b で割って、その余りを返します。今度は数値を使用した例を見てみましょう。

7 % 2

上の例の答えは 1 です。2 は 7 に 3 回収まり、1 が残ります。

以下の図は 7 / 2 と 7 % 2 を視覚的に表したものです ("R" は "remainder (余り)" の略です)。右側のひとつのロゴ (緑色の矢印で指してあります) が割り算の問題の余りです。これが 7 % 2 の答えでもあります。

こちらに別の例を示します:

3 % 4

この例の答えは 3 になります。4 は 3 に一度も収まらないので、元の 3 が余ります。ここで何が起こっているのかを以下の図に示します。剰余演算子は割り算を行ってからその余りを返すということを忘れないようにしましょう。ここでの余りは 3 です。

剰余演算子の使用例

剰余演算子のよくある使い方のひとつは、偶数または奇数の判定です。以下のコードは、剰余演算子を使用して 0 から 10 の間の奇数をすべて表示します。

for number in range(1, 10):
    if(number % 2 != 0):
        print(number)

実行結果:

Python における改行と、print 関数で改行させずに出力する方法

Manabu Matsumoto — Sun, 01 May 2022 23:30:00 +0000

原文: Python New Line and How to Python Print Without a Newline

ようこそ! Python の改行文字は、行の終わりと新しい行の始まりを示すのに使用されます。コンソールに出力を表示したり、ファイルを扱おうとする場合には、改行文字の使用方法について知ることが非常に重要です。

この記事では、以下の内容を学ぶことができます:

Python で改行文字を識別する方法
文字列内および print 文の中での改行文字の使用方法
文字列の最後に改行文字を追加させずに print 文を記述する方法

さあはじめましょう！ ✨

🔹 改行文字とは

Python での改行文字がこちらです:

改行文字は以下の 2 つの文字でできています:

バックスラッシュ (訳注: 日本語フォントでは半角の￥記号として表示される場合があります) 。
文字 n 。

文字列内に改行文字がある場合は、それは現在の行がそこで終わり、その直後に新しい行が始まることを意味します:

改行文字は f-string (フォーマット済み文字列) 内でも使用できます:

>>> print(f"Hello\nWorld!")

🔸 print 文内の改行文字

デフォルトでは、print 文は文字列の最後に「こっそり」改行文字を加えます。

このようにして:

Python の公式ドキュメントに従って改行文字が追加されます。

Python に備わっている print 関数の end パラメーターのデフォルト値は \n なので、改行文字が文字列にアペンドされています。

💡 ヒント: アペンド (append) は「末尾に付加する」を意味します。

関数の定義はこちらです:

end の値が \n なので、それが文字列の末尾に付加される点に注目してください。

print 文を 1 つだけ使用する場合は、出力に 1 行しか表示されないため、このことに気づくことができません。

ですが、いくつかの print 文を相次いで Python のスクリプト内で使用した場合には:

それぞれの行の末尾に \n が「こっそり」付加されているので、出力される文字列は別々の行に表示されます:

🔹 改行せずに出力を表示する方法

print 関数の end パラメーターの値をカスタマイズすることで、このデフォルトの挙動を変えられます。

例として、デフォルトの値を使用する場合は:

次のように出力が 2 行で表示されるのが確認できます:

ですが、次のように end の値をカスタマイズして、" " に設定した場合は、

文字列の末尾に改行文字の \n ではなくスペースが付加されるので、2 つの print 文の出力は 1 行で表示されます:

このことを利用して、次の例のように一連の値を 1 行で表示できます:

出力は次のように表示されます:

💡 ヒント: 条件文を加えて、最後の数にコンマが付かないようにしてあります。

同様に、次のようにしてイテラブル (訳注: for 文で繰り返し可能なオブジェクト) のすべての値を、同じ行内に表示するのにも使用できます:

出力は次のように表示されます:

🔸 ファイル内の改行文字

改行文字 \n はファイル内にも存在しますが、隠されています。テキストファイルの中に改行があるとき、そこには改行文字 \n が挿入されています。

次のように .readlines() でファイルを読み込むことで、これをチェックできます:

with open("names.txt", "r") as f:
    print(f.readlines())

出力は次のように表示されます:

ご覧の通り、テキストファイルの最初の 3 行は、行の終わりが改行文字 \n になっており、「こっそり」改行してくれています。
💡 ヒント: ファイルの最後の行だけは改行文字で終わっていないことに注目してください。

🔹 まとめ

Python の改行文字は \n です。改行文字はテキストの行の終わりを示すのに使用されます。
end = を使用することで、改行させずに文字列を出力に表示できます。ここで、は行を分けるために使用される文字です。

この記事があなたのお役に立ち、気に入ってくだされば幸いです。 これで、Python で改行文字を扱うことができるようになりましたね。

よろしければ私 (原著者) のオンライン講座をチェックしてみてください。Twitter のフォローもよろしくお願いします。 ⭐️

優れた技術講座の作り方: freeCodeCamp 動画講座作成ガイドライン

Manabu Matsumoto — Mon, 18 Apr 2022 23:38:00 +0000

原文: How to Create a Great Technical Course

(翻案・編集: Yoko Matsuda)

この記事では、優れた技術講座動画の作り方を学びます。

私は freeCodeCamp.org の YouTube チャンネル (英語版) を運営しています。freeCodeCamp.org の YouTube チャンネルでは、さまざまなコントリビューターによって作成された技術・プログラミングに関する講座の動画を投稿しています。多くの場合、この記事のガイドラインに沿った動画が freeCodeCamp チャンネルに適しています。

技術的な YouTube 動画講座を設計する方法

トピックの選択

あなたの講座に適したトピックを選ぶことが重要です。あなたが上手に教えられると思うトピックを選びましょう。

トピックについて豊富な経験があるとベストですが、事前の経験が必須というわけではありません。トピックについての知識が十分でないなら、そのトピックについてしっかり教えられるように多くのリサーチを行う必要があります。

また、人気のあるトピックについての講座は人気のないトピックよりも多く視聴される傾向にあります。たとえ人気のないトピックの講座の方が優れた講座であってもです。

トピックを選ぶ上で人気だけが唯一の基準ではないものの、一つの判断要素として役立ちます。人気のあるトピックを見つけるには、Google Trends を利用する、YouTube で検索して他のチャンネルで最も多く視聴されているトピックを調べるなどの方法があります。

freeCodeCamp チャンネルでは、比較的マイナーなトピックも含め、幅広い種類の講座を投稿しています。また、90 分から 24 時間の長さの包括的な講座を投稿しています。短い動画に適したトピックは freeCodeCamp チャンネルには適さない可能性が高いです。

freeCodeCamp チャンネルで投稿している動画には、大きく分けて下記 2 つのタイプがありますが、両方の要素を持つ場合もあります。

ある技術・プログラミング言語・フレームワークなどについての総合講座
例:
現実的、実用的なプロジェクトの開発についての講座
例:

講座のタイトルとサムネイルの作成

講座のタイトルとサムネイルはとても重要です。

freeCodeCamp チャンネルで講座動画を公開する場合、タイトルとサムネイルは freeCodeCamp 側で作成します。その場合もご意見、ご提案は歓迎します。

講座を作成する前にタイトルを決めると良いでしょう。そうすることで、講座のトピックに集中しやすくなります。トピックにフォーカスした講座は視聴者にとっても理解しやすいものになります。

ほとんどの場合、長くあいまいなタイトルよりも、視聴者が学ぶ内容を明確に伝える簡潔なタイトルの講座の方がはるかに優れたパフォーマンスを発揮します。

タイトルには検索キーワードとなる語をできるだけ先頭近くに含めると良いでしょう。視聴者はプログラミング言語名を目に留めたり、検索したりする傾向があります。そのため、特定のプロジェクトを作成する内容の講座の場合、プログラミング言語の名前をプロジェクトのタイトルより前に配置すると良いでしょう。

また、視聴者は「チュートリアル」や「講座」といった用語を含めて検索することが多いため、タイトルにこれらを追加することも役に立ちます。

良いタイトルの例:

「HTML Full Course - Build a Website Tutorial」(HTML 完全講座 - ウェブサイト制作チュートリアル)
「Native Android App Tutorial: WhatsApp Clone」(Android ネイティブアプリのチュートリアル: WhatsApp クローンの作成)
「OpenGL Course - Create 3D and 2D Graphics With C++」(OpenGL 講座 - C++ で作る 3D & 2D グラフィックス)

悪いタイトルの例:

「How to build a social media app with Python (Django) - Setting up the project」(ソーシャルメディアアプリを Python (Django) で作成する方法 - プロジェクトのセットアップ)
「Creating a Flappy bird game for an Android phone」(Flappy bird ゲームを Android スマートフォン向けに作成)
「Number Systems」(記数法)

視聴者層を見極める

視聴者を念頭に置いてください。あなたの講座のターゲットは、初心者、中級者、上級者のどの視聴者でしょうか？

タイトルと講座内容の両方においてターゲット層をはっきりさせましょう。

講座全体の設計

講座は導入部から開始します。導入部でははっきりと簡潔に、学習者にとってその講座が重要である理由を伝えるようにしましょう。

その講座を見るべき理由と、何が学べるのかが、視聴者にすぐ分かることが重要です。

導入部は短くし、できるだけ速やかに実際の講座内容に入ることも重要です。視聴者が目的としている情報を教える前に時間を長く取りすぎると、視聴者が引き返して別の講座を選ぶリスクが高まります。

導入部の長さについて厳密なルールはありませんが、動画の最初の 10 秒で講座の概要が説明されていると良いでしょう。

講座を設計する際には、印象的でクリエイティブな例と、必要に応じて図表も用いるようにしましょう。講座では必ず、何をどうやるかだけでなくなぜやるかが伝わるようにしてください。

最後に、動画の終わりでは必ず講座で学んだ重要な点の要約を提供しましょう。

スライドの設計

スクリーン上のスライド、またはテキストを設計する際は、すべてのテキストをできるだけ大きくすることを心がけましょう。また、テキストと背景のコントラストを適切につけましょう。コントラストや配色が近すぎると読みづらくなります。特に視覚障害を持つ人々にとっては尚更です。

もし freeCodeCamp のデザインに合わせたければ freeCodeCamp スタイルガイドに記載されている色やフォントを使用しても構いません。

図表・画像・色は、動画内で話している内容を補完・補強するような使い方をしてください。

視聴者の興味を持続させるため、画面に表示されるものを頻繫に変化させるようにしてください。原則として、同じスライドや映像に 15 秒以上とどまらないようにしましょう。ただし、画面上でコードを入力している間はその限りではありません。

コードの準備

講座で使用するコードは必ず前もって準備してください。特定のプロジェクトを作成する方法を教える講座の場合、特に重要です。

コードはクリーンで読みやすいものにしましょう。複雑にする理由がない限りは、視聴者が理解しやすいように、できるだけシンプルなコードを用いるようにしてください。

講座の内容によってはユーザーがダウンロード可能なスターターコードを作成すると良いでしょう。

完成形のコードはぜひ、ユーザーが入手可能な形で公開してください。GitHub での公開が一番シンプルで一般的な方法でしょう。

YouTube の技術講座を収録する方法

収録の際に最も重要なことは以下の 3 つです。

良いマイクを使用すること。
コードを画面に表示する場合は、できるだけ大きく表示すること。
解像度が 1080p (最低でも 720p) であること。

音質が悪かったりコードの表示が小さいと、視聴者は動画の内容をよく見る前に視聴をやめてしまうでしょう。

収録の際、考慮すべき 3 つの分野があります。音声、映像、画面キャプチャーです。

講座の音声

パソコンに内蔵されているマイクより、USB マイクの方がほぼ確実に良い音質で録音できます。もし予算に余裕があれば以下のマイクを検討してみてください。

マイクを買う余裕がない場合は、スマートフォンでの録音を試してみましょう。機種によりますが、スマートフォンで録音された音声のほうがパソコンのマイクより音質が良いことがあります。

マイク

音声がはっきりとクリアに聞こえるように録音しましょう。クリッピング、音声のひずみ、気が散るバックグラウンドノイズなどがないようにしてください。バックグラウンドノイズが目立つ場合は、必要に応じて編集や再録音を行ってください。

聞く人が引き込まれるような、自信に満ちた調子で話すことを心がけてください。自然なペースで、会話調で話しましょう。ぎこちない空白や「えー」「あー」のような言葉は避けましょう。

講座の動画

必須ではありませんが、少なくとも動画の始めと終わりにはあなた自身がカメラに映るようにすると良いでしょう。

教えている人の姿が見えると視聴者は講座をより身近に感じることができます。

チュートリアル全体を通して自分を画面に映すのを好む人もいます。それもすばらしいです！

ここだけの話ですが、私がコードの入力中に自分を画面に表示しないのには理由があります。それは、私がたくさん失敗するからです。私は講座をスムーズに見せるために多くの編集を加えています。もし私が画面に表示されていたら、たくさんのジャンプカットが挟まれることになり、どれだけ多くの編集が必要かということと、実はコードを書くのが下手なことが視聴者にバレてしまうでしょう。😜

もし自分をカメラに映す場合、最も安く済む方法はパソコンのウェブカメラまたはスマートフォンのカメラを使用することです。多くのスマートフォンはかなり高品質の動画を撮影できます。

動画の品質を更に上げたい場合は以下のカメラを検討してみてください。 (訳注: 2021年6月時点の情報です。)

カメラ

動画を撮影する前に、撮影場所の背景を慎重に検討してください。画面の中に視聴者の気が散るものがないようにしましょう。

動画のフレーミング (構図) についても考慮しましょう。あなたが話している場面であれば、頭の上に余白を少しだけ空けると良いですが、空けすぎないようにしてください。

動画の構図

画面の録画

Windows の場合、画面録画を開始するショートカットキーがあります。Windows キー + Alt + R です。

macOS では、コンピューターにインストールされている QuickTime を用いて画面を録画できます。

あなたが話している映像と同時に画面の映像を表示したい場合は、無料の OBS Studio で設定できます。

とはいえ、OBS はライブ動画での使用のみをおすすめします。画面の録画と話している映像の録画は個別に行った方が良いでしょう。後で 2 つの映像を編集ソフトウェアでまとめることができます。その方がより柔軟性が高くなります。

画面を録画する際には、常にメインの内容が画面のできるだけ多くのスペースを占めるようにしてください。意外なことに、プログラミングチュートリアル視聴者の約三分の一はスマートフォンで視聴しています。すべてのテキストをできるだけ大きく表示してください。適切な理由がない限り、ウィンドウは全画面表示してください。

フォントサイズに関する厳密なルールはありませんが、テキストがスマートフォンの画面上で読めるかどうかを常に考慮してください。

チュートリアルを収録する際には、モニターを 2 つ使用すると便利です。ひとつは動画用に録画して、もうひとつは台本や完成形のコードの表示用に使うと良いでしょう。

プログラミングチュートリアルの音声をより洗練された物にするために、一部の人が実践している秘密の方法があります。まずは、プログラミングチュートリアルを収録してください。次に、話したセリフを書き起こし、その文字起こしに細かな編集を加えて流れを改善します。

最後に、編集したセリフを再録音し、最初に録画した動画に追加します。チュートリアルで次に何を説明するかを考えながら話していたときよりも表現力豊かに、面白く話すことができるでしょう。

画面録画についての最後のアドバイスがこちらです。

スライドショーの録画中はカーソルをウィンドウの外に置くようにしてください。
タスクバー、アプリのアイコン、通知、時計など不要なものはすべて隠してください。

YouTube の技術講座を編集する方法

動画は必ず編集し、流れをよりスムーズにしたり、ミスをした部分をカットしたりしましょう。

ファンの音、咳、その他視聴者の気が散るような雑音は編集によって除去するか低減してください。連続的なハムノイズ (ブーンという音) や残響は編集ソフトウェアやプラグインで除去できます。

単純な編集ならば、Mac の iMovie や Windows のムービーメーカーでも可能です。しかし、これらのプログラムの機能は非常に限られたものです。

最も人気がある動画編集ソフトウェアの 2 つは、Premier Pro と Final Cut Pro でしょう。どちらも必要な機能のすべてを備えています。ただし、高額です。

無料の動画編集ソフトウェアには以下のような選択肢があります。

動画編集にどのソフトウェアを使うか決めたらいくつかチュートリアルを見て基本機能を学ぶと良いでしょう。

できれば、ジャンプカットを使って編集するのは避けてください。ジャンプカットとは連続した動画からある部分を切り出すことで、そこがカットされたことが明らかに分かります。

ジャンプカットを避けるため以下 2 つの方法がよく使われます。

カットが発生するところに画像や他のビデオクリップを配置する
カットの後にズームインして、カットが元から意図していたものであるように見せる

技術講座の作成におけるその他のヒント

各講座の内容をできるだけ独立させるようにしてください。特に初心者向けの講座の場合は重要です。ソフトウェアをインストールしたり、依存関係を解決するところから、プロジェクトを完成させるまで、すべてのプロセスを見せるようにしましょう。視聴者はすでにやり方を知っている部分を飛ばして視聴できます。
講座には必ず実際の人間の声を使用してください。コンピューターによる合成音声を使用したり、ナレーション無しで音楽だけを使用することは避けてください。(訳注: 以下は英語版チャンネルへのコントリビューションを検討している場合) もし英語が非常に苦手であれば、あなたの母語で動画を作成することを検討するか、または英語のネイティブスピーカーにあなたの書いた台本を読んでもらうようにしましょう。
プログラミングチュートリアルに BGM は使用しないでください。気が散る原因となります。チュートリアルを見ながら音楽を聴きたい視聴者は各自で音楽をかけることができます。
講座の中であなたの年齢について言及しないでください。

優れた技術講座の例

以下は、参考になる優れた講座の例です。

終わりに

優れた講座を作成するには、単にその技術について詳しく知ること以上に練習も必要です。より多くの講座を作成すれば、より良い講座が作れるようになるでしょう。

この記事のガイドラインに沿った講座を作成し、freeCodeCamp.org チャンネルで公開することに興味がありましたら、下記担当者までメールにてお問い合わせください。

日本語版チャンネル
担当: 松田 (日本語・英語対応可) yoko [at] freecodecamp [dot] org
英語版チャンネル
担当: Beau Carnes (英語対応のみ) beau [at] freecodecamp [dot] org

C++ のコードを Visual Studio Code 内でコンパイルする方法

Manabu Matsumoto — Wed, 13 Apr 2022 23:30:00 +0000

原文: How to compile your C++ code in Visual Studio Code

追記: この記事はこちらの私 (原著者) のブログで公開されました。

C++ は静的型付き言語で、フリーフォーマットな、(通常は) コンパイラ型の言語です。また、C++ は複数のプログラミングパラダイムが組み合わせられている、汎用の中級 (中水準) プログラミング言語です。

簡単に言えば、C++ は C 言語がベースの、効率的で洗練された汎用プログラミング言語です。

このプログラミング言語は、ビャーネ・ストロヴストルップによって、1979 年に開発されました。

C++ の主な機能のひとつにコンパイラがあります。コンパイラは、C++ のコードをコンパイルし、実行するのに用いられます。

A compiler is a special program that processes statements written in a particular programming language like C++ and turns them into machine language or "code" that a computer's processor uses. (引用元)

(訳: コンパイラは、C++ のような特定のプログラミング言語で書かれたプログラムを、コンピューターのプロセッサーが直接実行できる機械語や「コード」に変換 (コンパイル) する、特別なプログラムです。)

実は、C++ に関する課題でコンパイラを使う必要があったので、この記事を書くことにしました。周りの皆は CodeBlocks IDE または Visual Studio IDE を使っていました。しかし私は、プログラミングには Visual Studio Code を使い慣れていました。

その後私は、VS Code エディターの内部で直接、C++ をコンパイルする方法を見つけようとしました。このような訳で、この記事ができあがりました。

この記事では、コンパイラを VS Code 内に設定する方法についてお伝えし、C++ のとっておきのリソースへのリンクをご紹介いたします。

前提条件

C++ の事前知識
(この記事では、読者が C++ を学習しているか、学習を始めようとしているか、または単に記事を読むのを楽しんでいることを想定しています。この記事は C++ 入門チュートリアルではありません。ある程度 C++ を理解している必要があります。)
Visual Studio Code エディター
こちらからエディターをダウンロードし、以下の設定ドキュメントをご覧ください: Windows 用、 Linux 用、Mac 用
インターネット接続 (重要)

免責事項

この記事では Windows OS を使用します。ですが、他のオペレーティングシステムを使用しているユーザーにも参考となるリソースへのリンクをご紹介いたします。

さあはじめましょう！

C++ のコンパイラのダウンロードとインストール

osdn.net/projects/mingw/ にアクセスしてから、「Windows mingw-get-setup.exe」をクリックして MinGW のセットアップファイルをダウンロードしてください。もしくは、こちらをクリックして Windows 向けのダウンロードサイトへ移動するか、こちらをクリックして Mac にインストールする方法をご確認ください。

MinGW, a contraction of "Minimalist GNU for Windows", is a minimalist development environment for native Microsoft Windows applications. (引用元)

(訳: 「Minimalist GNU for Windows」の短縮形である MinGW は、Microsoft Windows ネイティブアプリケーション用の最小限の開発環境です。)

ダウンロードが終わったら、MinGW のインストールを開始して、「MinGW Installation Manager」が表示されるのを待ちます。

「MinGW Installation Manager」が表示されたら、mingw32-gcc-g++ のチェックボックスをクリックしてから、「Mark for Installation」を選んでください。

上部の左端にあるメニューの中の、「Installation > Apply Changes」をクリックしてください。

変更の適用が完了するのを待ちましょう。この処理は必ずインターネット接続が安定している状態で実行してください。

PATH 環境変数を編集して C++ のコンパイラがあるディレクトリを含める

PATH is an environment variable on Unix-like operating systems, DOS, OS/2, and Microsoft Windows, specifying a set of directories where executable programs are located. In general, each executing process or user session has its own PATH setting. (引用元 )

(訳: PATH とは、Unix 系のオペレーティングシステムや DOS、OS/2、Microsoft Windows 上の環境変数であり、実行可能なプログラムが配置されている一連のディレクトリを特定するものです。一般的に、実行中プロセスまたはユーザーセッションは独自の PATH 設定をもちます。)

インストール後、MinGW は C:\MinGW\bin にあります。ここで、このディレクトリを PATH 環境変数に含める必要があります。コンピューターを長年使用しているなら、その方法をすでにご存じかと思います。そうでない場合は、以下のガイドを参考にしてください:

Windows OS 向けのガイドはこちら
Linux 向けのガイドはこちら
Mac OS 向けのガイドはこちら

Code Runner 拡張機能を VS Code にインストール

これでコンパイラが設定されたので、Code Runner をインストールしましょう。

Code Runner を使えば、次に示した多数の言語のコードスニペットやコードファイルを実行できます:

C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, and custom command.

(訳注: 言語のリストは 2019 年 10 月時点の情報です。最新情報は Code Runner ダウンロードページを参照してください。)

こちらをクリックしてダウンロードしてください。
または VS Code の marketplace の検索ボックスで検索してください。

インストール後、 VS Code を再起動してください。
C++ のファイルを VS Code で開きます。ベーシックな hello world を出力するプログラムを以下に示します:

#include 
using namespace std;
int main() 
{
    cout << "Hello world!";
    return 0;
}

このファイルを test.cpp という名前で保存してください。

Code Runner を使ってコードを実行

ショートカットキーの Ctrl+Alt+N を使用してコードを実行します。
または、F1 キーを押してから、Run Code を入力して選択してください。
あるいは、テキストエディターを右クリックして、エディターコンテキストメニューの中の Run Code をクリックしてください。

コードが実行され、出力パネルに結果が表示されます。ショートカットキーの Ctrl+Shift+U を使用して出力パネルを開いてください。

実行中のコードを停止するには

ショートカットキーの Ctrl+Alt+M を使用します。
または、F1 キーを押してから、Stop Code Run を入力して選択してください。
あるいは、出力パネルを右クリックしてから、コンテキストメニューの中の Stop Run Code をクリックしてください。

これで C++ の開発環境を VS Code の中で設定することができました！

終わりに

もう一つ、アドバイスがあります。

初期設定では、VS Code の出力パネルは読み取り専用です。次のコードのように、ユーザーに入力を要求する場合:

#include 
using namespace std;

const double pi = 3.14159; 

void calculate()
{
  double area; 
  double radius;

  cout<<"Enter Radius: "<>radius;

  area = pi * radius * radius; 

  cout<<"area is: "<

Cannot edit in read-only terminal と表示され、ターミナル (出力パネル) への入力ができません。これを解決するには、手動で読み取りと書き込みを可能にする必要があります。

VS Code のメニューから、File > Preference > Setting を選択してください。
左側のパネルの User タブの中の、extensions セクションを選択してください。
スクロールして「Run Code Configuration」を探してください。
スクロールして Run in Terminal (組み込みターミナル内でコードを実行するかどうか) のチェックボックスを探し、ボックスにチェックを入れてください。

もしくは

setting.json ファイル内に、以下の行を追加してください:

"code-runner.runInTerminal": true

これで設定が完了し準備が整いました :)

`C++ のリソース`

こちらに、C++ の学習を始めるのに役立つリソースをいくつか挙げてみます:

`謝辞`

MinGW Project
Code Runner by Jun Han

お読みくださいましてありがとうございました!



 VS Code の Live Server – ブラウザを自動的に再読込する拡張機能について 
Manabu Matsumoto — Wed, 23 Mar 2022 23:30:00 +0000
 
        原文: VS Code Live Server – How to Auto-Refresh Your Browser with this Simple Extension
      
Visual Studio Code は最も人気のあるコードエディターの 1 つです。それは無料で、すっきりしたインターフェースを備えており、プログラミングをより簡単で楽しいものにする無数の拡張機能を備えています。
私 (原著者) はフロントエンドのウェブ開発者で、仕事中や私のYouTube チャンネルで VS Code を使用しています。これまで、コーディング中に再読込ボタンをクリックせずに自動的にブラウザーを再読込させる方法について、多くの人から質問がありました。
それは、Live Server と呼ばれる VS Code の便利な拡張機能を設定することで実現できます。この投稿では、それがどのように動作するのかについて、また VS Code エディターに Live Server をインストールして設定する方法について、詳しくお伝えします。
なぜ Live Server 拡張機能を使用すべきなのか？
通常、コードを変更したり何か新しいものを記述した時には、ページを手動で更新して変更を確認する必要があります。
言い換えれば、毎日 100 回変更する場合、ブラウザーを 100 回更新する必要があります。
ところが Live Server 拡張機能は、これを自動化してくれます。Live Server をインストールした後では、たったひとつのボタンで、自動化されたローカルホスト (localhost) を起動して、ブラウザー上で動作させることができます。
Live Server は、いったんコードを変更したり何か新しいものを記述すると、それを保存した後に、ブラウザーを自動的に更新します。これで、素早く自動的に変更を確認できるようになるでしょう。
もしよろしければ、以下のチュートリアル動画を見ることもできます:

        
          
            
          
        
      
最初に、VS Code をインストール
すでに VS Code をパソコンにインストール済みであれば、この手順をスキップしてかまいません。そうでない場合は、公式サイトから VS Code をダウンロードできます。
Visual Studio Code の公式サイト
VS Code のダウンロードとインストールが済んだら、次のようなウェルカム画面が表示されます:
左側にいくつかのアイコンが見えるはずです。その内の 1 つ (デバッグアイコンの下) が拡張機能のボタンです:
そのボタンをクリックすると、検索バーが現れます。そこに「live server」と入力してください。
多くの選択肢が表示され、システムに適したものをどれでも選ぶことができます。私は Ritwick Dey の Live Server を使用しているので、この例ではそれを選びます:
install ボタンをクリックすると拡張機能をインストールできます。
新しい HTML ページを作成
Live Server を起動するには、少なくとも 1 つの HTML ページを作成する必要があります。それを用意するには、左側に見えているいくつかのボタンの、一番上にあるファイルのアイコンのボタン (Explorer ボタン) をクリックしてから、New File ボタンをクリックし、index.html と入力してください:
プラス記号のついた New File アイコン (左から 2 番目)
設定の問題と対処法
HTML ページを作成して Live Server 拡張機能をインストールした後ならば、「Go Live」アイコンが下の青い領域 (ステータスバー) に表示されるはずです:
表示されていない場合は VS Code を再起動してください。それでうまくいくはずです。
「Go Live」ボタンをクリックすると、(ポート番号が指定された) ローカルホストがデフォルトのブラウザー上で起動するはずです。同じボタンをクリックすることで、Live Server をいつでも起動または停止できます。
もしこの段階に到達したならば、おめでとうございます！ :) これで Live Server と連動できます。その他にまだ問題がある場合は、こちらの投稿で詳細情報をご確認ください。
結論
この投稿が、VS Code の Live Server 拡張機能のインストールと設定に役立つことを願っています。ウェブ開発についてさらに学習したい場合は、私の YouTube チャンネルにお気軽にアクセスしてください。
お読みくださいましてありがとうございました! 


 JavaScript の偽値について 
Manabu Matsumoto — Wed, 16 Mar 2022 23:45:00 +0000
 
        原文: Falsy Values in JavaScript
      
解説
偽値とは、例えば変数を確認する際に、FALSE と評価されるもののことです。JavaScript には主に以下の 6 つの偽値があります: undefined、null、NaN、0、"" (空の文字列)、そしてもちろん、false です。
変数の値が偽値であるか確認する
次のような単純な条件文で、変数の値が偽値であるか確認できます:
if (!variable) {
  // When the variable has a falsy value the condition is true.
}
一般的な例
var string = ""; // <-- 偽値

var filledString = "some string in here"; // <-- 真値 (truthy)

var zero = 0; // <-- 偽値

var numberGreaterThanZero // <-- (ゼロよりも大きな数値は) 真値

var emptyArray = []; // <-- 真値, これについてはこのあと詳しく説明します

var emptyObject = {}; // <-- 真値
配列の興味深い挙動
if ([] == false) // <-- 真値, if ブロック内のコードは実行されます

if ([]) // <-- 真値, こちらも if ブロック内のコードは実行されます

if ([] == true) // <-- 偽値, if ブロック内のコードは実行されません

if (![]) // <-- 偽値, こちらも if ブロック内のコードは実行されません
注意事項
値をブーリアンコンテキストで評価する際は、データ型を意識してください。
値のデータ型として数値を期待している場合、真値／偽値の評価は予期しない結果をもたらすことがあります:
const match = { teamA: 0, teamB: 1 }
if (match.teamA)
  // 偽値と評価されるため、以下のコードは実行されません
  console.log('Team A: ' + match.teamA);
}
上記のユースケースでは、代わりに typeof を用いて、評価する値のデータ型が number であるかどうかを次のように評価します:
const match = { teamA: 0, teamB: 1 }
if (typeof match.teamA === 'number')
  console.log('Team A: ' + match.teamA);
}
関連情報
truthy | Blog Post - Truthy & Falsey 『ブログ記事 - 真値 と 偽値』
偽値 | 用語集 | MDN
Truthy and Falsy: When All is Not Equal in JavaScript 『真値 と 偽値: JavaScript で完全にイコールでない 2 つのものを比較する場合について』 


 JavaScript のコーディングを始めるための 40 個のやさしい JS プロジェクト (初心者向け) 
Manabu Matsumoto — Sun, 13 Mar 2022 23:45:00 +0000
 
        原文: 40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS
      
プロジェクトの構築こそ新しいプログラミング言語を学ぶ最善の方法です。
そこで、純粋な JavaScript、React、TypeScript を使用する、初心者にやさしい 40 個のプロジェクトチュートリアルの一覧を作成しました。
チュートリアルについてのアドバイスなのですが、ビデオを見て、プロジェクトを構築し、それを分解してから独自の方法で再構築してみてください。新しい機能を追加したり、違う方法を試したりしてください。
そうすることで、プロジェクトの概念をつかめたかどうかテストできます。
なお、以下のリストの各プロジェクトの上でクリックすれば、対応する記事のセクションまでジャンプできます。
純粋な JavaScript のプロジェクト
カラーフリッパーの作り方
カウンタの作り方
レビューカルーセルの作り方
レスポンシブなナビゲーションバーの作り方
サイドバーの作り方
モーダルの作り方
FAQ ページの作り方
レストランのメニューページの作り方
背景動画の作り方
スクロールについてくるナビゲーションバーの作り方
いろいろなコンテンツを表示するタブの作り方
カウントダウンタイマーの作り方
独自のロレム・イプサム (Lorem ipsum) の作り方
食材リストの作り方
画像スライダーの作り方
じゃんけんゲームの作り方
サイモンゲームの作り方
プラットフォーマーゲームの作り方
Doodle Jump の作り方
Flappy Bird の作り方
神経衰弱の作り方
もぐらたたきの作り方
四目並べの作り方
Snake (蛇) ゲームの作り方
インベーダーゲームの作り方
フロッガーの作り方
テトリスの作り方
React プロジェクト
React のフックを用いてまるばつゲームを作る方法
React のフックを用いてテトリスを作る方法
誕生日通知アプリの作り方
ツアーページの作り方
アコーディオンメニューの作り方
ポートフォリオページ用のタブの作り方
レビュースライダーの作り方
カラージェネレーターの作り方
Stripe 風の決済メニューページの作り方
買い物かごページの作り方
カクテル検索ページの作り方
TypeScript プロジェクト
React と TypeScript を用いてクイズアプリを作る方法
TypeScript を用いてアルカノイドゲームを作る方法
純粋な JavaScript のプロジェクト
JavaScript の基礎を学習されていない場合は、プロジェクトの構築を進める前に、こちらのコースのご視聴をお勧めします。
以下のスクリーンショットの多くはこちらから引用しています。
カラーフリッパーの作り方
この John Smilga のチュートリアルでは、ランダムに背景色を変化させる方法を学習します。これは DOM を扱い始めるのにふさわしいプロジェクトです。
Leonardo Maldonado の記事の中で、DOM について学ぶことの重要性について、次のように述べられています:
DOM を操作することによって、無限の可能性を手に入れます。ページの再読み込みをせずにデータを更新するアプリケーションを作成できます。また、再読み込みしないで、ユーザーが、ページのレイアウトを変更することでカスタマイズできるアプリケーションも作成できます。
プロジェクトで扱う重要な概念:
配列
document.getElementById()
document.querySelector()
addEventListener()
document.body.style.backgroundColor
Math.floor()
Math.random()
array.length
プロジェクトの構築を開始する前に、John がすべてのプロジェクトの設定ファイルにアクセスする方法を説明している、導入部をご覧になることをお勧めします。
カウンタの作り方
この John Smilga のチュートリアルでは、カウンタの作り方を学習します。また、プロジェクトの中で、正か負かに応じて、表示されている数字の色を変えるために、条件文を記述します。
このプロジェクトは、より多く DOM を扱う練習を提供してくれます。また、ポモドーロタイマーのような他のプロジェクトの中で、この単純なカウンタを活用できます。
プロジェクトで扱う重要な概念:
document.querySelectorAll()
forEach()
addEventListener()
currentTarget プロパティ
classList
textContent
レビューカルーセルの作り方
このチュートリアルでは、レビューカルーセルの作り方を、ランダムにレビューを生み出すボタンを作成する方法と一緒に学習します。
e コマースサイトで顧客のレビューを表示したり、個人のポートフォリオページでクライアントの評価を表示するという重要な機能を、このカルーセルは備えています。
プロジェクトで扱う重要な概念:
オブジェクト
DOMContentLoaded
addEventListener()
array.length
textContent
レスポンシブなナビゲーションバーの作り方
このチュートリアルでは、 小さなデバイスの画面ではハンバーガーメニューを表示する、レスポンシブなナビゲーションバーの作り方を学習します。
ウェブ開発者になるにあたって、レスポンシブなウェブサイトの作り方の学習は、重要な部分です。レスポンシブであることは、一般的な機能として多くのウェブサイトで使用されています。
プロジェクトで扱う重要な概念:
document.querySelector()
addEventListener()
classList.toggle()
サイドバーの作り方
このチュートリアルでは、アニメーションをともなうサイドバーの作り方を学習します。
これは、ご自身の個人用ウェブサイトに追加できる素晴らしい機能です。
プロジェクトで扱う重要な概念:
document.querySelector()
addEventListener()
classList.toggle()
classList.remove()
モーダルの作り方
このチュートリアルでは、ウェブサイト上で、ユーザーに入力を促したり、何か特定のものを表示するために使用される、モーダルウィンドウの作り方を学習します。
モーダルウィンドウの良い例は、ユーザーがサイト内で変更を加えてから、それを保存せずに他のページへ移動しようとする場合です。変更を保存しなければ、その情報が失われてしまうことをユーザーに警告するために、モーダルウィンドウを表示できます。
プロジェクトで扱う重要な概念:
document.querySelector()
addEventListener()
classList.add()
classList.remove()
FAQ ページの作り方
このチュートリアルでは、よくある質問 (frequently asked questions - FAQ) ページの作り方を学習します。 事業についてユーザーを教え導いたり、質問の内容に関連のある検索結果を通じて、ウェブサイトへの往来を活発にします。
プロジェクトで扱う重要な概念:
document.querySelectorAll()
addEventListener()
forEach()
classList.remove()
classList.toggle()
レストランのメニューページの作り方
このチュートリアルでは、さまざまな食事のメニューを選別できる、レストランのメニューページの作り方を学習します。この楽しいプロジェクトは、map、reduce、filter のような高階関数について教えてくれます。
Yazeed Bzadough の記事の中で、高階関数について次のように述べられています:
高階関数の最大の利点は、再利用性が高いことです。
プロジェクトで扱う重要な概念:
配列
オブジェクト
forEach()
DOMContentLoaded
map、reduce、filter
innerHTML
includes メソッド
背景動画の作り方
このチュートリアルでは、再生／一時停止機能を含んだ背景動画の作り方を学習します。これは多くのウェブサイトに見られる、一般的な機能です。
プロジェクトで扱う重要な概念:
document.querySelector()
addEventListener()
classList.contains()
classList.add()
classList.remove()
play()
pause()
スクロールについてくるナビゲーションバーの作り方
このチュートリアルでは、スクロール中に、特定の高さに固定したままスライドする、ナビゲーションバーの作り方を学習します。
これは、多くのプロのウェブサイトに見られる、人気のある機能です。
プロジェクトで扱う重要な概念:
document.getElementById()
getFullYear()
getBoundingClientRect()
slice メソッド
window.scrollTo()
いろいろなコンテンツを表示するタブの作り方
このチュートリアルでは、シングルページアプリケーションを作る際に便利な、いろいろなコンテンツを表示できるタブの作り方を学習します。
プロジェクトで扱う重要な概念:
classList.add()
classList.remove()
forEach()
addEventListener()
カウントダウンタイマーの作り方
このチュートリアルでは、新製品を発売しようとしている時や、e コマースサイトでの販売が終了しようとしている時に使用できる、カウントダウンタイマーの作り方を学習します。
プロジェクトで扱う重要な概念:
getFullYear()
getMonth()
getDate()
Math.floor()
setInterval()
clearInterval()
独自のロレム・イプサム (Lorem ipsum) の作り方
このチュートリアルでは、独自のロレム・イプサムの作り方を学習します。
ロレム・イプサムとは、ウェブサイト用のプレースホルダーテキストとして使われるものです。この楽しいプロジェクトで、創造力を発揮して独自のテキストを作成します。
プロジェクトで扱う重要な概念:
parseInt()
Math.floor()
Math.random()
isNaN()
slice メソッド
event.preventDefault()
食材リストの作り方
このチュートリアルでは、食材リストの項目を更新または削除する方法について学習し、単純な CRUD (Create - 生成、Read - 読み取り、Update - 更新、Delete - 削除) アプリケーションを作成します。
CRUD は、フルスタックアプリケーションの開発において重要な役割を演じます。それがなければ、お気に入りのソーシャルメディアプラットフォームで、投稿を編集または削除するといったようなこともできなくなってしまいます。
プロジェクトで扱う重要な概念:
DOMContentLoaded
new Date()
createAttribute()
setAttributeNode()
appendChild()
filter()
map()
画像スライダーの作り方
このチュートリアルでは、どのウェブサイトにも追加できる、画像スライダーの作り方を学習します。
プロジェクトで扱う重要な概念:
querySelectorAll()
addEventListener()
forEach()
if/else 文
じゃんけんゲームの作り方
このチュートリアルでは、じゃんけんゲームの作り方を Tenzin が教えてくれます。この楽しいプロジェクトは、より多くの DOM を扱う練習を提供してくれます。
プロジェクトで扱う重要な概念:
addEventListener()
Math.floor()
Math.random()
switch 文
サイモンゲームの作り方
このチュートリアルでは、定番のサイモンゲームの作り方を Beau Carnes が教えてくれます。 これは、ゲームの背後にあるいろいろなコンポーネントと、それらの各機能を構築する方法について考えさせてくれる、優れたプロジェクトです。
プロジェクトで扱う重要な概念:
querySelector()
addEventListener()
setInterval()
clearInterval()
setTimeout()
play()
Math.floor()
Math.random()
プラットフォーマーゲームの作り方
このチュートリアルでは、Frank Poth がプラットフォーマーゲームの作り方を教えてくれます。このプロジェクトでは、オブジェクト指向プログラミング (OOP) と、Model - View - Controller  (MVC) ソフトウエアパターンについて紹介します。
プロジェクトで扱う重要な概念:
this キーワード
for ループ
switch 文
OOP の原則
MVC パターン
Canvas API
Doodle Jump と Flappy Bird の作り方
この一連のビデオでは、Ania Kubow が Doodle Jump と Flappy Bird の作り方について教えてくれます。
これらのゲームを作ることで、多くのポピュラーな JavaScript のメソッドを扱いながら、JavaScript についてさらに楽しく学習できます。
プロジェクトで扱う重要な概念:
createElement()
forEach()
setInterval()
clearInterval()
removeChild()
appendChild()
addEventListener()
removeEventListener()
Ania Kubow と作る 7 つのクラシックゲーム
Ania Kubow によるこのコースの中で、楽しみながら 7 つのゲームを作成できます:
神経衰弱
もぐらたたき
四目並べ
Snake (蛇) ゲーム
インベーダーゲーム
フロッガー
テトリス
プロジェクトで扱う重要な概念:
for ループ
onclick イベント
アロー関数
sort()
pop()
unshift()
push()
indexOf()
includes()
splice()
concat()
React のプロジェクト
もし React の基礎にあまり詳しくなければ、以下のプロジェクトを進める前にこのコースの視聴をお勧めします。
React のフックを用いてまるばつゲームを作る方法
この freeCodeCamp の記事の中で、Thomas Weibenfalk による Scrimba のまるばつゲームのチュートリアルについて、Per Harald Borgen が解説してくれます。Scimba の YouTube チャンネルでは、このプロジェクトのビデオコースを見ることができます。
これは React の基本に慣れ、フックを扱い始めるのにふさわしいプロジェクトです。
プロジェクトで扱う重要な概念:
useState()
import / export
JSX
React のフックを用いてテトリスを作る方法
このチュートリアルでは、Thomas Weibenfalk が React のフックと styled components を用いてテトリスを作る方法を教えてくれます。
プロジェクトで扱う重要な概念:
useState()
useEffect()
useRef()
useCallback()
styled components
誕生日通知アプリの作り方
https://react-projects.netlify.app/ からのスクリーンショット
この John Smilga のコースでは、誕生日通知アプリの作り方を学習します。これは React の基本に慣れ、フックを扱い始めるのにふさわしいプロジェクトです。
このプロジェクト用のスタートアップファイルを準備する方法についても、John のビデオを見ることをお勧めします。
プロジェクトで扱う重要な概念:
useState()
import / export
JSX
map()
ツアーページの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、興味のないツアーをユーザーが削除できる、ツアーページの作り方を学習します。
このプロジェクトで、React のフックと async/await パターンを練習できます。
プロジェクトで扱う重要な概念:
try...catch 文
async/await パターン
useEffect()
useState()
アコーディオンメニューの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、質問と解答用のアコーディオンメニューの作り方を学習します。 モダンな方法でユーザーにコンテンツを表示する際に、このメニューが役に立ちます。
プロジェクトで扱う重要な概念:
React Icons
useState()
map()
ポートフォリオページ用のタブの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、模擬のポートフォリオページ用のタブを作る方法について学習します。タブは、シングルページアプリケーション内でさまざまなコンテンツを表示する際に役に立ちます。
プロジェクトで扱う重要な概念:
async/await パターン
React Icons
useEffect()
useState()
レビュースライダーの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、数秒ごとに新しいレビューにスライドする、レビュースライダーの作り方を学習します。
これは e コマースサイトやポートフォリオの中に組み込める、すばらしい機能です。
プロジェクトで扱う重要な概念:
React Icons
useEffect()
useState()
map()
カラージェネレーターの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、カラージェネレーターの作り方を学習します。このプロジェクトは、フックと setTimeout を扱う練習を続けるのに適しています。
プロジェクトで扱う重要な概念:
setTimeout()
clearTimeout()
useEffect()
useState()
try...catch 文
event.preventDefault()
Stripe 風の決済メニューページの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、Stripe 風の決済メニューページの作り方を学習します。このプロジェクトは、React のコンポーネントを用いて、プロダクトランディングページをデザインする良い練習になるでしょう。
プロジェクトで扱う重要な概念:
React Icons
useRef()
useEffect()
useState()
useContext()
買い物かごページの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、買い物かごの中の商品を更新したり削除できるページの作り方について学習します。このプロジェクトは、 useReducer フックの導入にも適しています。
プロジェクトで扱う重要な概念:
map()
filter()
 要素
useReducer()
useContext()
カクテル検索ページの作り方
https://react-projects.netlify.app/ からのスクリーンショット
このチュートリアルでは、カクテル検索ページの作り方について学習します。このプロジェクトでは React Router の使い方を紹介しています。
React Router は、ウェブサイトにナビゲーションを作成して、about (アバウト) ページや連絡先ページのような、さまざまなコンポーネントに表示を変更する機能を提供してくれます。
プロジェクトで扱う重要な概念:
useCallback()
useContext()
useEffect()
useState()
TypeScript プロジェクト
もし TypeScript にあまり詳しくなければ、以下のプロジェクトを進める前にこのコースの視聴をお勧めします。
React と TypeScript を用いてクイズアプリを作る方法
このチュートリアルでは、Thomas Weibenfalk が React と TypeScript を用いたクイズアプリの作り方について教えてくれます。このプロジェクトは、TypeScript の基本を練習するよい機会になってくれます。
プロジェクトで扱う重要な概念:
React.FC
styled components
dangerouslySetInnerHTML
TypeScript を用いてアルカノイドゲームを作る方法
このチュートリアルでは、Thomas Weibenfalk が TypeScript でアルカノイドゲームを作る方法について教えてくれます。これは TypeScript の基本概念を扱う練習の場を提供してくれる、優れたプロジェクトです。
プロジェクトで扱う重要な概念:
型 (Type)
クラス
モジュール
HTMLCanvasElement
純粋な JavaScript、React、TypeScript を使用する 40 個のプロジェクトチュートリアルをお楽しみください。
ハッピーコーディング！ 


 C 言語の三項演算子について 
Manabu Matsumoto — Wed, 09 Mar 2022 23:45:00 +0000
 
        原文: Ternary Operator in C Explained
      
プログラマーは、長い if - else 条件文の代わりに三項演算子を使って、意思決定を行うことがあります。
三項演算子は 3 つの項をとります:
最初の項は比較演算式です
2 番目の項は、比較演算式が true の時に、結果として評価される式です
3 番目の項は、比較演算式が false の時に、結果として評価される式です
三項演算子を、簡潔に記述する方法、または if-else 文を記述する方法として考えてみると役に立ちます。 例えば、まず次のように、単純な意思決定に if と else を使用する場合を見てみましょう:
int a = 10, b = 20, c;

if (a < b) {
    c = a;
}
else {
    c = b;
}

printf("%d", c);
この例では 10 行以上を使用していますが、そんなには必要はありません。三項演算子を使用することで、上記のプログラムを、たった 3 行のコードで記述できます。
構文
condition ? value_if_true : value_if_false
この文は、condition を満たしている場合には value_if_true を評価し、そうでなければ value_if_false を評価します。
三項演算子を使用して書き換えられた上記の例がこちらです:
int a = 10, b = 20, c;

c = (a < b) ? a : b;

printf("%d", c);
条件文 a < b が true なので、c は a と同じ値に設定されます。
value_if_true と value_if_false の項は、同じ型の値である必要があり、また、完全な文ではなく単純な式でなければならないことを覚えておいてください。
また、三項演算子は if-else 文のように入れ子にできます。次のコードについて考えてみましょう:
int a = 1, b = 2, ans;
if (a == 1) {
    if (b == 2) {
        ans = 3;
    } else {
        ans = 5;
    }
} else {
    ans = 0;
}
printf ("%d\n", ans);
上記のコードを、入れ子にした三項演算子を用いて書き換えた例がこちらです:
int a = 1, b = 2, ans;
ans = (a == 1 ? (b == 2 ? 3 : 5) : 0);
printf ("%d\n", ans);
両方の一連のコードの出力は、次のようになるはずです:
3
 


 React、React Hooks、Axios を用いて CRUD 操作を実行する方法 
Manabu Matsumoto — Sun, 06 Mar 2022 23:45:00 +0000
 
        原文: How to Perform CRUD Operations using React, React Hooks, and Axios
      
React を扱っていれば、API リクエストを理解し実装するのはとても難しいと感じられるでしょう。
そこでこの記事では、React 、React Hooks、React Router、Axios を用いて CRUD 操作を実装することにより、そのすべてがどのように機能するかを学んでいきます。
さあはじめましょう。
Node と npm をインストールする方法
まず最初に、Node をシステム内にインストールしましょう。私たちは主にそれを用いて JavaScript のコードを実行します。
Node をダウンロードするには、https://nodejs.org/en/ にアクセスしてください。
Node上に構築された Node パッケージマネージャー (npm) も必要です。それを用いることで、JavaScript アプリ用のパッケージをインストールできます。幸い、npm は Node に備わっているため、個別にダウンロードする必要はありません。
両方のダウンロードが終了したら、ターミナルかコマンドプロンプトを開いて、node -v と入力してみましょう。これでダウンロードした Node のバージョンを確認します。
React アプリケーションを作成する方法
次に、React アプリケーションを作成するには、ターミナル内で npx create-react-app  と入力しますが、今回は npx create-react-app react-crud と入力します。
そうすると、パッケージのインストール状態が表示されます。
パッケージのインストールが終わったら、プロジェクトフォルダーへ移動して、npm start と入力します。
すると、次のような初期状態の React テンプレートが表示されます:
初期状態の React テンプレート
App.js ファイル
React 用の Semantic UI パッケージをインストールする方法
次に、Semantic UI React パッケージをインストールしましょう。Semantic UI は、React 用に作られた UI (ユーザーインターフェース) ライブラリーです。Semantic UI には、テーブル、ボタンなどの機能をもつ多くの UI コンポーネントが、あらかじめ構築されています。
以下のコマンドを、ご自身のパッケージマネージャーに応じて入力すれば、Semantic UI をインストールできます。
yarn add semantic-ui-react semantic-ui-css
Yarn パッケージマネージャー用のコマンド
npm install semantic-ui-react semantic-ui-css
NPM パッケージマネージャー用のコマンド
また、アプリケーションのメインエントリーファイルである index.js に、インストールしたライブラリーをインポートします。
import 'semantic-ui-css/semantic.min.css'
こちらを index.js ファイル内へ貼り付けてください
CRUD アプリケーションを構築する方法
では、React を用いて CRUD アプリケーションの構築を始めましょう。
最初に、アプリケーションにヘッダーを追加しましょう。
以下のようにして、App.js ファイル内にヘッダーを追加します:
import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;
アプリケーションにヘッダーを追加
次に、ヘッダーを中央に配置しましょう。
親要素 div の、className 属性の値を main に設定してください。それから、App.css ファイル内でフレックスボックスを使用して、ヘッダーを中央に配置しましょう。
import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;
App.js の中で 親要素 div の className 属性の値を main に設定
.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
}
App.css ファイル
これでヘッダーは完全に中央に配置されました。
見た目が少し良くなるように、ヘッダーをより目立たせて、かっこいいフォントを設定する必要があります。そのために、まずは以下のようにして見出しタグをヘッダーの周りに追加します:
import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;
次に Google Fonts からフォントをインポートしましょう。 https://fonts.google.com/ にアクセスし、1 つ選択します。
お好みのフォントを選択してください。ただし、この記事の中では Montserrat フォントファミリーを使用します。
フォントを選択したら、次のようにして App.css ファイル内でフォントをインポートしてください:
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
では、ヘッダーのフォントを変更しましょう。
    
      React Crud Operations
    
このように、見出しタグの className 属性の値を、main-header に設定してください。
それから、App.css 内で、Montserrat フォントファミリーを追加してください:
.main-header{
  font-family: 'Montserrat', sans-serif;
}
これでヘッダーが変更されたのが確認できます。
CRUD コンポーネントを作成する方法
これから、4 つの CRUD 操作 (Create - 生成、Read - 読み取り、Update - 更新、Delete - 削除) に対応するコンポーネントを作成してみましょう。
src フォルダーの中に、components というフォルダーを作成してください。それから、このフォルダーの中に create、read、update という 3 つのファイルを作成してください。delete については、コンポーネントを追加する必要はありません。
では、Create (生成) 操作を実装しましょう。
ただそのためには、Mock API を使用する必要があります。この API は作成したデータを偽のサーバーへ送信するもので、単に学習目的で使用します。
それでは、https://mockapi.io/ へアクセスし、アカウントを作成してください。
MockAPI
プラスボタンをクリックしてプロジェクトを作成してください。
プラスボタンをクリックして新しいプロジェクトを作成
プロジェクトの名前を入力して、CREATE ボタンをクリックしてください。
NEW RESOURCE ボタンをクリックして新しいリソースを作成してください。
Resorce Name の欄へ名前を入力することを求められますので、使用する名前を入力してください。
name、avatar、createdAt などの余分な欄は必要ありませんので削除してください。その後で、CREATE をクリックしてください。
これで、fakeData という名前の、偽の API を作成できました。
fakeData の上でクリックすると、新しいタブで API が開くのを確認できます。現在データベースは空です。
Create コンポーネント用のフォームを作成する方法
次に、Semantic UI ライブラリーが提供しているフォームを使用してみましょう。
Semantic UI React へアクセスし、左側の検索バーの中で Form を検索してください。
このようなフォームが表示されるので、上部左側の Try it をクリックして、コードを取得してください。
コードをコピーしたら、次のように create.js ファイルの中に貼り付けてください:
import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    
        
            First Name
            
        
        
            Last Name
            
        
        
            
        
        
    
)

export default Create;
では、Create コンポーネントを App.js ファイルの中でインポートしてください。
import './App.css';
import Create from './components/create';

function App() {
  return (
    
      React Crud Operations
      
        
      
    
  );
}

export default App;
そうすると次のようになります:
しかし、ここで問題が発生します – 項目が適切にそろえられていませんし、テキスト入力欄のラベルの色が黒になってしまっています。では、これを修正してみましょう。
create.js ファイルの中で、Form の className の値を create-form に設定してください。
import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    
        
            First Name
            
        
        
            Last Name
            
        
        
            
        
        
    
)

export default Create;
create.js
そして、 App.css ファイルの中に以下のクラスセレクターを追加してください:
.create-form label{
  color: whitesmoke !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px !important;
}
App.css
このクラスセレクターはフォームの各欄のラベルを指定して、文字色を whitesmoke に設定しています。また、フォントを変更して、フォントサイズを大きくしています。
では、main という className のセレクターの中で、flex-direction プロパティーを追加してください。このプロパティーの値を column 方向に設定することで、className が main である要素の中の各要素が、垂直にそろえられます。
.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
  flex-direction: column;
}
App.css
これで、フォームの外観が改善されるのが確認できます。
では次に、フォーム欄からデータを取得してコンソールの中で表示してみましょう。そのために、React の useState フックを使用します。
create.js ファイルの中で、React から useState をインポートしてください。
import React, { useState } from 'react';
その後で、First Name、Last Name、チェックボックス用のステート (state) を作成してください。各ステートは、空のストリングまたは false で初期化します。
import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    return (
        
            
                
                    First Name
                    
                
                
                    Last Name
                    
                
                
                    
                
                
            
        
    )
}
現在、Create コンポーネントは関数コンポーネントとして機能しているのが確認できます。フックは、関数コンポーネントの中だけで使用できるので、コンポーネントを関数コンポーネントに変更する必要があります。
では、First Name、Last Name、チェックボックスの各欄の値を、setFirstName、setLastName、setCheckbox プロパティーを用いて、それぞれ設定しましょう。
 setFirstName(e.target.value)}/>

 setLastName(e.target.value)}/>

 setCheckbox(!checkbox)}/>
それから、firstName、lastName、checkbox の各ステートの値を取得してみましょう。
ここで、後から API へデータを送信するのに使用する、postData という名の関数を作成します。その関数の中に、次のコードを記述してください:
const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
}
では、First Name、Last Name、チェックボックスの値をコンソールに出力してみましょう。
Submit ボタンに、onClick イベントを使用してこの関数を割り当てることによって、Submit ボタンを押したときに、この関数が呼び出されるようにします。

これまでの内容をすべて含んだ、create ファイル用のコードはこちらです:
import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
    }
    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}
First name と Last name の中に値を入力して、チェックボックスにチェックを入れてください。その後で、Submit ボタンをクリックしてみてください。すると次のように、コンソールの中にデータがポップアップするのが確認できます:
Axios を使って API リクエストを Mock API へ送信する方法
今度は、Axios を使ってフォームのデータを偽のサーバーへ送信してみましょう。
しかしまずは、Axios をインストールする必要があります。
npm i axios と入力して、パッケージをインストールしてください。
パッケージのインストールが終了したら、Create 操作の実装を開始しましょう。
Axios をファイルの先頭でインポートしてください。
import axios from 'axios';
Axios のインポート
postData 関数の中で、Axios を使用して POST リクエストを送信します。
const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        })
}
POST リクエストの送信
ご覧のとおり、ここでは axios.post を使用しています。また axios.post の中に、先ほど作成した API のエンドポイントがあります。その後に、中括弧で囲まれたフォームの項目があります。
Submit をクリックした時に、この関数が呼び出され API サーバーにデータを送信します。
では、First Name と Last Name を入力して、チェックボックスにチェックを入れたら、Submit をクリックしてください。
その後で API を確認してみると、オブジェクトの中に囲まれた状態で、入力した First Name と Last Nameの値と、true という値に設定された checkbox を取得できます。
Read 、Update、Delete の各操作を実装する方法
Read (読み取り) 操作の実装を開始するために、Read ページを作成する必要があります。また、React Router パッケージを用いて、ユーザーをさまざまなページへ案内する必要があります。
https://reactrouter.com/web/guides/quick-start へアクセスし、また、npm i react-router-dom@5 を使用してパッケージをインストールしてください。
パッケージのインストールが済んだら、React Router からコンポーネントをいくつかインポートします:
import { BrowserRouter as Router, Route } from 'react-router-dom'
React Router から Router と Route をインポート
App.js の中で、return の中のコードをすべて Router でラップしてください。基本的に Router の内部にあるものは、 React の中でルーティングを使用できることを意味しています。
import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
      
    
  );
}

export default App;
現在、App.js は上のような状態でしょう。
では、return 内の Create を置き換えて、以下のコードを追加してください:
import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
      
    
  );
}

export default App;
ここでは、Create をルートコンポーネントとして使用しています。Create のパスは '/create' に設定しました。そのため、http://localhost:3000/create へアクセスすれば、Create ページを見ることができます。
同じように、read と update に対応するルートが必要です。
import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
        
          
        

        
      
    
  );
}

export default App;
上のコードで確認できるように、read と update のルートを作成します。
ここで http://localhost:3000/read へアクセスすると、Read ページが次のように表示されます:
Read ルート
また、http://localhost:3000/update では、次のように Update コンポーネントが表示されます:
Read 操作
Read 操作には、テーブルコンポーネントが必要です。そのため、React Semantic UI にアクセスし、ライブラリーが提供しているテーブルを、以下のように使用してください。
import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        Name
                        Registration Date
                        E-mail address
                        Premium Plan
                    
                
                    
                        John Lilki
                        September 14, 2013
                        jhlilk22@yahoo.com
                        No
                    
                    
                        Jamie Harington
                        January 11, 2014
                        jamieharingonton@yahoo.com
                        Yes
                    
                    
                        Jill Lewis
                        May 11, 2014
                        jilsewris22@yahoo.com
                        Yes
                    
                
                

                
            
        
    )
}
read.js
ここではテーブルの中にいくつかのダミーデータが用いられていますが、1 列分のデータだけが必要なので、残りは削除しましょう。
import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        Name
                        Registration Date
                        E-mail address
                        Premium Plan
                    
                
                    
                        John Lilki
                        September 14, 2013
                        jhlilk22@yahoo.com
                        No
                    
                
                

                
            
        
    )
}
read.js
これが Read ページの出力画面です。テーブルには列が 4 つありますが、必要なのは 3 つだけです。
余分な項目の列を削除してから、次のように項目の名前をつけなおしてください:
すると現在、Read ページはこのように見えます:
import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        First Name
                        Last Name
                        Checked
                    
                
                    
                        Nishant
                        Kumar
                        Yes
                    
                
                

                
            
        
    )
}
read.js
では、API から GET リクエストを送信してデータを取得してみましょう。
アプリケーションがマウントされる時に、取得したデータが必要になるので、useEffect フックを使用して実装してください。
import React, { useEffect } from 'react';

 useEffect(() => {
       
 }, [])
useEffect フック
ステートを 1 つ作成して、取得したデータを格納します。取得するデータは配列です。
import React, { useEffect, useState } from 'react';

const [APIData, setAPIData] = useState([]);
useEffect(() => {
       
}, [])
取得した API データを格納する APIData ステート
では、useEffect フックの中で、GET リクエストを送信してみましょう。
 useEffect(() => {
        axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])
ここでは axios.get を使用して、GET リクエストを API へ送信しています。その後で、リクエストが resolve (成功) すれば、レスポンスデータを APIData ステート内に格納します。
続いて、取得した API データに応じてテーブルの行をマッピングしましょう。
そのために Map 関数を使用します。Map 関数は配列を反復処理して、データを出力画面内に表示します。

  {APIData.map((data) => {
     return (
       
          {data.firstName}
           {data.lastName}
           {data.checkbox ? 'Checked' : 'Unchecked'}
        
   )})}

API 内のデータに応じて、firstName, lastName, checkbox のそれぞれのデータをマッピングしています。また、ここでは三項演算子 ('?') を使用しています。data.checkbox が true である場合は、Checked と表示され、そうでない場合は Unchecked と表示されます。
read.js の出力画面
Update 操作
それでは、テーブルに Update (更新) 用のヘッダーをもう 1 つ作成し、Update ボタン用の列を、Table.Row の中に作成してください。Update ボタンには、Semantic UI React が提供している Button コンポーネントをインポートして使用してください。
Update

 
  

Update ボタンの作成
ここで、Update ボタンがクリックされた時に、 Update ページにリダイレクトされる必要があります。そのためには React Router が提供している Link が必要です。
では、React Router から Link をインポートしてください。それから、Link タグの中へ Update ボタン用の Table.Cell をラップしてください。
import { Link } from 'react-router-dom';


   
     
   

Update ボタン用の Link
これで、Update ボタンをクリックした時に、Update ページへリダイレクトされるようになりました。
また、Update ボタンをクリックした時に、各列のデータを更新するには、API が提供している、それぞれの ID が必要です。
setData という名前の関数をコンポーネントの先頭に作成してください。それから、その関数を Update ボタンにバインドしてください。
 
ここでは、先頭の関数へ引数としてデータを渡す必要があります。
 
そして、先頭の関数の中で、データをコンソール内に表示させます:
const setData = (data) => {
   console.log(data);
}
コンソール内のデータ
では、update ボタンをクリックして、コンソールを確認してみてください。テーブルの各項目のデータを取得しています。
今度は、このデータをローカルストレージへ格納しましょう。
const setData = (data) => {
        let { id, firstName, lastName, checkbox } = data;
        localStorage.setItem('ID', id);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('Checkbox Value', checkbox);
}
ローカルストレージ内へデータを格納
このようにして、データを id、firstName、lastName、checkbox に分割してから、ローカルストレージへ格納しています。ローカルストレージを使用することで、ブラウザー内でローカルにデータを保存できます。
今ここで、Update コンポーネント内に update 操作用のフォームが 1 つ必要です。Create コンポーネントで用いたフォームを再利用しましょう。関数名を単に Create から Update へ変更するだけです。
import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';

export default function Update() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}
Update ページ
useEffect フックを Update コンポーネント内で作成してください。このフックを使い、前もってローカルストレージへ格納したデータを取り出します。さらに、ID 項目用のステートをもう一つ作成します。
const [id, setID] = useState(null);

useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'))
}, []);
それから、ローカルストレージから取り出したデータを、キーに応じて配置します。フォームの各欄の中に、取り出した値を配置する必要があります。Update ページがロードされた時に、各欄の中にデータが自動的に配置されるようにしましょう。

                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
フォームの各欄の中に値を配置
これで、Read ページ内の Update ボタンをクリックすると、Update ページへリダイレクトされ、そこで自動的に配置されたフォームデータを見ることができます。
Update ページ
それでは、Update リクエストを実装してデータを更新してみましょう。
updateAPIData という名前の関数を作成してください。この関数の中で、axios.put を用いて PUT リクエストを送信し、データを更新します。
const updateAPIData = () => {
    axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
        firstName,
         lastName,
         checkbox
	})
}
ここでは API エンドポイントに id 項目を添えているのが確認できます。
Read ページで、項目の Update ボタンをクリックした時に、その ID がローカルストレージの中に格納され、その後に Update ページ で取り出した ID を id ステートの中に格納しています。
そうした後に、id をエンドポイントへ渡しています。こうすることで、渡している ID の項目を更新できます。
次に、updateAPIData 関数を Update ボタンにバインドしてください。

updateAPIData を Update ボタンにバインド
Read ページにあるテーブルの中の、Update ボタンをクリックしてから、Last name を変更し、Update ページにある Update ボタンをクリックしてください。
Last Name 項目の更新
API を確認してみるか、または Read ページへ戻ってみると、last name が変更されているのを確認できます。
変更された Mock API のデータ
Read ページのテーブル
Delete 操作
まずは、Read ページのテーブルに、Delete  (削除) 操作用のボタンを 1 つ追加しましょう。
Delete


   

Read ページのテーブル内に Delete ボタンを追加
次に、onDelete という名前の関数を作成してから、Delete ボタンにその関数をバインドしてください。この関数は、Delete ボタンをクリックした時に ID パラメータを受け取ります。
const onDelete = (id) => {

}


   

Delete 操作用の関数
では、axios.delete を使用して、それぞれの項目を削除する操作を実装しましょう。
const onDelete = (id) => {
  axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
}
API から項目を削除
Delete ボタンをクリックしてから API を確認してみてください。クリックした項目のデータが削除されているのを確認できます。
ここで、クリックした項目のデータが削除された後に、テーブルのデータをロードし直す必要があります。
そのために、API のデータを読み込む関数を作成してください。
const getData = () => {
    axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
        .then((getData) => {
             setAPIData(getData.data);
         })
}
API のデータを取得
そして onDelete 関数の中で、項目を削除した後に更新された API のデータを読み込む必要があります。
const onDelete = (id) => {
        axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
     .then(() => {
        getData();
    })
}
項目を削除した後に更新された API のデータを読み込む
Read ページのテーブル
これで、今は各項目の Delete ボタンをクリックすることでその項目が削除され、テーブルが自動的に最新の情報に更新されます。
項目が 1 つ削除された後の Read ページのテーブル
CRUD アプリを少し改善してみましょう
これまで、Create ページの中でデータを投稿 (post) する時には、単にデータを偽のデータベースの中へ入れていましたが、その際に Read ページへリダイレクトする必要があります。
それではまず、React Router から useHistory をインポートしてください。
import { useHistory } from 'react-router';
React Router から useHistory をインポート
次に、let 文で history という名前の変数を作成して、その変数の中に useHistory を格納してください。
let history = useHistory();
その後で、post API が呼び出されてから、POST リクエストが resolve した時に、history.push 関数を使用して Read ページへ移動します。
const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
Post API が resolve した後で Read ページへ移動する
このように useHistory フックを用いることで Read ページへ移動できます。
Update ページについても同じことを行ってください。
import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';

export default function Update() {
    let history = useHistory();
    const [id, setID] = useState(null);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'));
    }, []);

    const updateAPIData = () => {
        axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}
Update.js
以上で、React と React フックを使用して CRUD 操作を実行する方法について理解できました！
学習内容を補足したい場合は、React CRUD Operations という YouTube のビデオ を、この記事の代わりに見ることができます。
さらに、コードをテストしてみたい場合は、GitHubでコードを見つけることができます。
ハッピーラーニング

Manabu Matsumoto - freeCodeCamp.org

プログラミングの学習方法 – 私がコードを学び始めた時に求めていたガイド

新米開発者向けの 14 ステップのロードマップ

1) コンピューターアーキテクチャとデータの基本を理解する

2) プログラミング言語の仕組みについて学ぶ

3) インターネットの仕組みを理解する

4) コマンドラインの基本を練習する

コマンドラインの使い方

5) Vim を使用してテキストエディタスキルを鍛える

6) HTML をある程度習得する

: ページの見出しであり、通常はページタイトルに用いられます。

: セクションの見出しであり、通常はセクションのタイトルに用いられます。

7) CSS にある程度取り組む

8) JavaScript でプログラミングを始める

JavaScript とは何か？

9) Python でプログラミングを継続する

Python とは何か？

Python における変数と代入

Python におけるデータ型

プログラムのフロー制御文について

If / Else 文

While ループ

10) Java で知識を深める

Java における変数と代入

Java におけるデータ型

Java におけるプログラムのフロー制御文

If / Else 文

11) Git を使用してコードを追跡する

基本的な Git コマンド

12) データベースと SQL を使用してデータを保存する

13) ウェブフレームワークと MVC (Model-View-Controller: モデル・ビュー・コントローラ) について読む

14) パッケージマネージャーに触れる

macOS: Homebrew

Linux: Apt と Yum

JavaScript: Node Package Manager (NPM)

Python: Pip

Java: Apache Maven

要約

次なるステップ

Python Discord ボットのチュートリアル – Discord ボットをコーディングして無料でホストする

Discord ボットのアカウントを作成する方法

ボットをサーバーに招待する方法

基本的な Discord ボットを discord.py ライブラリを用いてコーディングする方法

repl (Read-Eval-Print Loop - 対話型実行環境) を作成し discord.py をインストールする方法

ボット用の Discord Events をセットアップする方法

ボットを動作させる方法

ボットを改良する方法

ボットに心を動かす引用句を追加する方法

励ましのメッセージをボットに追加する方法

ボットに悲しい言葉を追加する方法

ボットに励ましのメッセージを追加する方法

メッセージに応答する方法

ユーザーが投稿したメッセージを有効にする方法

ボットに最後に追加する機能について

ボットが継続的に動作するように設定する方法

Repl.it 内でウェブサーバーを作成する方法

Uptime Robot の設定方法

結び

GitHub プロジェクト用の優れた README ファイルの書き方

README ファイルとは何か？

優れた README の書き方 – 段階的なガイド

README に含めるもの

1. プロジェクトのタイトル

2. プロジェクトの説明

3. 目次 (任意)

4. プロジェクトのインストールおよび実行方法

5. プロジェクトの使用方法

6. クレジットを入れる

7. ライセンスの付与

追加の README セクション

8. バッジ

9. プロジェクトに貢献する方法

10. テストを追加する

補足事項

まとめ

Python で SQL データベースを作成して操作する方法

なぜ Python と SQL を一緒に使用するのか？

はじめに

事前に必要なものとそのインストール

ライブラリのインポート

`[]` のテスト:

`list()` のテスト:

`C++ のリソース`

`謝辞`