jQueryでボタン連打制御

これまで覚えてきたHTMLとCSSに加え、jQueryを使って簡単なWebページを作ってみた。ナポレオンの画像を動かすという本当にちょっとした動きをつけてみたのだが、ボタンを連打すると、ナポレオンが暴走してしまったので、ナポレオンの一連の動きが終わってからでないとクリックが有効にならないようにしてみた。

考え方

まずは、キャンセルフラグという変数を0と定義し、ボタンがクリックされた時に、キャンセルフラグが0ならばフラグを1にし、その後の処理を実行後、setTimeoutによって一定時間後にキャンセルフラグを0に戻すという流れ。

    <script>
        $(function(){

            var cancelFlag = 0;

            $('.btn').click(function(){

                if( cancelFlag == 0 ){

                    cancelFlag = 1;

                    $('#napo').toggle(1500);
                    $('#napo').toggle(1500);

                    setTimeout(function(){
                        cancelFlag = 0;
                    },3000);

                }

            });
        });
    </script>

修正完了後のWebページ

こちら

参考

【jQuery】ボタン連打の対策をする（処理中は追加処理をキャンセルする）

先日、try!Swiftに参加して、そこで知り合った方が「今年から新人教育を担当するが新人の気持ちが分からなくて不安だ」という話をされていました。
それなら私の体験談が誰かの役に経てばいいなと思い、投稿しました。

自己紹介

この春で社会人3年目になりました。
社会人歴≒エンジニア歴、研修期間を考えるとエンジニアとしては2年たたないくらいです。
ずっとiOSエンジニアしています。普段書いている言語はSwiftです。

この記事は、以下のような人向けです

• これから新人を育成するエンジニア
• もしくは、初めてプログラムコードを読んで心が折れてしまった超ド級のプログラム初心者
  • 自分だけじゃないんだと心の慰めにでもしていただけると良いかなと思います
• あるある〜！を楽しみたいエンジニア
• 初心なんて思い出したくても思い出せないというベテランエンジニア

ではさっそくどうぞ。

アルファベットでしょ？英語と同じ感覚でなんとなく読めないかな？

入社前の内定者期間、基本情報技術者試験の勉強をしていました。
が、私は、前半の項目である二進数の計算やネットワークの単語暗記に早々に飽きてしまったんです。
(というか、よく分かんないからやる気をなくしたんですね)

「結局、プログラムコードが分かればいいんでしょ？英語だし、なんとなく意味わかんじゃないかな」

という、今考えると恐ろしい考えを持ってました。
（ちなみに私の英語力はTOEIC350くらいです多分）

もしかしたら、プログラマーの人には「べつに、英語と同じでしょ。間違ってないよ」と思う方もいらっしゃるかもしれませんが、
今まで「I have a pen.」みたいな英語の文章を読んでいた人間が、「int a = 10;」というプログラムコードの意味がわかるわけありませんよね、、とほほ。
その時の私は＝が代入という意味すら知らず、1+1=2に出てくるような、"同等"の意味しか知らなかったんです。
そんな無謀なことを考えるほど、知らないことを知らない、これが最初でした。

Publicとmainしか意味がわからん

あっま〜い考えを持って初めて見たコードは、こんな感じの初心者用Javaのコードだったと思います。

public class SampleJava {
  public static void main(String[] args) {
    System.out.println(args[0]);
  }
}

これ以上ないくらいプログラムとしては簡単なコードですが、当時の私、

「Publicは英語で”公共の”って意味でしょ、mainは”主な”よね、staticって単語よう知らんな、まあええか、で次はえっと、void、、、何？？？」

なんて、本気で考えてました。

「なんで単語と単語の間に記号が入るんだろう」

とか。
もちろんオブジェクト指向なんて理解してません。
なので、どれが主語でどれが述語なんだろうとかも考えていた気がします。
この時、無知の知にやっと至ったわけです。
プログラミングの世界が今まで生きてきた世界との壁の分厚さに、もう泣いたらいいやら笑ったらいいやらの気持ちでした。
これからその壁を越えないと、ご飯食べていけないなんて、なんて世界にきてしまったんだ、私は。
それをワクワクできる人もいるかもしれませんね。（羨ましい）
私は途方の無さにゾッとしてました。

調べたら説明が分からなくてまた調べて説明が分からんの繰り返し、これほんま笑い事じゃない

とりあえず難しい英文を読む時は、単語の意味を調べるのが高校生の勉強法ですよね。
中学高校大学と10年間あまり英語を一応勉強してきたはずですけど、たった数行のコードの中の単語でも見たことないものが多すぎる！
なので、調べました、めちゃくちゃよく出てくる"Int"って単語。

整数型とは、プログラミング言語などで用いられるデータ型の一つで、整数の値を格納できるもの。
http://e-words.jp/w/%E6%95%B4%E6%95%B0%E5%9E%8B.html

……。うーん。

「……型って何？歯型とかそういうやつ？」

型について調べる。
やはりわからない。
以下、ループ。
同じ内定者や理系の友達の、エンジニア歴の長い子に「調べても調べるものが増えるだけなんやけど…」と相談したら「あるあるやな〜」とみんな大笑い。いや笑い事ちゃうねん。
笑えないし、情けないし、正直、自分にイライラしてました。笑

