プログラミング入門

GitHub Flowのルールとワークフローについて

2018-06-21 By プログラミング入門ナビ編集部

Gitのワークフローの1つであるGitHub Flow（ギットハブフロー）について、プログラミング入門者向けに説明いたします。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

GitHub Flowとは

GitHubを運営しているGitHub社が社内で実践、Gitのワークフローです。
GitHub共同創業者のスコット・チャコン氏が、ブログで公開しました。

GitHub Flow ルールとワークフロー

シンプルで使いやすいGitHub Flow　について学習します。

ルール

GitHub社が行っているGitHub Flowのルール概要について説明します。

マスターブランチは即座にデプロイ可能な状態を保つ
ブランチ上で必ず作業し、その生存期間をできるだけ短くすること
（変更したら、）すぐにプルリクエスト（PR）を作り、フィードバックや承認を求める
マージしたらすぐにデプロイをすること。

デプロイとは、ソースコードをサーバに配置して、稼働させることです。
プルリクエスト（PR）とは、変更したソースコードを、取り込んでもらえるようにリクエストするための機能です。
プルリクエストは、プルリクと略されることもあります。

ワークフロー

ワークフローについて説明致します。

なにをすべきかを決める。
masterブランチから説明的な名前のブランチを作成する
ブランチをgit pushして、コードをチームメンバーにシェア
PR作成
コードを書く & コードの修正　（議論しながら）
テスト
マスターブランチを、デプロイするPRブランチにマージ
テスト環境にデプロイ
テスト
本番環境にデプロイ
様子を見る
PRブランチを、マスターにマージ

補足

PRの変更は小さくすることが重要で、5-10行の変更でどんどんリリースすることが重要。
自動化を進めることが他殺
日本の開発現場だと、PRブランチをマスターにマージしてから、マスターブランチをデプロイする。ということが多いです。これはどちらが良いとか悪いと決めることがしませんが、GitHub社が行っているワークフローとは違うという点に留意してください。

おわりに

この記事では、プログラミング入門者向けにGitHub Flowの概要を説明いたしました。

オンライン講座「Web開発入門完全攻略コース」では、GitとGitHubの使い方について動画をつかって丁寧に説明しています。
無料プレビューを用意しています。ぜひご利用ください！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Git（ギット）入門イントロダクション-プログラミング入門者向けに説明します。

2018-06-20 By プログラミング入門ナビ編集部

Git（ギット）とは何かプログラミング入門者向けに説明いたします。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

Git(ギット)とは

ソースコードのバージョン管理をするための仕組みの一つです。
OS Linuxのソースコードを管理するために開発されました
現在、ソースコード管理はGitが第1選択肢となっているため、Webエンジニアなら使えて当然とされる技術です。

Git入門を動画で学習する

ソースコードのバージョン管理を行わないときのデメリット

どのファイルにどのような変更が行われているか、ファイルの中身を確認しないとわかりません、
基本的には同じファイルを同時に編集できません。
意図しない上書きで、編集内容が消えてしまうこともあります。
ファイル名を日付で管理するといった経験はありませんか？

ソースコードのバージョン管理を行うメリット

ソースコードの変更履歴を残して、誰がいつ、どのファイルのどの場所を編集したか簡単に管理できる。

Gitの特徴

最近はGitが特に普及が進んでいる。（バージョン管理システムはGitの他にもSubversionやMercurialなどいくつかある）
ローカルリポジトリと、リモートリポジトリをもつ
分散型

リポジトリとは

ファイルを管理するデータベースをリポジトリと呼びます。

ローカルリポジトリとリモートリポジトリ

ローカルリポジトリとは

各開発担当者それぞれががローカル環境に保持するリポジトリ

リモートリポジトリとは

すべての開発担当者で変更内容を共有する

分散型とは

このように開発者Aと開発者Bそれぞれで、ローカルリポジトリをもっています。各開発担当者はローカルリポジトリへ変更内容を登録します。
これをcommitといいます。
サーバー上にあるリモートリポジトリへ変更を内容を送信します。これをpushといいます。

