皆様、お久しぶりです！
ロジカルスタジオのフロントエンドエンジニア、T.Kです。
入社して1年が経ち、ようやくコーディングにも慣れてきたかな？と感じる今日このごろです。
私のようなコーディング初心者は、まずHTMLとCSSを学び、
デザイン通りの外見を作成する練習をするかと思います。
しかし、世の中のサイトを見てみると
」という箇所があるはず。
そこで登場するのが、JavaScriptです！
当記事は
「HTMLやCSSは書けるようになってきたけど、そろそろ幅を広げたいなぁ…」
と感じている方に、
実際に簡単なプログラムを作って、JavaScriptへの第一歩を踏み出してもらう
ということを目的としています。
目次
JavaScriptとは？
JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
出典 Wikipedia
JavaScriptとは、フロントエンド/バックエンドで動くプログラムの言語の一つです。
これを書くことができると、ブラウザ上でいろいろなことができるようになります！
どんな時にJavaScriptを使うのか？
JavaScriptには様々な用途がありますが、コーディング初心者にとって真っ先に触れることになるのは
「HTMLやCSSではやりにくいことをやる時」
だと思います。
例えば以下のような時でしょうか
- クリックやスクロールに応じて、なにかをしたい
- 時間を表示したい
- 派手なアニメーションをつけたい
- 数値を扱って計算したい
- 精密なバリデータをつけたい
- APIを利用したい
まずはjQueryを使ってみよう
私は初めてJavaScriptに触れる際は、jQueryを使うことをおすすめします。
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。
出典 Wikipedia
jQueryは非常に幅広く用いられていますが、最近では勢いを失っています。
とはいえ、
-
簡単に始められる
-
記述がシンプルなため、考え方を学ぶのに適している
-
2020年現在もよく使われている
- 自分の書いたプログラムが動く喜びを知るとモチベーションがあがる
という理由により、私は初めはjQueryを利用してJavaScriptを学ぶことを推奨します。
早速プログラムを書いていこう
では、早速jQueryでJavaScriptプログラムを書いていきましょう！
今回作るもの
今回はいろいろある中でも簡単な「開閉メニュー」を作りたいと思います。
まずは完成品をご覧ください！
See the Pen poJmyXE by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.
・・・・・・・・・・・・・・・
この開閉メニューは、ロジカルスタジオのリクルートページの募集要項欄にもあるしゅこよ。
まずは流れを整理
初めのうちは、まずプログラムを書く前に挙動の流れを整理しましょう！
私は初めはフローチャートを書いていました。
実際にプログラムを書こう
では次に、上のチャートを元に、jQueryでプログラムを書いていきましょう！
HTML及びCSSについては先述のものを使ってください(後ほど解説します)。
はじめに
jQueryでプログラムを書く前に、まずはjQueryを使えるようにするためのファイルを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>その後、jsファイルを作成し（ここではcommon.jsとします）、HTML内で先程のファイルのあとに読み込みます。
<script src="common.js"></script>そして、common.jsを開き、そこにプログラムを書いていきます。
基本的な書き方
$(function () {
"use strict";
/*ここに処理を書く*/
});まず上記のように記述します。
$(function () {});の{}内のコードは、ドキュメントが読み込まれたあとに実行されます。
"use strict";は、プログラムを厳格モードで実行するというJavaScriptの宣言です。
詳しくは公式サイトをご覧ください。
バーがクリックされた
$(function () {
"use strict";
$('.bar').click(function () {
/*処理*/
});
});
まずバーを指定します。
ここでは指定方法としてクラスを使用します。
バーに.barというクラスをつけ、それをJavaScript中で指定します。
上記のように記述することで、HTMLの中の全ての要素.barにクリックイベントを持たせることができます。
そのバーについている矢印の向きを切り替え
$(function () {
"use strict";
$('.bar').click(function () {
$(this).toggleClass('open');
});
});thisとはこの場合、クリックされた要素.barを指します。
$(this)の代わりに$('.bar')を指定すると、
HTML中の全ての要素.barを指定することになりますので、ご注意ください。
そして関数toggleClass()で、その要素に対しクラスの切り替えを行います。
- クリックされた要素
.barにクラス.openがついていない場合は、クラス.openをつける - クリックされた要素
.barにクラス.openがついている場合は、クラス.openを外す
そしてCSSで
.barで、変化前の外見.bar.openで、変化後の外見
を指定することで、見た目の変化を実装します。
これで、バーの外見の変化は実装できました。
残りは本文の表示状態を切り替えるのみです。
完成に近づいてきました！
本文の表示状態を切り替え
$(function () {
"use strict";
$('.bar').click(function () {
$(this).toggleClass('open');
$(this).next().stop().slideToggle(300);
});
});まず$(this).next()で隣接した弟要素を指定します。
そして、弟要素に.stop()を行うことで、動きを停止させます。
HTMLを以下のような構造にすることで、本文が入った要素を指定することができます。
<dl>
<dt class="bar">バーの文字</dt> <!--$('.bar')-->
<dd class="detail">本文</dd> <!--$(this).next()-->
</dl>最後に.slideToggle()で本文の表示状態を切り替えます。
この関数は以下のような挙動を実装します。
display:noneの要素に対しては、上から下にスライドダウンして表示（display:noneでなくなる）display:noneでない要素に対しては、下から上にスライドアップして隠す（display:noneになる）
また、.slideToggle()中のカッコに値（引数といいます）を一つ指定することで、
表示にかかる時間をミリ秒で設定できます。
例では、300ミリ秒（=0.3秒）かけてスライドダウン/スライドアップするように設定しています。
（ちなみに.stop()がないと、バーを連打した時大変なことになります。気になる方はやってみてください）
これで、開閉メニューの完成です！お疲れ様でした
終わりに
今回は、JavaScriptを使うものの中でも簡単な、開閉メニューを作ってみました。
まずは簡単なものを実際に作ってから始めることで、
プログラムというものの考え方が身につき、
それをどうやってJavaScriptで実装するかが分かるようになってくるかと思います。
初心者の方は、当記事のような方法でいろいろなものを作ることから始めてみてはいかがでしょうか！
- ハンバーガーメニュー
- アコーディオンメニュー
等は、比較的簡単に作ることができます！
慣れればもっと複雑なものを実装することも可能です。
また、世の中のサイトのjsファイルを見るのも
JavaScriptへの理解を深める一歩となると思います。
私も初めの頃はそのようにしていました。
この記事が、JavaScriptを書けるようになりたい方の一助となれば幸いです。
では、良きJavaScriptライフを！
弊社ロジカルスタジオでは、良きJavaScriptライフを送りたいフロントエンドエンジニアを募集しています。
気になっている方は、ぜひ採用サイトからご応募ください！
