jig.jpオンラインインターン備忘録

みなさんお久しぶりです✨
みゅーすけです！

8月の終わりと共にjig.jpオンラインインターン2020が幕を閉じました。

とってもとっても濃い２週間でした...

そこで今回のインターンで得た経験を備忘録的に書こうと思います💭

スクラム編

今回のインターンではAsanaを用いてスクラム開発を行いました。

スクラムって？

チームで開発を進めるためのフレームワーク

1プロダクトバックログの作成

プロダクトバックログとは、機能一覧のこと。

１機能１タスクとして優先度を付けながら登録していきます。

また、スプリント開始時にプロダクトバックログの変更点などを検討します。

2スプリント計画

スプリントを複数回繰り返しながら開発を行います。

プロダクトバックログのタスクの中から、今回のスプリントで取り組むものをピックアップします。

なるべく優先度の高いものからピックアップし、必要な作業をサブタスクとして登録します。

最後に担当者を決め作業を開始します。

3デイリースクラム

毎回、作業開始時にスプリントバックログを全員で確認しながらタスクの追加や分担、困っていることなどを話し合います。

4スプリントレビュー

今回のスプリントで対応した機能について全員でプロダクトの動作を確認します。

また、スプリントバックログのタスク状況についても確認します。

最後にスプリントを振り返って、続けるべきこと(Keep)・問題点(Problem)・解決策(Try)をみんなで考えます。

チーム開発が綺麗に進みますね！

GitHub編

1ローカルでmasterブランチに入る

更新確認のためにプルも忘れずに。

masterブランチは、信頼できるコードがまとめられています。masterブランチを直接触ってはいけません。

2ブランチを切る

英数ハイフンのみを使った短い単語で名前をつけます。

命名規則をつけるとさらに分かりやすくなり良いです。

3開発、コミット

作成したブランチ上での変更はmasterブランチには影響がありません。思い思いのコーディングをして作業を進めていきます。

元のコードに戻したくなった場合は一度masterブランチに戻り、新たにブランチを切り直します。

タスクが完了したら、メッセージと共にコミットし、変更内容を保存します。

コミットメッセージにも規則をつけると変更が分かりやすく良いです。

4プルリクエスト・レビュー

タスクの概要や実装範囲を書き、プルリクエストを作成します。

作成したら他のメンバーにレビューしてもらいます。

レビューの通ったコードだけをmasterブランチへマージします。

5masterブランチへマージ

masterブランチへの競合（コンフリクト）や内容の修正などがあれば直してコミットします。

修正がなければmasterブランチへマージして作業用のブランチを削除しましょう。

プロダクトの管理と開発がスムーズに行えます！

JavaScript編

僕の知っているJavaScriptとは別の言語でした。。。

1scriptはmodule

module宣言をしないと変数宣言なしで使えたり、import/exportが使えなくなります。

<script src="index.js"></script>

<script type="module" src="index.js"></script>

2varは使わない

基本constを使います。変数を変更するものはletを使用します。

var name = "みゅーすけ";

const name = "みゅーすけ";
let index = 0;

3文字列連結

連結に+は使いません。

console.log("名前：" + name);

console.log(`名前：${name}`);

4ループはfor ... of

forEachはパフォーマンス上遅いです。

const name = ["みゅーすけ", "ぷりん", "もしゃ", "ぴんぽん"];

for (let i = 0; i < name.length; i++) {
    const value = name[i];
    console.log(value);
}

const name = ["みゅーすけ", "ぷりん", "もしゃ", "ぴんぽん"];

name.forEach (value => {
    console.log(value);
});

const name = ["みゅーすけ", "ぷりん", "もしゃ", "ぴんぽん"];

for (const value of name) {
    console.log(value);
}

5Document.getElementById

長いコードは省略します。

const name = document.getElementById("name").value;

const name = name.value;

6 文字列出力

innerHTMLはHTMLとして解釈されるので注意です。

document.write("みゅーすけ");

// <div id="name"></div>
name.textContent = "みゅーすけ";

7関数宣言

アロー関数を使います。

function name(引数1, 引数2,...) {
    処理
}

const name = (引数1, 引数2,...) => {
    処理
};

8デフォルト引数

予め値を設定します。

const name = (a, b) => {
    if (b === undefined) {
        b = "ぷりん";
    }
    処理
};

const name = (a="みゅーすけ", b="ぷりん") => {
    処理
};

9メソッド

どちらも同じ意味です。

const obj = {
    name: (引数) => {
        処理
    }
};

const obj = {
    name(引数) {
        処理
    }
};

流行に乗っていきましょう！

長くなりましたが、最後まで読んで頂きありがとうございました！

以上、みゅーすけでした🌟