ちなみに、私は未だにそのループの抜け出し方を後輩に教えられる気がしません。
同じ「知らんこと調べる」でも、今なら、聞いたことあるな〜とかたぶん普段使ってるもののこれに近い意味やな〜とか、初心者が持ってない感覚をいつのまにか身につけてしまったからです。他の方もそうではないでしょうか。

鈴木オブsuzukiてなんやねん

intですらつまづいた私ですから、プログラムコードというかオブジェクト指向というか、とりあえずJavaの勉強は独学では、無理だと諦めました。
そして入社して社内研修を受けました。
最初はもちろん初級クラス。のはずが、なぜか中級クラスに入れられたんですね。これは今でも謎です。

Personクラスがあり、suzukiというオブジェクトを生成したい、定義された変数nameに"鈴木"をイニシャライザの引数に渡す。

そんな課題だったと思います。よくありますよね。
積極的に授業を受けるあまり目立ち過ぎてうっかり寝てるとすぐばれて呼び出されるくらい、授業は食い気味に頑張っていたんです。
しかし、どうも、クラスの誰よりも文系脳だったようで、かなりの劣等生でした。
同期が言っている「すずきのすずき」は、
「suzuki's name is "鈴木"」（suzukiインスタンスの変数nameに入っている値は鈴木）なのですが、
私は「鈴木オブ鈴木？鈴木中の鈴木…最強の鈴木…」とか考えてるくらい、オブジェクト指向から遠く離れたところにおりました。
周りから聞こえてくる言葉のほとんどは分からないし、クラスの同期みんながどんどんナルホドネ〜みたいな顔になっていくのがすごい不安でした。

みんなより3日遅れで泣きながら課題をやっていた私が、なんとかオブジェクト指向を理解して、プログラムを書けるようになったのですが、それまでにやったことを以下でお話しします。

どうやってエンジニアになるか・させるか

さて、このとんでもない状態の新人から、今まで私がどうやって、そこそこのエンジニアになったか、3つ、お話しします。

いろんな人に聞いてみよう

同期がたくさんいたので、色んな同期にたくさん聞きました。
講師もたくさんいたので、講師の方に聞くこともあったり、TAの人に張り付いてる時もありました。
アルゴリズムはこの人が自分にとって1番わかりやすい説明をしてくれる、でもこの人のネットワークの説明はよくわからんかったな、じゃあ他の人にも同じこと聞いてみよう、あ、この人はネットワークに関してはわかりやすいな……と、いう感じに。
同じことを色んな人に聞いてみると、なぜかみんな違う解説をしてくれます。
そしたら、どれかがストンと腑に落ちる時があります。
なので、 教わる側も教える側も、「頭が悪いからできないんだ」「教え方が悪いからできないんだ」と思う必要はないんじゃないかな 、と思います。
私も「私って頭悪いんだ。文系脳なんだ。エンジニアなんて向いてないんだ。」そう考えては落ち込むこともありました。
でも、今は、そうやって自分の道を閉してしまう前に、納得するまで色んな人から教わってみてよかったなと思っています。

自分なりの勉強方法をみつけよう

「なんでそこまでして（ここまで教えて）わかんないの？」と言ってくる人のことは、無視しましょう。
本をたくさん読むことで勉強できる人もいれば、一冊の本をじっくり読めば勉強できる人もいるでしょう。
写経がわかりやすい人もいるでしょうし、一回自分でアプリを作ってみたりする人もいるでしょう。
私は、本に書いてあることと全く同じことを、他の人が言ってくれるだけで、本を読むよりはるかに吸収できるタイプでした。
あとは、プログラムコードを印刷された紙に手書きでどんどん書き込んでいくのもやりました。
年数を重ねたエンジニアにとっては、信じられないやり方かもしれませんし、私も今ならその方法はとりませんが、
そんなことは置いておいて、 今の自分にとって一番わかりやすい勉強法を見つけることが大事 だと思います。
「他の誰かがこの方法で出来たのに自分は……」なんて考えるだけ無駄です。
自分の勉強法を知っておくのも、新人期間にとても役に立つ経験だと思います。
育成担当にとっては遠回りに見えても、多少は目をつむって放って置いてあげるのも必要かもしれませんね。

教えてくれる人からたくさん言葉をもらうより、教わる側がたくさん話す。

アウトプット出来るほども分かってない……と思う方もいるかもしれませんが、そんなに難しいことを話せという訳ではありません。
たとえば、私がオブジェクト指向がよくわからなかった時は、

「つまりこのクラスはたい焼きの鋳型で、たい焼き一つ一つがインスタンス、あんこやカスタードが変数ってことで合ってる？変数名は中身」

みたいなことを同期に聞いたりしてました。
そしたら、「合ってる」「部分的に合ってる」「部分的に違う」「違う」とか、回答してくれます。(アキネーターかな？)
分かってる人って、もう分かってるからどこがわからないのか分からなかったり、説明の言葉が出てこなかったりします。
分からない側が、分からないなりに発言することで、教わる側と教える側のコミュニケーションは少し楽になるのではないでしょうか。
もちろん、そんなバカな私に付き合ってくれる人が周りにいたから出来たことなので、
新人さんの心理的安全性は、とても重要だと思います。

