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

プログラミング

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

JavaScriptを使ったサイトの授業

JavaScriptとは

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

こんなことができます。

JavaScriptでできることの一例
例)メニューバーや文字に動きを与える
例)HTMLを必要に応じて書き換えることができる
例)画像や地図などを拡大縮小、動かせる など

動きがあるサイトはユーザーの目線を集めやすく印象に残ったり、使い方によって情報がわかりやすく伝わったりできますね。

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

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

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

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

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

テキストで使ったJavaScriptの例
例1)タイムセールのお知らせページで、現在の日時を表示
例2)現在の時刻に応じて「セール中!」と表示
例3)ケーキ予約画面でプレート(板チョコ)にメッセージを自由に書けるようにする

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

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

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

勉強法

授業の内容が難しくなってきたので、私は本屋に行って初心者用に書かれているJavaScriptの本も購入して勉強しました!
ネットの動画で勉強するのもオススメです。

▼おすすめ本をPR

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

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

PHPを使ったサイトの授業

PHPとは

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

PHPでできることの一例
例)ブログ、SNSの制作
例)ショッピングサイト、会員制サイトなどの制作
例)お問い合わせフォームの作成 など
※「データベース」を使用するので、訓練校で一緒に勉強します

PHPを勉強すると、お問い合わせフォームで入力したことを再表示させたり、会員がログインできるサイトなどを作ったりできます。

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

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

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

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

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

PHPは特に難しかったので、予約サイトが機能した時には感動しました!

プリントで実践問題

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

勉強法

JavaScript同様、初心者用の本を買ったりネット動画で勉強したりしました。ネットで評判の良い本を探し、書店でも内容を確認してわかりやすい説明の本を選びました。

▼おすすめ本をPR

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

まとめ

・職業訓練の授業では、サイトで使用されるプログラミングの基礎を学べる!
・授業で配られるプリントで実践問題を練習。
(JavaScript/PHPの内容は難しいが、プリントを理解していればテストは大丈夫です)
・初学者向けのわかりやすい本やネットの動画学習などでも勉強する。
ごん先生
ごん先生

※これは個人の体験談です。職業訓練校ごとに授業内容は異なります。興味を持った人は、自分が通いたいと思う都道府県の職業訓練校のカリキュラムを事前に確認をお願いします。

プロフィール
この記事を書いた人
いまみ&ごん

在宅Webデザイナーになった主婦です。前職は編集系の仕事をしていました。退職後にWebデザインの職業訓練校を経て、Web制作会社でアルバイトを経験。現在は在宅でバナー制作を中心にお仕事をしています。Twitterをフォローしてもらえると喜びます。

いまみ&ごんをフォローする
プログラミング職業訓練
いまみ&ごんをフォローする
Webデザときどきプログラミング
タイトルとURLをコピーしました