2020-11-06 14:39:18 +09:00
|
|
|
---
|
2022-08-01 17:33:53 +09:00
|
|
|
title: GitHub と CodeSandbox の使い方
|
2020-11-06 14:39:18 +09:00
|
|
|
marp: true
|
2020-11-06 18:57:44 +09:00
|
|
|
paginate: true
|
2020-11-06 14:39:18 +09:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# GitHub と CodeSandbox の使い方
|
|
|
|
|
|
|
|
|
|
WebDINO Japan エンジニア
|
|
|
|
|
渡邉浩平 (https://github.com/kou029w)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# 内容
|
|
|
|
|
|
2020-11-06 15:21:46 +09:00
|
|
|
Web アプリケーション開発のための便利なサービスを紹介
|
|
|
|
|
|
2020-11-06 14:39:18 +09:00
|
|
|
- Git … 分散型バージョン管理システム
|
|
|
|
|
- GitHub … 開発者のためのプラットフォーム
|
|
|
|
|
- CodeSandbox … Web アプリケーション開発のためのオンラインエディター
|
|
|
|
|
- ハンズオン … CodeSandbox をつかってみる
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# Git
|
|
|
|
|
|
|
|
|
|
もともと Linux の開発者リーナス・トーバルズによって作られたシステム
|
2020-11-07 10:24:11 +09:00
|
|
|
[2,780 万行](https://www.linux.com/news/linux-in-2020-27-8-million-lines-of-code-in-the-kernel-1-3-million-in-systemd/) - Linux は膨大なコードで構成されている
|
2020-11-07 10:17:34 +09:00
|
|
|
[1,000 人以上](https://www.linuxfoundation.org/membership/join/) - Linux は開発には多くの人が携わっている
|
2020-11-06 14:39:18 +09:00
|
|
|
いつ・だれが・なにを・なぜそうしたかを記録し管理するための仕組みが必要
|
|
|
|
|
|
|
|
|
|
## 分散型バージョン管理システム
|
|
|
|
|
|
|
|
|
|
たとえば GitHub によって共有されているリモートなバージョン管理されたシステムそのものをそのままローカルな手元の PC に持ってくることが可能
|
|
|
|
|
ローカル → リモートも可能
|
|
|
|
|
Git システムそのものはあらゆる場所に存在しうる
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# Git
|
|
|
|
|
|
|
|
|
|
## 知っておきたいこと
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### リポジトリ
|
|
|
|
|
|
|
|
|
|
公開したり、管理したいソースコードやファイルを格納したりする場所がリポジトリです。
|
|
|
|
|
主に、保管される場所によって、ローカルとリモートに区別されています。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# GitHub
|
|
|
|
|
|
|
|
|
|
## 開発者のためのプラットフォーム
|
|
|
|
|
|
|
|
|
|
> GitHub は、ユーザのみなさんからヒントを得て作成された開発プラットフォームです。オープンソースプロジェクトやビジネスユースまで、GitHub 上にソースコードをホスティングすることで数百万人もの他の開発者と一緒にコードのレビューを行ったり、プロジェクトの管理をしながら、ソフトウェアの開発を行うことができます。
|
|
|
|
|
> _https://github.co.jp/ より引用_
|
|
|
|
|
|
|
|
|
|
ここでいうソースコードのホスティングとは Git システムのこと
|
|
|
|
|
課題・提案・疑問 (Issues) を中心にした開発者間のコミュニケーション
|
|
|
|
|
GitHub を使うことでより多くの人が開発者としてソフトウェアの開発に関われる
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# GitHub
|
|
|
|
|
|
|
|
|
|
## GitHub をつかってみる
|
|
|
|
|
|
|
|
|
|
GitHub アカウントの作成
|
|
|
|
|
|
|
|
|
|
- 作成: https://github.com/join
|
|
|
|
|
- ログイン: https://github.com/login
|
|
|
|
|
|
|
|
|
|
GitHub の詳しい操作方法などは[GitHub ハンズオンセミナー資料](https://github.com/webiotmakers/github-handson/blob/master/Docs/WIMC_GItHub_HandsOn.pdf)を参照
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# CodeSandbox
|
|
|
|
|
|
2020-11-07 10:36:31 +09:00
|
|
|
|
|
|
|
|
|
2020-11-06 14:39:18 +09:00
|
|
|
## Web アプリケーション開発のためのオンラインエディター
|
|
|
|
|
|
|
|
|
|
CodeSandbox は Web アプリケーション開発のためのオンラインエディターです。 Web ブラウザの上ですばやくプロトタイプを作成し、簡単に実験を行い、ワンクリックで共有できます。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# ハンズオン
|
|
|
|
|
|
|
|
|
|
実際に GitHub リポジトリのファイルを CodeSandbox から編集してみる
|
|
|
|
|
|
|
|
|
|
## CodeSandbox をつかってみる
|
|
|
|
|
|
|
|
|
|
- [基本的な使い方](https://csb-jp.github.io/docs/usage)
|
|
|
|
|
- [GitHub 連携](https://csb-jp.github.io/docs/github)
|
|
|
|
|
- [Live (共同編集)](https://csb-jp.github.io/docs/live)
|
|
|
|
|
|
|
|
|
|
CodeSandbox から開くには `github.com` → `githubbox.com` に書き換える
|
|
|
|
|
例: [https://github**box**.com/webiotmakers/GitHubExample](https://githubbox.com/webiotmakers/GitHubExample)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# あとで読みたい
|
|
|
|
|
|
|
|
|
|
- [GitHub ハンズオンセミナー](https://github.com/webiotmakers/github-handson/blob/master/Docs/WIMC_GItHub_HandsOn.pdf)
|
|
|
|
|
- [CodeSandbox ガイド](https://csb-jp.github.io/)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# 後付
|
|
|
|
|
|
|
|
|
|
GitHub は GitHub Inc. の日本およびその他の国における登録商標です。
|
|
|
|
|
本文中に記載されているブランド名、会社名、製品名等は、それぞれ各社の登録商標または商標です。
|
|
|
|
|
この文書内に含まれるイラストは、ちづみ(https://twitter.com/098ra0209)さんの許諾を受けています。
|
