TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript 要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】
icon
icon
JavaScript

要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】

初心者向けにJavaScriptでinnerHTMLの使い方について解説しています。html要素の中身を変更したい時に便利な関数です。実際にプログラムを書いて、動きを確認することができるので、ぜひ書き方を参考にしてみてください。

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

JavaScriptのinnerHTMLの使い方について解説しています。

html要素の中身を変えるメソッドを実際にサンプルプログラムを書きながら説明しているので、参考にしてみてください。

目次

 

大石ゆかり

田島メンター！

JavaScriptでHTMLを書き換えるって、どういうことなんですか・・・？

田島悠介

はじめはピンと来ないかもしれないね。

JavaScriptでの処理の結果を画面に表示するときに、HTMLを書き換える必要があるんだ。

大石ゆかり

なんだか難しそうです・・・

田島悠介

例を見ながら説明していくね！

 

innerHTMLとは

innerHTMLとは、html要素の中身を変更できるJavaScriptの便利な機能です。

html要素の中身を変更するということがどういうことかについて、プログラムを交えて考えていきます。

 

例えば、画面上に「楽しくプログラムを学習できる！」という文字があります。

 

 

「クリックすれば」ボタンをクリックすると、楽しくプログラムを学習できる！のテキスト部分が、リンク付きのテックアカデミーキャンペーン中！に変化します。

このようにhtml要素の中身を変化させることができるのが、innerHTMLです。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

innerHTMLの書き方

innerHTMLの書き方は次のとおりです。

elementには、innerHTMLで指定する要素名(後に出てくる例の id = “~~” の部分です)を記載します。

element.innerHTML;

 

変数に指定要素のhtmlコードを代入

次のように書くことで、変数sample1に対して、指定した要素elementの全子孫HTMLコードを代入します。

var sample1 = element.innerHTML;

 

指定要素に変数の値を代入

次のように書くことで、element要素の内容を削除した後、変数sample2の内容をelement要素に表示する事が可能です。

element.innerHTML = sample2;

 

指定要素を空にする

つまり、””を代入することで、element要素の内容を空にすることも可能です。

element.innerHTML = “”;

 

innerHTMLを使って実際にプログラムを書いてみよう

実際にinnerHTMLを利用して内容を書き換えてみます。

次のプログラムが基本となります。

 

基本プログラム(HTML)

<html>
    <body>
        <div id="txt">
            <div id="txt1"> テキスト1 </div>
            <span id="txt2"> テキスト2 </span>
        </div>
            <p>---------------------</p>
        <div id="innerHTMLtxt"></div>
    </body>
</html>

 

実行結果（基本プログラム）

テキスト1
テキスト2
---------------------

 

別のコンテンツと置き換える

それでは、基本プログラム(HTML)に次のJavaScriptを追記して実行してみます。

JavaScriptでは、innerHTMLtxtに対して、“テックアカデミーキャンペーン中！”を代入しています。

これによって、実行結果（基本プログラム）で表示されていた内容の下側の、<div id=”innerHTMLtxt”></div>に対して、テックアカデミーキャンペーン中！が入ります。

 

追加プログラム1(JavaScript)

<script>
    innerHTMLtxt.innerHTML="テックアカデミーキャンペーン中！";
</script>

 

実行結果1

テキスト1
テキスト2

---------------------

テックアカデミーキャンペーン中！

 

“”を代入する

それでは、基本プログラム(HTML)に次のJavaScriptを追記して実行してみます。

JavaScriptでは、txtに対して、“”を代入しています。

つまり、txt要素の全子孫に対して””という空っぽの値を代入することになります。

結果的に、txt要素は削除された状態で、txt要素から外れたp要素の<p>———————</p>のみが実行結果に反映され、———————が表示されます。

 

追加プログラム2(JavaScript)

<script>
    txt.innerHTML="";
</script>

 

実行結果2

---------------------

 

動作確認をしてみましょう

次のコードで、先程の追加プログラム1と追加プログラム2の両方を実装しています。

そのため、表示結果は追加プログラム1と2の両方が適用された結果となっています。

 

以上、innerHTMLの使い方を実際にプログラムを書いて説明しました。

innerHTMLの注意点

innerHTMLはとても便利ですが、その名の通り、代入した文字はHTMLとして機能します。

学習を進めていくと複雑なプログラムを書くようになりますが、例えば掲示板などを作るような場合に、一般の方が入力した文字をinnerHTMLで表示するようなプログラムを書かないようにしましょう。

