JavaScript では、文字列を数値に変換する方法がたくさんあります。それぞれコードではどのように書くのでしょうか？

この記事では、文字列を数値に変換する 11 の方法を紹介します。

こちらは、JavaScript で文字列を数値に変換する方法を示すインタラクティブなスクリーンです:

JavaScript で文字列を数値に変換する方法: Number() 関数を使用する

文字列を数値に変換する方法の一つは、Number() 関数を使用することです。

この例では、quantity という名前の文字列があり、その値は "12" です。

const quantity = "12";

typeof 演算子を quantity に使用すると、その型は string として返されます。

console.log(typeof quantity);

Number 関数を使って、quantity を次のように数値に変換できます:

Number(quantity)

再び typeof 演算子を使用して、それが数値になったことを確認できます。

console.log(typeof Number(quantity));

数値に変換できない値を渡そうとすると、返り値は NaN「Not a Number」になります。

console.log(Number("awesome"));

JavaScript で文字列を数値に変換する方法: parseInt() 関数を使用する

文字列を数値に変換するもう一つの方法は、parseInt() 関数を使用することです。この関数は文字列とオプションの基数 (radix) を受け取ります。

基数は、記数法の底を表す 2 から 36 の間の数値です。例えば、基数が 2 の場合は 2 進数を表し、基数が 10 の場合は 10 進数を表します。

先ほどの quantity 変数を使用して、その文字列を数値に変換することができます。

const quantity = "12";

console.log(parseInt(quantity, 10));

quantity 変数を "12.99" に変更した場合、parseInt() を使用して得られる結果は数値の 12.99 になるでしょうか？

ご覧のとおり、結果は丸められた整数になります。浮動小数点数を返したい場合は、parseFloat() を使用する必要があります。

JavaScript で文字列を数値に変換する方法: parseFloat() 関数を使用する

parseFloat() 関数は値を受け取り、浮動小数点数を返します。浮動小数点数の例としては、12.99 や 3.14 などがあります。

以前の例を修正して parseFloat() を使用すると、結果は浮動小数点数の 12.99 になります。

const quantity = "12.99";

console.log(parseFloat(quantity));

文字列に先頭または末尾の空白が含まれていても、parseFloat() はその文字列を浮動小数点数に変換します。

const quantity = "   12.99    ";

console.log(parseFloat(quantity));

文字列の最初の文字が数値に変換できない場合、parseFloat() は NaN を返します。

const quantity = "F12.99";

console.log(parseFloat(quantity));

JavaScript で文字列を数値に変換する方法: 単項プラス演算子 (+) を使用する

単項プラス演算子 (+) を使用すると、文字列を数値に変換できます。この演算子はオペランドの前に置かれます。

const quantity = "12";

console.log(+quantity);

単項プラス演算子 (+) を使用して、文字列を浮動小数点数に変換することもできます。

const quantity = "12.99";

console.log(+quantity);

文字列の値が数値に変換できない場合、結果は NaN になります。

const quantity = "awesome";

console.log(+quantity);

JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 と掛け算する

文字列を数値に変換する別の方法は、基本的な数学演算を使用することです。文字列の値に 1 を掛けると、数値が返されます。

const quantity = "12";

console.log(quantity * 1);

ご覧のとおり、quantity の値に 1 を掛けると、数値の 12 が返されます。しかし、これはどのように機能するのでしょうか？

この例では、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行しています。文字列が数値に変換できない場合、数学演算は機能せず、NaN が返されます。

const quantity = "awesome";

console.log(quantity * 1);

この方法は浮動小数点数にも適用できます。

const quantity = "10.5";

console.log(quantity * 1);

JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 で割る

1 を掛ける代わりに、文字列を 1 で割ることもできます。JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。

const quantity = "10.5";

console.log(quantity / 1);

JavaScript で文字列を数値に変換する方法: 文字列から数値の 0 を引く

別の方法として、文字列から 0 を引くこともできます。この場合も同様に、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。

const quantity = "19";

console.log(quantity - 0);

JavaScript で文字列を数値に変換する方法: ビット単位の NOT 演算子 (~) を使用する

ビット単位の NOT 演算子 (~) はオペランドのビットを反転させ、その値を 32 ビット符号付き整数に変換します。32 ビット符号付き整数は、32 ビット (または 4 バイト) で表される整数値です。

数値に対して 1 つのビット単位の NOT 演算子 (~) を使用すると、以下の操作が実行されます: -(x + 1)

console.log(~19);

しかし、ビット単位の NOT 演算子 (~) を 2 回使用すると、文字列を数値に変換することができます。

const quantity = "19";

console.log(~~quantity);

この方法は浮動小数点数には適用できません。結果は整数になるためです。

const quantity = "19.99";

console.log(~~quantity);

この方法を数値以外の文字に対して使用した場合、結果はゼロになります。

const quantity = "awesome";

console.log(~~quantity);

この方法には制限があり、非常に大きな値の場合には動作が不安定になることがあります。数値が 32 ビット符号付き整数の範囲内に収まっていることを確認することが重要です。

const quantity = "2700000000";

console.log(~~quantity);

ビット単位の NOT 演算子 (~) について詳しく知りたい場合は、ドキュメントを参照してください。

JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する

文字列を数値に変換する方法として、他には Math.floor() 関数も使用できます。この関数は数値を最も近い整数に切り捨てます。

const quantity = "13.4";

console.log(Math.floor(quantity));

以前の例と同様に、数値以外の文字を使用しようとすると、結果は NaN になります。

const quantity = "awesome";

console.log(Math.floor(quantity));

JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する

Math.ceil() 関数は、数値を最も近い整数に切り上げます。

const quantity = "7.18";

console.log(Math.ceil(quantity));

JavaScript で文字列を数値に変換する方法: Math.round() 関数を使用する

Math.round() 関数は、数値を最も近い整数に丸めます。

例えば、値が 6.3 の場合、Math.round() は 6 を返します。

const quantity = "6.3";

console.log(Math.round(quantity));

しかし、その値を 6.5 に変更すると、Math.round() は 7 を返します。

const quantity = "6.5";

console.log(Math.round(quantity));

結論

この記事では、JavaScript を使用して文字列を数値に変換する 11 の方法を紹介しました。

この記事で説明した 11 の方法は以下の通りです。