余談

こんな話をすると、毎回言われる言葉があります。

「なぜそんな状態でIT入ろうと思ったの」
「よく辞めなかったね」

嫌味ではなく心底不思議そうに言われますので、この記事を読んでくださった方も少なからず不思議に思う方がいらっしゃると思います。
理由は「ものを作るのが好きだから」です。料理や工作と同じ感覚なんです。

2年前はこんなだった私も、 今、誰かに必要とされているものを作る喜び がある仕事をさせてもらっています。
先輩にも何回か見捨てられそうになることもあり、同期に泣きついたり色々ありましたが
入社して1年後には私にとってJavaに続いて第二言語？になるSwiftでiOSアプリの案件を担当出来るくらいになりました。

先輩も同期も、みんなに心から感謝しています。
その恩返しとしてでも、どうか、この記事が、これからエンジニアになる人とエンジニアを育てる人の役に立てば嬉しいです。

---

最近Twitterはじめました。
Twitter: @totokit4
今日少しバズったので良かったら見てください

先日、try!Swiftに参加して、そこで知り合った方が「今年から新人教育を担当するが、新人の気持ちが分からなくて不安だ」という話をされていました。
それなら私の体験談が誰かの役に経てばいいなと思い、投稿しました。

自己紹介

この春で社会人3年目になりました。
社会人歴≒エンジニア歴、研修期間を考えるとエンジニアとしては2年たたないくらいです。
ずっとiOSエンジニアしています。初めてみたプログラム言語はJava、普段書いている言語はSwiftです。

この記事は、以下のような人向けです

• これから新人を育成するエンジニア
• もしくは、初めてプログラムコードを読んで心が折れてしまった超ド級のプログラム初心者
  • 自分だけじゃないんだと心の慰めにでもしていただけると良いかなと思います
• あるある〜！を楽しみたいエンジニア
• 初心なんて思い出したくても思い出せないというベテランエンジニア

ではさっそくどうぞ。

1.はじめまして、プログラム言語

アルファベットでしょ？英語と同じ感覚でなんとなく読めないかな？

入社前の内定者期間、基本情報技術者試験の勉強をしていました。
が、私は、前半の項目である二進数の計算やネットワークの単語暗記に早々に飽きてしまったんです。
(というか、よく分かんないからやる気をなくしたんですね)

「結局、プログラムコードが分かればいいんでしょ？ベースは英語やろし、なんとなく意味わかんちゃう？」

という、今考えると恐ろしい考えを持ってました。（ちなみに私の英語力はTOEIC350くらいです多分）

もしかしたら、プログラマーの人には「べつに、英語と同じでしょ。間違ってないよ」と思う方もいらっしゃるかもしれませんが、
今まで「I have a pen.」みたいな英語の文章を読んでいた人間が、「int a = 10;」というプログラムコードの意味がわかるわけありませんよね。

しかも、その時の私は＝が代入という意味すら知らず、1+1=2に出てくるような、"同等"の意味しか知らなかったんです。
つまり、

int a = 10;
int b = 20;
int c = a + b;

「え、これってaは10で、bは20とする、a足すbやからcは30やーん。なんや簡単やーん！(intってなんなんやろ、、、文末に;付くのがルールなんかなぁ、まあいいけど)」なんて考えたその直後、

a = a + b;

とか出てきた瞬間、「は？aはさっき10っていうたやん、意味わからん、矛盾してる」とか思っちゃうわけです。
無謀で、知らないことを知らない、これが最初でした。
今考えると信じられないほど無謀です。

2.プログラム言語、お前は何者だ

Publicとmainしか意味がわからん

あっま〜い考えを持って初めて見たコードは、こんな感じの初心者用Javaのコードだったと思います。

public class SampleJava {
  public static void main(String[] args) {
    System.out.println(args[0]);
  }
}

これ以上ないくらいプログラムとしては簡単なコードですが、当時の私、

「Publicは英語で”公共の”って意味でしょ、mainは”主な”よね、staticって単語よう知らんな、まあええか、で次はえっと、void、、、何？？？」

なんて、本気で考えてました。

「なんで単語と単語の間に記号が入るんだろう」

とか。
Javaを使ったことがある人がSwiftやRubyを読むのとは、わけが違う。
もちろんオブジェクト指向なんて理解してません。

オブジェクト（目的語）？メソッド（方法）？クラス（学級）？print...じゃなくてln？
プログラミングって何を語ってるわけ？
どれが主語でどれが述語なん？てかそもそも……主語とか述語の概念ある？ないとかある？

この時、無知の知にやっと至ったわけです。
プログラミングの世界と今まで生きてきた世界との壁の分厚さに、もう泣いたらいいやら笑ったらいいやらの気持ちでした。
これからその壁を越えないとご飯食べていけないなんて、なんて世界にきてしまったんだ、私は。
それをワクワクできる人もいるかもしれませんね。（羨ましい）
私は、途方の無さにゾッとしてました。
当時22歳でしたけど、10年ぶりくらいにお先真っ暗な気持ちになりました。

