「JavaScript講座」の研修講師を担当しました！

こんにちは、まなびとの高森です。
今回は、先日２日間にわたり弊社のスタッフが講師として担当しました研修「JavaScript講座」の様子をお届けします！

今回の研修について

今回の研修は前回の記事「Webサイト基本講座」と同じく、宮崎県ソフトウェアセンター様主催で毎年開催されており、
主に新人社員及び中途採用者、在職中の方を対象にした高度IT研修を展開されております。

今回弊社が担当しました研修は「JavaScript講座」は、Webサイト制作には欠かせないJavaScriptを基本から学び、講座の後半では受講生のみなさんに課題にチャレンジしてさらに理解を深めていただきます。

この「JavaScript講座」のメイン講師は弊社田﨑（写真）、補助講師には弊社迫（オンラインでの参加）が担当しました。

今回の研修に参加していただいた受講生のみなさんは、実務でJavaScriptの実装経験がないという方がほとんどでした。
この講座を通し、JavaScriptの基礎知識の習得と、この技術の面白さを知っていただきたいと思います！

研修：初日

初日は、JavaScriptとは一体なにか、何ができるのかなどの基礎知識から始めました。

普段見ているWebサイトで、ボタンをクリックしたら横からニュッとメニューが出てきたり、スクロールをするとコンテンツが浮かび上がってきたりなど、バリエーション豊かな動きをするサイトを見たことがあると思います。
JavaScriptは、こういったブラウザを操作するためのプログラミング言語としてたくさんのWebサイトに実装されています。

そのJavaScriptの書き方について、まずはVanilla JSでの書き方で学習していただきます。

Vanilla JSとはカスタマイズなどが一切されていない素のJavaScriptのことで、名前の由来はアイスクリームで標準的な味がバニラであることからきています。
特徴としては、ライブラリなどを挟まないためjQueryなどと比べるとより速くページの描画速度をあげられること、 またライブラリは元のサーバが落ちてしまうと動かなくなったりと不具合が起きてしまいますが、Vanilla JSはその心配がありません。
ただ、ブラウザの差異を考慮して書く必要があるため、やや大変なところもあります。
下の画像は、実際にVanilla JSを用いて数当てゲームを作ってみたコードです。

それと同時に変数や定数、配列などについても学習していきます。
これに関しては他の言語でも出てきますので、受講生の皆さんにはぜひ理解していただきたいポイントです！

初日の研修の最後では、受講生のみなさんにJavaScriptでできることの一つ「DOM操作」を実際にコーディングしていただきました。
検索ボックスの中に入力したテキストを読み取り、ブラウザに表示させるというものです。
この記事を読まれている皆さまも、ぜひ実装方法を考えてみてください！

研修：2日目

2日目は、初日の内容を踏まえ、一般的によく見かけるWebサイトの動きを実際に作成していきます。

まずは、指定した日までのカウントダウンタイマーを作成しました。
Webサイトのリニューアルやイベントなどの企画をしているサイトで見た事があると思いますが、こちらもJavaScriptで実装ができます！
今回は2025年の大阪万博の開催日を指定し、あと何日・何時間・何分・何秒までかをブラウザに表示してみるまでを受講生の皆さんと一緒に実装してみました。

午後は、jQueryについての学習に入ります。
jQueryとは一体何か、バージョンの違いやプラグインの説明・実装の仕方など、より実務で活かせる知識を学んでいただきます。

この他にも、スライドショーの実装をプラグインをカスタマイズして実装をしていただき、APIなどの技術の紹介など、受講生のみなさんが今後経験するかも知れない技術のお話もさせていただきました。

HTMLやCSSと同様、JavaScriptも日々進化し続けている言語です。
勉強すればするほど実装できる幅が広がり、クライアントの要望・イメージをより具体的に表現できたり、ユーザーを魅了するWebサイトを作れるようになっていきます。
受講生の皆さんにはぜひたくさんのWebサイトを見て、「これはどうやって実装しているんだろう？」と興味を持っていただければと思います。

最後に

今回も2日間という限られた時間の中で、JavaScriptの基本知識から実装までを学習していただきました。
「前回のHTML/CSSに比べるとよりコアな内容になっているので、みなさんかなり集中して受講されていました」（田﨑談）とのことで、今回の研修がきっかけとなり、この技術の魅力を知っていただき、より深く知識を深めていただけると幸いです。

また2週間後の6月27日〜28日に開催されます「PHP講座」の研修も、弊社のスタッフが講師として担当いたします。
受講される皆さま、どうぞよろしくお願いいたします！