# プログラミングを始めよう！
2年 工学部 情報エレクトロニクス 情報理工コース 今多和歩

<!-- # やりたいこと -->
<!-- 次のmonkukuisanのライブコーディングの効果を最大にすべく、プログラミング未経験者がコードを見て少しはわかるようになってもらう -->

<!-- 人数が多かった時、トラブル起きても最悪、ライブコーディングがZoomで見れればいいかな -->

<!-- # 流れ -->

# 今日何するの？
LiveShareを使って、参加者にプログラムを少しずつ書いてもらう
* 準備
* LiveShareに参加する
* LiveShareで自己紹介とかを書く
* `C++`の勉強
* **`C++`の関数をひとりひとつ書く**
* （セッション2に続く）

### LiveShare?
VSCodeというテキストエディタの拡張機能で、オンラインでテキストの共同編集ができる機能
プログラミングを重視した機能が盛り込まれたエディタとしては、VSCode以外にもいくつかあります

# 準備
## LiveShareに参加する
**※Webブラウザーでやる手順に変更しました**
事前にお願いしていた作業が必要なくなりました
（書きかけですが、VSCodeをインストールする手順も一番下に残しておきます）

1. ↓のリンクをクリックする
https://prod.liveshare.vsengsaas.visualstudio.com/join?5CC3AEFFBCFAC22392C688BBBCD9DAD4ADEC
1. 開いたページで **「このサイトはVS Codeを開こうとしています」** のようなメッセージが出たら **「キャンセル」** （VSCodeをインストールしていなければ出ないかも）
1. 開いたページ中ほどの **「Don't have Visual Studio or Visual Studio Code installed?」** をクリックする
1. 開いたページの上のほうに黄色い帯が出ることがあるが、更新（再読み込み）して少し待ってみる
1. 少し待つと右下に **「Sign in with VS Live Share to join a collaboration session.」** とメッセージが出るので、**「Continue as anonymous」** を押す
（GitHub/MSアカウントがあれば「Sign in」進んでもOK）
1. 上のほうに名前の入力欄が出るので、参加登録した名前などを入力する
1. 参加許可を待つ
1. `20210409_1.cpp`が開いた状態になったら、文字を打ち込んだり消したりしてみる
（他人が編集中の行はなるべく触らない）

## LiveShareで自己紹介とかを書く
みなさんが書きこめるようになったか確認したいので、名前を記入していただけると嬉しいです

<!-- ### ファイル拡張子を表示させる
(目的1) program.c と program.exe が区別できるようにする
(目的2) 同時押しの練習(全部マウスでもできるけど)
ファイル名

1. 「エクスプローラー」を開く
- ［Win🪟］+E（同時押し（［Win🪟］を押しながらEを押す））
- もしくは左下のフォルダー的なアイコンをクリック
1. フォルダーとファイルを作成してみる
1. 「デスクトップ」など、適当な場所を開く
1. ［Ctrl］+［⇑Shift］+N（［Ctrl］と［⇑Shift］を押しながらNを押す）
1. 名前を付ける（「後で消す」とか）
1. 「後で消す」を開く
1.
1. タブを「表示」に切り替える
- ［Alt］+V
- もしくはマウスで
1. 「拡張子を表示する」にチェックを入れる
- ［Alt］+V,H,F（［Alt］を押したままV,H,Fを順番に押して離す）
- もしくはマウスで
※右のほうにある
※エクスプローラーが小さい場合、表示が隠れている -->

## C++の勉強
↓のHackMDのページを開く
https://hackmd.io/nc8y6iFCTomOQ_yIJJI8jw

# **C++の関数をひとりひとつ書く**
いくつかのチームにわかれてやろうかな？

// 関数宣言（引数あり）
int func01(int in)
{
  // 変数宣言（数値）
  int delta = 123;
  int out;
  
  // 足し算して代入
  out = in + delta;
  
  // 表示する
  cout << gakuseiBangou << out;
  
  // 値を返す
  return out;
}

<!-- ## ライブコーディングを見る
- C++でいくつかの制約のもとmonkukuisanがオセロを書いてくれる
- 参加者は主にliveshareで見る
-->
<!-- ## ライブコーディングで最低限のオセロが完成したら、参加者にいろいろやってもらう

HUITメンバーの手助けが必要
- コメントを入れてもらう
- 変数名をいい感じに変えてもらう
- 追加機能を作ってもらう
- 起動時の先手後手選択
- 起動時の盤サイズ入力
- サイズ制限(>=4とか偶数とか)
- 必須でない表示の追加（比較的簡単）
- 枠線(盤サイズ変更に連動させる)
- 上下の横線
- 左右の縦線
- 石カウント
- 「次は(先|後)手(〇|×)です」
- N数変更に連動する枠線の調整
- 置かれた・裏返った石の色を変える -->