リモートリポジトリ他の開発担当者の変更内容を取得したいときは、サーバー上にあるリモートリポジトリを受信します、これをpullといいます。

基本的な操作の流れと用語

流れ

各開発担当者は、ローカルリポジトリへ変更内容を登録（commit）
ローカルリポジトリの編集内容を他の開発担当者に共有したい時は、サーバ上にあるリモートリポジトリへ変更内容を送信(push)
リモートリポジトリにある他の開発担当者の変更内容を取得したい時はサーバ上にあるリモートリポジトリの変更内容を受信（pull）

用語

ワーキングツリーとは・・・最新のファイルの状態
ステージとは・・・コミットするためのファイルの状態
ローカルリポジトリ・・・ファイルの変更履歴を手元で管理
リモートリポジトリ・・・ファイルの変更履歴をPJメンバー全員で管理

※ add , commit, pushはコマンドを指しています。

add：「ワーキングツリー →ステージ（インデックス）」への反映
commit：「ステージ → ローカルリポジトリ」への反映
push：「ローカルリポジトリ → リモートリポジトリ」への反映

リモートリポジトリ GitHub

転職などで開発プロジェクトに入った時に、一番使う可能性が高いサービスはGitHub（ギットハブ）です。

GitHubには無料版と有料版があります。
無料版ではPublicリポジトリというインターネットに一般公開されるリポジトリが使えます。
有料版では、Publicリポジトリに加えてPrivateリポジトリという、許可された人しかアクセスできないリポジトリが利用できます。
Git操作の練習をするだけであれば、無料版でも良いでしょう。

GitHub以外には、BitBucketやBacklogといったサービスがあります。

リモートリポジトリは、自分で運用できる？

リモートリポジトリは自分で構築・運用することも可能です。
しかしながら、運用コスト（人件費、サーバ代）が掛かるので、何かしらの事情がなければ、GitHubのようなホスティングサービスを利用するのが一般的です。
「何かしらの事情」というのは、たとえば国家機密を取り扱うようなシステム開発であったり、開発者の人数がとても多いため、自社で運営したほうがトータルではコストダウンになるといったケースが考えられます。

おわりに

この記事では、Git（ギット）入門イントロダクションとして、プログラミング入門者向けにGitの概要を説明いたしました。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

JavaScriptのエラーを自力で解決するための方法

2018-06-12 By プログラミング入門ナビ編集部

JavaScriptを学習していて、プログラムが期待したとおりに動かなくて困ったことはありませんか？

そんなときはコンソールを開いて、エラーがないか確認してみましょう。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

WebブラウザのGoogle Chrome を利用して説明します。

動画でJavaScriptのエラーを自力で解決するための方法を学習する

Google Chromeのデベロッパーツールを表示する

エラーを表示するコンソールは、Google Chromeに標準で搭載されているデベロッパーツールの機能を使います。

デベロッパーツールを起動するには、

ブラウザの表示領域で右クリック > 検証をクリック

Consoleタブをクリックして選択します。

プログラムを実行

JavaScriptのプログラムを実行します。
ここでは、Hello World!とConsoleに出力する簡単なプログラムを記述します。

・・・略・・・



・・・略・・・

プログラムにエラーがない場合

このように表示されます。
Hello World!と表示されています。

プログラムにエラーがある場合

console.log('Hello World!');

↓とすべきところをあえて、間違えて実行します(c->k)

konsole.log('Hello World!');

Consoleにエラーメッセージが表示されています。

Uncaught ReferenceError : konsole is not defined

日本語だと次のような意味になります。

キャッチされていない参照エラー : konsole は定義されていません。

エラーがある行の数も表示されているので、参考にします。

これで、9行目のkonsoleの部分なにか間違いがあると、あたりを付けることができました。

エラーメッセージの種類

MDNにエラーのリストが掲載されているので必要に応じて参照することができます。

JavaScript エラーリファレンス – MDN

おわりに

この記事では、JavaScriptでエラーを自力で解決するための方法について学習しました。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する