innerHTMLの代わりにtextContentといった書き方もありますので、JavaScriptでDOMを操作する方法【初心者向け】の記事も参考にしてみてくださいね。

 

1時間でできる無料体験！

執筆してくれたメンター

山本 理仁

2007年から、Webシステム開発の要件定義・設計・製造・テスト・運用と様々な案件を経験。

2019年からはフリーランスとしてコーディングなどを承っています。

TechAcademyではフロントエンドコースを担当。

 

大石ゆかり

HTMLを書き換える意味が分かりました！

田島悠介

それは良かった。

いろいろな使い方ができるから、しっかり身につけておくといいよ。

大石ゆかり

分かりました！

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。

プログラミングの初心者でも受講可能です。

Webサイトの表現の幅を広げたいという方はぜひご覧ください。

記事を検索

関連するキーワード

関連する記事

JavaScriptでフォーカス移動する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーカス移動する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向...
JavaScript

JavaScriptでオブジェクトにプロパティを追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオブジェクトにプロパティを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説し...
JavaScript

JavaScriptにおけるオブジェクト指向について現役エンジニアが解説【初心者向け】

JavaScriptにおけるオブジェクト指向について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そ...
JavaScript

JavaScriptで配列をクリアする方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列をクリアする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...
JavaScript

JavaScriptでバイナリファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでバイナリファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptでnpmを使ってrequestモジュールをインストールする方法を現役エンジニアが解説【初心

JavaScriptでnpmを使ってrequestモジュールをインストールする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使...
JavaScript

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

JavaScriptのinnerHTMLへの処理が動かない場合の解決方法を現役エンジニアが解説【初心者向け】

