YouTube "Route 87" | 35歳からオーストラリア移住（永住）を目指す男の日常をお届け。

CODE当サイトはアフィリエイト広告を利用しています。

【職業訓練校】Web制作6ヶ月コースの授業内容やリアルな感想など1ヶ月毎のまとめ




Web制作学習４ヶ月目

４ヶ月目
  • jQuery
  • jQueryのプラグイン
  • PHP
  • セキュリティ対策
  • キャリアコンサルティング３回目
  • コンセンサスゲーム

jQuery

  1. jQueryとは
  2. バージョン
  3. jQueryを利用する方法
    1. ダウンロードして利用
    2. <script>タグを記述して利用
    3. 大手サーバー(CDN)に接続して利用
  4. jQueryでプログラミング
  5. jQueryの書き方：基本
    1. 場所を選択（要素選択）
    2. 処理を行う
      1. CSSの値を変更・取得
      2. 複数のデザインの変更
      3. 幅の変更・取得
      4. メソッドチェーン
  6. jQueryの書き方：イベント
    1. イベントの種類
    2. イベント処理
  7. 表示・非表示
    1. hide/ show/ toggle
    2. fadeOut/ fadeIn/ fadeToggle
    3. slideUp/ slideDown/ slideToggle
  8. アニメーション
    1. イージングキーワード
    2. アニメーション停止
  9. 要素操作
    1. .html()
    2. .empty()
    3. .prepend()/ .append()
    4. .before()/ .after()
    5. .wrap()/ .remove()
  10. 属性操作・フォーム操作
    1. .attr()
    2. .val()
  11. クラス制御
    1. .addClass()
    2. .removeClass()
    3. toggleClass()
  12. $(this)イベント発生要素
  13. 要素間移動：トラバース
    1. .parent()/ .parents()
    2. .children()/ .find()
    3. .next()/ .nextAll()
    4. .prev()/ .prevAll()
  14. 繰り返し処理：eachメソッド

jQueryを開発したJohn Resig（ジョン・レシグ）氏はただ単にすごいと思いました。キャッチコピーの「write less, do more」を体現するように、今まで習ったJavaScriptよりも記述量が少なく、同じプログラムをかけるのですごく便利だと感じました。

HTML・CSSの変更、要素の挿入、classの追加・削除をtoggleで実装できたり、ボタンをクリックすると表示・非表示をtoggleでできるように実装できたりと、サイトに動きを付けられるようになりより実践的なことができるようになりました。

jQueryのプラグイン

jQueryプラグイン
  1. カルーセル：http://kenwheeler.github.io/slick/
  2. ライトボックス：https://lokeshdhakar.com/projects/lightbox2/
  3. グラフ描写：http://www.chartjs.org/
  4. 星評価表示：https://rateyo.fundoocode.ninja/
  5. ページスクロール：https://projects.lukehaas.me/scrollify/
  6. テーブルソート：https://mottie.github.io/tablesorter/docs/
  7. スクロールアニメーション(プラグイン自体はjQuery使わない)：
    https://michalsnik.github.io/aos/
  8. グリッドレイアウト：https://masonry.desandro.com/
  9. SVGアニメーション：http://lazylinepainter.info/
  10. 背景描画：https://vincentgarreau.com/particles.js/
  11. 動画背景（JS使わない）：http://vodkabears.github.io/vide/
    動画素材DL：http://mazwai.com/#/grid

jQueryのプラグインに触れてみて、すごく便利かつ簡単に実装できることがわかったので、これから作るPortfolioサイトにも組み込みたいと思いました。

