Web制作 – Party-Hearty https://creator-kid.com 人生なんて死ぬまでの暇つぶし。 Thu, 17 Apr 2025 02:09:55 +0000 ja hourly 1 https://creator-kid.com/wp-content/uploads/2022/06/favicon_pink.ico Web制作 – Party-Hearty https://creator-kid.com 32 32 Webデザイナーとコーダーで違う？覚えておきたいフリーランスの請求書と源泉徴収 https://creator-kid.com/code/webdesign_invoice/ Wed, 03 Aug 2022 15:41:59 +0000 https://creator-kid.com/?p=4802 Webデザイナーとコーダーで違う？覚えておきたいフリーランスの請求書と源泉徴収

Web制作会社で働き始める前に外注として請け負った案件について請求書を作っていたのだが、ググってサンプルをいくつか見ていたら源泉徴収税を含んでいるのと含んでいないのとまちまちでした。

調べてみると、同じWeb制作に携わるデザイナーとコーダーとでは請求書の中身が変わってくることがわかりました。

正直フリーランスだと源泉徴収なんて無縁なのかと思い込んでいたから、良い機会ということでまとめておきます。

フリーランスが源泉徴収される場合

フリーランスが報酬の支払いを受ける際、源泉徴収の対象になるものはたくさんあるみたいですが、そのなかにデザイン料には源泉徴収がかかります！

（デザインとその施工の対価を一括して支払う場合）

204－8　ネオンサイン、広告塔、ショーウインドー、陳列棚、商品展示会場又は庭園等のデザインとその施工とを併せて請け負った者にその対価を一括して支払うような場合には、その対価の総額をデザインの報酬又は料金と施工の対価とに区分し、デザインの報酬又は料金について源泉徴収を行うべきであるが、そのデザインの報酬又は料金の部分が極めて少額であると認められるときは、源泉徴収をしなくて差し支えない。

国税庁HP参照 https://www.nta.go.jp/law/tsutatsu/kihon/shotoku/36/02.htm

基本的に、デザインとコーディングは一括で請求書を発行すると思いますが、公式にはデザイン業務とコーディング業務の報酬は区分して、デザイン料には源泉徴収がかかりコーディング料には源泉徴収がかからないことになります。

ただし、デザインの報酬が極めて少額であると認められる時は源泉徴収を差し支えなくてよいとされているみたいです。

源泉徴収の計算方法

源泉徴収の金額は、100万円を規準に計算式が変わります。

報酬額100万円以下の場合

支払金額×10.21%＝源泉徴収税額

なので、報酬額が100万円の場合は

100万円×10.21%＝10万2,100円

となります。

報酬額が100万円超える場合

（支払金額－100万円）×20.42%＋10万2,100円＝源泉徴収税額

報酬金額が200万円の場合だと

（200万円－100万円）×20.42%＋10万2,100円＝30万6,300円

となります。

100万円を規準に、源泉徴収の金額は計算式が変わります。税率のうち0.21％（100万円以上は0.42％）は復興特別所得税が含まれています。

まとめ

同じWeb制作の仕事をしているデザイナーとコーダー・プログラマーでは報酬にかかってくる税金が変わってくるなんて知りませんでした。

  • デザイナー：報酬額＋消費税＋源泉徴収
  • コーダー・プログラマー：報酬額＋消費税

こういう知識はしっかりと身につけていきたいですね。

]]> 【PHP】$_POSTと$_SESSIONを使ってフォームの値を送信する方法を解説 https://creator-kid.com/code/php-post_session/ Mon, 14 Feb 2022 14:52:55 +0000 https://creator-kid.com/?p=4419 $_POSTと$_SESSIONを使用して値を送る仕組み

今回用意された問題は、「ロジック」と「ビュー（HTML）」を別ファイル管理しています。実際の現場でもこのスタイルで仕事を進めていくことが多いそうです。

PHPはHTML内にプログラミングを書き込める利便性がある反面、ソースコードが複雑になりがちです。しかし、ファイルの読み込みを使用することでデザインとプログラムを分離することができます。

「ロジック」と「ビュー（HTML）」を別ファイル管理するメリットは、「ロジック担当者（プログラマー）」と「ビュー担当者（コーダー）」で作業内容が違うので、両者とも自分が担当している作業を分業しながらWebシステムを作成することができます。

デメリットは、画面に表示する値（変数）を「ロジック担当者」と「ビュー担当者」で共有しておかなければなりません。

  • ロジック担当者（プログラマー）：ロジック部分作成
  • ビュー担当者（コーダー）：各パーツをコーディング

ページ遷移図

この遷移図は理解しているとすごくわかりやすいのですが、理解できてないとチンプンカンプンだと思います。

この遷移図は、ユーザ入力画面からユーザ情報をフォーム（$_POST）と$_SESSIONで値を受け渡し、DB（データベース）に登録するまでの流れを表しています。

ポイント
  • $_POSTと$_SESSIONの使い所
  • $_SESSIONの動向

functions.php

<?php
function h($val)
{
  return htmlspecialchars($val, ENT_QUOTES, 'UTF-8');
}
function v($val)
{
  echo '<pre>';
  var_dump($val);
  echo '</pre>';
}

functions.phpによく使う関数を共通関数として登録しておく。

h関数：サニタイジング用関数を定義

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

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

htmlspecialchars()関数：HTMLタグを無効化する関数

第１引数($val)：string変換対象文字列
第２引数(ENT_QUOTES)：ENT_QUOTES→シングルクォートとダブルクォートを共に変換
第３引数(‘UTF-8’)：stringエンコード

htmlspecialchars()関数を実行すると、HTMLで意味を持つ記号を実体参照に置き換えてくれます。(ex. 「<」 → 「&lt;」,「&」→「&amp;」)

このようなエスケープ操作のことをサニタイジングや無害化と呼びます。

v関数：デバッグ用関数を定義

デバック時に使用するvar_dump()関数をpreタグで囲んだ関数を定義しておく。preタグで囲むことでvar_dump()関数を表示した際に見えやすくしている。

form1.php

<?php
session_start();
session_regenerate_id(TRUE);

require_once __DIR__ . '/functions.php';