3.プログラムコードは私と仲良くなってくれない

調べたら説明が分からなくてまた調べて説明が分からんの繰り返し、これほんま笑い事じゃない

そうはいっても、他の内定は辞退してしまったし、やるしかない。
割と絶望的な気持ちでしたけど、社員の方の「入社して半年もすれば、経験者も未経験者もなくなるよ」と言っていたので、その言葉を信じるしかありません。

とりあえず難しい英文を読む時は、単語の意味を調べるのが高校生の勉強法ですよね。
中学高校大学と10年間あまり英語を一応勉強してきたはずですなのに、たった数行のコードの中の単語でも見たことないものが多すぎる！
なので調べました、めちゃくちゃよく出てくる"Int"って単語。

整数型とは、プログラミング言語などで用いられるデータ型の一つで、整数の値を格納できるもの。
http://e-words.jp/w/%E6%95%B4%E6%95%B0%E5%9E%8B.html

……。うーん。

「……型って何？歯型とかそういうやつ？」

型について調べる。
お察しだと思いますが、解説、何度読んでも、他のサイトを見てもやっぱりわからない。
以下、ループ。
同じ内定者や理系の友達の、エンジニア歴の長い子に「調べても調べるものが増えるだけなんやけど…」と相談したら「あるあるやな〜」とみんな大笑い。いや笑い事ちゃうねん。
笑えないし、情けないし、正直、自分にイライラしてました。

ちなみに、私は未だにそのループの抜け出し方を後輩に教えられる気がしません。
同じ「知らんこと調べる」でも、今なら、「聞いたことあるな〜」とか「たぶん普段使ってるもののこれに近い意味やな〜」とか、
全て白紙からの初心者が持ってない感覚を、いつのまにか身につけてしまったからです。
他の方もそうではないでしょうか。

4.オブジェクト指向、私を一番苦しめた奴

鈴木オブsuzukiてなんやねん

intですらつまづいた私ですから、プログラムコードというかオブジェクト指向というか、とりあえずJavaの勉強は独学では、無理だと諦めました。
そして入社して社内研修を受けました。
最初はもちろん初級クラス。のはずが、なぜか中級クラスに入れられたんですね。これは今でも謎です。

Personクラスがあり、suzukiというオブジェクトを生成したい、定義された変数nameに"鈴木"をイニシャライザの引数に渡す。

そんな課題だったと思います。よくある感じのやつです。
積極的に授業を受けるあまり目立ち過ぎてうっかり寝てるとすぐばれて呼び出されるくらい、授業は食い気味に頑張っていたんです。
しかしどうも、クラスの誰よりも文系脳だったようで、クラスで一番の劣等生でした。
同期が言っている「すずきのすずき」は、
「suzuki's name is "鈴木"」（suzukiインスタンスの変数nameに入っている値は鈴木）なのですが、
私は「鈴木オブ鈴木？鈴木中の鈴木…最強の鈴木…」とか考えてるくらい、オブジェクト指向から遠く離れたところにおりました。
周りから聞こえてくる言葉のほとんどは分からないし、クラスの同期みんながどんどんナルホドネ〜みたいな顔になっていくのがすごい不安でした。

私って、もしかして、ずば抜けて頭悪いんだろうか？クビになるのか？

って。
今なら言ってあげましょう、「確かにずば抜けて頭は良いわけじゃないけど、まあ仕事はできるようになるよ」と。

そんなこんなで

愚痴ばっかりになってしまいましたが、
みんなより3日遅れで半分泣きながら研修の課題をやっていた私は、なんとかその数ヶ月後、オブジェクト指向を理解して、プログラムを書けるようになりました。
それまでにやったことを以下でお話しします。

どうやってエンジニアになるか・させるか

いろんな人に聞いてみよう

同期がたくさんいたので、色んな同期にたくさん聞きました。
講師もたくさんいたので、講師の方に聞くこともあったり、TAの人に張り付いてる時もありました。
「アルゴリズムはこの人が自分にとって1番わかりやすい説明をしてくれる、でもこの人のネットワークの説明はよくわからんかったな、じゃあ他の人にも同じこと聞いてみよう、あ、この人はネットワークに関してはわかりやすいな……」と、いう感じに。
同じことを色んな人に聞いてみると、なぜかみんな違う解説をしてくれます。
そしたら、どれかがストンと腑に落ちる時があります。
なので、 教わる側も教える側も、「頭が悪いからできないんだ」「教え方が悪いからできないんだ」と思う必要はないんじゃないかな 、と思います。
私も「私って頭悪いんだ。文系脳なんだ。エンジニアなんて向いてないんだ。」そう考えては落ち込むこともありました。
でも、今は、そうやって自分の道を閉してしまう前に、納得するまで色んな人から教わってみてよかったなと思っています。
初心者の人は諦めずに、自分が納得できる答えを探してください。
(特に私のように、素直に「こういうものだ」って受け止められればいいのに、「こういうものって何。私わかんないんですけど?」って人は。)

自分なりの勉強方法をみつけよう