JavaScriptのinnerHTMLへの処理が動かない場合の解決方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 JavaScriptのinnerHTMLを利用することで、HTML要素の中身を変更することができます。 実務でも、JavaScriptのinnerHTMLを利用して表示コンテンツの変化処理を行いますので、ぜひ学習してみてください。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのinnerHTMLへの処理が動かない場合の解決方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 innerHTMLとは JavaScriptによってinnerHTMLを操作する方法 JavaScriptのinnerHTMLへの処理が動かない主な原因と対応方法 まとめ   innerHTMLとは innerHTMLは、Elementオブジェクトのプロパティです。 Elementオブジェクトは、HTML要素のオブジェクトなどを含む要素を表すオブジェクトです。 そのプロパティであるinnerHTMLは、HTML要素の中身が格納されています。 innerHTMLを参照すればHTMLの中身が取得でき、代入すればHTMLを書き換えることもできます。   [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptによってinnerHTMLを操作する方法 Elementオブジェクトのプロパティなので、まずはElementを取得する必要があります。 Elementを取得したら、.innerHTMLと記述すれば中身の参照ができ、.innerHTMLに代入すれば中身の置き換えができます。   innerHTMLを操作する例 それでは具体的に見てみましょう。 下記のHTMLのdiv要素をinnerHTMLで操作する例を紹介します。 <div id="target"><span>あいうえお</span></div> まずはElementの取得です。 JavaScriptでElement（今回はdiv要素）の取得用にidにtargetという名前をつけてあります。 この名前を要素を取得するメソッドのgetElementByIdの引数に指定することで取得ができます。 let element = document.getElementById('target'); これでelementという変数にElementであるdiv要素が取得できました。 次はinnerHTMLを使ってdiv要素の中を参照します。 element.innerHTML これで下記のようなdiv要素の中の値が参照できます。 <span>あいうえお</span> 表示結果 See the Pen Untitled by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   innerHTMLで置き換えする例 置き換えのケースを2つ紹介します。 １．空文字で置き換えることでdiv要素の中を全てなくす（消す）ことができます。 let element = document.getElementById('target'); element.innerHTML = ""; ２．HTMLの要素と一緒に記述することで、div要素の中を自由に書き換えることができます。 let element2 = document.getElementById('target2'); element2.innerHTML = "<span>タグ付きで置き換え</span>";  表示結果   See the Pen innerHTMLで置き換え by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   JavaScriptのinnerHTMLへの処理が動かない主な原因と対応方法 参照で動かない場合は、Elementの取得ができていない可能性があります。 取得したElementが空になっていないか確認してください。 置き換えで動かない場合は、HTMLの内容を確認してください。 置き換えをする場合に、正しくない形のHTMLを代入しようとすると構文エラーを表すSyntaxErrorになります。 HTMLの< >のようなカッコの閉じ忘れがないか、全角の文字が入っていないかなどを確認してください。   まとめ HTMLの操作でも使用するinnerHTMLを紹介しました。 JavaScriptのinnerHTMLを利用することで、HTML要素の中身を変更できました。 要素の中身を変更する事ができるということは、表示上コンテンツを消すことも可能でした。 動作しない場合は、Elementの状態や、エラー状態を確認していただくと良いですよ。   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：金融・小売・製造業種の基幹システムから人工知能研究支援まで20年以上の開発実績。経営者目線で、開発言語にとらわれない横断的なマネジメントを行うCTO業務や、新規事業開発を行う前段階のプロトタイプ開発、事業会社非IT社員向けDXプログラミング思考研修を得意とする。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptでHTMLの要素を書き換える方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLの要素を書き換える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでHTMLの要素を書き換える方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 innerHTMLとは HTMLの要素を書き換える方法 実際に書いてみよう まとめ   innerHTMLとは innerHTMLとは。HTML要素の中のHTMLを示すプロパティです。 以下のHTML要素を例としましょう。 <div id="mydiv"><p>こんにちは！</p></div> HTML要素をidで指定するには「document.getElementById」を使用します。 また、上記のHTML要素のinnerHTMLを指定するには以下のように記述しましょう。 document.getElementById('mydiv').innerHTML この場合のinnerHTMLは「<p>こんにちは！</p>」です。   [PR] フロントエンドで副業する学習方法を動画で公開中HTMLの要素を書き換える方法 HTMLの要素を書き換えるには、以下のように innerHTML に値を代入します。 document.getElementById('mydiv').innerHTML = "<p>こんばんわ！</p>";   実際に書いてみよう 今回のサンプルプログラムでは、<input>要素に入力した文字を<div>要素のinnerHTMLとして設定するとともにコンソールにも出力して確認します。 以下の内容のHTMLファイルを作成しましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <input id="myname" type="text" placeholder="名前を入力してね！" > <input type="button" onclick="func1()" value="押してね！"> <div id="greeting"></div> <script language="javascript" type="text/javascript"> const greeting = document.getElementById('greeting'); const myname = document.getElementById('myname'); const func1 = () =>
JavaScript

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次innerHTMLとはinnerHTMLの書き方innerHTMLを使って実際にプログラムを書いてみよう動作確認をしてみましょうinnerHTMLの注意点執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =
JavaScript

JavaScriptで時間の比較を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptで時間の比較を行う方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで時間の比較を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptで日時・経過時間などの比較を行う方法 日付計算を行うにはDateオブジェクトを利用します。Dateオブジェクトは”1970/01/01/00:00:00″から始まるミリ秒を基準としています。 最初に「new Date()」でインスタンス化して、作成したインスタンスを使って計算を行っていきます。作成時は、new Date(2019,10,1,20,00,00)などの指定を行いますが、引数を指定しない場合は、現在時刻で作成されます。 Dateオブジェクトを利用して○○後、○○前の日付などを求めるには、DateオブジェクトのsetXXX,getXXXメソッドを利用して算出します。 まずは、下記の表を確認してください。 種類 取得メソッド 設定メソッド 注意点 年 getFullYear setFullYear 月 getMonth setMonth 0～11の値 日 getDate setDate setDayは週 時 getHours setHours 分 getMinutes setMinutes 秒 getSeconds setSeconds 例として、日付を計算する場合の書き方を説明いたします。まずは、インスタンスを作成 var newDate = new Date(); 続いて、作成したインスタンスから日付部分を取得します。 newDate.getDate(); 取得した日付に減加算したい日数を加算し、元のインスタンに設定します。あわせて書くと下記の様になります。 newDate.setFullYear(newDate.getFullYear() + 10)); ※10日後を計算 JavaScriptで処理時間の比較を行う方法 開始時間と終了時間を計算するには、開始前の時間と開始後の時間をインスタンス化し、getTimeを使ってミリ秒を取り出し差を算出します。 var startTime = new Date(); /*色々な処理*/ var endTime = new Date(); var elapsedTime = endTime.getTime() - startTime.getTime() /*最後にミリ秒を分や秒に変換します。*/ var mins = elapsedTime / ( 1000 * 60 ); // 分の計算 elapsedTime = elapsedTime % ( 1000 * 60 ); // 算出した分を取り除く var secs = elapsedTime / 1000; // 秒の計算 Math.floor(mins) + "分" //分を切り捨てで表現 Math.floor(secs) + "秒"
JavaScript