• Number() 関数を使用する
• parseInt() 関数を使用する
• parseFloat() 関数を使用する
• 単項プラス演算子 (+) を使用する
• 文字列に数値の 1 を掛ける
• 文字列を数値の 1 で割る
• 文字列から数値の 0 を引く
• ビット単位の NOT 演算子 (~) を使用する
• Math.floor() 関数を使用する
• Math.ceil() 関数を使用する
• Math.round() 関数を使用する

この記事を楽しんでいただけたなら幸いです。JavaScript の学習、頑張ってください！

新しい言語を学ぶ最も良い方法は、その言語を使ったプロジェクトを作ることです。

私は、25 の初心者向け Python プロジェクトチュートリアルのリストを作成しました。

これらのチュートリアルに取り組む初心者に向けての私からのアドバイスは、動画を視聴しながら、プロジェクトを作り、分解し、自らの手でもう一度作り上げることです。チュートリアルにない新しい機能の追加や違うメソッドを使うといった実験に取り組むこともおすすめです。

この経験を通して、チュートリアルから得られるコンセプトを本当に学んだかどうかをテストできるのです。

以下のリストからプロジェクト名をクリックすると、この記事の各項目へ飛ぶことができます。

もしも、Python の基礎をしっかり固めたいならば、freeCodeCamp の初心者向けの Python チュートリアルを視聴することをおすすめします。(編集注: 日本語版はこちら)

作成可能な Python プロジェクト

1. Mad Libs (マッドリブス)
2. 数あてゲーム (コンピューター側の数)
3. 数あてゲーム (ユーザー側の数)
4. じゃんけん
5. ハングマン
6. カウントダウンタイマー
7. パスワード生成システム
8. QR コードのエンコード／デコード
9. ○×ゲーム
10. AI ○×ゲーム
11. 二分探索アルゴリズム
12. マインスイーパー
13. 数独解決
14. 画像加工
15. マルコフ連鎖テキスト作成
16. ピンポンゲーム
17. スネークゲーム
18. 四目並べ
19. テトリス
20. オンライン多人数ゲーム
21. Web スクレイピング
22. ファイル名変更機能
23. 天気プログラム
24. Python での Discord Bot 開発 - クラウド上での無料ホスティング
25. スペースインベーダーゲーム

Python での Mad Libs (マッドリブス) 開発

「Kylie Ying のチュートリアル」では、ユーザーが入力する情報を取得する方法、Python の文字列フォーマットである f-strings の使い方、そして、コンソールに出力された結果を確認する方法を学びます。

このチュートリアルは、Python での文字の連結に慣れるにあたり、とても良い初心者向けのプロジェクトとなります。

Python での数あてゲーム開発 (コンピューター側の数)

「Kylie Ying のチュートリアル」では、Python のランダムモジュールの動かし方、関数の作り方、ループ処理と条件分岐の使い方、そして、利用者が入力した情報を取得する方法を学べます。

Python での数あてゲーム開発 (ユーザー側の数)

「Kylie Ying のチュートリアル」のこのパートでは、今度はコンピューターがユーザー側の数を予想する数あてゲームを作成します。こちらでも Python のランダムモジュールの動かし方、関数の作り方、ループ処理と条件分岐の使い方、そして、利用者が入力した情報を取得する方法を扱います。

Python でのじゃんけんゲーム開発

「Kylie Ying のチュートリアル」では、random.choice()、if 文、ユーザー入力の取得を扱います。これは、条件分岐や関数のような基礎を固めるのに役立つプロジェクトです。

Python でのハングマン開発

「Kylie Ying のチュートリアル」では、辞書型、リスト型、そして、条件がネストされている中での活用の仕方を学べます。これらに加えて、文字型と random 関数のモジュールについても理解できるでしょう。

Python でのカウントダウンタイマー開発

「Code With Tomi のチュートリアル」では、time という時刻データへのアクセスと変換の Python のモジュールを利用して、カウントダウンタイマーを開発する方法を学べます。このチュートリアルは、Python における while ループの使い方を学ぶことができるので、Python の初心者におすすめのプロジェクトの一つです。

Python でのパスワード生成システム開発

同じく「Code With Tomi のチュートリアル」で、ランダムのパスワードを生成するシステムについて学べます。パスワードの数とパスワードの長さを利用者から受け取り、ランダムなパスワードを生成します。
このプロジェクトでは、loop 処理と Python の標準モジュールである random 関数の使い方を学べるでしょう。

Python での QR コードのエンコード／デコード開発

「Code With Tomi」のチュートリアルで、QR コードの作り方、そして、QR コードの情報をエンコード／デコードする処理について学べます。このプロジェクトは、QR コードライブラリを利用します。

初心者にとって、Pythonの異なるモジュールをインストールして使うことに慣れるのに最適なプロジェクトの一つでしょう。

Python での○×ゲーム開発

「Kylie Ying のチュートリアル」では、コマンドラインで、複数人のプレイヤーとプレイできる〇×ゲームを作る方法を学べます。ネストされた if 文の使い方を練習したり、time と math という 2 つの Python の標準モジュールの使い方を学んだりできます。

Python での AI ○×ゲーム開発

「Kylie Ying のチュートリアル」で、コンピュータが負けることのない〇×ゲームの作り方を学べます。このプロジェクトは、意思決定に用いられる再帰的アルゴリズムであるミニマックス・アルゴリズムを利用します。

Python での二分探索アルゴリズム開発

「Kylie Ying のチュートリアル」で、バイナリサーチ (二分探索) と呼ばれる分割統治アルゴリズムの実装方法を学べます。これは、採用面接で出題されることもある検索アルゴリズムで、コードでの実装方法を知っておくことが重要です。

Python でのマインスイーパー開発

「Kylie Ying のチュートリアル」で、コマンドラインでのマインスイーパーゲームを開発できます。このプロジェクトは、再帰とクラスの処理にフォーカスしたプロジェクトです。

Python での数独解決開発

「Kylie Ying のチュートリアル」で、バックトラックの技術を活用する数独の解決を開発できます。バックトラックは、問題を解決するにあたり、あらゆる組み合わせの探索を行う再帰的な技法の一つです。

Python での画像加工開発

「Kylie Ying のチュートリアル」では、画像フィルターを作成して、画像のコントラスト、明るさ、ぼかしを変更する方法を学べます。このプロジェクトを始める前に、スターターファイルをダウンロードする必要があります。

Python でのマルコフ連鎖テキスト作成開発

