TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLコーディングにおけるライブラリを現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLコーディングにおけるライブラリを現役エンジニアが解説【初心者向け】

初心者向けにHTMLコーディングにおけるライブラリについて解説しています。ライブラリはよく使われる機能を再利用のできる形でまとめたものです。ライブラリを使ったコーディングの例をサンプルコードで見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLコーディングにおけるライブラリの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

HTMLコーディングにおけるライブラリについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

ライブラリとは

ライブラリとは、汎用性の高いプログラムの集合体のことです。

用語として現在は「フレームワーク」という言葉が浸透したものの、かつてフレームワークは、「ライブラリ」と呼ばれていた専門用語です。

これから必要になる機能を独自に開発や実装しなくても、これまで開発者によって、開発された機能のデータの集合体が提供されています。

 

[PR] Webデザインで副業する方法とは

ライブラリが必要なプログラミングとは

目的や目標を実現するまでの工数や工程が多く、期間も定められている場合などには、「ライブラリ」が必要でした。

 

Javascript、jQueryで使うライブラリ

JavaScriptの代表的なライブラリがjQueryでした。

このjQueryから、さらに以前よりも画面に関する多くの機能が集約されて提供されています。

 

ライブラリを使ってプログラミングしてみよう

よく再利用されるユーザーインターフェースの機能について、サンプルコードをもとに解説していきましょう。

 

jQueryの読み込み

<head>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

まず、headタグの終了タグの直前に一度だけjQueryの読み込みを記述します。もしくは、bodyタグの終了タグの直前に記述します。

 

<body>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</body>

 

jQueryを使用してから、ハンバーガーメニューの処理を記述します。

 

jQueryありのHTML

<head>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>


  $(document).ready(function () {

    $("#menu_button").click(function () {

      $(".menu_toggle").slideToggle();

    });

  });

  </script>


</head>

<body>

  <p id="menu_button">ボタン</p>

  <ul class="menu_toggle">

    <li>メニュー</li>

    <li>メニュー</li>

    <li>メニュー</li>

    <li>メニュー</li>

  </ul>  

</body>

 

CSS

.menu_toggle {
   display: none;
}

 

動作結果

See the Pen
2020-04-23-sample07 by YOHEI INAI (@yohei_inai)
on CodePen.

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLコーディングにおけるライブラリの使い方がよく分かったので良かったです！

田島悠介

ゆかりちゃん、分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLで複数のチェックボックスを横並びに配置する方法を現役エンジニアが解説【初心者向け】

HTMLで複数のチェックボックスを横並びに配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLの仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】

HTMLの仕様に関連するW3Cについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HT...
HTML

HTMLで強調タグと区切り線を使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの「強調タグ」と「区切り線」について解説します。...
HTML

HTMLで文字を太字・イタリック表示する方法を現役エンジニアが解説【初心者向け】

HTMLで文字を太字・イタリック表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】

HTMLで埋め込み動画の音声を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTMLのinput要素とrequired属性の使い方を現役デザイナーが解説【初心者向け】

HTMLのinput要素とrequired属性の使い方について解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読...
HTML

あわせてよく読まれている記事

非同期処理を覚える！jQueryでajaxを利用する方法【初心者向け】

JavaScriptのライブラリであるjQueryでのAjaxの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。 非同期処理によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！Ajaxとは何でしょうか？ 田島悠介 ページ全体を読み直さずに、ページの一部を書き換える仕組みのことだよ。 大石ゆかり そういうWebアプリ多いですよねー。 田島悠介 少し前から当たり前に使われるようになってるよね。さっそくAjaxを書いてみよう！   非同期処理とは 別の記事にて説明をしておりますので、こちらを先にご覧になることをお勧めします。 https://techacademy.jp/magazine/21141   Ajaxとは Ajax（エイジャックス）とは、「Asynchronous JavaScript And XML」の略で JavaScriptやJavaScriptのフレームワークもしくはライブラリを使用して行われる非同期処理のことです。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、Ajaxを使用すればリロードせずにページの内容を変更できます。 そのためサーバーの負荷軽減やリロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。 Ajaxが使用されているページの代表例がGoogle Mapです。 地図をドラッグするときに、ページ外の地図をリロードなしで表示できます。 JavaScriptのフレームワークはいくつかありますが、その中でも本記事ではjQueryを利用しAjaxの実装を行ってみます。   [PR] Webデザインで副業する方法とはjQueryでのAjaxの書き方 Ajaxの基本となる書き方を紹介していきます。 jQueryでは$.ajaxを利用することでAjaxを使えます。 以下のようにscriptタグでjQueryのライブラリを読み込んでおき、さらにべつのscriptタグで以下のように処理を記述します。 <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $( function() { $.ajax( { //実行する処理。 } ); } ); </script>   jQueryでの$.ajaxを実際に書いてみよう それでは実際に処理を書いてみましょう。今回はローカルにあるファイルをリロードなしで読み込んでみましょう。 ここで注意ですがChromeではローカルファイルの読み込みができないのでChrome以外のブラウザで実行するようにしてください。 //sample.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $(function()
JavaScript

jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説

今回は、jQueryのAjaxでPOST送信してPHPで受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 jQueryのAjaxでPOST送信してPHPで受け取る方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Ajaxとは AjaxでPOST送信する jQuery（送信側）の記述方法 PHP（受信側）の記述方法 まとめ   Ajaxとは AjaxとはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。 Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。 例えば、ブラウザ上に表示した一覧表の内容を更新して、データベースに登録した内容をまた一覧表に反映させる時、HTMLファイルの表部分の表示だけ更新する、ということができるようになります。   [PR] Webデザインで副業する方法とはAjaxでPOST送信する Ajaxを使ってPOST送信するには、jQuery側でPOST送信するデータの定義を記述して、PHP側で受け取り側の記述をします。 （POST送信とはブラウザの入力フォームなどの内容をサーバ（PHP）に送る送信方法の一つです。）   表示結果   index.htmlのコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title> </head> <body> <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p> <div id="return"></div> <script src="./main.js"></script> </body> </html>   解説 1行目の<!DOCTYPE html>では、HTML5で作成することを宣言しています。 2行目の<html>では、HTML文書の実装を開始することを意味しています。 3行目の<head>では、head要素の開始を意味しています。 4行目の<meta charset=”UTF-8″>では、UTF-8という文字コードで実装することを意味しています。   5行目の<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>では、jQueryのコードを読み込んでいます。 今回、Googleが用意したCDNを利用しています。 jQueryファウンデーションが用意しているCDNの方が、最新バージョンをいち早く確実に利用することができるメリットがありますが、CDNによってはサーバが一時的に停止していることがあるので、GoogleのCDNを利用するようにしています。   6行目の<title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>では、検索結果やブラウザのタブに表示されるタイトルを指定しています。 7行目の</head>ではhead要素が終了することを意味しています。 8行目の<body>では、body要素が開始することを意味しています。   9行目の<p>IDを入力 : <input type=”text” id=”main” /><button id=”send”>送信</button></p>では、IDを入力するための入力フォームを用意しています。 id=”main”とid=”send”は、それぞれJavaScriptが実装されたmain.jsで利用されるため、要素名を覚えておいていただくと理解しやすいです。   10行目の<div id=”return”></div>も、main.jsで利用される要素です。 最終的にこの位置に、main.jsで用意されたHTMLが追加表示されます。   11行目の<script src=”./main.js”></script>では、JavaScriptのコードを用意しているファイルを読み込んでいます。 必ず5行目にあるように、jQueryファイルを先に読み込んで、そのあとJavaScriptファイルを読み込んでいただくとスムーズです。   12行目の</body>では、body要素が終了することを意味しています。 13行目の</html>では、HTML文章が終了することを意味しています。   jQuery（送信側）の記述方法 jQuery ではPHPにPOSTするデータの定義と、送信結果を受け取ったあとのアクションを記述します。 記述の仕方は$.ajaxで記述する場合と、$.postメソッドを使用して記述する場合の2通りで紹介します。   $.ajaxで記述する方法 $.ajaxを利用して実装するコードを見ていきましょう。 サンプルコード（main.js）   $(function(){ $("#send").on("click", function(event){ let id = $("#main").val();
PHP

JavaScriptで別ファイルの関数を呼び出す方法を現役エンジニアが解説【初心者向け】

JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。 実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 別ファイルの関数を呼び出す方法について詳しく説明していくね！ 大石ゆかり お願いします！   別ファイルを読み込む方法 HTMLからJavaScriptを読み込む場合、scriptタグを利用して読み込みます。 scriptタグを実装する位置は2種類あります。 headタグに実装する場合 bodyタグの終了タグの直前に実装する場合   headタグに実装する場合 headタグに実装する場合は、JavaScriptをbodyタグ内で実行する場合です。 ここでは、jQueryをheadタグ内で読み込むことで、bodyタグ内のJavaScriptでjQueryを利用した処理を可能にしています。 Vue.jsなどのフロントエンドフレームワークを利用する際には、headタグ内でVueファイルを読み込み、body内でVueの処理を呼び出す実装行うこともあります。 注意点として、headタグに読み込み実装すると、headタグ内のJavaScriptを読み込み終わってからHTMLの表示が始まるため、表示速度が遅くなるというデメリットもあります。 <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> // スクリプトを<body>内で実行する </script>   bodyタグの終了タグの直前に実装する場合 現在主流な方法としては、bodyタグの終了タグの直前にscriptタグを実装する方法です。 bodyタグの終了タグの直前にscriptタグを実装する際、複数のファイルを利用することがあります。 複数のJavaScriptファイルを呼び出す場合、先にjQueryなどのライブラリを読み込んでおくことで、他のファイルでjQueryが利用されていたときに、エラーなく処理できます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </body> </html>   別ファイルの関数を呼び出す方法 head内でJavaScriptファイルを2つ呼び出して、関数を呼び出してみます。 HTMLサンプルコード <html> <head> <meta charset="utf-8" /> <title></title> <script src="sample1.js"></script> <script src="sample2.js"></script> </head> <body> <input type="button" id="b1" value="ボタン1" onclick="sample1()"> </body> </html> sample1.jsサンプルコード function sample1() {     sample2(); } sample2.jsサンプルコード function sample2() {  
JavaScript

今さら聞けない！jQueryとは｜現役エンジニアが徹底解説【初心者向け】

Webサイト制作をしている人は一度は聞いたことがある言葉、jQuery。 jQueryはWebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は習得が必須と言えるでしょう。 今回はjQueryでどんなことができるのかについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 記事の中で実際にjQueryでアニメーションを作る書き方も紹介しているので、初心者の方でもすぐに実践できるようになっています。ぜひ書きながら覚えてみてください。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり jQueryというのは、何でしょうか？ 田島悠介 JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリなんだ。 大石ゆかり 新しい書き方を覚えるのは、少し面倒じゃないですか？ 田島悠介 そうだね！ただ、一番のメリットはブラウザの互換性なんだよね。異なるブラウザでJavaScriptが微妙に違ったりするんだ。では、jQueryで出来ることを見てみよう！ jQueryとは jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われています。 jQueryのおかげで、プログラミングの初心者でも、フロントエンド開発に参加しやすくなりました。jQueryは初心者にやさしい、とても有用なJavaScriptライブラリです。 jQueryでできること jQueryの大きな特徴は ブラウザの違いを意識せずに済む HTMLのDOM操作が簡単にできる Ajax処理が簡単に記述できる の3つです。詳しく解説していきます。 1.ブラウザの違いを意識せずに済む JavaScriptは、各ブラウザに搭載されたエンジンにより実行されます。そのため、 Chrome FireFox InternetExproler Safari 等で、それぞれ微妙に対応可能なメソッドが違ったり、記法が異なります。 しかし、jQueryはこのような膨大なブラウザごとの記述差異を、自動的に吸収してくれるため、ユーザーはほとんどブラウザの違いを意識せずにプログラミングができます。 2.HTMLのDOM操作が簡単にできる jQueryの主な用途は、HTML部品の操作です。（HTMLの部品を、DOMと呼びます。） DOM操作の例 テキストボックスの中身を取得したり、変更する 画面部品の表示をボタン一つで非表示にしたり、再表示させる CSSをユーザー操作に合わせて変更する jQueryでは、これらの操作が簡単に実現可能です。 また、「HTMLやCSSのコーディングはできるけど、JavaScriptはわからない」というエンジニアがリリース当時は多かったため、CSSのセレクタ記法によりHTML部品を操作できるように設計されています。 例えば、テキストボックスの中身を取得するコードは、以下で実現できます。 HTML <input type="text" id="tBox" class="font-tbox" /> jQuery ( JavaScript ) //方法１ // CSSのセレクタ記法により、idが「tBox」のHTML部品を操作できる。 $("#tBox").val(); //方法２ // CSSのセレクタ記法により、「font-tbox」のClassを持つHTML部品を操作できる。 $(".font-tbox").val(); CSSセレクタ記法とは、このようにHTMLが持つ情報に「#」や「.」を指定して、HTMLファイルからDOMを検索して取得するための記法です。 3.Ajax処理が簡単に記述できる Ajaxとは、Asynchronous JavaScript And XML の略です。直訳すると、「非同期（で動作する）JavaScript と XML」です。 （現在はデータのやり取りにXMLではなくJSONを使うため、XMLに特に意味はありませんが、Javascriptからのサーバー通信にはJSON形式データ利用時でも、XMLHttpRequest(XHR)オブジェクトを利用します。) 通常、HTMLの画面からサーバーとやり取りする際には、「submit処理」（お問い合わせフォームの送信ボタンを押した場合、等）を行い、サーバーにデータを投げ、応答を待ってから別のHTML画面全体を読込みなおす・・・といった処理が昔は主流でした。 ところが、最近は会員登録サイトにidを入力するだけで、テキストボックスの上部に「既に登録済みのIDです」などの表示が出てきて、「すぐにそんなことがわかるのか」と驚かれる方も多いと思います。 これは、Ajaxという非同期通信技術により実現されています。Ajaxは、基本的には画面表示中のHTMLページとは無関係に、裏方のJavascriptだけでサーバー通信してしまう技術です。そのため、クライアントとサーバーが通信中であってもHTML画面をユーザーが操作し続けることができます。 この技術の発展により、SPA（Single Page Application）という、画面遷移せずにインタラクティブな多目的操作ができるアプリケーションを提供する方式もずいぶん増えてきました。 Ajax技術の普及により、ユーザーがサーバーと通信（キャッチボール）する際の方式が、2通り選択できるようになりました。 HTMLからのsubmit処理によりサーバー通信する方式（同期処理方式） AjaxによりJavaScriptからサーバー通信する方式（非同期処理方式） jQueryは、このAjax処理を簡単に記述できるように設計されています。 [PR] Webデザインで副業する方法とはjQueryでできないこと jQueryは、基本的にはHTMLのDOM操作とAjax処理を簡単に記述するためのものです。そのため、JavaScript内部における処理は、基本的には通常のJavaScriptコードで記述します。 例えば、以下のような場合です。 変数に格納した数値同士の足し算 配列データの操作 オブジェクト型データの操作 JavaScript内のループ処理 jQueryの読み込み方法 jQueryを利用する為には、開発しているHTMLの中にjQueryを読み込む必要があります。読み込みをする方法は、2つありますのでそれぞれ解説していきます。 1.CDNを利用する方法 HTMLのbodyタグ内の最下部に、以下のコードを記述するだけでOKです。 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> CDNとは、Contents Delivery Network の略で、サーバー上に公開されたプログラムをユーザーが自由に使うことができます。 2.jQueryのライブラリをダウンロードして使う方法 公式サイトのDownloadページからjQueryのソースコードをダウンロード可能です。 https://jquery.com/download/ 「Download the compressed, production jQuery 3.x.x」のリンクを右クリックして、「名前をつけてリンク先を保存」を選択すると、「jquery-3.4.1.min.js」がダウンロードできます。 ダウンロードしたJSファイルを、他のJSファイル同様にHTMLファイル上で読み込ませればOKです。 jQueryの書き方 今回の記事では、jQueryを使ったDOM操作の書き方をご紹介します。 手順は、以下です。 jQueryから、HTMLのDOMを取得する DOM種別ごとに決められたjQueryのメソッドを実行する 1.jQueryから、HTMLのDOMを取得する 基本的な構文は、以下です。 $(" セレクタ "); セレクタ部分には、CSSセレクタと全く同じ記法により、取得したいHTML要素の検索条件を指定します。例えば以下のようなHTML要素をjQueryで取得して操作したい場合、 HTML テキストボックス <input type="text" id="tBox" class="font-main" /> JavaScriptコードでは以下のようにjQueryからDOMを取得します。 JavaScript // DOMのidをキーにする場合 $("#tBox); // DOMのclass名をキーにする場合 $(".font-main"); 非常に簡単ですね。 「$」記号と括弧を記載して、その中に「#」や「.」を記載してから、HTMLファイルに記載されているidやclass名を指定します。そうすることでjQueryがJavaScript側からHTMLファイルを検索してタグ情報を取得し、JavaScript側で取得したDOMを操作するためのjQueryオブジェクトを作ってくれます。 2.DOMごとに決められたjQueryのメソッドを実行する さて、DOMを取得してjQueryで扱うためのオブジェクト生成をしただけでは、何も画面は変化しません。jQueryオブジェクトから、DOM種別ごとに決められたメソッドを指定する必要があります。 例えば、テキストボックスの場合は、val() の利用により、テキストボックス内に表示させる文字を指定可能です。 valメソッドの利用例を見てみましょう。 JavaScript $("#tBox").val("こんにちは！jQueryです！"); 実行結果   非常に簡単ですね。値を取得したい場合は、この val() メソッドを使うことが多いですね。また、値をセットする場合は、val() の引数に値をセットすればOKです。 実践的サンプルプログラム ボタンを押すと、あらかじめ用意しておいたメッセージエリアを表示できるプログラムです。 この技術を応用することにより、リッチなデザインのサイトや、SPA（シングルページアプリケーション）が構築できます。 まずは画面イメージを見ていきましょう。 ボタンを押す前（初期表示） ボタンを押した後 「jQueryで表示」のボタンを押すと、メッセージエリアが表示されます。 「表示をかくす」ボタンを押下すると、表示領域が消えて、元に戻ります。 次に、具体的なプログラムを見てみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
JavaScript

JavaScriptでドロップダウンメニューを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでドロップダウンメニューを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ドロップダウンメニューを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ドロップダウンメニューとは 通常のメニューをクリックしたり、メニューにマウスをのせた時に再度メニューが下にドロップして、より細かいメニューが出てくるものです。 ドロップダウンとは、ドロップ（落とす）してダウン（下げ）させる、つまりメニューが上から落ちてくるイメージで表現されたものです。 ドロップダウンを別の言い方で「プルダウン」（プル＝引く）ともいいます。 上記の画像にマウスを合わせると「TechAcademyマガジン」サイトの上部にある項目からドロップダウンメニューが表示される様子がわかります。 ※ドロップダウンメニューを、メニュー以外で部品として使えるようにしたものが「ドロップダウンリスト」（またはプルダウンリスト）です。ドロップダウンリストは要素の右端にある「▼」などのボタンから、値を選択するリストを表示させます。また、値を編集できるドロップダウンリストをコンボボックスといいます。 ※HTML標準である部品としてのドロップダウンメニュー（セレクトボックス）については、解説記事「HTMLでドロップダウンメニューを表示する方法【初心者向け】」をご覧ください。 See the Pen js_ddmenu(non_css) by mentor-inoue-y (@mentor-inoue-y) on CodePen.   メニューの項目を作る（HTML） メニューを作成するには、まず骨組みとなる項目をHTMLで作ります。 ulタグを使ったリストに各項目をliタグで作成します。 ※ulタグとは、項目を並べたリストを作るためのHTML要素です。CSSによるスタイルを設定していなければ各項目の先頭にリストマーク「・」が付きます。 ※liタグとは、ulタグの中に入れるそれぞれの項目です。 See the Pen js_ddmenu_jQuery by mentor-inoue-y (@mentor-inoue-y) on CodePen. サンプルコード 以下のHTMLコードは、「はじめての方へ」からはじまる3つの項目を持つメニューを作る例です。 ソースコード <ul class="nav"> <li><a href="#">はじめての方へ</a> <ul> <li><a href="#">おすすめ</a></li> <li><a href="#">料金プラン</a></li>
JavaScript

動きを簡単に実装する！jQuery UIを利用する方法【初心者向け】

JavaScriptのライブラリであるjQueryのjQuery UIを利用する方法を解説しています。 jQuery UIという動きを簡単に実装できる便利なツールの使い方を紹介しているので、jQueryを学習している方はぜひ参考にしてみてください。いろんな動きを手軽に表現することができるはずです。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   jQuery UIとは jQuery UIとは、jQueryの便利な機能をまとめたツールのことです。 jQueryは、もともJavaScriptを使いやすくするためのライブラリでしたが、そのjQueryをさらにパッケージ化したものなので非常に使いやすいものになっています。 例えば、日付を入力する際にDatePickerを使ったり、入力の自動補完であったり、使うユーザーにとって嬉しい機能を簡単に実装することが出来ます。   大石ゆかり jQuery UIというのは何でしょうか？ 田島悠介 ユーザーインターフェースに特化したjQueryのライブラリのことなんだよ。 大石ゆかり ユーザーインターフェース(UI)というのは、デザイン的なことですか？ 田島悠介 そうそう。操作や、部品的な素材、表示効果などに特化しているんだ。さっそくjQuery UIを実際に使用してみよう！   jQuery UIを利用する方法 jQuery UIの導入自体は二行で終了します。 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 一行目はjQueryを読み込むためのコードです。二行目がjQuery UIを読み込むためのコードです。 jQuery　UIはjQueryを使用して書かれているので順番を間違えるとエラーが出てしまうので気をつけて下さい。   [PR] Webデザインで副業する方法とは実際にjQuery UIを使用してドラッグしてみる。 div要素を自由にドラッグできるコードを書いてみます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $(function() { $("#div1").draggable();
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLコーディングにおけるライブラリを現役エンジニアが解説【初心者向け】