JavaScriptで関数に引数として値を渡す方法を現役エンジニアが解説【初心者向け】

JavaScriptで関数に引数として値を渡す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次innerHTMLとはinnerHTMLの書き方innerHTMLを使って実際にプログラムを書いてみよう動作確認をしてみましょうinnerHTMLの注意点執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで関数に引数として値を渡す方法について詳しく説明していくね！ 大石ゆかり お願いします！   引数とは 数学でいうと『f(x)=y』と関数の『x』の部分にあたるものです。 『x』の値を変更すると『y』が変化しますね。 プログラムでは仕事や計算の依頼をする際に引数を渡します。 例えば、買い物を依頼する時に買い物リストとお金を渡しますね。 『買い物』が関数で『買い物リスト』、『お金』が引数ということです。   JavaScriptで関数に引数として値を渡す方法 まず、引数には”値渡し”、”参照渡し”の2種類があります。 値渡し：値をコピーして渡す方法で、関数内で書き変わっても元は変わりません 参照渡し：値の場所を渡す方法で、関数内で書き変わると元も変わります   JavaScriptの場合は、他のプログラム言語とは違い値の型によって変わります。 プリミティブ型(数値型、文字列型、ブーリアン型、null型、undefined型)は”値渡し” オブジェクト型は”参照渡し”   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう HTMLのソースコード <!DOCTYPE html> <meta http-equiv="content-type" charset="utf-8"> <html> <head> <title>JavaScriptでオセロゲームを作る</title> <style type="text/css"> </style> </head> <body> <h1>JavaScriptで関数に引数として値を渡す方法</h1> <p> 最初の"a"の値：<label id="a_1">_____</label> </p> <p> 最初の"b"オブジェクトの値：<label id="b_1">_____</label> </p> <p> 関数に入ってきた"a"の値：<label id="a_2">_____</label> </p> <p> 関数に入ってきた"b"オブジェクトの値：<label id="b_2">_____</label> </p> <p> 関数で変更した"a"の値：<label id="a_3">_____</label> </p> <p> 関数で変更した"b"オブジェクトの値：<label id="b_3">_____</label> </p> <p> 関数からもどって来た後の"a"の値：<label id="a_4">_____</label> </p> <p> 関数からもどって来た後の"b"オブジェクトの値：<label id="b_4">_____</label> </p>   JavaScriptのソースコード <script type="text/javascript"> let a = "test" let b = {text:"test2"} function testfunc(ia,ib){ document.getElementById("a_2").innerHTML = ia; document.getElementById("b_2").innerHTML = ib.text; ia = "cheng" ib.text = "cheng2" document.getElementById("a_3").innerHTML = ia; document.getElementById("b_3").innerHTML = ib.text; } document.getElementById("a_1").innerHTML = a; document.getElementById("b_1").innerHTML = b.text; testfunc(a,b) document.getElementById("a_4").innerHTML = a; document.getElementById("b_4").innerHTML = b.text; </script> </body> </html>   実行結果 最初の"a"の値：test 最初の"b"オブジェクトの値：test2 関数に入ってきた"a"の値：test 関数に入ってきた"b"オブジェクトの値：test2 関数で変更した"a"の値：cheng 関数で変更した"b"オブジェクトの値：cheng2 関数からもどって来た後の"a"の値：test 関数からもどって来た後の"b"オブジェクトの値：cheng2   値渡しをした「test」では、関数の中で「cheng」と変更しても戻ってきた値は「test」のままです。 それに対して、参照渡しをした「test2」では戻ってきた値が「cheng2」と変更されていますね。 この違いに注意して、適切な方法で関数に引数を渡すようにしましょう。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次innerHTMLとはinnerHTMLの書き方innerHTMLを使って実際にプログラムを書いてみよう動作確認をしてみましょうinnerHTMLの注意点執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] フロントエンドで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分 このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。 本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。   必要なフォルダとファイルを作成しよう まずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。 （例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）   フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。   HTMLをコーディングしよう いよいよコーディング作業に入ります！ 今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 盤 --> <div id="stage" class="stage"></div> <!-- 各マスを描画するためのテンプレート --> <div id="square-template" class="square"> <div class="stone"></div>
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript 要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】