TechAcademy（テックアカデミー） プログラミング Git 【初心者向け！】Gitを入門から学べる学習サイト10選
オーダーメイドコース
icon
icon
Git

【初心者向け！】Gitを入門から学べる学習サイト10選

Git初心者向けにおすすめの学習サイトを紹介。入門から独学でかつ、無料で学べるのでこれから学習し始める人に最適でしょう。GitやGithubの知識は開発現場で必ず役立つので、これを機会にぜひ学習し始めてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

初心者向けにGitを入門から始められる学習サイトを集めてみました。

Git(ギット)はとても便利なバージョン管理システムです。実際の現場でも必ずと言っていいほど使用するので、覚えておいて損はないでしょう。

どのサイトも動画やイラストなど特徴が違うので、自分の理解しやすいタイプのサイトを見つけてみてください。

 

なお本記事はTechAcademyのオンライン完結のGitHub講座のカリキュラムをもとに執筆しています。

 

ドットインストール

学習タイプ：動画

プログラミングを学ぶならここドットインストールでしょう。

もちろんgitも対応しています。全22回に分けて動画で説明してくれているので分かりやすくておすすめです。

ドットインストール

 

サルでもわかるGit入門

nm_08_02

学習タイプ：テキスト/イラスト

このサイトのGit入門は本当にわかりやすいと思います。

入門編から入ってスムーズに発展編などもうちょっと上級なことにストレスなく移れるのでおすすめです。サルの可愛いイラストもほっこりしていいですね。

サルでもわかるGit入門

 

[PR] 未経験からWebエンジニアを目指す方法とは

LIG

nm_08_03

学習タイプ：テキスト

本当の初心者向けです。Git入門のための概念から基本用語までこちらの記事では一ページのコラムでGitについて全く初めからかなり細かい使い方まで説明してくれています。

LIG

 

GitHub

nm_08_04

学習タイプ：テキスト

本家Gitの解説サイトです。

正確に間違いない情報、最新の情報が載っているので、たとえ他でうまくいかなかったとしてもここにもどってこれば問題は解決するでしょう。

もちろん全く初めての人にも書いているので安心して読み始めてください！

Github

Githubの使い方も初心者向けに詳しく解説しているので、合わせてご覧ください。

 

Asial

nm_08_05

学習タイプ：テキスト/イラスト

イラストでわかる！git入門の入門。

イラストでgitについて説明してくれています。なんでも視覚的に勉強すると身に付きやすいですよね。

Asial

 

Developers.IO

nm_08_06

学習タイプ：テキスト

全18チャプターに渡って事細かにGitについて説明してくれています。

ぱっと初心者向けには見えませんが、下にスクロールして一から順に行っていくといつの間にか高みにいるかもしれません。

Developers.IO

 

PAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜

nm_08_07

学習タイプ：テキスト

こちらは直接プログラミングではありませんが、どうやったらGitを効率的に学習できるか考察したものです。Gitを始める前に一読しておくのもいいかもしれません。

PAYFORWARD

 

Learn Git Branching

nm_08_08

学習タイプ：ハンズオン(実際にコマンドを打ちながら学習)

ややこしいGitブランチの概念を図を用いてクイズ形式で学べるものです。非常にわかりやすいですね！

Learn Git Branching

 

SDNMagazine〜Gitを使いこなすための20のコマンド〜

nm_08_09

学習タイプ：テキスト

こちらはGitを使うためによく使うおもなコマンド20個説明してくれています。とりあえずややこしい概念よりもコマンドを！という人にとって一番の近道かもしれません。

SDNMagazine

 

SourceTree

nm_08_10

学習タイプ：ハンズオン

こちらは英語サイトで、しかも初心者のためのGit解説サイトではないのですが、Gitのコマンドなど覚えなくてもサクサク使えるアプリなのです。

視覚的に分かりやすく使えるデザインも優れたユーザーインターフェイスなのでまずはここから始めるのはあながち間違いではないかもしれません。

SourceTree

 

以上、Gitの入門向け学習サイトをまとめて紹介しました。

見たことあるサイトもあれば、初めて見るサイトもあるでしょう。それぞれ特色があり学習タイプもバラバラなので、ぜひ自分のスタイルに合った学習をしていきましょう。

無料でできるので、誰でも気軽に進められるはずです。

[お知らせ]TechAcademyでは自宅で学べるオンライン完結のGitHub講座を開催しています。わからないことをチャットで質問すると、現役エンジニアのメンターが毎日すぐに回答します。

記事を検索

関連するキーワード

関連する記事

無料で使える！GitHub Pagesを使ってWebページを公開する方法

ソフトウェア開発プロジェクトのためのソースコード管理サービスのGitHub。開発者を中心に使っている人も多いことでしょう。このGitHubに、無料でWebページ...
Git

git reset --hardを使ってファイルへの変更を取り消す方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit commit --hardの使い方を紹介していきた...
Git

git mergeを使ってブランチをマージする方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit mergeの使い方を紹介していきたいと思います。 ...
Git

