<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.8;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>
<style>
/* specific design */
.reveal h1 {
margin: 0% -100%;
padding: 2% 100% 4% 100%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
animation: Gradient 60s ease infinite;
}
@keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
.reveal h2 {
text-align: center;
margin: -5% -50% 2% -50%;
padding: 4% 10% 1% 10%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
<!-- --------------------------------------------------------------------------------------- -->
# インターン参加記
<br>
<br>
<br>
#### 2021.10.6
### 秦 国大
---
## 株式会社いい生活
- 不動産業の DX を推進する会社
- 東京証券取引所 市場第二部に上場
- 資本金: 628,411,540円（2021年3月末時点）
- ICPC のスポンサーにもなっている
<br>
<div style="text-align: center">
<img src="https://i.imgur.com/um4Jrkw.png" alt="代替テキスト" width="500" height="150">
</div>
---
## インターン内容
- いい生活の物件情報 API を活用した web アプリケーションの開発
- TypeScript + React
- gitHub を用いたチーム開発
- 5 日間, 9:00-18:00 の作業（初日はほとんど環境構築）
- 4~5 人で 1 つのチームを組んだ
- ハドルでのコミュニケーションが中心
---
## 目次
- React とは何か
- gitHub の開発手法
- まとめ
---
## React
- UI 構築のための JavaScript ライブラリ
- FaceBook が提供
- 世界的な知名度が高まっている
- 日本語の資料は少なめ (cf: Vue)
- チュートリアルはある: https://ja.reactjs.org/
---
## React vs. Vue
- Vue は UI 構築のための JavaScript フレームワーク
- 日本ではこちらの方が人気？とっつきやすいと説明されることが多そう
- 好みで使い分けましょう、と言われることも
- TypeScript を使うなら（一年前までは）React 一択
- Vue3.0 のリリースで TypeScript のサポートが大幅に強化された
<br>今日は Vue について触れるのはここまで
---
## React を使わずに書こうとすると…
- [webHydLa で UI の配置などを規定しているファイル](https://github.com/HydLa/webHydLa/blob/develop/static/index.html)
- 配置や UI デザインはこれと CSS ファイルで頑張って決めてる
- 長いし、デザインを変えるのに CSS に潜って対象となる UI 部品の該当プロパティを変えて…というのは（少なくとも僕には）頭がとっ散らかってしまいそう
- ある機能（ボタン）を追加したい！となったとき、HTML と JavaScript（と CSS）を全部編集するよりは機能についてのファイル一つで完結したい気分
---
## React 使用例
- [春学期プロジェクト研究のリポジトリ](https://github.com/sano-jin/meetup-town)から抜粋
- UI の配置と機能がセットで書けたり（紹介はしないが）機能ごとに状態を持つことも可能
<div style="text-align: center">
<img src="https://i.imgur.com/DeM3f47.png" alt="代替テキスト" width="560" height="560">
</div>
---
## git を使った開発
### よくある悩み
- 作りたいものははっきりしてるけどどこから手を付けていいかわからない
- コードを書いてる途中に他のバグが見つかるとそっちに手を付けてしまい、<br>開発が進んでいる感じがしない<br><br>
<div style="text-align: center; font-size: 200%; color: blue">
今自分がやるべき作業を言語化しよう
</div>
---
## チケット駆動開発
- まとまった作業を細かなタスク（＝チケット）に分割
- チケットに対して人を割り振って作業を進める
- gitHub では issue に対応する
---
## メリットとデメリット
### メリット
- チケットの内容に集中できる
- チケットをこなすのに必要な手順を明確化することで作業中に迷いが生じない
- 実装中に他のバグを見つけたらとりあえず issue を立てておけばよい
- 誰がどの作業をやっているか一目でわかる
- タスクの優先度が可視化できる
### デメリット
- 全体的な設計を把握した上での作業には向かないかも
---
## 使用例
<div style="text-align: center">
<img src="https://i.imgur.com/m3wLRwY.png" width=624 height=360 > <img src="https://i.imgur.com/NC3xOl5.png" width=700 height=700 >
</div>
---
## 使用例
<div style="text-align: center">
<img src="https://i.imgur.com/seTZ1mB.png" width=630 height=630 >
</div>
---
## その他
- ブランチの命名規則の例
- issue 番号 10 に対応する機能追加は feature/10
- issue 番号 21 に対応するバグ修正は fix/21
- コミットメッセージの書き方例
- （feature/10 上で）"refs #10 ○○の実装"
- #xx みたいにするとコミットメッセージから該当 issue に飛べる
- その他の手法: プルリク駆動の開発
- 早めにプルリクを作ってしまう
- コードレビューを早い段階から受けやすく、軌道修正するのが簡単
- チケット駆動とは両立できる
---
## その他
<div style="text-align: center">
<img src="https://i.imgur.com/b4fqjg6.png" alt="代替テキスト" width="1170" height="585">
</div>
---
## まとめ
- インターンの内容である React と チケット駆動開発, ちょっとしたお作法を説明
- 個人の開発に取り入れると滞っていた作業が進むかもしれない
- React やりたいですという人は一緒に webHydLa を改修しましょう
---
{"metaMigratedAt":"2023-06-16T11:50:20.423Z","metaMigratedFrom":"YAML","title":"HackMD presentation Sample1","breaks":true,"slideOptions":"{\"theme\":\"white\",\"slideNumber\":\"c/t\",\"center\":false,\"transition\":\"none\",\"keyboard\":true,\"width\":\"93%\",\"height\":\"100%\"}","contributors":"[{\"id\":\"32a9d350-a09b-46bd-aa5f-65de5e1f4141\",\"add\":4233,\"del\":1652}]"}