「Kylie Ying のチュートリアル」では、過去の状態に基づいて未来の状態を予測する確率モデルとして知られるマルコフ連鎖モデルについて、そしてそれを歌詞の関係にどのように適用できるかを学べます。このプロジェクトは、Python での人工知能への素晴らしい入門講座となるでしょう。

Python でのピンポンゲーム開発

「Christian Thompson のチュートリアル」では、Python での古典的なピンポンゲームの再構築の仕方を学べます。OS の動かし方、そして、タートルの Python モジュールを利用して、ゲームのグラフィックスを作成する方法を学びます。

Python でのスネークゲーム開発

「Tech with Tim のチュートリアル」では、Python でなつかしのスネークゲームを再構築する方法を学べます。このプロジェクトは、オブジェクト指向のプログラミングと Python でゲームを作るための人気モジュールである Pygame を使います。

Python での四目並べ開発

「Keith Galli のチュートリアル」で、昔からある四目並べのコネクトフォーの作り方を学べます。このプロジェクトでは、numpy、math、pygame、そして sys という Python モジュールを活用します。

このプロジェクトは、既に初心者向けの小規模の Python プロジェクトに取り組んだことがある人に最適です。Python プロジェクトの開発が初めての場合は、ここまで紹介したリストの一つに先に取り組むことを強くおすすめします。

Python でのテトリス開発

「Tech with Tim のチュートリアル」では、昔からあるテトリスゲームを再開発する方法を学べます。このプロジェクトは、Pygame を活用し、開発初心者が次のレベルのスキルを取得するのに良い機会です。

Python でのオンライン多人数ゲーム開発

「Tech with Tim のチュートリアル」では、世界中の人たちと遊べるオンラインのマルチプレイヤーゲームの開発を学べます。このプロジェクトは、Sockets やネットワーク、そして、Pygame の使い方を学ぶ素晴らしい第一歩となるでしょう。

Python での Web スクレイピング開発

「Code With Tomi のチュートリアル」で、利用者が入力する GitHub の利用者リンクに対して、Web スクレイピングを通して、プロフィール画像リンクを出力する方法を学べます。Web スクレイピングは、Web ページからデータを集める手法の一つです。

Python でのファイル名変更機能開発

「Code With Tomi のチュートリアル」で、コンピュータ上の任意のフォルダにある全てのファイルについて、Python コードに書かれた条件に基づいて名前を変更するプログラムの開発を学べます。

Python での天気プログラム開発

「Code With Tomi のチュートリアル」で、特定の地域の利用者データを集めて、集められた地域の詳細な気象情報を出力する仕組みを開発します。これは、API からデータを取得する方法を学び始めるのに適したプロジェクトです。

Python での Discord Bot 開発 - クラウド上での無料ホスティング

「Beau Carnes のチュートリアル」で、利用者がオンラインチャットを楽しめるプラットフォームである Discord で機能する bot を開発する方法を学べます。このプロジェクトは、Discord API の仕組み、そして、Replit IDE について教えてくれます。

このビデオが公開された後、Replit は、環境変数をプログラムに保存する方法を変更しました。Replit の環境変数の設定方法は、このチュートリアルから確認してください。

Python でのスペースインベーダーゲームプロジェクト

「buildwithpython のチュートリアル」では、Pygame を用いたスペースインベーダーゲームの開発方法を学べます。ゲーム上でのループ処理、衝突検出、キープレスイベントなどゲーム開発におけるたくさんの基礎を学べます。

そのためには指定の認定プロジェクトを完成させる必要がありますが、いざ取り組もうと思ってもどこから手を付けたらいいか分からなくて挫折してしまう人も多いようです。

そこで、YouTube チャンネル freeCodeCamp Japanese にて HTML と CSS を扱う新講座を公開しました。日本語チャンネルとして初のオリジナル講座です。

この講座では、レスポンシブウェブデザイン認定証に必要な最初の認定プロジェクト「アンケートフォーム」に実際に取り組みながら、HTMLとCSSの基本、問題の解決方法、作業に役立つツールなどについて学習します。

認定プロジェクトに限らず、自分の力でウェブ開発に取り組むために役立つ知識が学べます。

この講座は私、松田が作成しました。私自身も freeCodeCamp カリキュラムを通してウェブ開発を学んだのですが、他のプログラミング教材にない freeCodeCamp の魅力だと感じたのが、この認定プロジェクトでした。

ざっくりとしたユーザーストーリーを基に自分で考えてコードを書いていく経験は、ただチュートリアルをこなしているだけでは得られない実力を付けるためにとても役立ったと感じています。

その経験を通して得たものを、この講座で解説しています。

この講座では以下の流れでプロジェクトに取り組みます。

• Visual Studio Code の導入
  • 日本語言語パック、拡張機能のインストール
• HTML ボイラープレートを書く
• ユーザーストーリーの確認
• 最低限のコードを書く
  • プレビューと自動テストの活用方法
  • MDN Web Docs の紹介
• HTML の改善
• CSS を書く
  • 開発者ツールの活用
• 画像の追加方法
• フォーラムでの質問方法

本講座は YouTube で全編無料公開されています。(全 2.5 時間)

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

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

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

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

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

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

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

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

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

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

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

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 では、ウェブページを構成する要素を明示するのに、標準的な (基本的にはただのラベルである) タグのセットを使用します。それぞれのタグは山かっこを使用して記述します。

たとえば、タイトルタグは <title>My Page Title</title>、段落 (パラグラフ) タグは <p>たくさんのランダムなテキストコンテンツ。</p>、というように明示します。

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

<tagname>

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

</tagname>

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

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

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

先ほど、<title> タグが出てきましたね。これはブラウザーのタブに表示される、ウェブページのタイトルを指定します。このタグは <head>...</head> セクション内に置く必要があります。

次は <body> タグです。このタグの中のすべてのコンテンツが、ウェブページの主なコンテンツを構成します。これら 4 つのタグを組み立てると、次のようになります:

<html>
    
    <head>
        <title>My Page Title</title>
    </head>
        
    <body>
        <p>A bunch of random text content.</p>
    </body>

</html>

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

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

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

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

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 のセレクターがあります。上記の場合では、<p> (paragraph - 段落) の HTML タグを表す文字 p がこれにあたります。これは、ウェブページ上のすべての <p> タグに対して、中かっこ内に記述したスタイルが適用されることを意味しています。

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

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

おそらく、あなたはこの動作を確認することができるでしょう。上記の CSS コードスニペットは、<p> タグ内に配置されているすべてのテキストを、赤色で、かつ文字サイズを 12 ピクセルで表示するよう、ブラウザーに指示します。

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

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