git rmを使ってファイルを削除する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit rmの使い方を紹介していきたいと思います。 ...
Git

誰でもすぐ分かる！git branchでブランチを作成する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit branchの使い方を紹介していきたいと思います。...
Git

git pullを使ってリモートリポジトリと同期する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit pullの使い方を紹介していきたいと思います。 ...
Git

あわせてよく読まれている記事

独学でゲームが作れる！入門に最適なUnityの学習サイト20選

現在ゲームを作るためのゲームエンジンはたくさんの種類があります。 その中でも世界で一番使われているのがUnityです。ただUnityの勉強を始めたいと思っても何から始めれば良いのかわからない方もいらっしゃるかと思います。 今回はそんな方のために、Unityの勉強を始める際にオススメの入門サイトを紹介していきたいと思います。   なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。   Udemy 学習タイプ：動画 初心者から上級者まで様々なレベルの人が使えるUnity学習サービスです。 もちろんUnity以外にもありますが、実践的に学習が行えるので、本格的なゲームを作りながらUnityの知識を身につけることが可能です。 スマホでもPCからでも自分のペースで学習することができるはずです。 Udemyの特徴としては、最新技術をいち早く有料コースとして学習することが可能です。 Udemyのコースは、Udemyが提供しているコースだけでなく、Udemyという学習教材をオンラインで公開するサービスに、専門家が各自で作成した教材を公開しています。 そのため、ある技術に関する講座として様々な角度から様々な価格と言語で学習をすることができます。 また、その多くが動画テキストを採用しているため、文字を読むのが苦痛な受講生にも人気です。 スマホからも学習可能ということで、いつどこでも自分の好きなときにアカウントにログインして、簡単にコースにアクセスできます。 この機能のおかげで学習の機会が無限に開かれています。 そして、一度コースを購入すれば、アカウントが有効で、かつUdemyがコースのライセンスを所有し続ける限り、いつまでもコースへのアクセスが可能です。 Udemy   ドットインストール(Unity入門) 学習タイプ：動画 プログラミング初学者の味方「ドットインストール」です。 Unityのバージョンが少し古い物になっていますが、基礎操作や基礎知識を覚えるのには最適なサイトであると言えます。ここからUnity学習の第一歩を踏み出しましょう。 2017年現在はUnity4.2のみサポートしています。 また、このレッスンはサポート終了しています。 ドットインストール(Unity入門) また、ドットインストールの体験記事もございます。 プログラミング学習の超定番！「ドットインストール」をやってみた [PR] 未経験からWebエンジニアを目指す方法とは OpenBook(Unity入門) 学習タイプ：テキスト OpenBookは誰でもオンライン上で本を作成できるサービスです。 そのサービス上で公開されているUnity入門です。基礎的な物理演算や摩擦、アプリの書き出しなど様々な技術を覚えることができます。 東京大学出身の著者を中心とした教材ですので、東京大学というキーワードに興味がある方には、心くすぐられる教材です。 OpenBook(Unity入門)   はじめてのUnity 学習タイプ：テキスト はじめてのUnityとなっていますが、前述の二つのサイトと比べるとレベルは少し高めとなっています。特に2Dシューティングのチュートリアルは骨のある内容となっており、これを完了すればUnityの基礎は理解したと言っても過言ではないでしょう。 Unity公式ページで解説されているテキストですので、公式ページとして安心して受講することが可能です。 はじめてのUnity    Unity3Dゲームの作り方講座 学習タイプ：テキスト 今までのサイトとは少し違い、パーティクルシステムや時間管理などについて解説してあります。 少し踏み込んだ内容となるので、基礎を理解している方におすすめのサイトです。 初級講座の部分を割りと省いているので、中級者以上のユーザーにとっては、無駄な部分を飛ばす事が可能な点がメリットです。 Unity3Dゲームの作り方講座   【入門編】世界よ、これが本当の Unity 講座だ（１） 学習タイプ：テキスト こちらはあのMobage(モバゲー)の技術者ブログです。Unityでゲームを作成していくというより、Unityやその他のゲームエンジンに関する知識や、Unity内のプログラムなどより深い部分について解説しています。 少し難しい内容と成っていますが一度目を通しておくと、今後のゲーム制作に役立つことは間違いないです。 【入門編】世界よ、これが本当の Unity 講座だ（１）    Unity公式(Unity入門) 学習タイプ：テキスト Unityの公式の入門ですが入門としては少し難しめの文章となっています。 今までにあげたサイトを勉強した後にまとめとしてみる事をおすすめします。ただ一つ一つの知識について詳しく解説してあるので、今までもやっとしていた知識や概念を理解するのに役に立つでしょう。 Unity入門となっていますが、対象は中級者まで対応していると言っても過言ではありません。 また、日々進歩する技術に対してもUnity公式として内容を更新している点が安心です。 Unity公式(Unity入門)   おもちゃラボ(Unity入門) 学習タイプ：動画/テキスト ポップなシューティングゲームを作成する事ができるサイトです。可愛いクオリティの高いゲームを作る事ができます。 UI(ユーザーインターフェイス)がしっかりとしたゲームを作る事ができるので、ゲームの魅せ方なども学ぶ事ができます。 可愛い名前ですが、現在の最新の内容は既に入門の域を超えています。 そのため、最初から順番に学習することでかなりのレベル迄学習可能です。 チュートリアルもあるため安心です。 おもちゃラボ(Unity入門)   テラシュールブログ 学習タイプ；テキスト Unityのより深い知識について解説しているブログです。今後ゲーム制作を作成していくにあたって間違いなくお世話になるブログです。 Unityに役立つ情報がたくさんあるので、定期的にチェックすることをおすすめします。 現在も頻繁に更新されており、記事数が非常に多い点が上級者にも必要な情報を提供しているといえます。 テラシュールブログ    Unity公式(チュートリアル) 学習タイプ：動画 英語版になっていますが、とてもおすすめのサイトです。 Unity公式とだけあって、クオリティがとても高いものになっています。 またAudio(オーディオ)やPhysics(フィジックス)などカテゴリ分けされたチュートリアルもあり、自分のわからないところをピンポイントで学ぶことができます。 Unity社員が講演をする場合も、こちらのチュートリアルを使用して現地で一緒に学習するという素晴らしいチュートリアルです。 Unity公式(チュートリアル)   3D Platformer Tutorial 学習タイプ：テキスト(PDF) チュートリアルとしては珍しく超ハイクオリティの3Dゲームを作ることができます。 現場でも通用するようなテクニックが満載でエンジニアリング以外の知識もたくさん載っています。 ただし、 Unity 2.0 の内容である点を注意する必要があります。 3D Platformer Tutorial   Libro〜ビギナーのためのUnity超入門〜 学習タイプ：テキスト 知ってる人は知っているご存知掌田津耶乃氏のサイトのunityの解説です。毎回同氏の解説は初心者には分かりやすく、とてもありがたいです。 全7回に分けて説明していただいています。 Unity4.6の内容になる点を注意する必要があります。 Libro   atmarkIT 学習タイプ：テキスト 3ページにわたってUnityがなんであるかを解説してくれています。概要をつかむのには持ってこいのサイトでしょう。 Unityの学習というより、Unityが如何に素晴らしいかを他の人に説明する時に使用すると良いでしょう。 atmarkIT   ThinkIT 学習タイプ：テキスト Unityを使っていきなり初心者がいきなりゲームを作ってみるという大胆な企画です。 楽しみながら飽きずに学習することができます。いきなりはハードル高めですが、虎穴に入らずば虎子を得ず。挑戦してみましょう。 実際にこれをみながら制作するより、見ることで制作していく実感を得ることができるという点が良いです。 ゲーム実況をみて、ゲームをした気分になる感じと似ています。 結果的にUnity開発へのスタートハードルを下げることができます。 ThinkIT   SONICMOOV LAV 学習タイプ：テキスト こちらは最短コース系なんと一時間でUnityを使ってゲームを作ろうとする大胆なものです。 ただ1時間で自分のゲームができると思うとワクワクしませんか？そのワクワクが学習へのエネルギーとなるのです！ SONICMOOV LAV   Developers.IO 学習タイプ：テキスト こちらは環境のインストールから親切に教えてくれます。まずどうにも動かない、という方はこちらから始められることをおすすめします。 Developers.IO   UINYAN.COM〜素人が7日間クソゲーを作り続けてわかったこと〜 学習タイプ：テキスト こちらはゲームムログラミングをしたことがない筆者がUnityを使って7日間でゲームを作ってみたときの記録です。それゆえの苦労や発見がみてとれると思うので是非学習に具体的にとりかかる前にチェックしてみるのもいいかもしれません。 UINYAN.COM   MUO 学習タイプ：テキスト 英語サイトですがUnityに関する基本がしっかりと体系立てて解説されています。英語が読める方にはとてもいいサイトだと思います。 MUO   Unity STUDENT 学習タイプ：テキスト こちらも英語サイトです。Unityに関する記事がひとつひとつキャッチアップ画面つきのリストになっていてやりたいことが視覚的に探せるので便利です。 Unity STUDENT   PLURALSIGHT 学習タイプ：動画 言語は英語ですが、動画でUnityを学べます。しかも無料で見ることができます。 PLURALSIGHT   SlideShare〜Unityを使ったゲームデザイン超入門〜 学習タイプ：スライド 東工大の学生のために作ったスライドですが我々全くの初心者にも最適です。まるで授業を受けているみたいでいいですね。 SlideShare   以上、Unityを独学から始められる学習サイトを紹介しました。 2Dや3Dゲームなど自分の作りたいものに合わせて学習サイトを選んでみると良いでしょう。自分がやりたいゲームを自分で作れるようになればより一層楽しく感じるはずです。 この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。 [お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。
Unity

【入門向け！】独学に最適なHTMLを学べる学習サイト20選

Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web関連の学習に当たってまず必要な知識はHTML（HyperText Markup Language）です。 ここでは、HTML学習に役立つサイトをご紹介したいと思います。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。     Udemy 学習タイプ：動画 HTMLの基礎やHTML5を使ったゲーム作成など、初めてHTMLを学ぶ方におすすめの動画が多くあります。 何か作りながらHTMLやCSSを学ぶことができるので、実践的に楽しく身につけられるはずです。 Udemy   ドットインストール 学習タイプ：動画 3分動画で学べる初心者向けのプログラミング学習サイトです。HTMLだけでなく、CSS、JavaScriptも学べるので便利です。実際にウェブサイトを作る講座もあるので発展的に学習することができます。 初めてHTMLに触れるという方におすすめです。 ドットインストール    [PR] 未経験からWebエンジニアを目指す方法とはSchoo 学習タイプ：動画 IT系の講座がメインのサービスで、WEB業界のプロがデザインやWEB開発について教えてくれます。現場の知識も教えてくれるので実践でも役立ちます。授業中に質問できるという点がポイントです。 Schoo   ShareWIS 学習タイプ：動画 HTMLを短い動画で学ぶことができるので、隙間時間を利用した学習が可能です。動画の最後にはミニクイズがあるので1つ1つの動画をしっかり理解してから先に進むことができます。 ShareWIS   プログラミング入門サイトbituse 学習タイプ：テキスト HTMLが初めて、プログラミングも初めてという方におすすめの入門サイトです。易しい言葉で書かれているので全くの初心者の方でも挫折することなく学習できます。 ブログラミング入門サイトbituse   Progate 学習タイプ：ハンズオン(実際にコードを書きながら) プログラムを基礎から学ぶことのできるサイトです。HTMLについては、学習コース→道場コースの順に段階的に学習します。最後はプロジェクトコースで実践を身に着けられる本格的なサービスです。 Progate   CODEPREP 学習タイプ：ハンズオン アプリ開発を通してプログラミングを学びます。HTMLの学習では、穴埋めをしながら実際のコードに触れて動きを確認できます。HTMLの知識が少しあって、手を動かしながら学習したいという方におすすめです。 CODEPREP   CodeAcademy 学習タイプ：ハンズオン アメリカの教育系の企業が運営するサービスです。CODEPREPでは穴埋め形式で学習するのに対し、CodeAcademyでは1からコーディングしていきます。難しそうな気もしますが、解説がしっかりしているので無理なく学習を進められます。  CodeAcademy   SkillHub 学習タイプ：動画 転職やフリーランスの方の為のオンラインスクールで、初心者でも学ぶことができます。HTMLの講座は1動画15分程度で構成されていて、基本からじっくりと学びたい方におすすめです。 SkillHub   Web Design Recipe 学習タイプ：テキスト Webデザイナーの方の個人ブログですが、コンテンツが充実していて分かりやすいです。また、Webサイト作成時に必要な知識やHTMLコーディングの際に役立つツールなども紹介されており、実践に即した知識を得られます。 Web Design Recipes   code9.leap 学習タイプ：ハンズオン ゲームプログラミングの学習サイトですが、HTMLも学ぶことができます。コードと実行結果を比較しながら学習できるので便利です。ある程度HTMLの知識があると学習がスムーズに進みます。 code.9leap   やさしいホームページ入門 学習タイプ：テキスト HTMLに何も知識がないときに一度読んでみるとおすすめです。本当に基礎の基礎から教えてくれます。 一つ一つのチャプターが短いのも読みやすくて嬉しい。「タグ」ってなんだろう？という人に親切丁寧に解説してくれています。 やさしいホームページ入門   一時間で作るホームページ 学習タイプ：テキスト   その名の通り一時間でホームページを作ることを目標にしています。 たとえHTMLのみ学んだとしてもそれでホームページができるわけではないのです。それも踏まえて1時間で習得できるというのだから驚きですね！ 一時間で作るホームページ   HTML Dog 学習タイプ：テキスト 英語のサイトですが、もし英語が得意！という方ならおすすめです。 もちろん無料で学べる上に、サンプルコードも豊富。何よりシンプルなデザインでストレスなく勉強できるのが嬉しいです。もしかしたら英語の勉強になって一石二鳥かもしれませんね。 HTML Dog   HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】 学習タイプ：テキスト   サルでもわかるとうたうこのブログ。なんと驚くべきことにこの一ページにHTML, CSSの基本が書かれているのです！ そしてわかりやすいように目次まであってすぐにそこに飛んで行けるのです。言うまでもなくサルでもわかるほど分かりやすいです！ HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】   とほほのWWW入門 学習タイプ：テキスト こちらはどちらかというと一通り学んだ後にリファレンスとして使うのがおすすめです。 豊富なHTMLの仕様例が検索できて、そのままコピペで使うことだってできちゃいます！困ったときにこれさえあれば怖いものなしでしょう。 とほほのWWW入門   Tipszone 学習タイプ：テキスト   2時間でHTMLを理解できるようにと書いてありますが、文量はそれ以下です。 本当に必要最低限のことが書いてありますが、だから返って簡単で読みやすい！これを読んでから他のものに移るというのも一つの手です。 Tipszone   w3school 学習タイプ：ハンズオン こちらも英語サイトですが左にあるサイドバーから必要な情報だけ抜き取れて非常にみやすく使いやすいです。 こういうサイト自体が一つのWebアプリケーションになっているものはとても好印象です。 w3school   Weblog endoutakae 学習タイプ：テキスト この可愛らしくてガールズな感じのおしゃれなデザインがいいですね！ 下にスクロールするとネコちゃんが！かわいい！じゃなくてHTMLの勉強のサイトです。このサイトなら楽しく勉強できそうですね。 Weblog endoutakae   The Web KANZAKI 学習タイプ：テキスト 上にもいろいろ短時間習得コースはありましたがこちらはさらに最短30分コースと驚くべき短さです。 それだけに要点をしっかりと説明してくれるので、大変おすすめです。 The Web KANZAKI   超絶初心者のためのフロント入門（HTML、CSS、JavaScript） 学習タイプ：テキスト ここは実際にコードに入る前にまず用語から親切丁寧に解説してくれています。 フロントエンド？サーバー？なにそれ？という人はここから進めていくことをお勧めします！ 超絶初心者のためのフロント入門（HTML、CSS、JavaScript）   以上、入門向けのHTML学習サイトをまとめました。 最近では、テキストや動画だけでなく実際にコーディングしながら学習できるサイトも増えているので、いろいろと試してみると良いでしょう。 ぜひ自分のライフスタイルに合った学習サイトを見つけてみましょう。 この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。  小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

独学で身につく！入門向けのJavaScript学習サイト20選

JavaScriptをこれから学習したいという人におすすめのサイトをまとめて紹介しています。 独学で学習できますし、無料で進められるので手軽に始められるでしょう。HTMLとCSSを学習してみて次のステップに進みたいという方やJavaScriptを身につけてWebサイトの表現方法を増やしたいという方にはおすすめです。 各サイト動画やテキストなど学習タイプも載せているので、ぜひ自分に合ったサイトを見つけてみてください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   1. Udemy 学習タイプ：動画 JavaScriptを初めて学ぶ人、ちょっと触ったことがある人など様々なターゲットに合わせて動画があります。 本格的に学べる講座は、有料になっていますが、かなり実践的に学べるので、深い知識を身につけたい人にもおすすめです。 Udemy   2. ドットインストール 学習タイプ：動画 プログラミングを学ぶならもはやスタンダードなドットインストールです。 動画で分かりやすく解説してくれており文字を読むのが苦手！！というひとでも入りやすいのが特徴です。とりあえずここから始めれば間違いないでしょう！ ドットインストール   [PR] 未経験からWebエンジニアを目指す方法とは3. とほほのWWW入門 学習タイプ：テキスト いきなりコードのサンプルを用いて学習していくので全くの初心者向きではないのかもしれませんが、それでもサンプルを実際に動かしながら楽しんで学習できる点は素晴らしいです。 とほほのWWW入門   4. WEB+DB PRESS plus 学習タイプ：テキスト ノンプログラマのためのJavaScriptはじめの一歩。 プログラミング自体が初めての人から対象にしてくれているのでいきなりJavaScriptという一番重要な言語が学べてこのサイトに出会った人はラッキーです。 その他プログラミング言語を学んでいくにあたって大切なことも語られているのでしっかり肝に銘じて学習しましょう。 WEB+DB PRESS plus   5. codecademy 学習タイプ：ハンズオン(実際にソースコードを書きながら) 海外の有名サイトCodecademyのJavaScript版になります。 言語は英語になってしまいますが、登録なしでレッスンが受けれるのでまずどんな感じか見てみて進めてみるのもいいかもしれません。サイトのデザインもかっこいいです。 codecademy   6. JEEK 学習タイプ：ハンズオン 理系生のインターンシップ・エンジニアのインターンシップ・アプリ開発のインターンシップをうたっているこのアプリですがもちろんプログラミング初心者のために作られたものなので分かりやすく作られています。 ブラウザ上でタイピングしてそのまま動くようになるのでわずらわしい環境設定無用！おすすめです。 JEEK   7. Progate 学習タイプ：ハンズオン こちらもリッチデザインなプログラミング学習サイトでもちろん無料です。3時間ほどでJavaScriptの基礎、そして重要な部分ががっちり学べるでしょう。 Progate   8. CODEPREP 学習タイプ：ハンズオン 9つのチャプターからなっていてゲームみたいに経験値をためながら学習を進めていくことができるので飽き性のあなたにもぴったりでしょう。 基礎的な内容を実際に書きながら習得することができるはずです。 CODEPREP   9. UX MILK 学習タイプ：テキスト こちらUX MILKでもJavaScript入門編があります。サイトデザインが綺麗でしっかりと見やすいので目移りせず集中して学習が進められそうですね。 UX MILK   10. マンガで分かるJavaScriptプログラミング講座 学習タイプ：マンガ その名の通り漫画でJavaScriptを説明してくれています。 なんでも絵にするとわかりやすいですよね。さらに漫画なのでスイスイ読めてしまいます。漫画が好きな人はぜひここを訪れてみてください。 マンガで分かるJavaScriptプログラミング講座   paiza 学習タイプ：ハンズオン 料金：無料(600円～/月の有料コースあり) 動画と練習問題で学習する「paizaラーニング」でJavaScriptを勉強することができます。一部有料ですが、期間によって無料で公開されている場合もあります。 paiza   Schoo 学習タイプ：動画 料金：無料(980円～/月の有料コースあり) 動画と生放送で学習するサイトです。JavaScriptに関する動画は無料も有料も多く存在し、ライブラリのひとつjQueryについても解説されています。 Schoo   初心者のためのJavaScript入門 学習タイプ：テキスト 料金：無料 変数やif文、繰り返しといった基本の構文について分かりやすくまとめられています。初めてJavaScriptに触れる場合におすすめです。 初心者のためのJavaScript入門   code.9leap 学習タイプ：ハンズオン 料金：無料 JavaScriptのフレームワークenchant.jsを使用して、実際に自分で作品を作りながら学ぶことができます。解説入りのサンプルコードから課題に沿って内容を編集し、ブラウザ上でその動作を確認することが可能です。 code.9leap   jsdo.it 学習タイプ：ハンズオン 料金：無料 ブラウザ上でJavaScriptを書いてその場で動作確認、共有ができるサイトです。他の人が公開したものについてもコードを見たり、実際に動かしてコメントで質問したりすることができます。 jsdo.it   CodeCombat 学習タイプ：ハンズオン 料金：無料(99$のプレミアム版あり) ゲーム形式で楽しみながらコードに気軽に触れることができるサービスです。使用言語にJavaScriptが選択可能です。遊んでいるような感覚で学べるので、子供の教育に良いかもしれませんね。 CodeCombat   JavaScript リファレンス 学習タイプ：テキスト 料金：無料 JavaScript全般に関するリファレンスサイトになります。基本的な書き方を覚えてから、関数などを参照したいときに便利です。 JavaScript リファレンス   MOONBlock 学習タイプ：ハンズオン 料金：無料 ビジュアルプログラミング形式で、ブロックを使ってプログラミングを行います。もし○○なら□□を行うというように、全体の構成を考えて組み立てる練習をすることができます。 MOONBlock   Web Programming Primer 学習タイプ：テキスト 料金：無料 「JavaScript入門編」ではJavaScriptで何ができるかという知識から始まり、常に使うことになる基本の構文について一通り解説されています。最初から学びたい方におすすめです。 Web Programming Primer   W3Schools 学習タイプ：テキスト 料金：無料 Webサイト作成に使用される各言語のリファレンスサイトになります。英語サイトです。 JavaScriptに関してもサンプルコードとその実行結果をブラウザですぐに確認することができます。サンプルコードは内容を変更することもでき、それに応じた結果が表示されます。jQueryのリファレンスも存在します。 W3Schools   以上、JavaScriptの入門向け学習サイトをまとめて紹介しました。 これから始める人には最適なサイトばかりで、かつ無料なので気軽に始めてみましょう。   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

git commitを使って変更内容をコミットする方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit commitの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 複数人で開発業務を行う上では必ず使う知識なので、実際にコマンドを打ちながら慣れていきましょう。 目次ドットインストールサルでもわかるGit入門LIGGitHubAsialDevelopers.IOPAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜Learn Git BranchingSDNMagazine〜Gitを使いこなすための20のコマンド〜SourceTree Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   また、動画でも解説しています。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！git commitって何をしているコマンドなんですか？？？ 田島悠介 git commitはね、ファイルの変更した部分とかを保存しておくコマンドだよ。   git commitとは Gitを使用すれば簡単にファイルの進捗を管理できます。 そのためにファイルの変更や追加などを保存しておく必要があります。 そのためのコマンドがgit commitです。 このコマンドでファイルの変更をGitリポジトリに保存できます。   git commitを使用してみよう それでは実際にgit commitを使用してみましょう。 今回は「sample」というディレクトリの中で、「sample.html」というファイルをコミットしてみましょう。   まずは、sampleディレクトリ内で、Gitのリポジトリを初期化します。 git init   次に、sampleディレクトリ内でsample.htmlを作成しましょう。 MacやLinuxの場合：touchコマンドを使用してファイルの新規作成ができます。 touch sample.html Windowsの場合：以下のコマンドを使用してファイルの新規作成ができます。 "" > sample.html   次に、sample.htmlをステージングエリアに追加するためのコマンドを打ちます。 git add . ステージングエリアとは変更内容を記録する場所で、「インデックス」とも呼ばれることがあります。 上記のようにgit add .と打ち込むことで、sampleディレクトリ内にあるすべてのファイルをステージングエリアに追加できます。 この時git add ファイル名と打ち込むことで、指定したファイルのみ追加対象にすることもできます。 このステージングエリアへの追加は、コミット前に毎回必要になる操作です。   現在の状況を確認するために、git statusと打ち込んでみましょう。 git status すると以下のように、ステージングエリアにsample.htmlが追加されたことがわかります。   最後にsample.htmlをコミットします。 以下のように打ってみてください。 git commit -m '最初のコミット' -m 'メッセージの内容'を末尾に追加することで、コミット時のメッセージを残せます。   無事コミットできているか確認するために、git logと打ち込んでみましょう。 git log すると以下のように、過去にコミットした日時とメッセージが確認できます。 このgit log表示は、qキーで終了できます。   大石ゆかり 田島メンター！！ git commitをしたときのメッセージを間違えてしまったんですけど、修正する方法ってないですか〜？ 田島悠介 それなら git commit –amendを使うと良いよ。   [PR] 未経験からWebエンジニアを目指す方法とはgit commit –amendで直前のコミットメッセージを変更する git commit --amendは、直前のコミットメッセージを変更できるコマンドです。 ファイルをコミットした時に、コミットメッセージが適切でない場合に使用します。 では、sampleディレクトリ内の「sample.html」をコミットしたメッセージを変更してみましょう。   先程コミットしたコミットメッセージをgit logで確認すると、以下のように表示されます。 git log 「最初のコミット」だけだと、どのような作業を行ったのか分かりませんよね。 このような適当なコミットメッセージだと、今後のプロジェクトが進んだときに作業を詳しく振り返ることができなくなってしまいます。 そこで、git commit --amendを使用して、コミットメッセージを編集していきます。   ターミナルでgit commit --amendと打ち込むとエディタが立ち上がり、一番上の行にコミットメッセージが表示されます。 git commit --amend   エディタでコミットメッセージを変更し、上書き保存を行います。 そうすることで、コミットメッセージの変更を行えます。   今回は以下のようにメッセージを入力し直し、上書き保存を行いましょう。 create sample.html   その後、再度git logでコミットメッセージを確認してみてください。 以下のキャプチャ画像のように、上書きされていることがわかります。 以上でコミットメッセージを変更できました。   git commitのオプション 実際の開発現場では、git commit コマンドは最も多く使うコマンドの1つと言っても過言ではありません。 そのため、いくつかのオプションを覚えておくことで、効率よく開発を進めることが可能になります。 いくつか見ていきましょう。   変更したファイルをすべてコミットする すでにGitに追加済みのファイルで、変更があったものをすべてコミットするには以下のように記述します。 git add -a git commit   上記と同じことを、.を使い1行で表現すると以下の通りです。 git commit
Git

git ignoreを使ってファイルを無視する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit ignoreの使い方を紹介していきたいと思います。 Gitでバージョン管理を行っていると、パスワードなどの認証情報が入ったファイルなど、Gitの管理下に置きたくないファイルが出てくることがあります。 そんな時は、git ignoreという仕組みを利用して、Gitの管理対象から外しておくと良いでしょう。 この記事でぜひ使い方を覚えてみてください。 なお、同様に役立つGitHubの使い方も解説しているので、あわせてご覧ください。 目次ドットインストールサルでもわかるGit入門LIGGitHubAsialDevelopers.IOPAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜Learn Git BranchingSDNMagazine〜Gitを使いこなすための20のコマンド〜SourceTree Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   また、動画でも解説しています。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！ gitでpushしたくないファイルがあるんですけど、そのファイルだけ外す方法ってないんですか〜？ 田島悠介 あ、それならgit  ignoreで外せるよ。 大石ゆかり どうやるんですか〜？   git ignoreとは git ignore（ギット・イグノアー）とは、Gitでバージョン管理をする際、commitやpushの対象にしたくないファイルやディレクトリを、あらかじめ指定しておける仕組みのことです。 誰にも知られたくないパスワードなどが記述されたファイルや、本番環境に直接関係のないファイル、データベースのログイン情報など機密性の高いファイルについては、ローカル環境のみで管理したいところです。 そのようなファイルやディレクトリがGitの管理下にある場合は、add、commit、pushなどの操作をする前にgit ignoreで指定し、管理対象から外しておくと良いでしょう。   git ignoreの書き方 それでは、git ignoreファイルの書き方について確認していきましょう。 git ignoreファイルでは、ファイル名やディレクトリ名の指定の他にも、コメントを書いたりすることが可能です。   ファイルの指定 以下のように、管理対象から外したいファイルを指定します。 sample.html   ディレクトリの指定 以下のように、管理対象から外したいディレクトリを末尾に / を付けて指定します。 work/   ファイルの種類を指定 * と拡張子を記述することで、特定の種類のファイルをまとめて指定できます。 以下は、HTMLファイルを管理対象から外す例です。 *.html   反対に ! と共に特定のファイルを指定することで、管理対象にできます。 以下は、HTMLファイルを管理対象外としますが、sample.htmlだけは管理対象とする例です。 *.html !sample.html   コメントの追加 # を記述することで、その1行をコメントにできます。 # コメントです   [PR] 未経験からWebエンジニアを目指す方法とはgit ignoreを使ってみる それではgit ignoreを実際に使用してみましょう。 sampleというディレクトリを作成し、その中に「sample.html」というファイルを作成してください。 そしてターミナル画面にて、コマンドgit statusを打ち込んでみましょう。 すると以下のように、ファイルがアントラッキング状態であることを示すメッセージが表示されます。 ※アントラッキング状態とは、Gitの管理対象ファイルで、まだ追跡が始まっていない状態を表します（詳しくは、git add の記事を参照してください）。   要するにこの時点では、「sample.htmlはGitの管理下である」ということです。   ここで、sampleディレクトリ内に「.gitignore」というファイルを作成し、sample.htmlと記述してください。 .gitignore sample.html   .gitignoreファイルを保存したら、再度ターミナル画面にてコマンドgit statusを打ち込んでみましょう。 すると、以下のようにsample.htmlの表示が消え、今作成した.gitignoreファイルが表示されていることが分かります。 このことから、sample.htmlはGitの管理対象外に置かれたことがわかります。 （逆に、.gitignoreファイルはGitの管理対象であることも確認できます） これで、gitignoreを使用して、sample.htmlをGitの管理対象外にできました。   今回の記事は以上です。   大石ゆかり git ignore、とても便利ですね♪ 田島悠介 そうだね。 OSごとにpushしたくないファイルが設置されていることがあるから、そういうのもignoreで除去すると楽だね♪ 大石ゆかり そうですね♪   まとめ 今回はgit ignoreを使ってファイルを無視する方法について解説しました。 git ignoreを使用すれば、Gitの管理下に置くファイルを制限することができ、バージョン管理がさらに行いやすくなります。 ぜひマスターするようにしましょう。   プログラミングを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのWebアプリケーションコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、あなただけのオリジナルWebアプリケーションを作れます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
Git

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。 エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。 そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。 本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。 目次ドットインストールサルでもわかるGit入門LIGGitHubAsialDevelopers.IOPAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜Learn Git BranchingSDNMagazine〜Gitを使いこなすための20のコマンド〜SourceTree Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり 田島メンター！！GitHubってなんですか〜？ 田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。 大石ゆかり もう少し詳しく教えてもらえますか〜？   GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。 ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。 また、GitHubを使ってソースコードの管理を行っている企業も多数あります。   GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています 。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。 オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。 イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。 それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。 理由1：無料のプライベートリポジトリ ソースコードを管理する単位をリポジトリと呼びます。 リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。 ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。 しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。 これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。   理由2：オープンソースコミュニティに育まれたSNS機能 オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。 また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。 このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。 コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度） 開発メンバーの知見を共有する機能（Wiki、GitHub Pages） ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動） 単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。 しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。   理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。 このような環境の中から、以下のような先進的な機能が次々と誕生しています。 世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」 オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能 ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」 これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。   GitHubのアカウント登録 それではさっそくGitHubに登録してみましょう。 まずは、GitHubのトップページにアクセスします。 ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。   次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。 下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。 クイズになっており渦巻状の銀河の絵を数回選択します。 なお、このクイズは定期的に変わるようです。   決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。 ボタンを押して次に進みましょう。   このような画面になります。   登録したメールアドレスに認証のメールが届きます。 メールの内容に従いユーザー認証を行ってください。 以上でGitHubのアカウント登録は完了です。   大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？ 田島悠介 その前にいくつか知っておいたほうがいいことがあるから、教えておくね。 大石ゆかり はい、お願いします♪   [PR] 未経験からWebエンジニアを目指す方法とはGitHubを使う上で知っておきたい事前知識 早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。 ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。 事前知識1：ローカルリポジトリとリモートリポジトリ 事前知識2：コミットとプッシュとは 事前知識3：ブランチ（branch）とは 事前知識4：インデックス（index）とは   事前知識1：ローカルリポジトリとリモートリポジトリ リポジトリとは、ファイルやディレクトリの状態を保存する場所です。 変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。 リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。 基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。   事前知識2：コミットとプッシュとは 最低限この2つは知っておきましょう。 コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存すること プッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作   事前知識3：ブランチ（branch）とは ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。 このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。 ブランチは履歴の流れを分岐して記録していくものです。 分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。   事前知識4：インデックス（index）とは リポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。 そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。 逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。 忘れないようにしましょう。   GitHubの使い方 それでは使い方を覚えていきましょう。 基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。 なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。 基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。 コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init） ファイルの作成、編集を行う ファイルの作成/変更/削除をgitのインデックスに追加する（git add） 変更結果をローカルリポジトリにコミットする（git commit） ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push）   GitHubでリポジトリを作成（git init） まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new   次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。 また、リポジトリの種類を「Public」か「Private」を選択します。 ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。 最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。 必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。 次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。   ファイルの作成、編集を行う はじめに、ローカルのPC上にローカルリポジトリを作成します。 今回は「awesome」というディレクトリを作成することにします。   以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。 コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。 そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。 バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。   次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。   現在の状態を確認しましょう。 git status   結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be
Git

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） プログラミング Git 【初心者向け！】Gitを入門から学べる学習サイト10選