<![CDATA[ Learning To Code - freeCodeCamp.org ]]> https://www.freecodecamp.org/japanese/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Learning To Code - freeCodeCamp.org ]]> https://www.freecodecamp.org/japanese/news/ Eleventy Mon, 11 May 2026 09:57:39 +0000 60 <![CDATA[ プログラミングの学習方法 – 私がコードを学び始めた時に求めていたガイド ]]> https://www.freecodecamp.org/japanese/news/how-to-learn-programming/ 63189c9a87a3a3073e97e5aa 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 ステップのロードマップ

  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×1038 から -1.4×10-45、正の値は 1.4×10-45 から 3.4×1038 の間の小数を格納できます。
  • 論理型 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 までご連絡いただければ幸いです。

]]>