<head>

    <title>My Page Title</title>

    <link rel="stylesheet" type="text/css" href="/home/style.css">

</head>

この例では、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 内の <script> タグの中に直接記述できます。

長い間、JavaScript コードは、主にウェブブラウザー内で実行することしかできませんでした。ですがこのような考え方は、どこででも実行できるスタンドアロンな JavaScript 実行環境を作り出す、Node.js プロジェクトによって一変しました。

ブラウザー内 (つまりクライアント側) だけではなく、Node.js はさまざまなコンピューターのローカル環境にインストールすることができ、そこで JavaScript コードの開発や実行ができるようになります。また、ウェブサーバーにも Node をインストールできるので、JavaScript を単にウェブブラウザーのフロントエンドコードとして使用するだけでなく、アプリケーションのバックエンドコードとしても、使用することができるのです。

概要の説明は済んだので、ここからは JavaScript の基本をいくつか掘り下げてみましょう。

JavaScript における変数と代入

変数はおそらくプログラミングにおけるもっとも重要な概念を表しています。変数とは、特定の値を参照するのに使用する、名前もしくはプレースホルダーのことです。

変数 (variable) は、保存されている値をプログラムの実行中に変更できる、という意味を含んでいます。

変数には、数値、文字列、リスト (配列)、および後ほど詳しく説明する他のデータ構造を保存できます。

あらゆるプログラミング言語が変数を使用しますが、構文は言語によって異なります。

変数は、コードの別の場所からでもその値を参照できるので便利です。そうすることで、必要に応じて変数の値をチェックしたり、その値の変化に応じて異なる処理を実行したりできます。

JavaScript では、let x; というように、let キーワードを使用して変数を宣言します。

この例は、x をコード内で使用できる変数として宣言しています。セミコロンを行末に加えていることに注目してください。JavaScript (と、他の多くの言語) では、セミコロンでコードの各文の終わりを明示します。

変数 x の作成が済んでいれば、x = 10; のように、代入演算子とも呼ばれる等号 (=) を使用して、その変数に値を代入できます。

この例では、数値 10 を x という名前の変数に代入しています。これにより、コード内の別の場所で x を使用すると、それが値 10 に置き換えられます。

次のようにして、変数の宣言と代入の両方を 1 行で行うこともできます:

let x = 10;

JavaScript におけるデータ型

直前のセクションで、整数 (正の整数) の値を x という名前の変数に格納しました。変数には浮動小数点数として知られている、小数も格納できます。たとえば、let x = 6.6; と記述できます。

変数に格納できる値のいろいろな型のことを、データ型といいます。ここまでは、数値型 (整数と浮動小数点数) しか出てきませんでしたが、それではデータ型の中のひとつを扱っただけにすぎません。変数には、テキストデータも同じように格納できるのです。

コーディング用語では、文字のまとまりのことを文字列 (String) といいます。文字列値は、次のように一重または二重引用符で囲むことで、変数 x に格納できます:

let x = 'Hello there!';

let y = "Hey bud!";

次に説明するデータ型は論理型 (Boolean) です。論理型は、true もしくは false のどちらかの値を取ることができます。なお、この 2 つの値はすべて小文字でなければなりません。JavaScript において、true と false は論理型変数の値に使われる専用のキーワードです。次のように使用されます:

let x = true;

let y = false;

true と false が、文字列の時のように引用符で囲まれていないことに注目してください。ここでもし引用符で囲んでしまうと、値は文字列型となり、論理型ではなくなります。

論理型は、次のセクションで学ぶ、条件文 (if/else 文) などのプログラムのフロー制御によく使用されます。

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

変数と JavaScript のデータ型の基本を理解できたところで、それらを使ってできることを、いくつか見ていきましょう。

変数を用いて何を行うのかについて、コードの中で指示しなければ、変数は役に立ちません。そこで、変数を用いた処理を実行するために、文 (statement) を使用します。

文とは、定義済みの変数の値などをもとに処理を実行する、コードの中の特別なキーワードのことです。文によって、プログラムの論理の流れを定義でき、プログラムの動作を決めるさまざまな便利な処理を実行できます。

If / Else 文

では、最初に if 文について説明します。if 文は、条件が満たされた (true である) 時だけ、処理を実行するようにしてくれます。使い方はこちらです:

let x = 10;

if ( x > 5 ) {
    console.log('X is GREATER than 5!');
} else {
    console.log('X is NOT GREATER than 5!');
}

まず、x という名前の変数を定義し、その値を 10 に設定します。その次に if 文が記述されています。キーワード if の後ろには、評価される条件が入った、一組の丸かっこがあります。この例では、x > 5 が条件です。x は 10 と等しい、と定義してあるので、この条件は true と評価されます。

丸かっこ内の条件が true なので、中かっこの間に記述されているコードが実行され、文字列「X is GREATER than 5!」が画面に表示されるのを確認できます (ここでは console.log() の意味には触れず、単にそれが、丸かっこ内の値を画面に表示する、ということだけ理解していただければ大丈夫です)。

同じサンプルコードの中には、else 文も含まれていますね。これは、条件が false と評価された場合に、その後ろの中かっこの間のコードを実行します。

While ループ

次に説明する文の種類は、while ループです。ループを使用することで、コードを何度もコピー＆ペーストしなくても、コードブロックを必要な回数だけ繰り返し実行できるようになります。

たとえば、ある文を 5 回画面に表示させる場合を考えてみましょう。これは次のようにして行うことができます:

console.log('とても重要なメッセージです!');
console.log('とても重要なメッセージです!');
console.log('とても重要なメッセージです!');
console.log('とても重要なメッセージです!');
console.log('とても重要なメッセージです!');

5 つのメッセージを表示するだけなら、これでも問題ないかもしれませんが、100 個や 1000 個ではどうでしょうか？何回もコードを繰り返し実行してくれる、よい方法が必要ですよね。ループは、それを可能にしてくれます。コーディング用語では、何回もコードを反復して実行することを、イテレーション (iteration) といいます。

次の while ループでは、条件が true である限り、その後ろのコードブロックを実行し続けます:

let x = 1;

while ( x <= 100 ) {
    
    console.log('とても重要なメッセージです!');
    
    x = x + 1;
    
}

この例では、x を値 1 で初期化しています。次に、while ループを記述しています。if 文と同様に、条件が入った一組の丸かっこがありますね。この場合は、x <= 100 が条件です。x が 100 以下であれば、条件は true と評価されます。