v($_SESSION);
$name    = isset($_SESSION['name'])    ? $_SESSION['name']    : NULL;
$subject = isset($_SESSION['subject']) ? $_SESSION['subject'] : NULL;
$body    = isset($_SESSION['body'])    ? $_SESSION['body']    : NULL;

require 'form1_view.php';

session_start()関数：セッション変数利用開始する関数

session_start()関数を呼び出すことで、サーバ側に値を保存するセッション変数「$_SESSION」を使用できるようになります。他のページと値を共有したいときに使用します。

セッションは、クッキーを使ってユーザを認識し必要なデータをサーバ側に保存して使用します。データがサーバ側に保存されるため、悪意あるユーザにデータを改ざんされる心配がありません。クッキーに比べて安全性が高く、データ量の制限も実質ありません。

session_regenerate_id()関数：セッションIDを再発行する関数

セッションハイジャック対策でPHPSESSIDの値を変更する。引数は常に「TRUE」を指定し、古いセッションファイルを削除する。ログイン時やセッション開始ページ、一定時間経過したときにセッションIDを新たに設定することで、セッションハイジャックの危険性を減らすことができます。

複数ページで処理する場合は、始点となるファイルでPHPSESSIDの値を変更することが多い。

require_once DIR . ‘/functions.php’：共通関数の読み込み

functions.phpに登録した共通関数のh関数とv関数を使用できるように、共通関数ファイルを読み込む。

三項方程式

今回ビューファイルで必要な値「名前」「件名」「本文」をロジックで用意している。

$name = isset($_SESSION[‘name’]) ? $_SESSION[‘name’] : NULL;

三項方程式を使用し、 isset($_SESSION[‘name’])は「$_SESSION[‘name’]」が存在するか調べます。初回アクセス時はまだ「$_SESSION[‘name’]」は存在しないので、変数にはfalseの「NULL」を代入します。

require ‘form1_view.php’;

reqiuireを使ってパーツ化したコンテンツを読み込みます。

form1.phpでは「form1_view.php」ファイルを読み込みます。

form1_view.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>入力画面｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="header">
    <div class="inner">
      <h1>入力画面</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>

      <form action="form2.php" method="post">
        <dl>
          <dt>名前</dt>
          <dd>
            <input type="text" name="name" value="<?php echo h($name); ?>" size="50">
          </dd>
          <dt>件名</dt>
          <dd>
            <input type="text" name="subject" value="<?php echo h($subject); ?>" size="50">
          </dd>
          <dt>内容</dt>
          <dd>
            <textarea name="body" cols="50" rows="10"><?php echo h($body); ?></textarea>
          </dd>
        </dl>
        <p>
          <input class="btn" type="submit" value="確認画面へ">
        </p>
      </form>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>
</html>
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>

form1.phpでは$errorが存在しないので、エラー表示部分の利用はありません。
しかし、後々出てくる「form2.php」で活躍します。

      <form action="form2.php" method="post">
        <dl>
          <dt>名前</dt>
          <dd>
            <input type="text" name="name" value="<?php echo h($name); ?>" size="50">
          </dd>
          <dt>件名</dt>
          <dd>
            <input type="text" name="subject" value="<?php echo h($subject); ?>" size="50">
          </dd>
          <dt>内容</dt>
          <dd>
            <textarea name="body" cols="50" rows="10"><?php echo h($body); ?></textarea>
          </dd>
        </dl>
        <p>
          <input class="btn" type="submit" value="確認画面へ">
        </p>
      </form>

HTMLでフォームを作成します。
今回は「form2.php」にPOST形式で値を送るので、action=”form2.php” method=”POST”となります。

ユーザから情報を得る場合は、基本$_POSTを使用して値を取得します。

inputタグのvalueの部分がユーザ入力値としてform2.phpに送られるので、ユーザ入力値の部分をh関数のhtmlspecialchars()関数で入力値をサニタイジングします。

v($_SESSION);

ここでセッションをv()関数を使って確認します。

form1.php
form1.php

最初のform1.phpではまだ$_SESSIONに値が入ってないことが確認できます。

form2.php

form1.phpで確認画面へボタンをクリックするとform2.phpへ移ります。

<?php
session_start();
require_once __DIR__ . '/functions.php';

v($_POST);

$name    = isset($_POST['name'])    ? $_POST['name']    : NULL;
$subject = isset($_POST['subject']) ? $_POST['subject'] : NULL;
$body    = isset($_POST['body'])    ? $_POST['body']    : NULL;

$name    = trim($name);
$subject = trim($subject);
$body    = trim($body);

$error = [];

if ($name == '') {
  $error[] = 'お名前は必須項目です。';
} else if (mb_strlen($name) > 20) {
  $error[] = 'お名前は20文字以内でお願い致します。';
}

if ($subject == '') {
  $error[] = '件名は必須項目です。';
} else if (mb_strlen($subject) > 50) {
  $error[] = '件名は50文字以内でお願い致します。';
}

if ($body == '') {
  $error[] = '内容は必須項目です。';
} else if (mb_strlen($body) > 500) {
  $error[] = '内容は500文字以内でお願い致します。';
}

if (count($error) > 0) {
  require 'form1_view.php';
} else {
  $_SESSION['name']    = $name;
  $_SESSION['subject'] = $subject;
  $_SESSION['body']    = $body;
  require 'form2_view.php';
}

form2.phpではform1.phpから$_POSTで送った値を取得します。

form2.php
form2.php

form1.phpから$_POSTで送られた値はform2.phpに届いていることが確認できますが、この時点でも$_SESSIONにはまだ値がありません。

$name    = isset($_POST['name'])    ? $_POST['name']    : NULL;
$subject = isset($_POST['subject']) ? $_POST['subject'] : NULL;
$body    = isset($_POST['body'])    ? $_POST['body']    : NULL;

$name    = trim($name);
$subject = trim($subject);
$body    = trim($body);

三項方程式でそれぞれ変数にform1.phpから$_POSTで送られた値を代入します。
さらにtrim()関数で先頭・末尾にあるホワイトスペースを削除したものを変数へ再代入します。

$error = [];