PHP

  1. PHPの基本
    1. PHPとは
    2. PHPファイルを作成
    3. PHP記述法
    4. ドキュメントルート
    5. 文字列の出力
    6. エスケープシーケンス
  2. 変数
    1. 変数の使い方
    2. PHPエラー
    3. 変数展開
    4. ヒアドキュメント
    5. 日時を扱う関数
    6. データ型
    7. 文字列連結演算子
  3. 配列
    1. 配列の使い方
    2. 乱数を扱う関数
    3. 多次元配列の使い方
  4. 連想配列
  5. 演算子
    1. 算術演算子
    2. 数値を扱う関数
    3. インクリメント・デクリメント
    4. 代入演算子
  6. 制御構文・比較演算子
  7. if文・論理演算子
  8. 三項演算子
  9. switch文
  10. while文・do while文
  11. for文・foreach文
  12. 代替構文
  13. 値の送受信
    1. フォームの基本構造
    2. 入力・選択・ボタン・隠しパーツ
    3. テキストエリア
    4. セレクトボックス
    5. GET　形式の値を送信
    6. GET　形式の値を取得
    7. POST　形式の値を送信
    8. POST　形式の値を取得
    9. 複数の値を送受信
  14. ファイルの読み込み
  15. クッキー・セッション
  16. 関数

JavaScriptとPHPの違い

頭の中を整理するためにも、JSとPHPの違いをまとめました。

変数宣言

JSは「var」「let」「const」で変数宣言するが、PHPは「$変数名」で変数宣言する。

変数展開

PHPは「“文字列{ $変数名 }文字列”」で変数展開する。

ヒアドキュメント

これはPHPにしかなく、HTMLコードやメール本文などの文字列作成に便利です。

$変数 = <<<終端ID(好きなID)

文字列を記述（ダブルクォーテーションで囲まれた文字列扱い）

終端ID;

終端IDは、EOD(End Of Document)、EOM(End Of Message)、EOF(End Of File)、EOT(End Of Text)などがよく使われている。

文字列連結演算子

JSだと「+」だが、PHPだと「.」で文字列同士を連結する。

配列：var_dump関数

PHPでは、配列の確認（デバック用）でvar_dump関数を使用する。
pre要素内に出力すると確認しやすくなる。

JSではconsole.log()で確認できる。

配列内の部屋数を調べる：count関数

JSは「変数.length()」で部屋数を調べることができるが、PHPは「count($変数)」で部屋数を調べることができる。

乱数

PHPは乱数を生成するとき、「mt_rand(int $min, int $max): int」で生成する。

mt_rand(); は0以上2147483647以下の整数がランダムに生成される。

連想配列

連想配列とは、部屋に好きな文字列や数値を使用することができる。名前を付けた部屋をキーと呼ぶ。

PHP配列の特徴
  • 配列（添字配列）と連想配列はどちらも同じ配列型
  • キーには数値と文字列が混ぜて使用できる
  • 連想配列は入力順が保証される順序付きマップ
配列の作り方
<?php
    $items = array(
      'f-001' => 'りんご',
      'f-002' => 'みかん',
      'd-001' => '水',
      'd-002' => 'コーラ',
    );
    $northKanto = [
      8  => '茨城県',
      9  => '栃木県',
      10 => '群馬県',
    ];
?>

文字列連結代入演算子

JSは「+=」で文字列連結代入するが、PHPは「.=」で文字列連結代入する。

foreach

JSと違いPHPの配列は連番が保証されていない。埋め合わせるためにforeach文を使う。

問題：好きな映画を３つ配列管理すること。 foreach文を使って番号付きリストとして表示すること。

　<?php
  echo "<h2>問題</h2>" . PHP_EOL;
  $movie = [
    'Hangover',
    'Ted',
    'Fast & Furious',
  ];
  $movie[5]='Avengers';
  $code = '<ol>' . PHP_EOL;
  foreach ($movie as $value) {
    $code .= "<li>{$value}</li>" . PHP_EOL;
  }
  $code .= '</ol>' . PHP_EOL;
  echo $code;
  ?>