その後ろの中かっこ内に、実行するコードブロックが記述されています。最初にコンソールにメッセージを表示します。次に、x を 1 ずつインクリメントします。

このタイミングで、ループは条件を再評価し、結果が true のままであるか確認します。1 回目のループ実行時に、変数 x は 1 インクリメントされているので、現在は値 2 を保持しています。2 は 100 以下なので、条件は変わらず true と評価されます。

ループ内のコードを繰り返し実行しながら、x の値は 101 になるまでインクリメントされます。そしてこの時点で、x が 100 より大きくなり、条件は false と評価され、ループ内のコードは実行されなくなります。

HTML の <script> タグについて

これで JavaScript の紹介は済んだので、今度は JavaScript コードのファイルを HTML ページに追加する方法について説明します。その方法とは、これまでに説明していなかった、<script> タグという HTML タグを使用することです。

これは、CSS ファイルを HTML に追加するのに使用した <link> 要素と似ていますが、<script> 要素は主に JavaScript のために使用します。

例えば先ほど説明した JavaScript のサンプルコードの一つを、HTML ファイルと同じフォルダ内の、customscript.js という名前のファイルに保存したとしましょう。この場合、HTML の <head>...</head> セクション内に以下のタグを追加することで、この JavaScript ファイルを HTML に追加できます:

<script type="text/javascript" src="customscript.js"></script>

これにより、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. 新しいファイルとフォルダをプロジェクトに追加する
2. 既存のファイルまたはフォルダ内のコードを編集する
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 <filename.ext> コマンドについて説明します。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 <package-name> コマンドを使用して、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 までご連絡いただければ幸いです。

この記事では、現在日本語版が提供されている freeCodeCamp の教材や freeCodeCamp コミュニティのコンテンツを紹介します。

動画講座

• YouTube チャンネル: freeCodeCamp Japanese

この夏日本語版チャンネルを立ち上げ、現在までに計 3 種類の講座を公開しました。

現在公開されている講座は、さまざまなプログラミング言語の基礎をゼロから学ぶ入門レベルの講座となっています。ぜひ、興味のある言語の学習をここから始めてみてください。

C++ 入門 (全 5 時間)

先日公開したばかりの新講座です。

• C++ 入門: 講座概要

Python 入門 (全 6 時間)

英語版 freeCodeCamp.org チャンネルの一番人気の動画を日本語化した Python 入門講座です。

• Python 入門: 講座概要

JavaScript 入門 (全 4 時間)

登録者数 600 万人を超える英語版 freeCodeCamp.org チャンネルを運営している Beau さんの JavaScript 入門講座を日本語化しました。

• JavaScript 入門: 講座概要

コミュニティ投稿

また、YouTube チャンネルのコミュニティタブでも、更新情報やプログラミングに関するクイズを投稿しています。

現在投稿されている動画は、英語版チャンネルの動画をベースに日本語化したものですが、字幕や吹き替えではなく、日本語話者向けに講座の内容を再検討して撮り直しています。

言語のハードルをできる限り取り除き、プログラミングの学習に集中できることを目指しています。

今後、日本語版チャンネルオリジナルの講座も予定しておりますのでご期待ください。

動画講座の最新情報を受け取るには、ぜひチャンネル登録をお願いします。

チュートリアル記事

• freeCodeCamp ニュース

この記事が掲載されているサイトです。世界中の freeCodeCamp コントリビューターの手による記事を順次翻訳して掲載しています。

翻訳コントリビューターも募集しています。

カリキュラム (認定講座)

• freeCodeCamp.org

freeCodeCamp の中心となるプログラミング学習サイトです。

各ステップに自動テストが用意されており、実際に手を動かしてコードを書きながら学べるインタラクティブな形式の講座となっています。講座を修了したことを証明する認定証も取得できます。

現在、10 種類の認定講座とコーディングインタビューの練習問題が日本語化されています。

また、リニューアルされた「新レスポンシブウェブデザイン認定講座」の日本語版も公開しました。

こちらも翻訳コントリビューターを募集しています。

質問用フォーラム

• freeCodeCamp フォーラム 日本語カテゴリー

カリキュラムに取り組む中でつまずいても、日本語で質問できます。

英語圏のユーザーが圧倒的に多いため、コメントが英語で返ってきて驚くこともあるかもしれませんが、そのまま日本語でやりとりを続けても構いませんし、英語で返事を書くことに挑戦するのも良いと思います。

質問を通して、世界中の開発者との交流を楽しんでください。

また、このフォーラムでアクティブに活動しているユーザーを、年に一度トップコントリビューターとして発表しています。

ぜひ他のユーザーの質問にも答えてみましょう。来年のトップコントリビューターのリストにはあなたの名前が載っているかもしれません。

Twitter

日本語版 freeCodeCamp に関する情報は、主に Twitter アカウント @freecodecampJA で発信しています。

無料の学習リソース

この記事で挙げた各講座を含め、freeCodeCamp のコンテンツはすべて無料で公開されています。

ぜひプログラミング学習にお役立てください。

この度、YouTube チャンネル freeCodeCamp Japanese にて C++ 入門講座を公開しました。

この講座では、C++ の基礎の基礎として、環境構築の手順から、さまざまなデータ型の扱い方、if 文、for 文などの制御構文、ポインタやクラスの説明など、プログラミング言語を学び始めるにあたって押さえておきたい文法の基礎を中心に学びます。

本動画は、英語版 freeCodeCamp.org チャンネルで公開されている「C++ Tutorial for Beginners - Full Course」を元にした日本語版として作成されました。

日本語版動画は、今回も freeCodeCamp コントリビューターの Besshy さんにより作成されました。Besshy さんは慶應義塾大学の大学院生で、「KCS :: Keio Computer Society」という YouTube チャンネルも運営しています。

プログラミング言語入門シリーズ第三弾として、英語版チャンネルでも人気の高い C++ の入門講座を日本語化してくださいました。

この講座では以下のトピックを学習します。

• 環境構築 (Windows / macOS)
• [演習] 三角形を書く
• 変数
• データ型
• 文字列を扱う
• 数値を扱う
• ユーザーの入力を受け取る
• [演習] 計算機を作る (1)
• 配列
• 関数の定義と引数
• 関数の戻り値
• if 文
• 比較演算子
• [演習] 計算機を作る (2)
• switch 文
• while 文
• [演習] 推理ゲームを作る
• for 文
• [演習] 累乗を計算する関数
• 二次元配列と for 文のネスト
• コメントアウト
• ポインタ
• クラスとオブジェクト指向
• クラスとコンストラクタ
• オブジェクト内の関数
• Setter と Getter
• クラスの継承