if ($name == '') {
  $error[] = 'お名前は必須項目です。';
} else if (mb_strlen($name) > 20) {
  $error[] = 'お名前は20文字以内でお願い致します。';
}

if ($subject == '') {
  $error[] = '件名は必須項目です。';
} else if (mb_strlen($subject) > 50) {
  $error[] = '件名は50文字以内でお願い致します。';
}

if ($body == '') {
  $error[] = '内容は必須項目です。';
} else if (mb_strlen($body) > 500) {
  $error[] = '内容は500文字以内でお願い致します。';
}

$error = [];
エラー変数を配列化して、エラー時に出力するエラー文を配列管理します。

mb_strlen()関数で変数値の文字列の長さを取得します。
if分を使い、未入力時と文字数を超えた場合にエラー変数にエラー文を配列で管理していきます。

if (count($error) > 0) {
  require 'form1_view.php';
} else {
  $_SESSION['name']    = $name;
  $_SESSION['subject'] = $subject;
  $_SESSION['body']    = $body;
  require 'form2_view.php';
}

エラーがある場合は、「fomr1_view.php」を読み込みます。

エラーがない場合は、$_SESSIONに確定したユーザ入力値を代入し、他のページでも使えるようにします。そして「form2_view.php」を読み込みます。

form2_view.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>確認画面｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header">
    <div class="inner">
      <h1>確認画面</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">

      <p>以下の内容でよろしければ送信ボタンを押してください。</p>

      <dl class="confirm">
        <dt>お名前：</dt>
        <dd><?php echo h($name); ?></dd>
        <dt>件名：</dt>
        <dd><?php echo h($subject); ?></dd>
        <dt>内容：</dt>
        <dd><?php echo nl2br(h($body)); ?></dd>
      </dl>

      <div class="confirm-btn">
        <p><a class="btn" href="form1.php">入力画面に戻る</a></p>
        <p><a class="btn" href="form3.php">送信する</a></p>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>
</html>
      <dl class="confirm">
        <dt>お名前：</dt>
        <dd><?php echo h($name); ?></dd>
        <dt>件名：</dt>
        <dd><?php echo h($subject); ?></dd>
        <dt>内容：</dt>
        <dd><?php echo nl2br(h($body)); ?></dd>
      </dl>

ユーザ入力値を使用するので、h()関数を使ってエスケープします。

記述量が多い「内容」では「nl2br()」を使って見やすく表示します。

v($_SESSION);

ここでもセッションをv()関数を使って確認します。

form2.php
form2.php

上記で記述したように、form1.phpからページ移動してきたので$_POSTには値が入っていますが、$_SESSIONにはまだ値がありません。

form1.php
form1.php

その後「入力画面へ戻る」ボタンをクリックしform1.phpのページへ戻ると、最初に値が入ってなかった$_SESSIONに値が入っています。

これはform2.phpでエラーがなかった場合に$_SESSIONに値が代入されるからです。

form2.php
form2.php

再びform2.phpへ戻るとこちらの$_SESSIONにもちゃんと値が入っていることが確認できます。

form3.php

<?php
session_start();
require_once __DIR__ . '/functions.php';

$name    = isset($_SESSION['name'])    ? $_SESSION['name']    : NULL;
$subject = isset($_SESSION['subject']) ? $_SESSION['subject'] : NULL;
$body    = isset($_SESSION['body'])    ? $_SESSION['body']    : NULL;

unset($_SESSION['name']);
unset($_SESSION['subject']);
unset($_SESSION['body']);

$error = [];
if ($name === NULL) {
  $error[] = '名前の値なし';
}

if ($subject === NULL) {
  $error[] = '件名の値なし';
}

if ($body === NULL) {
  $error[] = '本文の値なし';
}

受け取った値を使った処理：例）データベースへの登録など

if (count($error) > 0) {
  require 'error_view.php';
} else {
  require 'form3_view.php';
}

form1.phpからform2.phpへ値を送信するときは、$_POSTを使用しましたが、form2.phpからform3.phpへの値の受け渡しは$_SESSIONを使用します。

$name    = isset($_SESSION['name'])    ? $_SESSION['name']    : NULL;
$subject = isset($_SESSION['subject']) ? $_SESSION['subject'] : NULL;
$body    = isset($_SESSION['body'])    ? $_SESSION['body']    : NULL;

$_SESSIONから値を取得し、それぞれ変数に値を代入したら$_SESSIONを削除します。

unset($_SESSION['name']);
unset($_SESSION['subject']);
unset($_SESSION['body']);

unset()関数：指定した変数の割り当てを解除・配列内の部屋を削除します。セッション変数の部屋は明示的に削除しないとずっと存在してしまうので、使用しなくなった部屋はunset()関数で削除しなければなりません。

$error = [];
if ($name === NULL) {
  $error[] = '名前の値なし';
}

if ($subject === NULL) {
  $error[] = '件名の値なし';
}

if ($body === NULL) {
  $error[] = '本文の値なし';
}

受け取った値を使った処理：例）データベースへの登録など

if (count($error) > 0) {
  require 'error_view.php';
} else {
  require 'form3_view.php';
}

エラーがあれば、エラー変数にエラーメッセージを代入します。

エラーがあるとき、「error_view.php」を読み込みます。
エラーがないときは、「form3_view.php」を読み込みます。

実際にデータベースに値を受け渡すには、この時点でロジックを組んでいくみたいです。

v($_SESSION);

ここでもセッションをv()関数を使って確認します。

form3.php
form3.php

unset($_SESSION)の前後でv()関数で$_SESSIONの動向を確認します。

unset前では$_SESSIONに値が入っているのに対し、unset後の$_SESSIONには値が入っていないことが確認できます。

form3_view.php

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>完了画面｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header">
    <div class="inner">
      <h1>完了画面</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">

      <p>以下の値で処理をしました。</p>

      <dl class="confirm">
        <dt>お名前：</dt>
        <dd><?php echo h($name); ?></dd>
        <dt>件名：</dt>
        <dd><?php echo h($subject); ?></dd>
        <dt>内容：</dt>
        <dd><?php echo nl2br(h($body)); ?></dd>
      </dl>

      <div class="content-footer">
        <p><a href="form1.php">入力画面に戻る</a></p>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>