問題：ビートルズを連想配列で管理。楽器のパートを部屋の名前（キー）に名前を値（バリュー）に指定して作成。

  <?php
  echo '<h2>問題</h2>' . PHP_EOL;
  $beatles = [
    'ギター' => 'ジョン・レノン',
    'ベース' => 'ポール・マッカートニー',
    'キーボード' => 'ジョージ・ハリスン',
    'ドラム' => 'リンゴ・スター',
  ];
  echo '<pre>' . PHP_EOL;
  var_dump($beatles) . PHP_EOL;
  echo '</pre>' . PHP_EOL;
  foreach ($beatles as $key => $value) {
    echo "<p>{$key}を演奏するのは{$value}です。</p>" . PHP_EOL;
  }
  ?>

真偽値(boolval)

JSでは文字列型「 ‘0’ 」はtrueだが、PHPはfalse。

switch文

switch文の「式の値」と「caseの値」は、JSは厳密等価演算子「===」だが、PHPは等価演算子「==」で確認する。

代替構文

代替構文を使うことで、コーダーとプログラマで分業しやすくなる。

if文

乱数を使ってメニュー表記を切り替える
0:中華料理
1:日本料理
3:イタリア料理
各料理をリストで3つくらい表示すること
リストはHTMLで記述すること

<?php
$menuNo = mt_rand(0, 2);
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>おさらい代替構文</title>
</head>

<body>
  <?php if ($menuNo === 0) : ?>
    <ul>
      <li>ラーメン</li>
      <li>餃子</li>
      <li>チャーハン</li>
    </ul>
  <?php elseif ($menuNo === 1) : ?>
    <ul>
      <li>寿司</li>
      <li>うなぎ</li>
      <li>お好み焼き</li>
    </ul>
  <?php elseif ($menuNo === 2) : ?>
    <ul>
      <li>ピザ</li>
      <li>パスタ</li>
      <li>ラザニア</li>
    </ul>
  <?php endif; ?>
</body>
</html>
for文 foreach文
<?php
$osList = [
  'Windows',
  'Mac',
  'Linux',
];
$items = [
  'f-001' => 'りんご',
  'f-002' => 'みかん',
  'd-001' => '水',
];
?>
<body>
  <h1>制御構文</h1>
  <h2>１回目の出力</h2>
  <?php
  for ($i = 0; $i < count($osList); $i++) {
    echo '<div class="box">';
    echo '<h3>おすすめ商品 No.' . ($i + 1) . '</h3>';
    echo '<p>' . $osList[$i] . '</p>';
    echo '</div>';
  }
  ?>

  <h2>２回目の出力</h2>
  <?php
  foreach ($items as $key => $val) {
    echo '<div class="box">';
    echo '<h3>' . $val . '</h3>';
    echo '<p>商品コード：' . $key . '</p>';
    echo '</div>';
  }
  ?>

  <h2>代替構文</h2>
  <h2>１回目の出力</h2>
  <?php for ($i = 0; $i < count($osList); $i++) : ?>
    <div class="class">
      <h3>おすすめ商品 No. <?php echo ($i + 1); ?></h3>
      <p>
        <?php echo $osList[$i]; ?>
      </p>
    </div>
  <?php endfor; ?>

  <h2>２回目の出力</h2>
  <?php foreach ($items as $key => $val) : ?>
    <div class="box">
      <h3><?php echo $val; ?></h3>
      <p>
        商品コード:<?php echo $key; ?>
      </p>
    </div>
  <?php endforeach; ?>

</body>

セキュリティ対策

クロスサイトスクリプティング（XSS)

ユーザーが入力した値を使用する場合は注意（セキュリティ対策）が必要です。なぜならば、悪意があるユーザーが悪意ある値を入力してくる場合があるからです。不正なJavaScriptコードを使用して他のサイト訪問者に攻撃を仕掛けることをクロスサイトスクリプティング(XSS)と呼びます。

こういったトラブルを防ぐには、htmlspecialchars()関数でHTMLで意味をもつ記号をエスケープします。

セッションハイジャック