本講座は YouTube で全編無料公開されています。(全 5 時間)

この度、新たに JavaScript 入門講座を YouTube チャンネル freeCodeCamp Japanese にて公開しました。

この講座では、JavaScript の学習を始めるにあたって知っておきたい基礎として、コードの実行方法やコメント、簡単な四則演算、if 文や for 文などの基本的な文法から、近年主流となっている ES6 のアロー関数、クラス、import/export などの新しい文法まで段階を追って学習します。

本動画は、英語版 freeCodeCamp.org チャンネルで公開されている「Learn JavaScript - Full Course for Beginners」を元にした日本語版として作成されました。

日本語版動画は freeCodeCamp コントリビューターの Besshy さんにより作成されました。Besshy さんは慶應義塾大学の大学院生で、「KCS :: Keio Computer Society」という YouTube チャンネルも運営されています。

freeCodeCamp Japanese チャンネルの第一弾動画「Python 入門: 基礎から始める集中講座」に続き、今回は JavaScript の入門講座を作成してくださいました。

この講座では以下のトピックを学習します。

• JavaScript の環境構築、実行
• コメントアウト
• データ型と変数
• 代入演算子 (=)
• 四則演算 (足し算、引き算、掛け算、割り算)
• インクリメント・デクリメント
• 浮動小数点
• 余りの計算
• 複合代入演算子 (+= -= *= /=)
• エスケープシーケンス
• 文字列の連結
• 文字列の長さの取得
• 文字列の要素を取り出す (ブラケットノーテーション)
• イミュータブルな文字列
• 配列、多次元配列
• インデックスを使った配列の要素へのアクセス
• 配列の操作 (push() pop() shift() unshift())
• 関数
• 引数
• スコープ (グローバルスコープ、ローカルスコープ)
• 真偽値 (Boolean)
• if 文を使った条件分岐
• 比較演算子 (== === != !== > <)
• 論理演算子 (&& ||)
• switch 文
• JavaScript のオブジェクト
• オブジェクトの値の変更、追加、削除
• while ループを使った繰り返し処理
• for ループを使った繰り返し処理
• do...while 文を使った繰り返し処理
• 乱数を発生させる
• parseInt() 関数
• 条件 (三項) 演算子
• var、let、const
• オブジェクトが変更されることを防ぐ
• アロー関数
• 関数の default 引数
• Rest 演算子
• Spread 演算子
• 分割代入
• テンプレートリテラル
• オブジェクトの簡潔な作り方
• オブジェクト内での関数の定義の仕方
• コンストラクタ関数とクラス
• getter と setter
• require と import

本講座は YouTube で全編無料公開されています。(全 4.5 時間)

この度、日本語版 YouTube チャンネル「freeCodeCamp Japanese」として初の動画講座「Python入門: 基礎から始める集中講座」を公開しました。

この講座では、Python の基礎を環境構築と Hello World から、条件分岐などの基本的な構文、クラスとオブジェクトの利用まで総合的にカバーします。Python に初めて触れる人、今一度基礎をしっかり固めたい人におすすめの講座です。

本動画は、英語版 freeCodeCamp.org チャンネルで公開されている一番人気の動画「Learn Python - Full Course for Beginners [Tutorial]」 を元にした日本語版として作成されました。

日本語版動画作成者の Besshy さんは慶應義塾大学の大学院生で、AI や量子コンピューターの研究をされています。また「KCS :: Keio Computer Society」という YouTube チャンネルも運営されており、そちらでもプログラミングやコンピューターサイエンスに関する動画を多数投稿されています。この度動画講座作成という形で freeCodeCamp コミュニティに貢献してくださいました。

この講座では以下のトピックを学習します。

• Python と PyCharm のインストール、環境構築
• Hello World
• [演習] 三角形を書いてみる
• 変数とデータ型
• 文字列を扱う
• 数値を扱う
• ユーザー入力を受け取る
• [演習] 基礎的な計算機を作る
• リスト
• リストを操作する関数
• タプル
• 関数
• Return 文
• If 文
• If 文と比較演算子
• [演習] 計算機を改善する
• 辞書
• While ループ
• [演習] Guessing Game を作る
• For ループ
• [演習] 累乗を計算する関数を書く
• 二次元配列と For 文のネスト
• [演習] 翻訳機を作る
• コメント
• Try / Except
• ファイルの読み込み
• ファイルの書き込み
• モジュールと pip
• クラスとオブジェクト
• [演習] クイズゲームを作る
• メソッド
• 継承
• Python のインタープリター

本講座は YouTube で全編無料公開されています。(全 6.5 時間)

% 記号を見た時に、それが「パーセント」であると思われるかもしれませんが、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)

実行結果:

1
3
5
7
9

ようこそ! 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 が挿入されています。

次のように <file>.readlines() でファイルを読み込むことで、これをチェックできます:

with open("names.txt", "r") as f:
    print(f.readlines())

出力は次のように表示されます:

ご覧の通り、テキストファイルの最初の 3 行は、行の終わりが改行文字 \n になっており、「こっそり」改行してくれています。
💡 ヒント: ファイルの最後の行だけは改行文字で終わっていないことに注目してください。

🔹 まとめ

• Python の改行文字は \n です。改行文字はテキストの行の終わりを示すのに使用されます。
• end = <character> を使用することで、改行させずに文字列を出力に表示できます。ここで、<character> は行を分けるために使用される文字です。

この記事があなたのお役に立ち、気に入ってくだされば幸いです。 これで、Python で改行文字を扱うことができるようになりましたね。

よろしければ私 (原著者) のオンライン講座をチェックしてみてください。Twitter のフォローもよろしくお願いします。 ⭐️

コミット前の git add を取り消すには git reset <file> を実行します。すべてのファイルの変更を対象とする場合には git reset を実行します。

古いバージョンの Git では、それぞれ git reset HEAD <file>、git reset HEAD というコマンドでした。この変更は Git 1.8.2 で対応されました。

その他のよく使われる Git の操作については下記の記事を参照してください。

• Git checkout (英語版)
• Git pull vs Git fetch (英語版)
• Gitignore (英語版)

Git に関する予備知識

Git プロジェクトの 3 つのセクションを理解する