「なんでそこまでして（ここまで教えて）わかんないの？」と言ってくる人のことは、無視しましょう。
特に、"教えることに疲れた人"は言っちゃいますよね。あとは天才型の人とか。
全力で無視して、他の勉強法を探しましょう。
本をたくさん読むことで勉強できる人もいれば、一冊の本をじっくり読めば勉強できる人もいるでしょう。
写経がわかりやすい人もいるでしょうし、一回自分でアプリを作ってみたりする人もいるでしょう。
私は、本に書いてあることと全く同じことを、他の人が言ってくれるだけで、本を読むよりはるかに吸収できるタイプでした。
あとは、プログラムコードを印刷された紙に、手書きで解説をどんどん書き込んでいくのもやりました。
年数を重ねたエンジニアにとっては、信じられないやり方かもしれませんし、私も今ならその方法はとりませんが、
そんなことは置いておいて、 今の自分にとって一番わかりやすい勉強法を見つけることが大事 だと思います。
自分の勉強法を知っておくのも、新人期間にとても役に立つ経験だと思います。
育成担当にとっては遠回りに見えても、多少は目をつむって放って置いてあげるのも必要かもしれません。

教えてくれる人からたくさん言葉をもらうより、教わる側がたくさん話してみよう

アウトプット出来るほども分かってない……と思う方もいるかもしれませんが、そんなに難しいことを話せという訳ではありません。
たとえば、私がオブジェクト指向がよくわからなかった時は、

「つまりこのクラスはたい焼きの鋳型で、たい焼き一つ一つがインスタンス、あんこやカスタードが変数ってことで合ってる？変数名は中身」

みたいなことを同期に聞いたりしてました。
どうでしょう？知能レベルもハードルも高くない発言です。
でも、これを言うことで、教える側の人は「合ってる」「部分的に合ってる」「部分的に違う」「違う」とか、回答してくれます。(アキネーターかな？)
分かってる人って、もう分かってるからどこがわからないのか分からなかったり、説明の言葉が出てこなかったりします。
分からない側が、分からないなりに発言することで、教わる側と教える側のコミュニケーションは少し楽になるのではないでしょうか。
もちろん、そんなバカな私に付き合ってくれる人が周りにいたから出来たことなので、新人さんの心理的安全性は、とても重要だと思います。

余談（読まなくても大丈夫です）

こんな話をすると、毎回言われる言葉があります。

「なぜそんな状態でIT入ろうと思ったの」
「よく辞めなかったね」

嫌味ではなく心底不思議そうに言われますので、この記事を読んでくださった方も少なからず不思議に思う方がいらっしゃると思います。
理由は「ものを作るのが好きだから」です。
システムエンジニアは、クリエイティブ職だと思っています。
完成までの過程にとてもしんどい時があるのは、きっと料理や工作と同じだから。
いつか自分の作ったものが役に立つ喜びがあるのは、プログラミングも一緒のはずなんだと思って乗り越えてきました。
2年前はあんなだった私も、iOSのアプリ開発という、 今、誰かに必要とされているものを作る喜び がある仕事をさせてもらっています。

ここにくるまで先輩にも何回か見捨てられそうになることもあり、同期に泣きついたり、やっぱり心が折れかけたことも、本当に色々ありましたが
先輩も同期も、みんなに心から感謝しています。
その恩返しとしてでも、どうか、この記事が、これからエンジニアになる人とエンジニアを育てる人の役に立てば嬉しいです。

---

最近Twitterはじめました。
Twitter: @totokit4
今日少しバズったので良かったら見てください

Macを使ってはじめて公開鍵と秘密鍵を生成したので、手順を書きます。
はじめての方は手順通りに進めれば鍵が生成できます。

対象者

• Macを利用している方
• はじめて秘密鍵と公開鍵を生成する方

①.sshディレクトリに移動

まずは、下記のコマンドを実行して鍵を入れるフォルダに移動します。

$cd ~/.ssh

もし、/.ssh: No such file or directory と怒られたら.sshディレクトリがないので作成してください。

次のコマンドでフォルダを作成します。

$mkdir ~/.ssh

②lsコマンドでこのディレクトリに何もないことを確認

lsコマンドでこのディレクトリに何もないことを確認します。

$ls

③鍵の生成

次に以下のコマンドで鍵を生成します。

$ssh-keygen -t rsa

実行すると以下の3つのことを聞かれます。

• 鍵ファイルを保存するフォルダの名前
• パスフレーズ
• パスフレーズ（確認用）

すべて Enterを押しても構いません。

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/(ここはユーザーの名前が入ります)/.ssh/id_rsa): <----- ここで鍵ファイルを保存するフォルダの名前を設定できます
Enter passphrase (empty for no passphrase): <----- パスフレーズ
Enter same passphrase again: <----- パスフレーズ（確認用）
Your identification has been saved in /Users/(ここはユーザーの名前が入ります)/.ssh/id_rsa.
Your public key has been saved in /Users/(ここはユーザーの名前が入ります)/.ssh/id_rsa.pub.
The key fingerprint is:
99:24:u0:8i:2d:34:e6:82:r5:89:41:p8:a7:58:1p:n2（ここにメールアドレスが入ります）.local
The key's randomart image is:
+---[RSA 2048]----+
|      . =+.+.    |
|     . + .+      |
|  . .   .. .     |
| o + o  o + .    |
|o . o o.SB ..+   |
|..     .+ +oo+o  |
|o .    . ..*=.o. |
|.o      . ..E+.o+|
|.           .+=o+|
+-----------------+