セッションはクッキーでセッションIDを送受信してユーザを認識しています。もし悪意あるユーザにセッションIDを取得されてしまうと、正しいユーザができることを悪意あるユーザがなりすまして操作できるようになってしまいます。このようなセッションIDの乗っ取りをセッションハイジャックと呼びます。

セッションハイジャックを防ぐには、①予測できない文字列のセッションID発行 ②クッキーの有効期限を短く設定 ③サイトにアクセスするたびにセッションIDを発行する、などの方法があります。

キャリアコンサルティング３回目

３回目のキャリアコンサルティングは、過去２回面談して頂いた担当者との面談ではなく、この日にお越しになった数社（10社弱くらい）の方々とランダムマッチングして面談しました。実際のIT企業の社員と話せるいい機会ということらしいですが、正直今までの担当者との面談の方が良かったと個人的には思います。

この日は昼休憩時間に「ランチ交流会」という、企業の方とお話しできる機会が設けられていたので、事前に参加企業の募集求人などに目を通していました。その企業の中で募集要項欄に年齢制限（２９歳まで）を設けている企業が１社あったのを覚えていたのですが、まさかその企業の人たちと面談する羽目になるとはなんという巡り合わせかと思いました。笑

そういう巡り合わせだったので、年齢制限について質問しました。

りゅじ

３０歳を超えている実務未経験の人でも、採用するとしたらどんな人であれば採用したいですか？

面接官

うーん、そうですね…熱意のある人がいいですね。

りゅじ

（ん？熱意！？熱意とはなんぞや？）
あ、あのー、私は今ポートフォリオ制作やコーディング力の向上に力を入れていているのですが、ポートフォリオは実際どのくらいの評価基準になるのですか？

面接官

あー、基本的にポートフォリオはあんまり見ないし意味ないね。どうせ未経験者が作ったポートフォリオはレベルが知れているからさ。
それよりも次回4月にある基本情報技術者試験の勉強して受験している人の方が努力しているし、やる気や熱意が伝わるからそーいう人を採用したいと思うかな。やっぱそーいう熱意とか大事だと思いますよ。

りゅじ

あ…そうなんですね。わかりました、ありがとうございました。

この企業と私は水と油のように相容れない考え方でしたが、私が目指しているゴールと企業が必要とする人材が一致しないことは当たり前であるし、それに対して考えるだけ無駄であると結論づけました。

コンセンサスゲーム

今回のコンセンサスゲームは「野球のポジション当てゲーム」でした。このゲームはコミュニケーション研修やチームビルディングする際によく行われるゲームで、各々が持っているバラバラな情報をつなぎ合わせると正解に辿り着ける「ジグソーメソッド」と呼ばれる手法が用いられています。

ポイント
  1. コミュニケーションスキル(報連相)の体験をする
  2. 論理的に考える・伝えることの重要性を知る
  3. 情報整理のための図表の使い方の理解する

ゲームの設定

みなさんは、Ｓ社の本社総務課員です。
明日の日曜日には、関連会社の野球大会がありますが、先程主催会社のA社より「名簿作成の為にメンバーとポジションを知らせてくれと頼んでおいたが、未だに連絡をもらっていない。大至急連絡して欲しい。」と電話がありました。

この仕事は、係長の担当でしたが、今週、係長は出張の忙しさに紛れて忘れてしまったらしいのです。
現在のところ、係長と連絡をとる方法がありません。また、今日は土曜日の為、野球部のある工場は休日で、野球部長の自宅に電話をしてみましたが留守のようです。

そこで、工場の人の自宅へ電話を入れたりして色々調べてみましたが、あなたの手もとに集まったのは、断片的な情報だけです。
しかし、何とかしてA社には連絡をしなければならないので、９人のメンバーとそれぞれのポジションを突き止めて下さい。

ゲーム実施条件
  • ゲームは１チーム４〜６名
  • 1人３〜４枚の情報カードが配布される
  • 情報カードは他の人に見せてはいけない