Git プロジェクトには以下 3 つの重要なセクションがあります。

1. Git ディレクトリ
2. ワーキングディレクトリ (またはワーキングツリー)
3. ステージングエリア

Git ディレクトリ (YOUR-PROJECT-PATH/.git/ にあるディレクトリ) は、Git がプロジェクトを正確に追跡するために必要なすべてのものが保存されている場所です。その中には、メタデータと、圧縮されたプロジェクトファイルの各バージョンを含むオブジェクトデータベースが含まれます。

ワーキングディレクトリは、ユーザーがプロジェクトに対してローカルで変更を行う場所です。ワーキングディレクトリは Git ディレクトリのオブジェクトデータベースからプロジェクトのファイルを取得し、ユーザーのローカルマシンに配置します。

ステージングエリアは、次のコミットに含める予定の情報を保存しているファイルです (「index」「stage」「cache」とも呼ばれます)。コミットとは、ステージングエリアに追加された変更を保存するよう Git に伝えるタイミングです。Git はその時点のファイルの状態のスナップショットを撮り、スナップショットを Git ディレクトリに永続的に保存します。

この 3 つのセクションにより、ある時点のファイルの状態は主に以下 3 種類のいずれかの状態を取ります。「変更済 (modified)」「ステージ済 (staged)」そして「コミット済 (committed)」です。ワーキングディレクトリにあるファイルに変更を加えると、そのファイルは「変更済」となります。次にそのファイルをステージングエリアに追加すると (訳注: git add コマンドによりこれが行われる)「ステージ済」となります。最後に、コミットすると「コミット済」となります。

Git のインストール方法

• Ubuntu の場合: sudo apt-get install git を実行
• Windows の場合: ダウンロードページ
• Mac: ダウンロードページ

Git 環境の設定

Git 環境をカスタマイズできる git config というツール (コマンド) があります。特定のコンフィグ変数を設定することで、Git の見た目や機能を変更できます。これから説明するコマンドは、コマンドラインインターフェースで実行します (Mac ならターミナル、Windows ならコマンドプロンプトか PowerShell)。

コンフィグ変数の保存場所には次の 3 つのレベルがあります。

1. システム: /etc/gitconfig に保存されている変数は、そのコンピューターのすべてのユーザーに適用されるデフォルト設定です。このファイルに変更を加えるには、git config コマンドと --system オプションを使用します。
2. ユーザー: ~/.gitconfig または ~/.config/git/config に保存されている変数は、ある特定のユーザーの設定として適用されます。このファイルに変更を加えるには、git config コマンドと --global オプションを使用します。
3. プロジェクト: YOUR-PROJECT-PATH/.git/config に保存されている変数は、そのプロジェクトだけに適用される設定です。このファイルに変更を加えるには、git config コマンドを使用します。

互いに競合する設定がある場合、プロジェクトレベルの設定はユーザーレベルの設定より優先され、ユーザーレベルの設定はシステムレベルの設定より優先されます。

Windows ユーザー向けの注意: Git は、ユーザーレベルの設定ファイル (.gitconfig) をあなたの $HOME ディレクトリ (C:\Users\$USER) の中から探します。Git はまた /etc/gitconfig も探しますが、これは MSYS のルートディレクトリからの相対パスであり、インストーラーの実行時にあなたが Git を Windows システムのどこにインストールするよう指定したかによって変わります。あなたが Git for Windows のバージョン 2.x 以上を使用しているなら、システムレベルの設定ファイルが下記の場所にも存在します。

• Windows Vista 以降なら C:\ProgramData\Git\config
• Windows XP では C:\Documents and Settings\All Users\Application Data\Git\config

この設定ファイルは、git config -f <file> コマンドを管理者として実行する方法でのみ変更が可能です。

ユーザー名とメールアドレスの追加

Git は、ユーザー名とメールアドレスをコミットの情報の一部として含めます。下記コマンドでこの情報をユーザーレベルの設定ファイルに設定できます。

git config --global user.name "My Name"
git config --global user.email "myemail@example.com"

テキストエディタの変更

Git は自動でデフォルトのテキストエディタを使用しますが、変更することも可能です。下記は、代わりに Atom エディタを使用するよう設定する例です。(--wait オプションは、シェルにテキストエディタを待つように指示します。これにより、プログラムの実行が先へ進む前に、テキストエディタで作業することができます。)

git config --global core.editor "atom --wait"

出力の表示色の設定

このコマンドで、シェルが Git の出力に色を付けるように設定できます。

git config --global color.ui true

すべての設定を確認するには、git config --list コマンドを使用します。

プロジェクト内で Git を初期化する

Git のインストールと設定後、バージョン管理機能を使い始めるためには、プロジェクトディレクトリ内で Git を初期化する必要があります。コマンドラインで、cd コマンドを使用してあなたのプロジェクトの一番上 (ルート) のディレクトリに移動します。次に、git init コマンドを実行します。このコマンドは、Git があなたのプロジェクトを追跡するのに必要なファイルやオブジェクトを含んだ Git ディレクトリを設置します。

Git ディレクトリはプロジェクトのルートディレクトリに設置されていることが重要です。Git はサブディレクトリ内のファイルを追跡することができますが、Git ディレクトリから見て親ディレクトリにあるファイルは追跡できません。

Git のヘルプを表示する

Git コマンドの使い方を忘れた場合、コマンドラインから Git のヘルプにアクセスする方法がいくつかあります。

git help COMMAND
git COMMAND --help
man git-COMMAND

このコマンドは、指定されたコマンドのマニュアルページを表示します。シェルウィンドウに表示されたマニュアルは、上下キーでスクロールするか、下記のキーボードショートカットを使用して操作できます。

• f またはスペースキー: 次のページ
• b: 前のページ
• q: 閉じる

文字列 (String) オブジェクトは、ひと続きの文字 (characters) によって表されます。

Java Swing で作業したことがあれば、GUI からの入力を受け付ける際に使う JTextField や JTextArea のようなコンポーネントをご存じでしょう。これらのコンポーネントは入力を文字列として受け取ります。

例えば Swing でシンプルな電卓を作りたい場合、文字列を整数 (Integer) に変換する方法が必要です。そこでこの疑問が浮かんできます。どうすれば文字列を整数に変換できるでしょうか？

Java では、文字列を整数に変換するには Integer.valueOf() や Integer.parseInt() を使用できます。

1. Integer.parseInt() を使用して文字列を整数に変換する