</html>

ユーザ入力値を表示する際は毎回h()関数でエスケープしておきます。

error_view.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>エラー｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="header">
    <div class="inner">
      <h1>エラー</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">

      <?php /* ?>
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>
      <?php */ ?>

      <p>セッションが切れました</p>
      <p><a href="form1.php">もう一度やり直してください。</a></p>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>
</html>
      <?php /* ?>
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>
      <?php */ ?>

この部分はデバック用なので実際には表示されません。
エラーが出たときにどんなエラーが出たのか確認できます。

]]> 【PHP】登録フォームで$_POST形式で値を受け取る際のエラーチェックを例題と共に解説 https://creator-kid.com/code/php-form_post/ Tue, 01 Feb 2022 13:48:37 +0000 https://creator-kid.com/?p=4304 私がPHPを学んでいる中で一番理解するのに苦労したのが、「$_POST形式で値を受け取る際のエラーチェック」だったので、その例題と解答方法をまとめました。

なぜ苦労したかというと、アンケートフォームなどでユーザーが普通に入力して起こりうるエラーしか考えつかず、その他起こりうるエラーについて理解するのが困難だったためです。

POST形式の値の送受信の問題

フォームの作成

以下の内容のフォームを作成すること。

  • 名前
  • メールアドレス
  • 性別
  • 年代
  • お問い合わせ内容

送信について

送信先は「comfirm.php」とする。

送信方法は「POST」とする。

受信について

必須項目

  • 名前
  • お問い合わせ内容

上限値

  • 名前：20文字
  • メールアドレス：100文字
  • お問い合わせ内容：400文字

画面表示

ユーザー入力値に問題なければ 送られてきた値を表示。

ユーザー入力値に問題があるときは エラーメッセージを表示。

フォームパーツについて

名前は入力系パーツを使用しname属性「myname」とする。

メールアドレスは入力系パーツを使用しname属性「mail」とする。

性別は選択系パーツを使用しname属性「gender」とする。
送信する値は「選択しない」>「0」、 「男性」>「1」、 「女性」>「2」

年代はセレクトボックスを使用しname属性「age」とする。
送信する値は「選択しない」>「空文字」、 「10代」>「1」、 「20代」>「2」、 「30代」>「3」、 「40代」>「4」、 「50代以上」>「5」

お問い合わせ内容はテキストエリアを使用しname属性「body」とする。

「送信ボタン」と「リセットボタン」を下部に配置すること。

その他のルール

文章構成（divでグループ化や定義リストを使用する等）は自由に決めて構わない。

時間があればCSSで自由にデザインすること。

解答例

作成したお問い合わせフォーム

HTML

<h1>問題解答</h1>
<form action="comfirm.php" method="post">
  <fieldset>
    <legend>お問い合わせフォーム</legend>
    <dl>
      <dt>名前</dt>
      <dd>
        <input type="text" name="myname" required placeholder="例）山田 太郎">
      </dd>
      <dt>メールアドレス</dt>
      <dd>
        <input type="email" name="mail" placeholder="例）name@example.com">
      </dd>
      <dt>性別</dt>
      <dd>
        <label><input type="radio" name="gender" value="0">未選択</label>
        <label><input type="radio" name="gender" value="1">男性</label>
        <label><input type="radio" name="gender" value="2">女性</label>
      </dd>
      <dt>年代</dt>
      <dd>
        <select name="age">
          <option value="">選択してください</option>
          <option value="0">未回答</option>
          <option value="1">10代</option>
          <option value="2">20代</option>
          <option value="3">30代</option>
          <option value="4">40代</option>
          <option value="5">50代以上</option>
        </select>
      </dd>
      <dt>お問い合わせ内容</dt>
      <dd>
        <textarea name="body" cols="50" rows="10" required></textarea>
      </dd>
    </dl>
    <div class="button">
      <input class="btn" type="submit" value="送信">
      <input class="btn" type="reset" value="リセット">
    </div>
  </fieldset>
</form>

フォームパーツが多い場合は、fieldset要素を使ってグループを作成できる。
form要素内に入力パーツが少ない場合は、field要素とlegend要素は省略可能。

name属性はPHPの送受信には必須の属性で、値の送受信用の名前。
CSSでのclass属性、JSでのid属性のようなもの。

input要素をlabelタグで囲むと、クリック領域が広がりユーザーが使いやすくなる。

required属性を付与すると、必須項目になる。

placeholderを入力しておくと、名前やメールアドレスなどの入力欄に参考例をあらかじめ入力しておくことができ、ユーザーがわかりやすくなる。

CSS

fieldset{
  width: 50%;
  margin: 0 auto;
  background-color: aliceblue;
}

dt{
  background-color: #ccc;
}
dd{
  padding: 1em;
  margin: 0;
}

.btn{
  border-radius: 25px;
  background-color: #ccc;
  color: #000;
}

.button{
  text-align: right;
}

CSSは特に重要ではないですが、一応載せておきます。

PHP

<?php
echo '<pre>';
var_dump($_POST);
echo '</pre>';

$error = [];

echo '<pre>';
var_dump($error);
echo '</pre>';

$limit = 20;
if (isset($_POST['myname'])) {
  $myname = $_POST['myname'];
  if ($myname === '') {
    $error[] = '名前は必須項目です';
  } else if (mb_strlen($myname) > $limit) {
    $error[] = "名前は{$limit}文字以下で入力してください";
  }
} else {
  $error[] = '名前の値が届いていません';
}

$limit = 100;
if (isset($_POST['mail'])) {
  $mail = $_POST['mail'];
  if (mb_strlen($mail) > $limit) {
    $error[] = "メールアドレスは{$limit}文字以下で入力してください";
  }
} else {
  $error[] = 'メールアドレスの値が届いていません';
}

$limit = 400;
if (isset($_POST['body'])) {
  $body = $_POST['body'];
  if ($body === '') {
    $error[] = 'お問い合わせ内容は必須項目です';
  } else if (mb_strlen($body) > $limit) {
    $error[] = "お問い合わせ内容は{$limit}文字以下で入力してください";
  }
} else {
  $error[] = 'お問い合わせ内容の値が届いていません';
}

