clark-programing-manual

This repository is manual for programing lesson.

1. カリキュラムについて


学習の流れ詳細

HTML/CSS入門編 （Paizaの学習範囲）
（全てのチャプター）

↓

Webデザイン入門（Paizaの学習範囲）New 5/17
範囲（Lesson1:全て Lesson2:01〜06 Lesson3: 01,02）

↓

自己紹介HP製作 New 7/14

↓

JavaScript入門編 （Paizaの学習範囲）
（全てのチャプター）

↓

JavaScript 基礎 関数＋DOM操作

↓

JavaScript 実践 ゲームづくり

↓

コースごとに実習

2. Slackについて

  1. Slack Download for Windowsからslackアプリケーションをダウンロードし、インストールをする（スマホアプリもあります）

  2. 招待状のメール or こちらのリンクから clark-programingの招待ページへアクセス


    ※招待メールが送られてきてない場合は、佐々木先生に伝えてください。


    招待メールの場合は、JoinNowをクリック

  3. アカウントを作成する。
    アカウント作成時に、名前とパスワードが聞かれますので入力してください。

    もし、以下のような画面が出てきたら、メールアドレスを入力してください。


New 5/17

①Slackの通知の設定

  1. アプリ左上の「clark-programing▼」を押す
  2. 「環境設定（Preferences)」を押す
  3. 「ダイレクトメッセージ&メンション&キーワード」を選択する


②チャンネルに参加

  1. 「チャンネル +」を押す
  2. 「チャンネル一覧（Browse）」を押す
  3. 以下のチャンネルの「参加する」を押す
    • 連絡
    • 1-x_202X年度


③名前の変更

slackの表示名が自分の名前の人は大丈夫です。

  1. アプリ右上のユーザーアイコンを押す
  2. 「プロフィールの編集(Edit Profile)」を押す
  3. 氏名/表示名を編集する

④自己紹介（宿題）

自己紹介チャンネルに自己紹介を記載する

※他の授業中に送ると他の生徒に通知が入ってしまうので、授業時間を避けて投稿してください。


slackの使い方とルール （※必読）New 5/17

生徒間のDMは原則禁止です。
※slackの登録しているメールアドレスも原則禁止。

SNS同様、slackの使い方にも情報モラルを持って使ってください。
slack内でのコミュニケーションにおいて、校則に反した場合は、生徒指導の対象になりますので、充分注意して使ってください。


質問のやり方 New 5/17

わからないことがあった時の手順

  1. まずは自分で10分以上調べる。
  2. 各クラスのチャンネル（＃1-x_2021年度）でクラスのみんなに質問
    先生にslackでDMで質問する/直接手を上げて質問する。

クラスチャンネルでの質問について

クラスのチャンネルでの質問は生徒間で教え合うことがメインです。

クラスチャンネルで質問が投稿されていたら、答えられる人がいたら教えてあげてください。

時間が経っても解決されない場合は、先生から回答することがあります。


先生に質問する際の注意点

slackでの質問の回答については原則授業中の時間で回答します

解決するのにどの方法を取るべきかは、自分で判断をしてください。
（先生が他の質問対応している場合、返信するのに時間がかかる場合があります。）

3.Paizaラーニングについて

学習のやり方

  1. paizaラーニングにログインし、学習するコースを選択します。
  2. レッスンを選択 -> チャプターを選択します。
  3. 演習課題がある課題については、演習課題を必ずやるようにしてください。

    演習問題が複数ある場合もあるので注意


  4. <全ての演習課題がsuccessになったらチャプター完了です。
    以下の画面のように、全ての演習課題をクリアかつ受講済にしてください。

※イヤホンを必ず持参してください。イヤホンは学校側で予備がありません。


paizaの学習範囲 New 5/17

# 講座 範囲
1 HTML/CSS入門 全てのレッスン
2 Webデザイン入門
  • Lesson1: 全てのチャプター
  • Lesson2: 01〜06まで
  • Lesson3: 01,02のみ
3 Javascript入門 全てのレッスン

学習の順番は、カリキュラムの「学習の流れ詳細」を参照してください。

