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を操作する方法【初心者向け】の記事も参考にしてみてくださいね。

 

執筆してくれたメンター

山本 理仁

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

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

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

 

大石ゆかり

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

田島悠介

それは良かった。

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

大石ゆかり

分かりました！

 

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

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでreplaceを使って文字列を置換する方法【初心者向け】現役エンジニアが解説

JavaScriptでreplaceを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptで型を判定する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptによるhtmltagの要素取得について現役エンジニアが解説【初心者向け】

JavaScriptによるhtmltagの要素取得について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでセレクトボックスの値を動的に生成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
JavaScript

JavaScriptのHTMLにおけるクリック処理(onclick)について現役エンジニアが解説【初心者向け】

JavaScriptのHTMLにおけるクリック処理(onclick)について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向け...
JavaScript

JavaScriptのMathオブジェクトのsumメソッドはない！代替案を現役エンジニアが解説【初心者向け】

JavaScriptのMathオブジェクトのsumメソッドについて、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で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で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でオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

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

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次innerHTMLとはinnerHTMLの書き方innerHTMLを使って実際にプログラムを書いてみよう動作確認をしてみましょうinnerHTMLの注意点執筆してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] コーディングで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。 目次innerHTMLとはinnerHTMLの書き方innerHTMLを使って実際にプログラムを書いてみよう動作確認をしてみましょうinnerHTMLの注意点執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPの配列を結合するにはどうしたらいいですか？ 田島悠介 配列を結合する方法はいろいろあるけど、array_mergeが使えるよ。 ただ連想配列でキーが同じだった場合に値が上書きされるよ。 大石ゆかり 連想配列？キー？上書き？　なんだか難しそうですね・・・ 田島悠介 聞いただけではイメージするのが難しいかもしれないね。 たとえば$sum[5]の「5」の数値が配列の添字、つまりキーだよ。 連想配列はこのキーが文字列の配列だね。 じゃあ、配列を結合する方法を実際のサンプルコードを使って説明するね。 大石ゆかり お願いします！ ※この解説記事では配列のキー（添字）が数値のものを添字配列といい、キーが文字列の連想配列と区別しています。PHPの配列については解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」を、連想配列については解説記事「PHPで連想配列を使う方法【初心者向け】」をご覧ください。   array_mergeで結合する方法 PHPで配列を結合するには、array_merge関数が使えます。 複数の配列をひとつに結合した配列を取得できます。 構文 結合された配列 = array_merge(配列1, 配列2); 配列1の後ろに配列2の要素が追加されて結合された配列が取得できます。 ※引数に指定する配列の数は、ひとつでも3つ以上でも指定できます。 ※結合された配列はarray_merge関数の戻り値で取得します。上記の構文だと配列1そのものが更新されるわけではありません。 配列のキーが同じ要素を結合すると？ 配列が連想配列（キーが文字列の配列）かどうかで結果が異なります。 キーが数値の添字配列の場合は、同じキーがあっても添字がゼロから振りなおされ、要素が追加されていきます。 キーが文字列の連想配列の場合は、同じキーがあると新しい要素に上書きされて追加にはなりません。 添字配列を結合する 配列のキーが数値の添字配列をarray_merge関数で結合すると、すべての要素のキーがゼロから振りなおされて追加されます。 ソースコード 色の名前が入った2つの配列 $colors1と$colors2の要素をarray_mergeで結合し、$colorsに代入します。 $colors1と$colors2の配列はキーが数値のため、結合したときにキーが降り直されます。 <?php $colors1 = array('赤', '緑', '青'); $colors2 = array('シアン', 'マゼンタ', '黄'); //配列を結合 $colors = array_merge($colors1, $colors2); //結合した配列を出力（preタグで改行させる） print_r('<pre>'); print_r($colors); print_r('</pre>'); ?> ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 $colors1 = array('赤', '緑', '青'); $colors1に3つの要素がある配列を代入しています。 配列 $colors1の中身は以下のように0から2のキーがあります。 Array ( [0] => 赤 [1] => 緑 [2] => 青 ) ※配列を作成するときに、値だけ指定すると自動的にゼロから始まる添字がついてキーが作成されます。配列の作成について詳しくは解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」をご覧ください。 $colors2 = array('シアン', 'マゼンタ', '黄'); $colors2にも3つの要素がある配列を代入しており、中身は以下の状態です。 Array ( [0] => シアン [1] => マゼンタ
PHP

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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