目次
- プログラミング開発研修の概要
- HTML/CSS/JavaScriptとは
- 研修の感想
プログラミング開発研修の概要
弊社では、「7月からの現場の研修やOJTにスムーズに移行できるようになる」
を目標として、新人のプログラミング開発研修を行っています。
学習内容は、以下の通りです。
・HTML/CSS/JavaScript
・データベース
・C#
・Git/GitHub
・ASP.NET
・システム開発研修
これまでに、HTML/CSS/JavaScriptの研修を終えましたので、
HTML/CSS/JavaScriptとは何かと、研修の感想を紹介します！
HTML/CSS/JavaScriptとは
まず、HTML/CSS/JavaScriptについて説明します。
HTML/CSS/JavaScriptは、主にホームページやフロントエンド（ユーザーが直接触れる部分）等の
作成に使う言語です！それぞれの役割を簡単に説明すると、
HTML 基本構成を作成
CSS デザインやレイアウトを設定
JavaScript サイトに動きを追加
となっています。こう言われても分かりづらいと思うので詳しく説明していきます。
HTML
先ほども述べたように、HTMLは基本構成を作成します。
私の好きな食べ物の紹介を例に、HTMLで書いてみました。
好きな食べ物3選
焼肉
寿司
焼き鳥
とてもシンプルですね。ただの箇条書きです。
このように、HTMLでは、表示するテキストや、基本構成を作成します。
CSS
次に、デザインやレイアウトを設定するCSSについて紹介します。
先ほどのHTMLで作成した好きな食べ物にCSSを組み合わせて装飾してみます。
好きな食べ物3選
焼肉
寿司
焼き鳥
それっぽくなりました。私のセンスの限界です。
CSSを使って、フォントサイズや色を変えています。
また、それぞれの「焼肉」、「寿司」、「焼き鳥」の要素に、
画像の追加を行ったり、画像の縁に影を付けたりしています。
このように、CSSを使うことで、デザインとレイアウトを設定することができます。
JavaScript
最後に、サイトに動きを追加するJavaScriptについて紹介します
サイトに動きを追加すると言っても分かりづらいと思います。
先ほどの例にJavaScriptを組み合わせたものを作ったので、見てみてください。
好きな食べ物3選
焼肉
寿司
焼き鳥
分かりますか？
マウスが焼肉等の乗った時に、それぞれが浮き上がるようになっています！
すごいですね…!!
このように、JavaScriptを組み合わせることで動きを追加することができます。
今回は、マウスが要素にホバー（上にのること）した時に、CSSが変化するように設定しています。
JavaScriptでは、他にも
・同意しますか？のアラートボタンを出す
・TOPに戻るボタンを押したときにスムーズに戻る
など様々な機能を実装することができます。
HTML、CSS、JavaScriptの役割について大体分かっていただけたでしょうか。
研修の感想
楽しいです。
外部講師の方の説明が分かりやすいため、教講義内容が理解しやすく、そこで得た知識を活かして演習問題に取り組む過程が楽しいです。また、HTML/CSS/JavaScriptを用いて書いたコードがすぐに画面上に反映されるのを見るのは、非常に満足感があります。デザイン面の細かいこだわりをコードを通じて形にできることも、楽しさの一つです。
加えて、同期と協力して問題を解決する過程も楽しさを感じます。
難しい演習問題に対して、みんなで意見を出し合いながら解決策を練りだすことの面白みを感じました。
また、解いた後に、同期と解法を共有すると、それぞれが異なるアプローチをとっていたことが多く、より良いコードの書き方や考え方の学びになる場面が数多くありました。
ブログを書いている現在は、SQLの研修も終わり、C#の研修をしていますが、毎日新しいことを身に着けている感覚があり、日々の研修が充実しています。今後も、少しでも多く成長できるよう、意欲的に取り組みたいです。