<!-- # おまけ
- したほうがいいこと
- ★拡張子を表示
- ★ユーザーフォルダ（C:\Users\ここ\）が英数字だけになっていなければする（後からだと結構めんどくさいが、いろいろなソフトの不具合を予防できる）
- VSCode日本語化
- ショートカットキー特集
- ウィンドウ操作
- ［Win］+ ↑ :最大化
- ［Win］+ ← :左に寄せる
- ［Win］+ → :右に寄せる
- ［Win］+ 1 :タスクバーの左から1番目のアイコンをクリックするのと同じ
- いろいろなソフトでつかえるやつ
- ［Ctrl］+ Z : 作業を取り消す
なんでも戻せるわけではない(例:メモ帳は直前の作業1回だけ取り消せる)
- ［Ctrl］+ Y : 作業の取り消しを取り消す/同じ作業を繰り返す
- ［Ctrl］+ [+] : 拡大
- ［Ctrl］+ - : 縮小
- 選択
- ［Ctrl］+ クリック : 複数選択
- ［Shift］+ カーソルキー : 複数選択
- ［Ctrl］+ カーソルキー : 単語単位での移動（日本語では空白文字を入れないので微妙）
- クリップボード関連
- ［Ctrl］+ X : 切り取り
- ［Ctrl］+ C : コピー
- ［Ctrl］+ V : 貼り付け
- ［Ctrl］+ A : すべて選択
-
- ［Ctrl］+ T : 新しいタブ
- ［Ctrl］+ W : タブを閉じる
- ［Ctrl］+ Tab : 右のタブ
- ［Ctrl］+［Shift］+ Tab : 左のタブ
-
- PowerShell 7をインストール
- Windows Terminalをインストール
- PowerToysをインストール
- Windows上でC/C++を動かす方法
- WSL2でGCCをインストール
- C/C++ [MinGW](http://mingw-w64.org/doku.php/download/mingw-builds)
- Python3[Python 3.x.x](https://www.python.jp/install/windows/install.html)
- Linux OSを動かす方法
- Windowsを消す
- Windowsとデュアルブート
- WSL 2(Windows Subsystem for Linux 2)
Windows上で動くLinux環境
相互にファイル参照が容易 -->

# （セッション2に続く）
時間があれば、オセロに表示機能を追加してもらったりするかもしれませんので、**LiveShareに参加したままでお願いします**

# LiveShareをVSCodeでやる方法（書きかけ）
:::spoiler

## VSCode(Visual Studio Code)をインストールする
VSCodeは代表的な「コードエディタ」で、Windowsと同じMicrosoft社が開発。
[画像付きの手順（四日市大学）](https://web.yokkaichi-u.ac.jp/yucc/archives/1542)

1. 下のURLをクリック
https://code.visualstudio.com/
1. インターネットブラウザが開くので
1. 左の真ん中らへんの「Download for Windows」ボタンを押す
1. インストーラーがダウンロードされたら開く
1. インストーラーが開くので
1. 使用許諾契約書の同意
「同意する」「次へ」
1. インストール先の指定
そのまま「次へ」
1. スタートメニューフォルダーの指定
そのまま「次へ」
1. 追加タスクの選択
「エクスプローラーのファイル コンテキストメニューに［Codeで開く］アクションを追加する」と
「エクスプローラーのディレクトリ コンテキストメニューに［Codeで開く］アクションを追加する」は特にチェック追加推奨
「次へ」
1. インストール準備完了
「インストール」
1. Visual Studio Code セットアップウィザードの完了
そのまま「完了」(VSCodeが起動する)
## Live Shareをインストールする
VSCodeの拡張機能
同時に同じフォルダーを開いて編集できる
<!-- 1. 下のURLをクリック
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
1. インターネットブラウザが開くので
1. 左の真ん中らへんの「Install」ボタンを押す
1. 真ん中に確認画面が出たら「Continue」ボタンを押す
1. 確認画面が出たら「Continue」ボタンを押す -->
1. VSCodeで、左端にある「Extensions」（四角形が4つのアイコン）を押す
※わからなければ［Ctrl］+［⇑Shift］+X
1. live share［Enter↲］（検索する）
1. 「Live Share」の「install」ボタンをクリック
1. しばらく待つので、ほかの作業に進む

## GitHubのアカウントを作る
1. GitHubアカウントをすでに持っていればログイン
なければ
1. **「Create an account」** を押す
2. いろいろ入力し、アカウント作成
- メールアドレスは、PCで受信できるものを推奨(大学のメールアドレスや、@gmail.com、@outlook.comなど)
- ユーザー名、パスワードは今後GitHubを使うときに必要なので、ブラウザに保存するなどしておく

## Live Shareを設定する
1. 左下の「⇗Live Share」を押す
1. 上のほうから出てくるやつは「GitHub」を選択
1. 「Arrow」を押す
1. Webブラウザが開くので、「Continue」
2. <- Github側でも「Auth GitHub」
3. Webブラウザで「このサイトはVSCodeを開こうとしています。」の確認ダイアログが出たら「開く」を押す
4. VSCodeで「Allow an extention to open this URI?」の確認ダイアログが出たら「Open」を押す
5. VSCodeでFirewall設定に関する確認画面が出たら「OK」
6. 「Windows セキュリティの重要な警告」の確認画面が出たら「アクセスを許可する」（出ない場合もある）
7. VSCodeの右下に通知が出るのは気にしなくてよい
<!-- 1. 「GitHub」はソフトウェアの共同開発をスムーズに行うための様々な機能があるサイトで -->

## Live Shareに参加する
1. Zoomで送ったURLを開く
2. ブラウザ「開く」
3. 書きかけ
:::