この後に下記のコマンドを入力して~/.sshの中身をみてください。

$ls

すると次のような2つのファイルが作成されているのが確認できます。（先程、名前を設定していればそれが表示されます）

 id_rsa
 id_rsa.pub

id_rsaファイルが秘密鍵ファイルです。
id_rsa.pubファイルが公開鍵ファイルです。

生成した公開鍵の内容は次のコマンドで確認できます。

cat ~/.ssh/id_rsa.pub

はじめに

一年前に新人研修でGitを担当してTigの記事を書いたのですが，今年も同じくGitの研修を担当することになりました．新人さんたちにとってはターミナル環境はとっつきにくい人も多いようで，短い研修期間では操作自体に苦戦してしまい，Gitそのものを理解するというところに力を割けない人も少なくありませんでした．
それを踏まえて今回はGUIで操作しやすい環境を検討したのですが，以下のポイントを踏まえてVSCodeを使うことに決めました．

• マルチプラットフォームで使える．（研修はWindows環境で行いますが，業務ではLinuxデスクトップ環境も使うので）
• Gitの基本的な内容はVSCode上でGUI操作が可能．
• Gitの内容とあわせて，プログラミング用のテキストエディタの一例として，導入しやすそうなVSCodeを紹介．

VSCodeを使ったGitの基本的な操作を一通りまとめていきます．

インストール

GitとVSCodeをそれぞれインストールします．Windowsの場合は次のリンクからインストーラをダウンロードしてインストールを行います．

• Git for Windows
• Visual Studio Code - Code Editing. Redefined

また，VSCodeのGit Historyという拡張機能をインストールします．Gitのコミット履歴を見やすく表示することができます．

以降の内容はWindows環境で操作を確認しながらまとめます．

• Windows 10 Pro
• git version 2.21.0.windows.1
• Visual Studio Code 1.33.1

ただしGitもVSCodeもマルチプラットフォームで使用できるので，LinuxやmacOSでも参考になると思います．

Gitの初期設定

Gitをインストールしたら，まずは次の内容くらいは初期設定をしておくとよいです．Git for Windowsに同梱されているGit Bashを起動して，以下の内容でコマンドを実行します．

• ユーザ名とメールアドレス
• エディタ，マージツールの設定（ここではVSCodeを指定しています）
• pushのデフォルト方式を指定（追跡ブランチに対してpush）

$ git config --global user.name 'username'
$ git config --global user.email 'username@example.com'
$ git config --global core.editor 'code --wait'
$ git config --global merge.tool 'code --wait "$MERGED" '
$ git config --global push.default simple

VSCodeの起動

エクスプローラ上で作業ディレクトリを作成し，右クリックのメニュー（Open with Code）からVSCodeで開きます．

リポジトリ作成

まずはGitリポジトリの作成（初期化）を行います．
サイドバーのソース管理を表示して，リポジトリの初期化アイコンをクリックします．初期化するディレクトリを聞かれますが，VSCodeで開いている場所が初期表示されているのでそのまま選択して進めます．

リポジトリの初期化をすると，表示が次のように変わります．

コミットしてみる

foo.txtを作成します．ファイルの作成はエクスプローラで行ってもいいですが，VSCodeのサイドバー上で操作することもできます．

ファイルの作成と編集を行うとサイドバーのソース管理に更新ファイルの一覧が表示されます．+アイコンでステージングされます．取り消す場合は-アイコンです．

ステージングした状態からコミットメッセージを入力して，チェックアイコンでコミットが完了します．

続けて以下のように編集してもう一度コミットをします．（コミットメッセージはadd A）

foo.txt

A

コミットログを見る

はじめにインストールしておいたGit Historyで先ほどのコミットログを確認することができます．Git Historyの表示はコマンドパレットをCtrl + Shift + Pで表示して，Git: View History (git log)を実行します．

次のようにコミットの履歴が確認できます．

コミットの履歴からフィルの変更内容を確認することもできます．

ブランチを作成する

現在のmasterからブランチを作成してみます．画面の左下のブランチ名（master）が表示されている個所をクリックし，新しいブランチを作成を実行します．手順で作成するブランチ名を入力してブランチを作成します．


Git Historyで作成したブランチが確認できます．All branchesを選択すると両方のブランチが表示されます．ここではnew-branchという名前でブランチを作成しています．

ブランチをマージする

前準備として作成したブランチ上でコミットを行います．ここではnew-branch上で2件コミットしています．

1. foo.txtにBを追記（add B）
2. foo.txtにCを追記（add C）

Git Historyで確認すると次のようになっています．

この状態からmasterにnew-branchの内容をマージします．

まずはmasterに切り替えます．（チェックアウトします．）ブランチを作成したときと同様に画面左下のブランチ名をクリックしてmasterを選択します．切り替えが完了すると画面左下の表記がmasterに変わります．

