webデザ職業訓練⑤プログラミングの授業

2020年の職業訓練Webデザイナー養成科の体験談です。Webサイトに使用するプログラミングの授業で使った教材・学んだこと・勉強法などを紹介します。

JavaScriptを使ったサイトの授業

JavaScriptとは

JavaScriptとは、ブラウザ上でWebページに動きや複雑な機能を与えられるプログラム言語の一つです。JavaScriptはクライアントサイド（Webサイトを閲覧しているブラウザ）がコードを受け取って動作するため、外部からコードを確認できます。

こんなことができます。

市販テキストで基礎を学び、プリントで実践問題

職業訓練では、webデザ職業訓練④の記事で紹介したテキスト「30時間でマスターWebデザイン」の第５章と付録の章で基本を学びました。

市販のテキストで学んだこと

JavaScriptの基本的な書き方・変数・関数・条件分岐・繰り返し処理・jQuery※など。

※JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリ。

オリジナルテキストとプリントで学んだこと

オリジナルテキストで学んだこと
・サイトに流れる文字を表示する
・タイプライターで打っているように表示する
・時間に合わせたメッセージを表示する（朝は「おはよう」、夜は「こんばんは」等）
・日数のカウントダウン（ライブまであと○日！など）
・４択クイズができるホームページ
・スライドショーの作成

プリントで学んだこと
・消費税を計算して表示するサイト
・アクセスした曜日により、異なる画像・メッセージを表示（テレビ番組表）
・選択ボックスに、自動で複数のチェックマークを入れる　など

勉強法

▼おすすめ本をPR

『確かな力が身につく　JavaScript「超」入門』について
「数当てゲーム」や「モンスター退治」などの簡単なゲームを作るのが楽しいです。「開閉するナビゲーションメニュー」「スライドショー」の作り方なども載っています。価格と在庫の表示、プルダウンメニューで指定ページへなど、使いやすい例がたくさんあります。解説については、この１冊だけだと超初心者にはJavaScriptを理解するのは難しいかもしれないので２冊目以降の本にオススメです。

『スラスラわかる　JavaScript』について
解説が丁寧で図解やイラストが多く、JavaScriptの基本や仕組みを理解しやすいです。１冊目に勉強するのにオススメです。各章の終わりに理解度チェックの問題がついていて、本当に理解できたかが試せます。私が持っているのが2019年版だからかもしれませんが、「var」がよく出てきます（エンジニアに聞いたところ、今は「let」や「const」を使うことが多いという声があります）。

PHPを使ったサイトの授業

PHPとは

PHPとはHypertext Preprocessor(ハイパーテキストプリプロセッサー）の略で、Webアプリケーションの開発に適したプログラミング言語です。PHPの処理はサーバーの方（サーバーサイド）で行われるので、外部からはコードを確認できません。

市販テキストで「宿泊予約」サイトを制作

職業訓練では、「30時間アカデミック　PHP入門」というテキストを使用。学生のサークル合宿などで使うペンションの予約サイトを制作しました。

PHPはHTMLの中に埋め込めるので、HTMLでサイトのベースを作った後にPHPで予約システムを実装する感じです。

市販テキストで学んだこと

・HTML５によるWebページ作成
・PHPの初歩
・データベースの利用
・オンライン予約システムの実装１（部屋の詳細表示）
・オンライン予約システムの実装２（予約する機能）
・予約管理機能（オーナー側）

プリントで実践問題

配列、変数、簡単なプログラム作成（空欄を埋める）などをプリントで学びました。単元が終わった後のテストでは、選択問題だったので助かりました〜（汗）

勉強法

▼おすすめ本をPR

『いきなりはじめるPHP』『気づけばプロ並みPHP』について
最初にXAMPPをインストールして環境を整えるまでが難関ですが、本の内容は初心者向けでやさしかったです。本書では古いバージョンのインストールを推奨されていますが、私の場合はmac使用でXAMPPは新しいバージョンで動きました。１冊目ではフォームを作成し、入力チェック機能、サンクスページの表示、自動返信メールの送信、データベース作成の基礎を学べます。２冊目ではやや複雑になり、野菜を販売するネットショッピングサイトを作成します。ログイン機能やショッピングカートなどもあり、完成した時は達成感がありました。

まとめ