4. Visual Studio Codeのインストール

Visual Studio Codeとは New 5/24

エディターと言って、ソースコードを作成/編集するためのソフトの一つです。

他にもメモ帳, サクラエディタ, Atom, Notepad++, Vimなど、さまざまなエディターがあります。

今回は、Microsoft社が開発しているエディターで、性能も良く一般的に使われているVisual Studio Code(略:VS Code)をインストールして使用します。

コーディングサポート機能や拡張性にも優れていて、 マルチプラットフォームにも対応しています。


Visual Studioのインストール方法 New 5/24

Visual Studio Codeのインストール

1. 下記のサイトからダウンロード

https://code.visualstudio.com/download


2. ダウンロードしたファイル(VSCodeUserSetup-x64-X.XX.Xexe)を開く
※Xの部分はバージョンの数字が入ります。


3. 「次へ」を押す


4. インストール完了


Visual Studio CodeでHTMLファイルを作成する方法 New 5/24

Visual Studio CodeでHTMLファイルを作成する方法

1. デスクトップにフォルダを作成
※自分で管理できる人はデスクトップじゃなくてもOK


2. 「右クリック → 新規フォルダ →　名前をつける」
※フォルダ名はなんでもよし迷ったときは「プログラミング基礎」にする


3. フォルダを開き、新規でファイルを作成する

フィイルの拡張子を表示する。（表示タブ > ファイル名拡張子に✔️）


ファイル作成時、名前をindex.htmlにする。


※ファイル名変更のやり方（ファイルの上で右クリック > 「名前の変更」）


拡張子を変更するアラートが出たら、「はい」を押す。


4. Visual Studio Codeを開く

「フォルダから開く」を押して、作成したフォルダを選択

index.htmlが表示されていればOK


5. VS Codeでindex.htmlを以下のように編集する

        
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body class="text-center">
    <h1>テストページです。</h1>
    <p>Google chromeで確認できましたか？</p>
    <img src="lion.jpg" height="500"/>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

編集できたら 「ctrl」+「s」を押して保存する。


6. 画像をダウンロードして、作成したフォルダ内に保存をしてください。画像ダウンロード

ダウンロードしたファイルを作成したフォルダの中にドラッグ＆ドロップする


以下の画像のようにフォルダ内に、index.htmlとlion.pngがあればOKです。


7. Google Chromeを開く

Google Chromeへ「index.html」をドラッグ＆ドロップする

5.オリジナル教材

エクストリーム授業 New 7/14

Javascript講座 New 9/6

Javascript追加講座 New 9/14

JavascriptDOM講座 New 9/14

Javascript講座 GAME編 New 10/21

6.よくあるQ&A

  1. paizaのログインページへアクセス
  2. 「パスワードを忘れた方はこちら」を押す
  3. 「登録済みのメールアドレスを入力」し、「再設定メール送付」をする
  4. メールにログインをし、URLからパスワードを再設定する

※上記の方法でダメな場合は、佐々木先生に相談してください。

  1. 佐々木先生に相談してください。

  1. 佐々木先生に相談してください。
    もしくは、こちらのリンクから招待メールなしで参加できます。

こちらのWebサイト、slackのクラスチャンネル、連絡チャンネルより、どんなことをしたか自身でキャッチアップをしてください。

また、paizaの個別学習については、休んだ時間分取り組めると、極端に遅れることはないので、取り組んでみてください。

P検タイピングがおすすめです。

こちらのサイトの「日本語入力」のゲームを5分設定で実施すると、P検○級レベルと出ます。
3級レベルあると良いかもです。準2級レベルあれば十分だと思います。

タイピングは量をこなせば誰でも結果が出てくるので、基本ポジションを覚えて頑張りましょう！

  1. アプリ左上の「clark-programing▼」を押す
  2. 「Preferences」を押す
  3. 「Language & reagion」を選択する
  4. 「Language」の選択を「日本語」にする

New 6/1

日本語化したい人は、以下のURLに詳しい手順が載っているので、参考にしてください。

https://www.javadrive.jp/vscode/install/index4.html