情報カード

情報カードの内容は下記のような内容になってます。（一部を抜粋）

  1. 藤山選手はサードと同じアパートに住んでいるということだ。
  2. センターはライトより背は高いが、足はライトの方が早い。
  3. 鈴木選手の妹さんはセカンドと婚約中だそうで、どうも挙式は来春だそうだ。
  4. キャッチャーの長男とサードの次女は同じ小学校の同級生だそうだ。
  5. ショートとサードそれに桜井選手の３人はよく揃って競馬に行くそうだ。
  6. ピッチャーはとても麻雀が強く、今月も梅田選手と菊池選手から5000円ずつまきあげたそうだ。
  7. 外野選手のうち一人はどうも木下選手か松村選手らしい。

このような情報カードが１６枚あり、これらの情報を元に誰がどのポジションなのかを特定していくゲームです。

やってみた結果

私のチームは4人チームで、他３名とはクラスの中でも群を抜いて仲がいい4人だったので、この「ゲーム楽勝でしょ！」って正直なめてました。結果は９つのポジションのうち1つしか当てられないという無様な結果になりました。笑

しかし、このゲームから学んだことがいくつかあったのでシェアしたいと思います。

❶人それぞれ知識には差がある

これはちょっとした笑い話なのですが、まず情報を整理するために登場人物の書き出す作業をしたのですが、私のチームだけ登場人物が途中で気がつくまで9人ではなく10人だったんですよ。

他のチームの情報は全然なかったので、ゲームの登場人物が9人か10人かわからない状況だったのですが、10人で９つのポジションということは1人は補欠かな？監督かな？とかアホなことを真面目に話し合っていました。笑

ゲームも終盤で残り時間が少なくなってきた頃に、間違いに気づいた友人Aが大声で「あー！！これ内野（うちの）じゃない、内野（ないや）だ！」と言うてはりましたけど。

友人Aはこのゲームが始まる時から野球のことよくわからないと言ってましたが、まさかこんな感じで物事が繋がっていくとは非常に興味深いです。

今思い返すと、人それぞれ知識には差があるので、もっと気を配っていたら直ぐに気付くことが出来たのかもと、配慮が足らなかったことを反省しています。

❷信じて疑え

たしかに内野（うちの）さんの登場でチームは混乱はしましたが、内野（うちの）さんがいてもいなくても、しっかり情報を整理できれば答えを導けたと思います。図や表を使って上手に情報を整理するのがこのゲームのポイントだったのですが、それが上手く出来なかったのは紛れも無い事実です。

しかし、1/9しか正解できなかった本当の要因は、友人Bの発言が間違っていたのにも関わらず、友人Bを信じて疑わなかった自分に非があると思いました。

友人Bは普段から論理的に話をするのが上手で、勉強は苦手そうでも頭はキレるな！という印象でした。そんな友人Bがこのゲーム中に唐突な感じで「そしたらピッチャーは〇〇さんで決まりですね」という発言。

それに対し「ん？なんでピッチャーが決まるんだ？」と違和感を感じましたが、他２名もなにも言わなかったので、自分だけ情報整理の流れについていけてないのかとも思ってしまい見事にスルー。

結果的にはそのポイントが勝敗の分岐点だったと思うので、その反省をこれからの仕事で活かすためにも、わからないことや疑問点・不明瞭な点は相手が誰であろうと、自分の中で明確になるまで信じて疑おうと心に誓いました。




シェアしてね！
ABOUT US
Ryuji（りゅじ）
35歳からオーストラリアのシドニーでシェフを目指す男。 2023年に入り海外移住を真剣に考え始め、7月25日に渡豪。 現在はシドニーで調理学校に通いながらローカルのステーキハウスに勤務中。 海外旅行・国内旅行・温泉・グルメ・バーホッピングが大好き。 赤提灯の大衆居酒屋でホッピー飲んでる渋いイケおじになるのが目標。