if (isset($_POST['gender'])) {
  $gender = $_POST['gender'];
  if (ctype_digit($gender)) {
    if ($gender < 0 || $gender > 2) {
      $error[] = '性別の値が不正です';
    }
  } else {
    $error[] = '性別の値が不正です';
  }
}

if (isset($_POST['age'])) {
  $age = $_POST['age'];
  if ($age !== '') {
    if (ctype_digit($age)) {
      if ($age < 0 || $age > 5) {
        $error[] = '年代の値が不正です:2';
      }
    } else {
      $error[] = '年代の値が不正です:1';
    }
  }
} else {
  $error[] = '年代の値が届いていません';
}

if (count($error) === 0) {
  $genderList = [
    0 => '選択してない',
    1 => '男性',
    2 => '女性',
  ];
  if (isset($gender)) {
    $genderStr = $genderList[$gender];
  } else {
    $genderStr = '選択していない';
  }

  if ($age === '') {
    $ageStr = '選択していない';
  } else if ($age === '0') {
    $ageStr = '未回答';
  } else if ($age === '5') {
    $ageStr = "{$age}0代以上";
  } else {
    $ageStr = "{$age}0代";
  }
}
?>

<!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>POST形式で送信された値を取得</title>
</head>
<body>
  <div class="box">
    <div class="inner">
      <?php if (count($error) > 0) : ?>
        <h1>エラー</h1>
        <ul class="error">
          <?php foreach ($error as $val) : ?>
            <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      <?php else : ?>
        <h1>確認</h1>
        <dl>
          <dt>名前</dt>
          <dd><?php echo $myname; ?></dd>
          <dt>メールアドレス</dt>
          <dd><?php echo $mail; ?></dd>
          <dt>性別</dt>
          <dd><?php echo $genderStr; ?></dd>
          <dt>年代</dt>
          <dd><?php echo $ageStr; ?></dd>
          <dt>お問い合わせ内容</dt>
          <dd><?php echo nl2br($body); ?></dd>
        </dl>
      <?php endif; ?>
      <p>
        <a href="form.html">フォームに戻る</a>
      </p>
    </div>
  </div>
</body>
</html>

これが解答例です。
わかりやすいように各パーツごと分解して解説していきます。

受信した値を確認

echo '<pre>';
var_dump($_POST);
echo '</pre>';

HTMLで作成したフォームからPOST形式で送られてきた値をvar_dumpして確認。

エラー変数

$error = [];

