TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでのCDATAセクションの書き方を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでのCDATAセクションの書き方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのCDATAセクションの書き方について現役エンジニアが解説しています。CDATAはXMLの仕様で、通常文字として扱うことを意味します。反対にPCDATAは解析されるべきタグなどを意味します。CDATAセクションはHTMLのコメントで囲みながら書くようになっています。

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

JavaScriptでのCDATAセクションの書き方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでのCDATAセクションの書き方について詳しく説明していくね！

大石ゆかり

お願いします！

 

 

JavaScriptの記述ルール（記述場所）とCDATA

XHTML形式のファイルで、JavaScriptを記述すると、その要素は解析されるべきものとして解釈されてしまいます。其の為、scriptの記述内容を通常の文字データと認識させるために、CDATAを利用します。

CDATAとは

そもそもCDATAとは何でしょうか？

CDATAとはXMLの中で通常文字として扱うもので、反対にPCDATAは解析されるべき文字を意味します。
PCDATAの中には”<>”や”&”などがあります。

CDATAセクションの書き方

最近のブラウザーでHTML形式のファイルのみを扱っている場合は、JavaScript内でCDATAを記載する必要は有りません。XHTML形式を利用する場合のみ必要となります。

<script type="text/javascript">
<![CDATA[
・・・実際のコードを記載・・・
]]>
</script>

また、一部のブラウザーでエラーを発生させないために、 “<![CDATA[“と”]]>”の前に”//”を付けて、コメントアウトするのが一般的になります。

<script type="text/javascript">
//<![CDATA[
・・・実際のコードを記載・・・
//]]>
</script>

 

[PR] コーディングで副業する方法とは

実際に書いてみよう（サンプルコードなど）

<script type="text/javascript">
//<![CDATA[
document.write("<p>CDTA TEST!!<p>");
//]]>
</script>
document.write("<p>JavaScript テスト</p>");

 

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptのconfirmメソッドで作成するダイアログの位置を変更する方法を現役エンジニアが解説【初

JavaScriptのconfirmメソッドで作成するダイアログの位置を変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを...
JavaScript

かっこよく見せたい！jQueryでスライドショーを設置する方法【初心者向け】

JavaScriptのライブラリであるjQueryでスライドショーを設置する方法を紹介します。 コーポレートサイトやECサイトなどのトップに、取り扱ってい...
JavaScript

JavaScriptでソケット通信（WebSocket）する方法を現役エンジニアが解説【初心者向け】

JavaScriptでソケット通信（WebSocket）する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...
JavaScript

JavaScriptにおけるHelloworldの出力方法について現役エンジニアが解説【初心者向け】

JavaScriptにおけるHelloworldの出力方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...
JavaScript

JavaScriptのonchangeの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのonchangeの使い方について解説します。 イベント発生を処理することができるので、実際のコードをもとに解説していきますので、理解...
JavaScript

JavaScriptでindexOfメソッドを使って文字列を検索する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでindexOfを使う方法について、テックアカデミーのメン...
JavaScript

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

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

JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。 実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。 目次JavaScriptの記述ルール（記述場所）とCDATACDATAセクションの書き方実際に書いてみよう（サンプルコードなど）筆者プロフィール そもそも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

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。   目次 linkタグとscriptタグ linkタグの使い方 scriptタグ   【動画での解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。 また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。   一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。 しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。 つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。   さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。 多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。 例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。   その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。   linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。   [PR] コーディングで副業する方法とはlinkタグの使い方 ここからは具体的な使い方について例をみていきます。 まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。 h1  { font-size: 60px;  color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。   そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！   続いて、ファビコンの例も見てみましょう。 ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。   実際のWebサイトでは下のように設定されています。   スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。   大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？ 田島悠介 たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。 大石ゆかり タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？ 田島悠介 タグに直接適用したCSSの方が優先されるよ。 大石ゆかり OK！linkタグ覚えました！   scriptタグ 続いてscriptタグです。 Webページには2種類のページがあります。 １つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。 動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。 このJavaScriptを記述する際に利用するタグが、scriptタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。 このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。   今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。 「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。 外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？ 田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。 大石ゆかり プログラミング言語って何だか難しそう。 田島悠介 コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

jQueryのプラグイン「FullCalendar」を使ってカレンダーを表示する方法【初心者向け】

JavaScriptのライブラリであるjQueryでカレンダーを表示する方法を紹介します。 今回は、FullCalendarというjQueryプラグインを利用してカレンダーを表示しているので、ぜひ参考にしてみてください。 jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   カレンダープラグインFullCalendarの使い方 カレンダーを実装できるライブラリというのは実は多くありますが、今回は「Full Calendar」というプラグインを実装してみます。このプラグインは標準的なカレンダーを実装することができます。 基本的な使い方を説明しましょう。 ファイルを公式サイトからダウンロードしてHTMLに読み込ませましょう。 上記ページの「Latest」からファイル一式をダウンロードして内部から以下5つのファイルを取り出しましょう。 fullcalender.min.css moment.min.js jquery-ui.custom.min.js fullcalender.min.js ja.js 以下の順番でHTMLに読み込みましょう。 「moment.min.js」をjQueryより先に読み込むようにしてください。   大石ゆかり FullCalendarはカレンダーに関するプラグインなんですか？ 田島悠介 googleカレンダーみたいな、jQueryで作成されたカレンダーなんだ。 大石ゆかり 予定表とかスケジュールとかWebページにあったら、良いですね。 田島悠介 そうそう。期間のスケジュールなんかも表示させることが出来るんだよ。さっそく基本のカレンダーを表示させてみよう！   HTML <div id="calendar"></div> JavaScript <script> $('#calendar').fullCalendar(); </script> 上記記述で、基本的なカレンダーは動きます。   実際に使ってみよう 次にあるHTMLをコピーしてWebブラウザーでみてください。 「sample.html」というファイルと「js」ディレクトリの下に先ほど取り出した5つのファイルがある状態です。   HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="fullcalendar.min.css" type="text/css"> <script src="moment.min.js" type="text/javascript"></script> 　　　　　　　　<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="jquery-ui.custom.min.js" type="text/javascript"></script> <script src="fullcalendar.min.js" type="text/javascript"></script> <script src="ja.js" type="text/javascript"></script> <title>jQuery</title> </head> <body>
JavaScript

JavaScriptのscriptタグの書き方を現役エンジニアが解説【初心者向け】

JavaScriptのscriptタグの書き方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのscriptタグの書き方について詳しく説明していくね！ 大石ゆかり お願いします！   scriptタグとは scriptタグとは、javaScriptやVBscriptなどのスクリプトをHTMLファイル内に埋め込んだり外部のスクリプトを読み込んだりするためにために使用するタグです。重要な属性として、typeとsrcがあります。 typeはどのタイプのスクリプトを使用するかを指定します。HTML5であれば、デフォルトでtype=”text/javascript”となっており省略してもJavaScriptを使用できます。それ以前のHTMLのバージョンやJavaScript以外を使用する場合は必ず設定する必要があります。 <script type="text/javascript">処理</script> srcは、外部のスクリプトを読み込む場合に設定します。別のフォルダーにあるJavaScriptファイルや外部のファイルを読み込んで使用する場合に使用します。srcには使用したいJavaScriptファイルへのパスやURLを設定します。 <script src="sample.js"></script> そのほかに重要な属性として、async/deferがあります。この２つは読み込みを非同期にすることができます。HTMLの読み込みと並行してjavascriptの読み込みを行えるので処理にかかる時間を軽減できます。asyncはHTMLの読み込みとjavascriptの読み込み・実行を非同期で平行して行います。 <script async src="sample.js"></script> deferはHTMLの読み込みが終わった後で、JavaScriptの読み込み・実行を非同期で行います。 <script defer src="sample.js"></script>   scriptタグの書き方 scriptタグは、HTML5以前のバージョンであればtype=”text/javascript”とtype属性を設定します。HTML5では省略可能です。 <script>alert("hello world");</script> 外部ファイルを読み込む場合には、src属性を設定します。 <script src="sample.js"></script>   [PR] コーディングで副業する方法とは実際に書いてみよう それでは実際に書いてみます。今回は、hello.jsを作成して、それを読み込んで実行してみます。ファイル構成は以下の通りです。 ├── index.html └── hello.js   hello.jsでは以下のコードを書きます。 alert("hello world"); index.htmlでhello.jsを読み込みます。 <script src="hello.js"></script> アラートが出れば成功です。 以上で解説を終わります。 筆者プロフィール メンター金成さん 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptで関数を使う方法【初心者向け】

JavaScriptの使い方を初心者向けに紹介した記事です。 今回は、JavaScriptで関数を使う方法にについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 関数を使うことによって、プログラムが不必要に長くなることを防いだり、同じことを何度も記述する必要がなくなったりします。 それに伴ってプログラムの見通しがよくなり、より複雑なプログラムを書けるようにもなりますよ。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。 本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次JavaScriptの記述ルール（記述場所）とCDATACDATAセクションの書き方実際に書いてみよう（サンプルコードなど）筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 今回の記事の内容は動画でもご覧いただけます。 記事の最後にありますので、動画の解説のほうがわかりやすいという方はご覧ください。   関数とは 関数とは、繰り返し使う処理をまとめて書いておき、プログラムの好きな位置で実行できるというものです。 JavaScriptのプログラミングに慣れてきて、数十～数百行くらい書くようになると、「1つのプログラムの中で全く同じ記述を繰り返し書いていた」といったことがあります。 同じ記述を繰り返す状態は、「プログラムが冗長である」と言い、望ましくありません。 プログラムを読み返す時、読みづらくなりがちです。 そのため、繰り返し使う処理をまとめて書いておき、プログラムの好きな位置で実行できる「関数」を使います。 まとめて書くことができるため、プログラムの見通しがよくなります。 また、プログラムを修正する時、修正漏れを防ぐことができます。 繰り返し使う処理に対して関数を使うことで様々なメリットがあります。   大石ゆかり 関数って自分で作ることもできるんですか？ 田島悠介 そうなんだ。最初からJavaScriptに入っている関数だけじゃなくて、それらを組み合わせたりして、自分で作成することもできるんだよ。ユーザーが定義するのでユーザー定義関数とも言われてるよ。 大石ゆかり 定義しておくと、後から使えて便利そうですね！ 田島悠介 その通り！関数も変数と同じように名前を付けて定義するんだ。さっそく関数を書いてみよう！   関数の定義 では、関数の定義の仕方についてみていきましょう。 ＜関数：基本のかたち＞ 関数を定義するときにまず必要となってくるのが、function（関数の意）です。 それに続けて関数につける名前を書き、{  }のなかに処理を書きます。 一番シンプルに書くとこのようになります。 <script> function 関数名( ) { 　　処理 } </script> ＜関数：引数や戻り値を入れて＞ さらに、関数に対して引数（ひきすう）を渡したい場合、(  )のなかに引数名を入れていきます。 引数はいくつ入れてもよく、必要な分だけ「,」で区切って入れます。 これによって、同じ処理をするにしても、渡した引数に応じて処理をする内容を少しずつ変えることができます。 また、この関数が何らかの結果を返すようにしたい場合は、returnを使います。 その後に関数のなかで処理した結果である戻り値（返り値）というのを渡してあげれば、関数を呼び出している元に渡って、関数の処理結果というのを改めて呼び出し元から使えるようになります。 「処理が結果を返す」というイメージが沸かない場合は、人に何か頼む場面を想像してみましょう。 例えば、「子どもに買い物を頼む」という処理をした場合、買った物やお釣りという結果が返ってくるでしょう。 一方、「封筒をポストに入れてくるように頼む」という処理をした場合は、返ってくる結果はありません。 (無事にやってくれたようだ、というのが結果ではありますが、受け取るたぐいの結果ではないですね。) 例にように、関数には処理の内容を変えるための「引数」と処理の結果を返すための「戻り値」があり、以下のように書きます。 <script> function 関数名(引数1,引数2,…) { 処理 return 戻り値; } </script>   [PR] コーディングで副業する方法とは関数を使って実際にプログラムを書いてみよう ここまで、関数とはどのようなものかを説明しました。 ここからは実際に関数を使ってプログラムを書いてみましょう。 関数を使わずに書く場合と対比しながら説明していきますので、よく見比べてみてくださいね。 まずは関数を使わず、変数だけで書いてみよう まずは、関数を使わず書くのがいかに大変かを実感するために、変数のみを使って書いてみましょう。 変数をmoneyと定義し、変数moneyに入る値に応じて、document.writeで出力する文字列を「お金持ち」「普通」「貧乏」の3通りにわけるという処理を書いてみます。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> const money = "○○○○"; // 「1000」や「5000」などの数値を入れる
JavaScript

jQueryのclickメソッドを使ってクリック時の処理を設定する方法

JavaScriptのライブラリであるjQueryのclickメソッドを使った処理の書き方を解説しています。 ボタンを押した時などclickメソッドはjQueryの中でもよく使うものなので、今のうちに習得しておきましょう。 jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   clickメソッドとは jqueryのメソッドは通常以下のようなfunction内に記述されていきます。 $(function(){ 　　//処理の内容　 }); しかしこのプログラムだと、ページがリロードした瞬間にコードが実行（発火とも言います）されてしまうため、jQueryの本来の目的である、ページを動的に変更するという目的が達成できません。 そのためjQueryには発火するタイミングを指定するメソッドが用意されています。clickメソッドは、指定したボタンが押された時に呼び出される処理を作ることができます。   大石ゆかり 田島メンター！jQueryで要素を取得できるようになったので、取得した要素にイベントを設定したいのですが、jQueryで出来ますか？ 田島悠介 もちろん！とりあえずclickイベントを設定してみよう！ 大石ゆかり ボタンクリックなど、クリックイベントは基本ですよね。 田島悠介 clickメソッドを使って書くんだよ。さっそく見てみよう！   clickメソッドの書き方 clickメソッドの書き方は以下の通りです。 $(function(){ $(“セレクタ”).click(function(){ //処理の内容 }); }); セレクタでボタンを指定した後に、clickメソッドを呼びだします。 clickメソッドの引数でfunctionを呼び出し、functionの中身が実行されます。   [PR] コーディングで副業する方法とは実際に書いてみよう それではclickメソッドを使用して簡単な処理を書いていきましょう。 ボタンをクリックすると文字が大きくなる 今回はボタンをクリックすると、文字が大きくなるというプログラムを書いていきます。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function() { $("button").click(function() { $(".big").css("font-size", "50px");
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでのCDATAセクションの書き方を現役エンジニアが解説【初心者向け】