目次
この資料は2025年3月に開催されるjig.jp主催のWeb開発イベントに向けて、参加者の皆様がイベント当日スムーズに作業いただくための事前学習用のドキュメントです。
大きく以下の内容に分けて解説します。
- Visual Studio Code
- GitHub
- Google Chrome
- Git
- JavaScript
- プログラミングは学校の授業で経験しているが、個人でなにかを制作したことはまだない
- 高校生〜大学生
- 所要時間目安: 100分
Visual Studio Code (以下 VSCode)は、近年のWeb開発においてもっとも利用されているコードエディターです。
最近ではGitHub Copilotとの統合の話題で耳にしたことがあるかもしれません。
今回の一連の開発では、コードエディターとしてこのVSCodeを利用します。
以下のリンクから、使用中のマシンのOSに合ったインストーラーをダウンロードし、実行してVSCodeをインストールしてください。
https://code.visualstudio.com/Download
今回の開発では、VSCodeの拡張機能を活用して作業を進めていきます。
以下の拡張機能をそれぞれインストールしてください。
- Japanese Language Pack for Visual Studio Code
- VSCodeを日本語化する拡張機能
- vscode-icons
- VSCodeのエクスプローラーのアイコンを変更する拡張機能
- 特定の名前がついたディレクトリ(フォルダ)もアイコンが変更されて便利
- Live Server
- HTMLファイルを開いているときに開発用サーバーを起動できるようになる拡張機能
- es6-string-html
- JavaScriptファイル内にテンプレートリテラルでHTMLやCSSを記述するときにシンタックスハイライトが効くようにする拡張機能
- Markdown All in One
- Markdownと呼ばれるマークアップ言語を書きやすくなる拡張機能
コマンドラインからインストールする
以下のコマンドでも拡張機能をインストールすることができます。
code --install-extension MS-CEINTL.vscode-language-pack-ja
code --install-extension vscode-icons-team.vscode-icons
code --install-extension ritwickdey.LiveServer
code --install-extension Tobermory.es6-string-html
code --install-extension yzhang.markdown-all-in-oneVSCodeを使いやすくするため、codeというコマンドでVSCodeを起動できるようにパスを設定しておきます。
VSCodeを開いた状態でCtrl(Cmd) + Shift + Pでコマンドパレットを開き、「install」と入力してください。
「シェル コマンド: PATH内に'code'コマンドをインストールします」という選択肢があるので、選択して実行してください。
GitHub は現在では最もメジャーなソースコードの共有サービスです。
以下のリンクからアカウント作成ページを開けます。
ページの指示に従って、必要事項を入力してアカウントを作成してください。
https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home
※ この資料では、GitHub上で特別な取り扱いとなる、ユーザー名と同じ名前のリポジトリのことを READMEリポジトリ と呼称することとします。
アカウントを作成してログインしたら。まずは左上のアバターアイコンから「Your Profile」を選んで自身のプロフィールを確認しましょう。
このページは自身のユーザー名と同じ名前のリポジトリを作成し、直下に README.md というMarkdownファイルを配置して編集することで、プロフィール情報を充実させることが可能です。
早速 READMEリポジトリ を作成しましょう。
GitHubを開いて、ヘッダーの右側にある「+」のボタンから「New Repository」をクリックしてください。
遷移したページで Repository Name にユーザー名と同じ文字列を入力すると、↓のように「<ユーザー名>/<ユーザー名> のリポジトリは特別なリポジトリだよ！」と表示されます。
このまま下の方にスクロールし、「Add a README file」のチェックを入れて、一番下の「Create Repository」をクリックしてリポジトリを作成してください。
作成されたリポジトリのページが開いたら OK です。
試しに自身のプロフィールを確認してみると、先程確認したときとは異なる表示になっていると思います。
ここで、GitHub Pagesという静的ウェブサイトホスティングサービスを紹介しておきます。
「静的ウェブサイト」とは、リクエスト毎には変更されることのない単純なファイルを返却する仕組みのウェブサイトです。
これを「ホスティング」する「サービス」なので、要するにGitHubによって運営されるウェブサーバーに私達の開発したウェブサイトを置かせてもらえるサービスになります。
今回皆さんにGitHubのアカウントを用意していただいたのは、このGitHub Pagesを利用して成果物を公開したいからです。
2.で紹介したGitHubは、「Git Hosting Service」とも呼ばれます。
この「Git」は バージョン管理システム と呼ばれるものの一つです。
ではこの「バージョン管理」とは何なのか、について少し説明します。
バージョン管理とは、管理下にあるファイルの「差分」と「作成・変更日時」を紐づけて一つの「変更」とし、この変更を記録することです。
バージョン管理システムである Git は、この変更それぞれの差分や、変更が行われた時点のファイルの内容を自由に閲覧することが可能です。
バージョン管理システムの管理下にあるディレクトリのことをリポジトリと呼びます。
2.2.2.でGitHub上でリポジトリを作成しましたが、このリポジトリも同じものです。 手元のPCにあるリポジトリを「ローカルリポジトリ」、GitHubのようなホスティングサービスを利用した場合などのサーバーにあるリポジトリを「リモートリポジトリ」と呼びます。
GitはCLIからコマンドを実行して、バージョン管理を行います。
まずは以下のリンクから、使用中のマシンにあった方法で Git をインストールしてください。
https://git-scm.com/downloads
以下によく使うコマンドを紹介します。
git config <設定項目> <設定内容> ... は、Gitの設定を変更するためのコマンドです。
1. でインストールしたVSCodeを起動して、Ctrl(Cmd) + J キーを押すとターミナルが開きます。
git コマンドを利用するうえで、初期設定としてユーザー名とメールアドレスを設定する必要があります。
以下のコマンドを参考に、GitHubアカウントの作成時に設定したそれぞれを設定してください。
git config user.name "<ユーザー名>"
git config user.email "<メールアドレス>"また、後述するコミットメッセージを編集しやすくするため、以下のコマンドも実行しておきましょう。
git config core.editor "code --wait"git init は、ターミナルのカレントディレクトリ下をGit管理するリポジトリとして初期化するコマンドです。
ローカルリポジトリを作成するときに使用します。
今回の勉強会では使用しませんが、覚えておくと良いでしょう。
git clone <url> は、GitHubなどで作成したリモートリポジトリを手元にダウンロードするコマンドです。
今回は 2.2.2. で作成したREADMEリポジトリをcloneしましょう。
GitHubにあるリモートリポジトリに対してアクセスするときに、 SSHという仕組みを利用します。 この仕組みで利用する「鍵」(SSHキーと呼びます)を作成してGitHubに登録する必要があります。
以下のコマンドを実行して、SSHキーを作成してください。
実行中に鍵の保存先とパスフレーズの入力を求められますが、どちらも何も入力せずEnterキーを押すだけで問題ありません。
ssh-keygen -t ed25519以下のコマンドでSSHキーのファイルが作成されたことを確認しましょう。
id_ed25519.pub と id_ed25519 があれば大丈夫です。
ls ~/.ssh注意: id_ed25519.pub を公開鍵、id_ed25519 を秘密鍵と呼びます。
この秘密鍵は名前の通り、他人に公開してはいけないので注意して取り扱いましょう。
続いて、SSHキーをGitHubに登録します。 GitHubを開いて、ヘッダーのアバターアイコンから「Settings」に移動し、「Access」の下にある「SSH and GPG Keys」を開いてください。 (以下のリンクからも開けます)
https://github.com/settings/keys
「New SSH Key」 をクリックして「Add new SSH Key」のページを開いたら、適当な名前をTitleに入力してください。
Key には ~/.ssh/id_ed25519.pub の内容を貼り付けてください。
「Add SSH Key」をクリックしてSSHキーの登録を済ませましょう。
GitHubで作成したリポジトリのページを開き、緑色の「Code」ボタンをクリックします。
URLが表示されるので、コピーしておきます。 以下のようにコマンドを実行してリポジトリをcloneしてください。
# ホームディレクトリへ移動
cd
# devディレクトリを作成する
mkdir dev
# devディレクトリへ移動
cd dev
# リポジトリをクローンする
git clone <URLを貼り付ける>ホームディレクトリの直下にdevディレクトリを作成して、その中にリポジトリをクローンするはずです。
エクスプローラー(Finder)などで確認するか、↑で使ったターミナルでそのままlsコマンドを入力するなどして確認してみましょう。
git pullはローカルリポジトリの内容をリモートリポジトリと同期するコマンドです。
試しに3.3.2.でcloneしたリポジトリに移動して実行してみましょう。
# クローンしたリポジトリ下に移動
cd <クローンしたリポジトリ>
# リポジトリを同期する
git pull現時点ではリモートリポジトリに変更がないはずなので、Already up to date.と表示されるでしょう。
git commitはローカルリポジトリの変更内容を記録するコマンドです。
ここではクローンしたリポジトリのREADME.mdを編集しましょう。
まずはVSCodeでリポジトリを開きます。メニューバーの「ファイル」から「フォルダーを開く」をクリックして、クローンしたリポジトリを開いてください。
もしくは、code <ローカルリポジトリのパス>でも開くことができます。
試しに以下の内容を追記しましょう。
* 名前
*
* 好きなもの
*
* 勉強したい技術
*書き終わったら保存して、 Ctrl(Cmd) + Jでターミナルを開いてgit commitを実行しましょう。
コミットメッセージを入力するタブがVSCodeで開くはずです。
コミットメッセージとは、変更を記録するときにつけるメモのようなものです。
コミットの記録を見返すときに表示されるものなので、変更内容を短文で端的に表せると良いとされています。
今回は自己紹介を追記などがいいでしょう。
入力したら保存してタブを閉じるとコミットが完了します。
git push はローカルリポジトリの変更内容をリモートリポジトリに同期するコマンドです。
コマンドを実行して、先程の自己紹介の追記をGitHub上にあるリモートリポジトリに反映しましょう。
コマンドが正常終了したらGitHubの自分のプロフィールを確認してみましょう。
追記した内容がプロフィールに表示されているはずです。
この他にも様々なGitコマンドがありますが、今回の勉強会ではこれだけ知っておけば大丈夫でしょう。
Google Chrome(以下Chrome) はWebブラウザのひとつです。
世には様々なブラウザがありますが、Google Chromeは直近でもシェアトップを誇るWebブラウザです。
今回の開発では基本的なブラウザとして、Google Chromeを利用します。
以下のリンクから、使用中のマシンのOSに合ったインストーラーをダウンロードし、実行してChromeをインストールしてください。
https://www.google.com/intl/ja_jp/chrome/dr/download/
Chromeの開発者ツールには、Web開発で役に立つツールがたくさんあります。 ここでは、開発者ツールのいくつかのタブについて説明します。
まずはダウンロードしたChromeを開き、右クリックメニューから「ページのソースを表示」をクリックするか、F12キーを押して開発者ツールを開いてください。
要素タブでは、表示しているウェブページのソースを確認することができます。
ここには「HTML」というWebページの構造を表現する言語が表示されています。また、タブの下部には「CSS」というWebページの要素の表示を変更する言語が表示されています。
画面の表示が意図したものでないときはこのタブを開いて、左上にある要素選択ツールから気になる場所を選択してHTMLの内容やCSSで適用されているスタイルを確認すると便利です。
コンソールタブは、ページ内のJavaScriptが実行中に出力したログを確認したり、簡単なJavaScriptを実行する事ができます。
JavaScriptについては後述します。
ネットワークタブでは、ページがダウンロードするリソースを確認することができます。
GitHub Pagesを利用するような場合にはローカルの開発環境とファイルの置き場所が異なり、うまくファイルがダウンロードできていないことがあります。
そういった原因による不具合が考える場合にはネットワークタブでリソースがちゃんとダウンロードできているかどうかを確認すると便利です。
アプリケーションタブでは、ページ毎のキャッシュやローカルデータの確認ができます。 特に、LocalStorage等のブラウザAPIを利用するような場合に動作テストなどが簡単になり便利です。
JavaScript はインタプリタ型のスクリプト言語の一つで、ウェブページでよく使用される他、Node.jsやDenoなどの実行環境を利用することでサーバーサイドなどウェブページ以外でも利用できます。
今回の開発はWeb開発になるので、基本的に処理はJavaScriptを使用して実装することになります。
ここではJavaScriptの基本的な文法を説明します。
consoleオブジェクトは、コンソール出力を行う関数が多く内包されているオブジェクトです。
資料の作成者が「新たにプログラミング言語を書き始めるときは Hello, World! から始める教」に入信しているので、まずは「Hello, World!」を出力してみましょう。
Chromeの開発者ツールを開き、コンソールタブに切り替えて以下のコードを実行してみてください。
console.log("Hello, World!");
このように表示されれば成功です。
他にもconsole内にはconsole.warn()やconsole.error()、console.table()など便利な関数があります。
状況や目的に応じて使い分けると良いでしょう。
プログラミング言語におけるコメントは主に以下の２つで利用されます。
- プログラムの処理内容の補足説明
- デバッグ中の一時的な処理無効化
JavaScriptには2つのコメントの書き方があります。
// スラッシュを2つ書くと、その行のそれ以降はコメントとして取り扱われます。
/*
* 複数行になるコメントはこのように囲むことで表現できます
*/プログラム中で利用する基本的な演算について説明します。
四則演算は以下のように記述できます。
console.log(2 + 3); // 加算
console.log(5 - 2); // 減算
console.log(2 * 2); // 乗算
console.log(6 / 3); // 除算その他、三角関数などの高度な算術演算はMath組み込みオブジェクトから利用できます。
文字列は以下のように記述することができます。
console.log("ダブルクォートで囲むと文字列");
console.log('シングルクォートで囲むと文字列');
const string = "テンプレートリテラル";
console.log(`バッククォートで囲むと${string}`);
また、文字列に対して+演算子を利用して文字列を結合することができます。
プログラム中の値に名前をつけて取り扱えるようにしたものを変数・定数と呼びます。
JavaScriptでは以下のようにして宣言することができます。
let v = 0; // 変数を宣言する
console.log(v);
v = v + 1; // JavaScriptにおける変数は再代入可能な値
console.log(v);
const c = 10; // 定数を宣言する
console.log(c);
c = c + 1; // 定数は再代入不可能なのでエラーとなるこの事前勉強会用資料では、本番開発を行うにあたってあらかじめ参加者の皆さんに知っておいてもらいたい知識について説明しました。 もしわからなかった点があればいつでも質問いただけると幸いです。
それでは本編で会いましょう！