切り替えができたらマージを行います．Git Historyでマージ元となるnew-branchの右にあるアイコンをクリックしてMerge this commit into current branchを実行します．手順でnew-branchを選択し，Yesを選択してマージを実行します．

コンフリクト等が起きなければこれでマージが完了します．Git Historyを見るとマージできていることが確認できます．

不要ブランチの削除

マージして不要になったnew-branchブランチの削除を行います．コマンドパレットからGit: Delete Branchを実行し，削除するnew-branchを選択します．

Git Historyを見ると削除できていることが確認できます．

プッシュする

ここまでの作業をリモートのリポジトリにプッシュしてみます．今回はGitHubにgit_tutリポジトリを作成したものとして話を進めます．またSSH keyの登録なども事前に完了しているものとします．コマンドパレットからGit: Add Remoteを実行します．手順でリモート名を設定しますが，ここではoriginと指定します．originは慣習的によく使われているデフォルトの名前です．続いてURLを指定します．URLは作成したリモートのリポジトリにあわせて設定してください．GitHubの場合はgit@github.com:<アカウント名>/git_tut.gitとなります．

リモートの登録ができたらプッシュします．サイドバーのソース管理にあるメニューアイコンからプッシュを実行します．

Git Historyを見るとorigin/masterが作成されていることが確認できます．

sshのパスフレーズ対策

sshでキーを生成するときにパスフレーズを設定していると，VSCodeでプッシュなどリモートリポジトリにアクセスするときにエラーが出てしまいます．その場合は以下を参考に解決してください．

VSCodeからGitのリモートにアクセスできないときの対処方法（Windows 10）

ログからのブランチ作成

Git Historyから任意のコミットにブランチを作成します．各コミットの右にあるアイコンをクリックしてBranch from hereを実行します．手順で作成するブランチ名を入力してブランチを作成します．

ここではnew-branch-2ブランチをadd Bのコミットに作成しています．作成後はRefreshボタンで表示の更新を行うと作成したブランチが確認できます．また画面の左下を見ると作成したブランチに切り替わっていることが確認できます．

マージコンフリクトに対処する

new-branch-2ブランチでfoo.txtの内容を更新してコミットします．この編集内容が「add C」のコミットとコンフリクト（競合）します．

foo.txt

A
B
D

Git Historyを表示すると，以下のようになっているはずです．

masterに戻ってnew-branch-2ブランチをマージしてみます．
画面左下のブランチ表示されている個所をクリックしてmasterをチェックアウトします．masterに切り替えたら前回と同様にnew-branch-2ブランチの右にあるアイコンをクリックしてマージを実行します．
マージを行った結果コンフリクトすると，サイドバーのソース管理にコンフリクトしているファイルが表示されます．ここでfoo.txtをクリックすると，コンフリクトしている個所が次のように表示されるので，手動で修正を行います．

今回は次のように修正して+アイコンでステージングします．

ステージングしたらこれまでと同様にコミットします．Git Historyを表示するとマージされていることが確認できます．

編集の一部をコミット

masterで作業を続けます．foo.txtの内容を次のように更新します．

foo.txt

A
HOGE
PIYO
B
C
D
E

サイドバーのソース管理でfoo.txtを選択すると次のように差分が確認できます．

ここで画面右のコミットしたい箇所（今回はE）にカーソルを当て，右クリックのメニューから選択した範囲をステージするを実行します．

サイドバーのソース管理でfoo.txtが二つに分かれ，先ほど選択した「E」だけがステージングされています．

この状態でコミットすると「E」の追加だけをコミットすることができます．

不要な編集を戻す

先ほどコミットしなかった編集を削除します．サイドバーのソース管理から差分を確認すると，コミットしなかった「HOGE」と「PIYO」が残っています．ここでサイドバーのソース管理にあるアイコンをクリックすると，編集内容を破棄することができます．

ここまでをプッシュ

ここまでの状態を前回と同様の手順でプッシュしておきます．

フェッチ・プルする

前準備としてGitHub側でファイルの編集を行います．GitHubでfoo.txtを表示して鉛筆アイコンから編集画面を開いて，最終行にFを追加します．

コマンドパレットからGit: Fetchを実行します．

この時点ではローカルのmasterブランチには反映されていません．

次はプルします．コマンドパレットからGit: Pullを実行してもいいですし，サイドバーのソース管理にあるメニューアイコンからプルを実行することもできます．

GitHubでの変更がローカルのmasterに取り込まれました．

今回はフェッチしてプルという流れでしたが，フェッチせずいきなりプルしても問題ありません．

おまけ

ここまでの手順で出てこなかったものについて付け加えておきます．

クローンする

今回の説明ではローカルで作成したリポジトリをリモートのGitHubにプッシュする流れでしたが，すでにリモートに存在しているリポジトリをローカルにクローンすることもできます．
コマンドパレットからGit: Cloneを実行します．手順でリモートのURLとクローン先のディレクトリを指定します．

スタッシュする

作業中のファイルの編集を，いったん退避しておきたいときにスタッシュが便利です．
foo.txtの内容を次のように「G」を追加して更新します．