$error(変数宣言）して、エラーをこの$errorに配列として溜めていく。

名前チェック

  • 届いているかチェック
  • 必須チェック(空文字チェック)
  • 上限値チェック(20文字)
$limit = 20;
if (isset($_POST['myname'])) {
  $myname = $_POST['myname'];
  if ($myname === '') {
    ※ 必須エラー
    $error[] = '名前は必須項目です';
  } else if (mb_strlen($myname) > $limit) {
    ※ 上限値エラー
    $error[] = "名前は{$limit}文字以下で入力してください";
  } else {
    ※ OK
  }
} else {
  ※ 届いているかエラー
  $error[] = '名前の値が届いていません';
}

if (isset($_POST[‘myname’])) → 値が届いているかチェック

if ($myname === ”) → 空文字かチェック

else if (mb_strlen($myname) > $limit) → 文字数上限値(20文字)チェック

isset($_調べる変数名)：変数が定義されているか調べられる
定義されている場合はtrue、定義されていない場合はfalseを返す
値を受け取っていればtrueになる
→$_POSTの連想配列に箱があるかないかのチェック

※実際にフォームから値を送信してそのページに遷移した場合にはエラーは発生しません。しかし、直接そのページ（値を取得するページ）にアクセスした場合には$_POST[‘myname’]が未定義になるのでエラーが発生します。

mb_strlen(引数) ：引数で指定した文字列の文字数を返す
[multi byte_strings length]
※JSの文字列に対するlengthと同じような感じ

メールアドレスチェック

  • 届いているかチェック
  • 上限値チェック(100文字）
$limit = 100;
if (isset($_POST['mail'])) {
  $mail = $_POST['mail'];
  if (mb_strlen($mail) > $limit) {
    $error[] = "メールアドレスは{$limit}文字以下で入力してください";
  } else {
    ※ OK
  }
} else {
  $error[] = 'メールアドレスの値が届いていません';
}

if (isset($_POST[‘mail’])) → 値が届いているかチェック

if (mb_strlen($mail) > $limit) → 文字数上限値(100文字)チェック

メールアドレスは必須項目ではないので、空文字チェックはなし

お問い合わせ内容チェック

  • 届いているかチェック
  • 必須チェック(空文字チェック)
  • 上限値チェック(400文字)
$limit = 400;
if (isset($_POST['body'])) {
  $body = $_POST['body'];
  if ($body === '') {
    $error[] = 'お問い合わせ内容は必須項目です';
  } else if (mb_strlen($body) > $limit) {
    $error[] = "お問い合わせ内容は{$limit}文字以下で入力してください";
  } else {
    ※ OK
  }
} else {
  $error[] = 'お問い合わせ内容の値が届いていません';
}

if (isset($_POST[‘body’])) → 値が届いているかチェック

if ($body === ”) → 空文字かチェック

else if (mb_strlen($body) > $limit)→ 文字数上限値(400文字)チェック

性別チェック

◇未選択は値が届かない
◇「0」「1」「2」が届く
OKルート:「届いていない」or「範囲内の数字」

  • 届いているかチェック → 届いていなくてもエラーにせずOKでチェックぬける
  • 数字チェック
  • 範囲チェック
if (isset($_POST['gender'])) {
  $gender = $_POST['gender'];
  if (ctype_digit($gender)) {
    if ($gender < 0 || $gender > 2) {
      $error[] = '性別の値が不正です';
    } else {
      ※ OK
    }
  } else {
    $error[] = '性別の値が不正です';
  }
} else {
  ※ OK:値が届いていない（選択していない）
  ※ 表示するときに変数がないので
  　 表示用変数を別途用意しなければならない
}

if (isset($_POST[‘gender’]) → 値が届いているかチェック
値が届いていない場合でもOK

if (ctype_digit($gender)) → 値が数字かチェック

if ($gender < 0 || $gender > 2) → 値の範囲チェック

ctype_digit(引数)：引数が数字かどうかを調べる関数
→ 与えられた文字列textのすべての文字が 数字であるかどうかを調べる

trueの場合
①引数は文字列型
②文字列がすべて数字
③小数点をNGとして、整数かをチェック

例）
100 = false
‘100’ = true
0.5 = false
‘0.5’ = false

※ 表示するときに変数がないので、表示用変数を別途のちに用意する必要がある

年代チェック

◇未選択は空文字
◇「0」「1」「2」「3」「4」「5」が届く
OKルート:「空文字」or「範囲内の数字」

  • 届いているかチェック
  • 空文字じゃないかチェック → 空文字でもエラーにせずOKでチェックぬける
  • 数字チェック
  • 範囲チェック
if (isset($_POST['age'])) {
  $age = $_POST['age'];
  if ($age !== '') {
    ※ 範囲内数字のチェック
    if (ctype_digit($age)) {
      if ($age < 0 || $age > 5) {
        $error[] = '年代の値が不正です:2';
      } else {
        ※ OK:範囲内の数字
      }
    } else {
      $error[] = '年代の値が不正です:1';
    }
  } else {
    ※ OK:空文字の時（選択しなかった時）
  }
} else {
  $error[] = '年代の値が届いていません';
}

if (isset($_POST[‘age’])) → 値が届いているかチェック

if ($age !== ”) → 空文字じゃないかチェック
この場合、空文字のときにfalseとなる

if (ctype_digit($age)) → 値が数字かチェック

if ($age < 0 || $age > 5) → 値の範囲チェック

性別・年代の表示用変数を準備

if (count($error) === 0) {
  ※ エラーがないときは表示変数を整える
  ※ 選択項目表示用
  $genderList = [
    0 => '選択してない',
    1 => '男性',
    2 => '女性',
  ];
  if (isset($gender)) {
    ※ 性別の値が届いたとき
    $genderStr = $genderList[$gender];
  } else {
    ※ 性別の値が届いていないとき
    ※ $genderが存在しないとき
    $genderStr = '選択していない';
  }

  if ($age === '') {
    $ageStr = '選択していない';
  } else if ($age === '0') {
    $ageStr = '未回答';
  } else if ($age === '5') {
    $ageStr = "{$age}0代以上";
  } else {
    $ageStr = "{$age}0代";
  }
}

view画面

HTMLにPHPを組み込んで、view画面を作成

<body>
  <div class="box">
    <div class="inner">
      <?php if (count($error) > 0) : ?>
        <h1>エラー</h1>
        <ul class="error">
          <?php foreach ($error as $val) : ?>
            <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      <?php else : ?>
        <h1>確認</h1>
        <dl>
          <dt>名前</dt>
          <dd><?php echo $myname; ?></dd>
          <dt>メールアドレス</dt>
          <dd><?php echo $mail; ?></dd>
          <dt>性別</dt>
          <dd><?php echo $genderStr; ?></dd>
          <dt>年代</dt>
          <dd><?php echo $ageStr; ?></dd>
          <dt>お問い合わせ内容</dt>
          <dd><?php echo nl2br($body); ?></dd>
        </dl>
      <?php endif; ?>
      <p>
        <a href="form.html">フォームに戻る</a>
      </p>
    </div>
  </div>
</body>

<?php if (count($error) > 0) : ?> → エラーがあればエラー文を表示

<?php else : ?> → エラーがない場合は、フォームからPOST形式で取得した値を各々表示

<?php endif; ?> → PHPのif文終了タグ

nl2br関数(new line to br)： 改行コード前にbr要素を挿入してくれる
ブラウザ画面上で改行をサポートしてくれる
→ テキストエリアの内容を表示する時によく使う

]]> 【職業訓練校】Web制作6ヶ月コースの授業内容やリアルな感想など1ヶ月毎のまとめ https://creator-kid.com/code/programming-school/ Thu, 09 Dec 2021 16:17:22 +0000 https://creator-kid.com/?p=3351 2021年10月1日から職業訓練校でWeb制作を学び始めました。

コロナ渦になった頃から、リモートワークで仕事できるようになにか手に職をつけたいと思って独学でプログラミングを始めてたのですが、仕事をしながらだとなかなか長続きせずにいました。

そんなとき2021年の春先に腰を痛めてしまい、これから先も肉体労働を続けていくのが不安になりました。

これまで食品工場の製造→飲食店→冷凍倉庫でフォークリフトとずっと肉体を酷使してきたので、身体にガタがきたのだと思います。

「これを機に肉体労働を卒業してプログラミングの勉強に本腰を入れろ！という神様のお告げなんだ。」と自分に言い聞かせ、３４歳という歳からプログラミングの勉強を始めようと決心しました。

職業訓練校入学までのロードマップはこちら

関連記事【2021年】実例とともに詳しく解説！職業訓練校入学までのロードマップ。

※この記事は職業訓練校卒業するまで随時更新していきます。

Web制作学習１ヶ月目

１ヶ月目
  • グループワーク（3日間）
  • Officeソフト(Word, Excel, PowerPoint)
  • CMS実習（Wordpress）
  • HTML
  • CSS

グループワーク

初日の入校式が終わると、2〜4日目の3日間でいきなりグループワークがありました。
グループワークはその3日間の午後だけで、初日にNASAゲーム、２、３日目に販売戦略プロジェクトとその発表がありました。

NASAゲームはグループワークで利用可能なコンセンサスゲームです。
コンセンサスゲームとは、チームメンバーと合意形成（コンセンサス）を行う必要があるゲームです。

NASAゲーム

まず始めに、個別で考えてから自分の意見を提示します。
その後、チームメンバーと話し合いながら全員でチームの１つの結論を導きます。

話し合いをする中で意見が対立することがありますが、その時に多数決や諦めではなくしっかりと話し合って合意することがコンセンサスゲームの目的となっています。

私のチームは結果的には１番優秀な成績でしたが、その結果よりも「自分の1人の意見よりコンセンサスをとって導いたチームの結論の方が遥かに優れた回答を出せる」ということを体験し、コンセンサスの重要さを学びました。

販売戦略プロジェクト

販売戦略プロジェクトは、実際ありそうなクライアントからの依頼に対してターゲットの決定、配色の提案、キャッチフレーズ、コンテンツなどをチームで話し合い、PowerPointで資料を作成して発表する流れでした。

具体的には、私のチームが担当したのは「食パン耳ラスクプロジェクト」で、サンドイッチ専門店の店主が「サンドイッチを作る過程で廃棄物として出てしまうパンの耳をラスクとしてネット販売をしたい」という依頼。

今回はホームページを作成し、下記の項目をチームで考えて資料にまとめ発表することをしました。

  • もっと多くの人にパンの耳ラスクを知ってもらいたいが、ターゲットを絞った提案をしてほしい
  • 誰に対しどのような提案をすれば売り上げが向上するか考えてほしい
  • キャッチフレーズやリード文、コンテンツについて考えてほしい
  • ページカラー（メイン１色　サブ２色）を提案してほしい
  • コンテンツ部分の内容を提案してほしい

初めましてのチームメンバーと３時間以内で話し合い+資料の準備をしないといけない状況だったので、時間はかなり限られていました。

私のチームは「チームの決定事項に対してデータなどを用いて理由づけができれば良い」という考えだったので、時間内に終わらせられるかって感じで進めていましたが、他のチームは家に持ち帰ったり朝早く来て資料作成しているチームも見られました。

発表では他のチームの提案内容や発表者の声の大きさ・スピードなど５項目くらいを評価して、総合点で優秀なチームを選ぶといった方式をとっていました。まぁ発表者が優秀であれば高得点を取れるという正直狙いがよくわからないプロジェクトでした。

Officeソフト

Webサイト制作の発表する時に最低限レベルの資料を作れるように、Office製品のWord、Excel、PowerPointの基本的な操作を4日間学びました。

しかし、それ以来ふれる機会がないので教わったことはほとんど覚えていない気がします。

CMS実習

WordPressを使って管理画面付きWebサイトの構成や使い方を学びました。

私自身このWordPressブログを2019年にネットの情報を参考に立ち上げて試行錯誤してきたので、ほとんどの新たに教わることはありませんでした。

しかし、そんな中でも自分の中にちゃんと落とし込めたし、使いこなせてなかった機能を新たに使えるようになったのは大きいと思います。

HTML

HTMLを使ってWebページを作成・修正方法を学びました。

  1. HTMLの基本
  2. 文章の定義
    1. 見出しを定義する　h要素：見出し
    2. 段落を定義する　p要素：段落
    3. 改行を定義する　br要素：改行
    4. 強調を定義する　em要素：強調
    5. 強い重要性を定義する　strong要素：強い重要性
    6. 入力した通りに表示する　pre要素：整形済みテキスト
    7. その他よく使うHTML要素
      blockquote要素：長い引用文
      ins要素：あとから内容を追加
      del要素：あとから内容を削除
  3. リストの定義
    1. リストを定義する
    2. 番号なしリストを定義する
      ul要素：番号なしリスト枠
      li要素：リスト項目
    3. 番号付きリストを定義する
      ol要素：番号付きリスト枠
      li要素：リスト項目
    4. 定義リストを定義する
      dl要素：定義リスト枠
      dt要素：定義リストタイトル
      dd要素：定義リスト説明
  4. テーブルの定義
    1. テーブルを定義する
      table要素：テーブル枠
      tr要素：テーブル行
      th要素：見出しセル
      td要素：通常セル
    2. テーブルの行や列を連結する　セル連結用属性
  5. グループの定義
    1. ブロックレベルのグループを定義する
      header要素：ヘッダー
      nav要素：ナブ・ナビゲーション
      footer要素：フッター
      main要素：メイン（主要コンテンツ：各ページに１つのみ）
      article要素：アーティクル
      section要素：セクション（章・部分）
      aside要素：アサイド（バナー・広告・関連記事）
      div要素：ディブ（汎用グループ・レイアウト用グループ）
    2. 要素に名前をつける属性
      class属性
      id属性
      class名・id名の命令規則
      構造家タグでよく使われる構成
    3. インラインのグループを定義する
      span要素：インラインのグループ
  6. リンクの定義
    1. リンクを定義する
      a要素：リンクを定義
    2. 絶対パスと相対パス
      絶対パス
      相対パス
      絶対パスと相対パスの比較
      ディレクトリマップ
    3. ページ内リンクを定義する
      ページトップへ戻るリンク
  7. 画像の定義
    1. 画像を定義する
      img要素：画像表示
      figure要素；図表用グループ
      figcaption要素：図表用キャプション
    2. 画像をリンク化する
  8. 実体参照

独学でHTMLを勉強していたので復習という形で授業を受けていましたが、ちょっとした疑問なども気軽に授業中に質問できたので自分の中でしっかり整理できました。

例えば、idとclassの使い分けなど動画での学習ではそんな細かく説明はなかったので使い分けを知らずに漠然と使用していましたが、フリーランス講師ならではの生きた情報を交えて教えていただきました。

また、VSCodeのおすすめの設定やプラグイン、VSCodeでの略式のコードの打ち込み方なども教わり、以前よりも効率よくコードを打てるようになったと思います。

CSS

CSSを使ってWebページの装飾を学びました。

  1. スタイルシートの基本
    1. CSS適用方式
      インライン方式
      埋め込み方式
      外部リンク方式
      link要素：外部ファイル読み込み
    2. CSSファイルの新規作成
      CSSファイルの命名規則
  2. 文字・文章のスタイルを定義
    1. 文字・文章のスタイルを定義
      文字色を定義する：color
      文字サイズを定義する：font-size
      文字の太さを定義する：font-weight
      文字のスタイルを定義する：font-style
      文章の装飾を定義する：text-decoration
      行揃えを定義する：text-align
      書体を定義する：font-family
      行間を定義する：line-height
      文字に影をつける：text-shadow
    2. Webフォントの使い方：Google Fonts
    3. 検証ツールでCSSエラー個所を探す
  3. 背景色・背景画像のスタイルを定義
    1. 背景色・背景画像を定義
      背景色を定義：background-color
      背景画像を定義：background-image
      背景画像の繰り返しを定義：background-repeat
      背景画像の表示開始位置を定義：background-position
      背景画像の固定・移動を定義：background-attachment
      背景画像のサイズを定義：background-size
      背景のスタイルを一括定義：background
      １つの要素に対して背景画像を複数指定
  4. ボックススタイルを定義（幅・高さ・余白・線）
    1. ボックス構造
      ブロックボックスとインラインボックス
    2. ボックスのスタイルを定義
      コンテンツ領域の幅を定義：width
      コンテンツ領域の高さを定義：height
      パディング領域（内余白）を定義：padding
      ボーダー領域の線種を定義：border-style
      ボーダー領域の線幅を定義：border-width
      ボーダー領域の線の色を定義：border-color
      ボーダー領域のスタイルを一括定義：上下左右一括指定
      ボーダー領域のスタイルを一括定義：場所を限定して一括指定
      角丸を定義する：border-radius
      マージン領域（外余白）を定義する：margin
      マージンにautoを指定した時の挙動
      body要素の外余白を0にする
      入れ子の内側の上マージンが突き抜ける
    3. ボックスサイズの計算方法：boz-sizing
    4. 要素に影をつける：box-shadow
  5. 画像のスタイルを定義
    1. classセレクタ
    2. 画像の幅・高さを定義：width, height
    3. 画像の最小幅・最小高さを定義：min-height, min-height
    4. 画像の最大幅・最大幅を定義：max-width, max-height
    5. はみ出た画像を縮小する
    6. 表示位置を定義
      文章の回り込み：float
      回り込みの解除：clear
    7. 行ない複数画像の縦方向位置調整
    8. 画像下の隙間をなくす
    9. img要素の定番定義
    10. 画像を角丸表示
  6. リストスタイルを定義
    1. リストのスタイルを定義
      リストのデフォルトデザイン
      リストマーカーの種類を定義する：list-style-type
      リストマーカーの画像を定義する：list-style-image
      リストマーカー位置を定義する：list-style-position
      リストマーカーを一括定義する：list-style
      リストのインデントを調整する：padding-left
      リストマーカー画像を背景画像で定義する
  7. テーブルのスタイルを定義
    1. テーブルの枠線を定義：border
    2. テーブルの枠線隙間を定義する：border-collapse
    3. テーブルの文字サイズを定義する：font-size
    4. テーブルの背景色・文字色を定義：background-color, color
    5. セル余白を定義する：padding
    6. セル内の横方向業揃えを定義する：text-align
    7. セル内の縦方向揃え位置を定義する：vertical-align
    8. テーブルの幅を定義：width
    9. テキストの折り返し方法を定義する：white-space
    10. テーブルの表示方法を定義：table-layout
    11. はみ出た内容が非表示時に略文字で知らせる：text-overflow

こちらも動画を見て独学で学習したことがありましたが、参考にしていた動画では細かな説明がなかったのでよく理解できていないことが多々ありました。

例えば、独学で学んでいた時はブロック要素とかインライン要素とかよくわからずにいましたが、わからなくても特に問題ないと思っていました。
しかし、要素を「中央揃え」にしたいと思ってもその要素がブロック要素なのかインライン要素なのかによって使用するプロパティが違ってきます。

ブロック要素自体を中央揃えは左右にマージン「auto」かつ、対象要素に横幅の指定必須となってきます。（※width指定なしの場合親要素いっぱい横幅でマージン「0」になるため）
しかし、要素内コンテンツ（インライン要素）の中央揃えにする場合のプロパティはtext-aligh: centerを使います。

受講して感じたこと

良かった点
  • 講師が2人体制で2人ともフリーランス
  • キャリアコンサルタントが時代遅れな考えの人ではない
悪かった点
  • 知っていることを教わると時間の無駄だと感じる

◎講師2人体制で2人ともフリーランス

講師が2人体制でフリーランスである点は非常に良かったと思いました。

職業訓練校に通おうか迷ってた理由の一つが、学校にしか勤めていない講師に教わることでした。
ずっと学校で教えているということは、時代遅れなことを教わることになります。

しかし、フリーランスの講師2人はそれぞれ過去に違う仕事をしていた経験がありますし、個々で仕事をしているので生きた情報を教わることができます。

さらに2人体制ということもあり、クラスでわからない人がいてももう一人が補助する体制なので、授業の進行に遅れをとらない点も良かったと思います。

◎キャリアコンサルタントが時代遅れな考えの人ではない

職業訓練校側の目的は失業者を育成して、最終的には就職してもらうことです。

東京都の職業訓練後の就職率は４７都道府県中４７位と一番低いみたいです。
その理由の一つはフリーターでも東京にはいろんな仕事があるので暮らしていけるとのこと。

職業訓練校側的には就職率を上げたいとこですが、そういうとこに勤めているキャリアコンサルタントは今の時代に合わない考え方を押し付けてくるイメージでした。（勝手な先入観ですが）

しかし、実際にキャリアコンサルティングの面談時にお話しすると、「こーしろ、あーしろ」などは一切言わずに、その人にあったキャリアプランを一緒に考えてくれる人でした。

一昔前は私が思っていた感じの古い体制だったみたいですが、その担当者のおばちゃんが「それではダメだ」との想いから今のような体制に変えたくて変えたそうです。

そんな人がキャリアコンサルティングの長であることはなによりも心強いと思いました。

×知っていることを教わると時間の無駄だと感じる

私は2019年から独学でWordpressでブログを開設したんですが、この職業訓練校でもWordpressの使い方の授業で習いました。

しかし、すでに自分が知っていることを１週間もかけて習わなくてはいけないのは、すごくストレスに感じました。

確かに自分が知らなかった機能や設定などもあり勉強になることもありましたが、結構時間の無駄だなと感じていました。

]]>