エンジニアリングサービス｜JavaScriptで、リンクの開閉動作をするサンプルコード

自作サイトの作成に慣れてくると、動的動作も作ってみたいと思うことがあるかと思います。
たいていのHPやWebページはWordPressか自作サイトでは、PHPやJavaScriptなどを使って動的な動作を対応することが多いです。
そこで、本格的に、動的動作を作って自身のサイトのレベルアップをしていきたい方は、JavaScriptやPHPを学習することをお勧めします。

このどれかができるようになると問い合わせページの作成、リンクの開閉時などの細かい動作ができるようになり、とても、便利になるので、勉強してみる価値はあります。

JavaScriptとは？

JavaScriptとは、Webサイトに動き的な機能を追加するためのプログラミング言語です。
動き的な機能のことを動的といいます。
プログラミング初心者は、動的ではない動作のものHTMLや、VBAなどから入る方が多いです。

これでは、業務で使うレベルには少し物足りないです。
次のステップアップの動作として、動的動作のする言語を勉強していきます。
そこで、取り組みやすいのがJavaScriptとなります。
JavaScriptを扱うためには、変数なども理解しないといけないですし、
自分が作ったサイトの構造なども理解しないといけないです。
これらを身に着けるために行うのが、動的プログラミング言語です。

最初はとっつきにくいと思いますので、 2-3行程度を書いてみてください。そして、書いたものがどんな動作をするのかコメントを残しながら、
できる範囲を広げていきましょう。

次にJavaScriptでできることは以下の通りです。動的動作が多いほど難易度が上がります。
・Webサイトに動きを付けることができる。
---当サイトでいえば、ブックマークの開閉動作など
・ユーザー操作の対応
---当サイトでは、問い合わせページで実際にやり取りができるなど。
・スマホ、デスクトップアプリ開発
---スマホ版、PC版などに合わせて最適化することができ、ユーザビリティが上がる。

など、できることが増えるとどんどん使いやすいものになります。
少しづつ調べながらレベルアップしていきましょう。

Webサイトの構築で、動的動作をするためにはどんな言語を学ぶべきか？

次にWebサイトの構築で、動的動作をさせるためにどんな言語を学ぶべきか？ですが、
これはもうJavaScriptとPHPを極めていくといいかと思います。
基本、この2つが難なく自分で調べてながらでも作れるようになるころにはなんでもできるようになります。

WordPressもいいですが、これだと細かいボタンの配置、自作で作った商品の販売など工夫がしにくいと思います。
なるべくなら、WordPressを使わずに、自分で作れるようになった方がいいです。

なんなら、当サイトのソースを隅々まで、調べて自分用のサイトに使ってみるのも面白いですね。
自分がＩＴ業界に入ったころは見本なんてものがなかったので、自分でソースコードを見て色々調べたりしました。
本当に便利になったものです。
なんなら、1つの自分が使いたいと思っている参考になるサイトのソースコードをコピペして自分用にアレンジするだけでもだいぶ様になると思いますので、失敗してもいいので自分の環境で作ってみてください。

JavaScriptの例-クリックしたときの開閉動作-

さて、ここから今回当サイトでも使っているサンプルコードの紹介です。
ここに乘っているものを調べて目的のものを作ってみてください。
注意点としては、PHPやJavaScriptなどの動的言語が対応しているサーバーを使ってくださいね。
ここが対応していないと、いくら製造してもWeb上に反映されません。
おすすめは、Xserverです。

当サイトも、Xserverで運用しているので、参考になるかと思います。
①HTML側

   
     <details>
   <summary>すべてのブックマーク</summary>
  <details>
   <summary>ブックマーク</summary>
    <p>
   　ここに色々な処理を書いていく
  </p></details>
</details>

②JavaScript側

    
    //*************************************************
//javascript.js
//版数：3.1版
//作成日：2025/12/19
//作成者：エンジニアリングサービス
//更新日：2025/12/19
//更新者：エンジニアリングサービス
//概要：共通部品
//*************************************************
$(document).ready(function(){
  $('.accordion-title').click(function(){
    $('.accordion-content').slideToggle(); // または .toggle()
  });
});

    

簡単に解説いたします。
accordion-titleが、クリックしたときに対する動作を書いています。
'.accordion-content'がクリックしたら、対象のものを開閉します。
1から9ステップ目まではヘッダーと呼ばれるものです。
ここに、処理概要や更新記録を書いていきます。
10行目から本題です。
「$(document).ready(function(){]とは、
HTMLの読み込みが完了してから、function（関数）の中のJavaScriptコードを実行してくださいという意味です。
決まりなので、ここは覚えておくとよいです。
「$('.accordion-title').click(function(){」から、アコーディオンメニューの処理を記載しています。

いかがでしょうか？このように数ステップだけでも簡単に使いやすいサイトに様変わりします。
ぜひ、挫折せず簡単なものから挑戦していきましょう。

その他のJavaScript動作事例

関数呼び出しでの、「Hello Wrold」を表示

    
    //function（関数）の定義
function sample(){
  document.write( 'Hello World!' );
}
//function（関数）の呼び出し
sample();

    

要素のクラス名を変更する指定
HTML側

    
    <section id="wrapper">
<div id="anime_test">
</div>
<br>
<div class="push-btn" onclick="clickTest();">
    PUSH
</div>
</section>

    

CSS側

    
    #wrapper {
  display: block;
  width:100%;
  text-align:center;
  margin:30px auto;
}
#anime_test{
    height: 100px;
    width: 100px;
    background-color: #366cf4;
    position: relative;
    left: 50px;
    transition: 2.5s;
    border-radius: 1.5rem;
}
#anime_test.active {
    background-color: #0435b0;
    left: calc(100% - 150px);
    border-radius: 3.5rem;
}
.anime_test-btn {
    margin-top:  10px;
    display:  inline-block;
    padding:  5px 10px;
    border: solid 1px;
    cursor:  pointer;
}
.push-btn {
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.5rem 2rem;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
  background-color: #eb6100;
}

    

js側

    
    function clickTest() {
      target = document.getElementById("anime_test");
      if (target.className == null || target.className=="") {
        target.className = "active";
      } else {
        target.className = "";
      }
    }

    

いかがでしょうか？
たった数ステップだけでも簡単に動的動作が作れるようになりますので、
面倒がらずに失敗してもいいので、色々試してみることをお勧めいたします。
そうすれば、ITの仕事がどんどん楽しくなっていきますよ！

今回も最後まで読んでいただきありがとうございました。

目次

JavaScriptとは？

Webサイトの構築で、動的動作をするためにはどんな言語を学ぶべきか？

JavaScriptの例-クリックしたときの開閉動作-

その他のJavaScript動作事例