foo.txt

A
B
C
D
E
F
G

サイドバーのソース管理にあるメニューアイコンからStashを実行します．

スタッシュすると編集途中のファイルがなくなっています．スタッシュした内容を戻すにはスタッシュを適用（またはスタッシュを適用して削除）を実行します．

Gitの管理から特定のファイルを除外する

除外設定を行いたいディレクトリ（トップでもOK）に.gitignoreという名前でファイルを作成し，除外したいファイルの情報を記述しておくと，Gitの管理対象から外れます．サイドバーのソース管理に表示される内容にも反映されます．
.gitignore自体をコミットしておくと，複数人で開発をするときに同じ除外ルールでGit管理をすることができます．
設定パターンの一例を下記に載せておきます．

.gitignore

# 拡張子が.exeのファイルを除外する
*.exe
# Bin/binディレクトリとその中身を除外する
[Bb]in/
# 特定のディレクトリの中の特定の拡張子のファイルを除外する
out/*.log

コマンドパレットからのキーボード操作

ここまでの内容は，新人さん向けにマウス操作を中心にまとめましたが，操作の多くはコマンドパレットからも同じように行うことができます．コマンドパレットを使うとマウスを使わずにキーボードだけで操作することができ，慣れると効率的です．
コマンドパレットはCtrl + Shift + Pで表示されます．とりあえずコマンドパレットでgitと入力するといろいろと候補が出てくるので，いろいろと試してもらうといいと思います．

GitLens（拡張機能）

今回の記事ではVSCodeの標準機能での操作を中心にして拡張機能もGit Historyだけを紹介しましたが，もう一つおすすめの拡張機能であるGitLensを紹介します．

GitLensはかなり高機能な拡張になり，ここまでで紹介していない様々なGit操作を行うことができます．例えばgit blameの表示や，サイドバーに表示されるコミット履歴からgit resetなどいろいろな操作ができます．
VSCodeで本格的にGitを使うのであれば試してもらうとよいかと思います．

おわりに

VSCode上でGitを使いながら開発を進めるにあたって，必要最小限の操作は説明できたと思います．とはいえGitの便利な機能や操作はまだまだたくさんあります．この記事をひとつのきっかけに，さらに使いこなしていってもらえると幸いです．

Microsoft LearnはMicrosoftが提供している、無料の学習コンテンツです。一部日本語化もされてます。

サンドボックス環境でAzureを試すことができたり、知識クイズがあったりと、初心者におすすめのコンテンツがたくさんあります。

そんな中で、Azure初心者向けに特におすすめできるコンテンツを紹介します。

対象は以下のような方を想定しています

• クラウドコンピューティングに初めて触れる新社会人・学生
• Azureの概要をサクッと掴みたい他クラウド経験者
• 新人のメンター担当になり、ちょうどよい資料を探している先輩 (去年欲しかった)

1.Azureの基礎

クラウドコンピューティング is 何？からスタートして、各種サービスの基本やコスト管理、セキュリティなどを広く浅く学べて入門に最適です。Azureの基礎とタイトルになっているけれど、Azure特有の用語も少なめなので、AWSやGCPを使い始める前でも一読の価値はあります。

2.Azure App Service を使用して Web サイトを Azure にデプロイする

環境構築から、CI/CDの基本、さらにはステージング環境と本番環境の切替まで、アプリ開発全体の流れを学べます。最近Dockerのコンテンツが追加されました。

3. Azure でインフラストラクチャ リソースを管理する

仮想マシンとネットワークの管理です。GUIから手作業するのではなく、CLIやテンプレートを使って自動化することを学びます。

おまけ. 3 ステップで始めるMicrosoft Learn

アカウント作成とかサンドボックス環境の有効化の方法をまとめた非公式資料です。

参考サイト：
全体の稼働率＝1-(1-0.9)×(1-0.8)＝1-(0.1×0.2)＝1-0.02＝0.98
https://www.fe-siken.com/kakomon/25_haru/q15.html

MTBFとは

Mean Time Between Failures。
平均故障間隔。

MTTRとは

Mean Time To Repair。
平均修理時間。

稼働率

すべての時間の中で稼働している時間の割合を表す。
次の式で求めることができる。

稼働率 = MTBF / ( MTBF + MTTR )

直列システムの稼働率

それぞれの稼働率を掛け合わせることで計算することができる。

---[ A ]---[ B ]---

例えば、Aの稼働率 0.9、Bの稼働率 0.8なら、

全体のシステム稼働率＝0.9×0.8＝0.72

またA・Bの他にCが接続されている場合は、A×B×Cと計算する。

並列システムの稼働率

全体の稼働率 = 1 - ( 1 - Aの稼働率 ) × ( 1 - B の稼働率 )

例えば、Aの稼働率 0.9、Bの稼働率 0.8なら、

全体の稼働率
= 1 - ( 1 - 0.9 ) × ( 1 - 0.8 )
= 1 - ( 0.1 × 0.2 )
= 1 - 0.02
= 0.98

復習問題

MTBFが45時間でMTTRが5時間の装置がある。この装置を二つ直列に接続したシステムの稼働率は幾らか。