このメソッドは文字列を プリミティブ型の int に変換して返します。文字列が有効な整数を含まない場合は NumberFormatException が発生します。

そのため、文字列を int に変換する際には必ずコードを try-catch ブロック内に配置して、この例外を処理する必要があります。

Integer.parseInt() を使って文字列を int に変換する例を考えてみましょう。

        String str = "25";
        try{
            int number = Integer.parseInt(str);
            System.out.println(number); // output = 25
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

このコードに整数として無効な値を入力して、例外を発生させてみます。

     	String str = "25T";
        try{
            int number = Integer.parseInt(str);
            System.out.println(number);
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

上記のコードでは 25T を整数に変換しようとしました。これは有効な入力値ではありません。したがって、NumberFormatException が発生します。

こちらが上記のコードの出力です。

java.lang.NumberFormatException: For input string: "25T"
	at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
	at java.lang.Integer.parseInt(Integer.java:580)
	at java.lang.Integer.parseInt(Integer.java:615)
	at OOP.StringTest.main(StringTest.java:51)

次に、Integer.valueOf() メソッドを使って文字列を整数に変換する方法を考えます。

2. Integer.valueOf() を使用して文字列を整数に変換する

このメソッドは文字列を Integer オブジェクト として返します。Java のドキュメント を見ると、Integer.valueOf() は new Integer(Integer.parseInt(s)) と同等の Integer オブジェクトを返すことが分かります。

このメソッドを使う際も try-catch ブロック内にコードを配置します。Integer.valueOf() メソッドを使った例を考えてみましょう。

        String str = "25";
        try{
            Integer number = Integer.valueOf(str);
            System.out.println(number); // output = 25
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

では、無効な整数を入力して上記のコードを壊してみましょう。

        String str = "25TA";
        try{
            Integer number = Integer.valueOf(str);
            System.out.println(number); 
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

前の例と同様に、このコードも例外を発生させます。

こちらが上記のコードの出力です。

java.lang.NumberFormatException: For input string: "25TA"
	at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
	at java.lang.Integer.parseInt(Integer.java:580)
	at java.lang.Integer.valueOf(Integer.java:766)
	at OOP.StringTest.main(StringTest.java:42)

与えられた文字列が有効な数値かどうかを、上述のメソッドを使う前にチェックするためのメソッドを作成するのも良いでしょう。

下記に、渡された文字列が数値かどうかをチェックするシンプルなメソッドを作成しました。

public class StringTest {
    public static void main(String[] args) {
        String str = "25";
        String str1 = "25.06";
        System.out.println(isNumeric(str));
        System.out.println(isNumeric(str1));
    }

    private static boolean isNumeric(String str){
        return str != null && str.matches("[0-9.]+");
    }
}

出力は以下の通りです。

true
true

isNumeric() メソッドは文字列を引数にとります。そしてまず、与えられた値が null かどうかをチェックします。次に matches() メソッドを使用して、0～9 の数字とピリオドが含まれているかどうかをチェックします。

これはシンプルな数値チェックです。ユースケースに応じて、数値をチェックする更に高度な正規表現を自分で書いたり、Google で検索したりするのも良いでしょう。

整数への変換を試みる前に、与えられた文字列が数値かどうかチェックすることがベストプラクティスです。

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

画像: 🇸🇮 Janko Ferlič (Unsplash より)

Medium で筆者とつながることができます。

Happy Coding!

プロジェクトの構築こそ新しいプログラミング言語を学ぶ最善の方法です。

そこで、純粋な JavaScript、React、TypeScript を使用する、初心者にやさしい 40 個のプロジェクトチュートリアルの一覧を作成しました。

チュートリアルについてのアドバイスなのですが、ビデオを見て、プロジェクトを構築し、それを分解してから独自の方法で再構築してみてください。新しい機能を追加したり、違う方法を試したりしてください。

そうすることで、プロジェクトの概念をつかめたかどうかテストできます。

なお、以下のリストの各プロジェクトの上でクリックすれば、対応する記事のセクションまでジャンプできます。

純粋な JavaScript のプロジェクト

1. カラーフリッパーの作り方
2. カウンタの作り方
3. レビューカルーセルの作り方
4. レスポンシブなナビゲーションバーの作り方
5. サイドバーの作り方
6. モーダルの作り方
7. FAQ ページの作り方
8. レストランのメニューページの作り方
9. 背景動画の作り方
10. スクロールについてくるナビゲーションバーの作り方
11. いろいろなコンテンツを表示するタブの作り方
12. カウントダウンタイマーの作り方
13. 独自のロレム・イプサム (Lorem ipsum) の作り方
14. 食材リストの作り方
15. 画像スライダーの作り方
16. じゃんけんゲームの作り方
17. サイモンゲームの作り方
18. プラットフォーマーゲームの作り方
19. Doodle Jump の作り方
20. Flappy Bird の作り方
21. 神経衰弱の作り方
22. もぐらたたきの作り方
23. 四目並べの作り方
24. Snake (蛇) ゲームの作り方
25. インベーダーゲームの作り方
26. フロッガーの作り方
27. テトリスの作り方

React プロジェクト

1. React のフックを用いてまるばつゲームを作る方法
2. React のフックを用いてテトリスを作る方法
3. 誕生日通知アプリの作り方
4. ツアーページの作り方
5. アコーディオンメニューの作り方
6. ポートフォリオページ用のタブの作り方
7. レビュースライダーの作り方
8. カラージェネレーターの作り方
9. Stripe 風の決済メニューページの作り方
10. 買い物かごページの作り方
11. カクテル検索ページの作り方

TypeScript プロジェクト

1. React と TypeScript を用いてクイズアプリを作る方法
2. 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 つのゲームを作成できます:

1. 神経衰弱
2. もぐらたたき
3. 四目並べ
4. Snake (蛇) ゲーム
5. インベーダーゲーム
6. フロッガー
7. テトリス

プロジェクトで扱う重要な概念:

• 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()
• <svg> 要素
• useReducer()
• useContext()

カクテル検索ページの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、カクテル検索ページの作り方について学習します。このプロジェクトでは React Router の使い方を紹介しています。

React Router は、ウェブサイトにナビゲーションを作成して、about (アバウト) ページや連絡先ページのような、さまざまなコンポーネントに表示を変更する機能を提供してくれます。

プロジェクトで扱う重要な概念:

• <Router>
• <Switch>
• 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 個のプロジェクトチュートリアルをお楽しみください。

ハッピーコーディング！