人気のテキストエディター『Visual Studio Code(VSCode)』でGit・GitHubを使う方法について、画像付きで徹底解説してゆきます。具体的な作業を例に解説しますので、この記事の内容を実践すればVSCode・GitHubを使用したプログラミング環境を構築することが出来ます。ITエンジニアは必見の内容です。
![VSCodeでGit・GitHubを使う方法を解説する【初心者向き】](https://cdn-ak-scissors.b.st-hatena.com/image/square/d84119cb27c7c4d0e4ead406112ac84fc4d66480/height=288;version=1;width=512/https%3A%2F%2Fmiya-system-works.com%2Fresource%2Fmedia%2F1648%2F1648_w1280.jpg)
半年に一度続きが読めるバックエンドエンジニア、リョウタの記事へようこそ。 (前回の記事はこちら:感謝の気持ちをCloud KMSで暗号化して送ってみた) 今回はWordPressのサイトのデプロイを、CI/CDを使って楽にする方法についてお話しします。基本的にはGCPのサービスで完結できるようにします。 使うサービス Cloud Source Repositories Cloud KMS Cloud Build Google Compute Engine Slack Incomming Webhook Cloud Source Repositories GCPのGitリポジトリサービスです。プルリクなどの機能がなく、とにかく簡素です。今回のチュートリアルはCloud Buildを使うので、GitHubやBitbucketと連携をすることもできます。 Cloud KMS 前回の記事で使用した
新人ではないがGit初心者であるエンジニアが「このリポジトリをフォークしてローカルで開発できるようにしておいて!」と言われた時にやることGitGitHub フォークとは GitHubのヘルプページには、こうある。 フォークは、リポジトリのコピーです。 リポジトリをフォークすると、元のプロジェクトに影響を与えずに自由に変更を試すことができます。 最も一般的には、フォークは他人のプロジェクトへの変更を提案するか、 他人のプロジェクトを自分のアイデアの出発点として使用するために使用されます。 ↓を見ると、もう少しざっくりとイメージすることができるかも。 https://qiita.com/matsubox/items/09904e4c51e6bc267990 お断り GitHubを使っていることが前提の話です。 あくまで自分の経験でのやり方に尽きるので、これやって現場で怒られても責任は持てません
GitはLinuxの生みの親であるリーナス・トーバルズによって開発されたバージョン管理のツールで、数々のバージョン管理システムのなかで最も有名なものとなっています。しかし、Gitの考え方の中には初めて利用するという人にとっては分かりにくいものも存在します。エンジニアのレイチェル・M・カルメナさんが、Gitの基本的な概念について図を用いてまとめています。 How to teach Git | Rachel M. Carmena https://rachelcarmena.github.io/2018/12/12/how-to-teach-git.html カルメナさんが解説を書こうと思ったのはGitを使い始めた同僚のモニターに下の画像のようなポストイットが貼られていたことがきっかけだそうです。ポストイットには「add」「commit」「push」のコマンドが書かれていますが、その同僚は3つの
こんちには、ディレクターのエリカです。 Laravelを利用するときに、フロントエンド側ってどうしてますか? 今回は、何かと便利なLaravel同梱API「Laravel mix」についてご紹介します。 「Laravel mix」とは? Laravelの公式ドキュメントには、「多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPI」と紹介されてます。 つまり、sassを利用したcssの記述や、分割されたjavascriptファイルの統合およびトランスパイルなど、フロントエンドのサイト作成業務で主に利用するタスクがLaravelに最適化されたものです。昨今、とくにフロントエンドにおいては多種多様なアプローチがある中で、どのツールを選択したらいいか悩んでいる……そんなとき「Laravel m
「バージョン管理ツールのGitとは一体どういうものであるのか?」について簡単にまとめてみました。今回はGitの概念や考え方についてを中心にまとめており、「Gitが何なのかよく分からない」「実際のコードに触れてみたもののよく分からず使うのをやめてしまった……」といった人向けに記事を作成しています。 Git https://git-scm.com/ バージョン管理とは、要するに「ある時点でファイルを別に保存しておく」ということです。別のファイルに保存しておけば、またそこからやり直すことができます。これを直感的に行うと下図のような「手動ファイル名バージョニング」になりがちです。ただし、この「手動ファイル名バージョニング」は命名する時の思いつきで決めることが多く、後で見た時に「どれが本当の最新ファイルなのか分からない」となりがちなのが問題です。 これに対する一つの解決策が「プロジェクトフォルダに『
おはこんばんちは、16新卒で入社した29歳ハルです。 数ヶ月前まで専門学校にいたアラサーです。恥ずかしいことに、Gitを本格的に使い始めたのは働き始めてからです。 これまで綺麗なGUI画面のSourceTreeで操作していましたが、これからはエンジニアとして黒い画面でGitコマンドを使い、サクサク作業をしたいと思っています。 ただ、いきなりGitコマンドだけでは心細いので、Gitブラウザのtigコマンドを使うことにしました。今回は、そのtigコマンドについて紹介したいと思います。 tigとは 一言で言うと、Gitコマンドだけではわかりづらい状態などを、見やすくビジュアル化してくれるCUIのGitブラウザです。CUIなので、サーバーでも使えるのがいいところです。 ツリー構造を見やすく表示してくれる。 ツリー構造から差分を表示できる。 add や commit ができる。 ブランチの確認と詳細
開発環境 Mac OS X 10.10.3(LAMP環境) さくら(スタンダード・プラン) ※Mac、さくら共にGit環境は既にインストール済み。 Mac(ローカル環境)で作成したファイルを、さくらのサーバへとアップロードしていく流れをGitで管理する。プロジェクトに関するディレクトリは全て新規に作成するものとする。 大まかな手順 1.さくらのサーバに中央リポジトリを作成する。 2.Macのローカル環境に中央リポジトリを複製(clone)する。 3.さくらのサーバ側にも(中央リポジトリとは別の)リポジトリを複製する。 4.Mac側でsample.htmlを作成したら、中央リポジトリに記録し全てのリポジトリにてデータを共有できるようにする。 さくらサーバに中央リポジトリを作成する まずさくらサーバにsshでログインし、適当な場所(今回は~/以下、つまりhome/ユーザ名/以下)にsample
Git操作をGUIで行えるSourceTreeは、私にとって今では無くてはならない存在です。 コレのお陰で、ターミナル恐怖症のデザイナーさんにもGitでファイルの変更を管理してもらえるようになって、デザイナーさんとの連携がとても楽になりました。 もう、これなしでは開発したくないと思えるほど便利です。 でもSourceTreeのいくつかの機能はお世辞にも直感的とは言えず、間違った操作を誘発する危険性をはらんでいます。私もハマって結構大変な目に会いました。 私が、そして私のような方が同じ過ちをおかさないように、ここにハマりそうなSourceTree操作を記録しておきます。 リベース手順 例えば、developブランチから分岐したfeature/hogeブランチで作業している途中で、他の開発者のコミットがdevelopブランチにマージされた場合、後々大きなコンフリクトが発生するのが怖いので、早め
今回の内容で特にマージをした時にコンフリクトを起こしてしまう状況を考えてみます。 Git初心者で実務でコンフリクトを起こすと焦ってしまうに違いありません。日頃からGitを使い倒しておくと焦ることはないでしょう。 ココは何度も失敗をしてこれはやっちゃダメとかいうことを身をもって学習することです。 ブランチとは枝という意味があります。その名前のとおり複数の作業を枝分かれする時に使います。 具体的には、同時に複数の作業を行う場合などにブランチを使います。 ここでは参考例として「task-A」と「task-B」2つのブランチを作成します。 新規にブランチを作成するにはブランチボタンをクリックします。「新規ブランチ」項目に任意の新しいブランチの名前を記入します。「新規ブランチをチェックアウト」にチェックが入っていると、ブランチ作成と同時そのブランチがチェックアウト(選択された)状態になります。 今回
まずは、ソースツリーを起動し、任意のリポジトリを開いてください。 今回は、GitHubでテスト用のリポジトリを作りました。作ったばかりなので、データはREADME.mdのみ、ブランチはmasterのみの状態です。 次に、メニューにある「Repository」から、「Git flow/ Hg flow」→「Initialize Repository」を選択します。 こちらの「Repository」→「Git flow/ Hg flow」は、ショートカットキー「command + alt + F」で実行できます。 すると、下記のようなウィンドウが表示されます。 ここではGit flowで使うブランチの名前を設定できますが、特殊な理由がなければここはデフォルトのまま、OKを押しましょう。とくにエラーもなく無事にウィンドウが閉じられれば、成功です。 また、リポジトリに「develop」ブランチがな
こんにちは、フロントエンドエンジニアのいなばです。 気付けば、フロントエンド入門Git編の連載も5回目。前回は、ローカルで作業中のコミットを綺麗にまとめたり、間違った操作をしてしまったときにコミットログを修正したりする方法を紹介しました。 今回は、Gitを使う上で重要な「ブランチ」について解説したいと思います。 ブランチとは? ブランチは、コミットの歴史を分岐して記録していくためのものです。 歴史を分岐させることで、他のメンバーの作業の影響を受けることなく、同じリポジトリ上で複数の開発を同時に進めていくことができます。 分岐したブランチはマージもしくはリベースというコマンドで、他のブランチに合流させることができます。 これを繰り返すことで開発を進めていきます。作業単位ごとにブランチを作ることで、なにかしらの問題があった場合に原因となる箇所の調査が楽になります。なるべく細かい単位でブランチを
どうもですよ!はやちですよ!٩( ᐛ )و フロントエンド入門のGit連載をご覧になってるみなさま、Gitはご利用なられましたでしょうか( ˇωˇ ) Git使い始めは、誰にでも間違いはつきもの。はやちもテンパってしまう癖があるので、ちょいちょいやらかしてしまうことがあります( ˇωˇ ) 今回はそんなときに役立つ、Gitで間違えて操作してしまったときの対処法をまとめました。sourcetreeベースでご紹介をいたします( ˇωˇ ) 間違いを修正する「リセット」 リセットは、ファイルを以前の状態に巻き戻すことで、ステージ上でもローカル上でも操作できます。 例えば、 ステージ上で更新を加えていたファイルを途中で操作する前に戻したいとき ローカル上で、コミットのコメントを間違えてしまったとき 一旦戻して追加修正したいとき もうこのコミットもろともなかったことにしてしまいたいとき などのシーン
こんにちは、フロントエンドエンジニアのゆたろです! Git連載の2回目。難しい話は抜きにして、とにかく実際に触ってみましょう! GitHubを使ってみよう! GitHubとは、Gitのホスティングサービスの1つです。他にもBitBucket、Phabricatorなどがありますが、当記事ではGitHubを使って説明していきます。 GitHubのアカウント作成 https://github.com/ まずは、GitHubのアカウントを作成しましょう。ページ上部の「Sign up」よりアカウント登録画面に移動します。 上から順に、ユーザネームとメールアドレス、パスワードを入力して「Create an account」を押してください。 次にプランを選択して、「Finish sign up」で登録完了です。登録したメールアドレス宛に確認メールが届くので、アドレス認証も忘れずに! 練習用リポジトリ
こんにちは。ほりでーです。 フロントエンドチームから、チーム開発には欠かせない「Git(ギット)」を基本から学ぶための連載がスタートします! ということで、今回はその第一回目。 具体的な使い方の説明に入る前に、そもそもGitとは何か、なぜGitを学ぶ必要があるのか、という概論から入っていきたいと思います。前半ではスキルとしてなぜGitが重要視されているのか、後半ではGitに登場する基本的な概念について、初心者にもわかりやすく説明していきます! 1. Gitが使えないと困る理由 Gitは、HTML・CSS・JavaScriptなどの コードを管理するためのツールで、世界的に定評があります。極端な話、Gitを使えるようになったからと言って、デザインが上手くなったり、すごいJavaScriptが書けたりするわけではありません。デザインやプログラミングのテクニックとは、あまり関係がないスキルなんで
こんにちは、フロントエンドエンジニアのいなばです。 案件の開発終盤、こんなことが起きていませんか? 納品が近づき、プロジェクトメンバーで一斉に検証作業を始める 各々バグを見つけ次第、issueを立てていく さあ、バグをかたっぱしから片付けていきましょう しかし、蓋を空けてみると……書き方の悪いissueが乱立! バグの内容を把握するのに時間がかかる! 結局わからないのでissueを立てた本人に聞く→結果的にコミュニケーションコストが増える……。コミュニケーションコストを減らすためのツールなのに、やりとりが何往復もしていたら本末転倒ですよね。 そこで、今回はGithubやbitbucketのissue機能を活用したデバッグフェーズでのタスク管理のコツをご紹介します。 悪いissueと良いissueとは? そもそも、どんなissueが“悪いissue”なのでしょうか? 例を見てみましょう。(極
Gitが開発現場におけるバージョン管理の軸になってきています。しかしGitには多くの機能があり、さらに他のバージョン管理に比べてローカルでできることが多いので、覚えるのが大変というイメージがあります。 そこで作られたのがGitの使い方を覚えるためのGit-itというソフトウェアです。Git-itを通してGitの使い方を学んでいけます。 Git-itの使い方 最初のページです。一番最初はGitのインストールからはじめます。 リポジトリを作ってみようのレッスンです。 コマンドも書かれていて、その結果をアプリ上から確認できるようになっています。 pullの方法。こうやって順番にすすめていくことでGitを使った開発の基本が抑えられるようになるでしょう。 Git-itの良いところはElectronアプリアプリなので、ローカルに作成したフォルダの状態などをチェックすることができるということです。コンテ
はじめまして。バックエンドエンジニアのヤスタカです。 長野の野尻湖オフィスでのバックエンドエンジニアとして採用されたのですが、野尻湖オフィスの冬の厳しさに今から戦々恐々としています。 さて、みなさんはGitを普段から使いこなしてますか? リモートからクローンしてきて、コミット、プッシュ、プルリクなどの基本的な操作はとりあえず覚えたけど、それ以上のことはよくわからないし……でも、とりあえずなんとかなってるし。。。 そんなGit初心者の方に向けて、知っておくと便利な小ワザをご紹介します。今回はGitクライアントの「SourceTree」を使ったやり方と、コマンドラインだったらこんなコマンドだよというのを合わせてご紹介したいと思います。 主にMacでの操作方法を記載していますが、SouceTreeはwindows版もありますので、適宜読み替えていただければと思います。 1. 一時的に変更を退避す
こんにちは、しょごです。 先日勢い余ってPS4を買いました。高画質すばらしい。「Last of US」めちゃくちゃ面白いです。 いままでAndroidユーザだったのですが、キャリア乗り換えをしつつiPhoneに変えました。もともと毎月の携帯代が安くならないもんかと思ってたし、本体代金完全無料だったのでさくっと。しかし、慣れるまでは時間がかかりそうです……。 さて、今回はGitHubで二段階認証を適用させる方法をご紹介します。 基本的にはパスワード入力でログインというかたちですが、こちらを設定しておくことで、よりセキュリティを強化することができます。 セキュリティ設定から二段階認証設定を始める 「GitHub」にログインし、ヘッダーの自分のアイコンから「Setting」をクリック。 プロフィール画面の左ナビの「Security」をクリックします。 画面の「Two-factor authent
SourceTreeというガッツリしたGUIクライアントができてから、「Gitはコマンド打つべし」という感じでもなくなりつつあるかなと感じている(現に、TortoiseSVNを使っているときにSVNのコマンドを意識したことはなかった)。 そんなわけで、ここではGitの詳しい説明は一切はしょりSourceTreeの操作にのみ焦点を当てて解説を行う。ただ、コマンドにも興味あるという方に備え、コマンドも併記しておく。 インストール こちらにアクセスしてインストール。 https://www.atlassian.com/ja/software/sourcetree/overview なお、以下の説明ではWindows版を使用。 初期設定 ツール>オプションから各種設定が可能。見ておくべき箇所は以下3点。 一般(git config) ユーザー名/メールアドレスは必ず設定しておく。インストール時に設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く