HTML

HTMLでdfn要素を使って用語を定義する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでdfn要素を使って用語を定義する方法について解説しています。用語定義が使われる場面の例、dfnタグの基本の書き方、画面上でどのように表示されるかを見ていきましょう。

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

HTMLでdfn要素を使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

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

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

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

dfn要素を使って用語を定義する方法について詳しく説明していくね！

お願いします！

dfnで用語を説明するには（用語定義について）

文章に使用される予定の用語を定義するためにdefinition（ディフィニション）の略語であるdfnタグを使用できます。略語や語源を説明するための文書や用字用語を扱われているWebサイトでは、頻繁に活用されることが期待できます。

[PR] Webデザインで副業する学習方法を動画で公開中

dfn要素とは

単純に用語や略語を定義するために用意されています。dfnタグとabbrタグのtitle属性を用いて、言語と略語の説明文も定義できます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。

HTML

<p>この文書には、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>を用いて、dfnタグの説明が掲載されてあります。</p>

表示結果

See the Pen
2020-07-15-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.

dfn要素を使って用語を定義してみよう

dfnタグのtitle属性の値に用語を定めてから、略語を用いて説明を述べることもできます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。

例文のHTML

<article>
  <section>
  <h2>KGI</h2>
  <p><dfn title="Key Goal Indicator">KGI</dfn>とは、会社の『重要目標達成指標』です。会社の事業が目指す売上高や利益、そして、利潤も含めてから、数字や文章にて目標に定めて持続化させるための指標として扱われています。</p>
  </section>
  <section>
  <h2>KPI</h2>
  <p><dfn title="Key Performance Indicator">KPI</dfn>とは、会社の『重要業績評価指標』です。KGIを達成するためにも、具体的な業務（実務）を構成して、その過程（プロセス）や行為に生じる数字や、それの反復によって関係性のある結果などが指標として扱われています。</p>
  </section>
</article>

表示結果

See the Pen
2020-07-16-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

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

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

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

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

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

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

読みやすいサイト設計を！HTMLで段落分けを行う方法【初心者向け】

HTMLで文章を記入していると段落分けをしたい場面が出てくることがあると思います。段落分けを効果的に使用することができれば、ユーザーにとって読みやすい文章を作成...

HTML

フリーで使えるものばかり！HTMLを書けるおすすめのエディタ10選｜現役エンジニアが紹介

今回はエディタの解説をします。 HTMLのコードをメモ帳で実装すると、全て黒色で表示され、非常に見づらいです。この問題を解決するために、HTMLエ...

HTML

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。サイトのト...

HTML

検索結果に表示！HTMLでmetaタグを使う方法【初心者向け】

HTMLでmetaタグを使う方法について解説しています。 Webページを作る上では目に見えない部分ですが、どのサイトでも設定されているものなので、書き方を...

HTML

HTMLの要素ハイパーリンクを現役デザイナーが解説【初心者向け】

HTMLの要素ハイパーリンクについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTM...

HTML

Webデザイナーとは？必要なスキルや学習方法を細かく解説

この記事では、Webデザイナーとはどんな仕事をする人なのか、どんなスキルが必要なのか詳しく紹介しています。これから在宅での仕事を考えている人や転職したい...

Webデザイン

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

HTML5でdfnタグを使って用語を定義する方法を現役デザイナーが解説【初心者向け】

HTML5でdfnタグを使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 dfnタグを使って用語を定義する方法について詳しく説明していくね！大石ゆかりお願いします！ dfnタグとは HTML5から新要素としてdfnタグが追加されています。dfnタグは、definitionの略語です。用語の定義を記述する場合に使用されています。 title属性も使用した場合、ブラウザの技術にtitle属性の値として定めた文字列が用語として扱われます。title属性に値として文字列が定められていなかった場合は、dfnタグにて定義された内部の文字がブラウザの技術に用語として扱われます。活用場面文章内にある用語を言語として定義するときに使用されています。 <p><span>GDP</span>とは、Gross Domestic Productの略称です。</p> HTML4.01のHTML文書にて、文章の内部に用語が登場する場合、CSSによる装飾のためにも、上記のおおよその書き方にてマークアップされていました。HTML5からは、これらを専用のタグにて定義することが可能です。また、以下に、spanタグからdfnタグに置き換えた場合のサンプルコードを用意しました。 See the Pen 2020-02-09-sample02 by YOHEI INAI (@yohei_inai) on CodePen. 利用規約のページや、ガイドページにも頻繁に活用されることが期待できます。なお、用語と対になる説明文を規則正しく箇条書きとして列挙する場合は、dfnタグよりもdl、dt、ddタグが適しています。これらのタグは、用語を一覧として説明するためのページ（辞典）などでは、活用される機会が多いと考えられます。そして、用語の意味を成立させるためにも使用されています。dfnタグの使用は、SEO対策において、ページランクの評価としても有利になると考えられます。辞典などを作成する場合は、積極的に活用してみましょう。 [PR] Webデザインで副業する学習方法を動画で公開中dfnタグを使って用語を定義してみよう See the Pen 2020-02-09-sample01 by YOHEI INAI (@yohei_inai) on CodePen. 上記のサンプルコードは、略称を用語として説明するためにtitle属性も使用しています。 See the Pen 2020-02-09-sample02 by YOHEI INAI (@yohei_inai) on CodePen. 上記のサンプルコードは、略称を用語として説明するための定義文です。監修してくれたメンター井内洋平 TechAcademyの現役メンター。元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

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

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそも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] Webデザインで副業する学習方法を動画で公開中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

頻出単語を一通り覚えて会話の理解力を高めよう：よく使うIT用語まとめ

IT用語はビジネスシーンで多用されますので、基本的な用語を知っておかなければ会話を円滑に進められないことも考えられます。IT業界の理解を深めるためにもこういった知識が必要ですが、日常の思わぬタイミングでも出てくるかもしれません。良く使われるIT用語について確認をしておきましょう。サービスについての用語ソリューションソリューションとは「解答する」や「解決する」という意味の言葉です。IT用語として使用する場合は、企業がビジネスやサービスをする上で抱えている問題や障害を解決したり、解決のために提供される情報システムのことを指して使用されます。ビジネスの高度化や複雑化、スピード化が進む中で、ただ単に情報システムの構築では解決できない問題が生じています。課題の多様性に対応した、それぞれの顧客が抱える問題への最適なソリューションが必要となってきている背景があり、こういった包括的なシステムの提供がビジネスとして成立しています。ソリューションを提供する事業体を「ソリューションベンダー」や「ソリューションプロバイダ」と呼ぶことがあります。オンデマンドオンデマンドとは、ユーザーからの要求があった場合にサービスを提供することを指す言葉です。「デマンド」とは「要求」を意味し、Webブラウザ等を通して画像やコンテンツ配信をしている多くのデータ配信やWebサービスは「オンデマンド方式」といいます。具体的には、ゲームや動画配信、e-ラーニングなどがオンデマンドのインターネットサービスにあたります。システム・技術についての用語 IoT IoT （Internet of Things）とは、「モノのインターネット」と訳される言葉で、これまでインターネットに接続されていなかった多くの「モノ」に、センサーや電子デバイスを埋め込んでインターネットに接続し、クラウドに情報やデータを収集・蓄積することを可能にした仕組みのことをいいます。 IoTの例としては、エアコンをインターネットに接続することで、帰宅前に外出先からエアコンをつけたり、ウェアラブルデバイスによって服薬や睡眠、心拍数や消費カロリーの管理が実現でき、医療分野でのIotの広がりに期待がもたれています。仮想化仮想化とは、サーバーやメモリーなどのコンピュータの物理的なリソースを要求に応じて割り振ること。例えば、サーバーを仮想化させた場合、ベースとなる1台のサーバーを「物理サーバー」、仮想化されたサーバーを「仮想サーバー（論理サーバー）」とします。そうすることで1台のサーバーを複数のサーバーとして振舞わせることを可能とし、利用率が低い方のサーバーの余剰能力を有効利用することでコスト削減につなげることが可能です。また、1台の仮想サーバーがダウンしてもサーバー上のOSやCPU、メモリなども分割されているので、他のサーバーに影響しないというメリットもあります。 [PR] Webデザインで副業する学習方法を動画で公開中情報についての用語データベースデータベースとは、コンピュータで相互に関連するデータを整理・統合し、必要なときに取り出し・閲覧できるように共有・検索・抽出を可能にするためにデータを格納したもの、またはその仕組みのことを指します。簡単に言えば一定の形式で整理されたデータの集まりです。データベースを使用する理由は、「データを整理して蓄積し、情報として利用しやすくするため」です。データは多いほど利用価値、資産として力を発揮しますが、整理されていないと使いたい情報の抽出もままなりません。そこで、データベースを使用してデータを管理し、データを上手に活用します。データベースの設計や運用、管理を行うエンジニアを「データベースエンジニア」や「データベースサイエンティスト」といい、ビッグデータ（膨大なデータ）を扱う企業には必要な人材となっています。ビッグデータビッグデータとは、従来のデータ管理ツールやデータ処理アプリケーション等では処理や解析が困難であり、しかも爆発的に増加していく膨大で複雑なデータの集合のことをいいます。具体的には、Googleなどのネット検索サービスが検索対象としているWeb上のデータや、FacebookやTwitter等のソーシャルサービスへ書き込まれるデータ、ICカード等の利用履歴などの常に増加し続けるデータを指します。ビッグデータを解析して活用することにより、人々の行動パターンや交通状況をリアルタイムに把握し、省エネルギーやコスト削減等が可能になっています。ビッグデータの解析には専門職の「データベースサイエンティスト」等が欠かせず、様々な企業やITベンダーで求められています。まとめ IT用語は今や日常のいたるところで使用されていますが、ビジネスでよく使用される用語に関しては、IT業界の仕事に対応するために理解を深めておく必要があります。ITは業界に関係がなくてもに身の周りに当たり前にありますので、予想もしていないときに会話に飛び込んでくるかもしれません。今一度、IT用語について確認をしておきましょう。 IT業界でおすすめの転職サイト・エージェントもまとめているので、転職を検討している方はぜひ活用してみてください。また、TechAcademyは、積極的に情報集取を行い学習、成長していくビジネスマンの今後を応援しています。そんな方々におすすめなのはIT業界でキャリアを描くこと。IT業界は成長産業であり、上昇志向や成長志向のある人であれば幅広いチャンスを掴むことが可能です。しかし、総合職であっても技術職とコミュニケーションが取れる人材が求められています。 TechAcademyにはIT業界で活躍したい方向けに無料でプログラミングを学び、転職支援も受けられるTechAcademyキャリアというサービスがあります。専門知識を効果的に学び、プロのコンサルタントの支援のもと行う転職活動でより自分にあった企業と出会ってみませんか。 IT業界でキャリアアップを目指したい方はぜひTechAcademyキャリアをご覧ください。

ビジネスマナー

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

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] Webデザインで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：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

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

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそも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」を学ぶべき理由とは

本稿は、Free Code Campのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Free Code Campの講師を務めるQuincy Larson氏によって投稿されました。初心者にとってプログラミング学習への旅は、ほとんどの場合、深夜のGoogle検索から始まります。このとき通常は、「◯◯を学習」などの検索ワードを打ち込むはずです。しかし、人々は検索する言語を、どのように決めているのでしょうか。「シリコンバレーでいつも冗談になっている言語だから、Javaを学ぶ。」または、「今人気が高いから、Haskell。」もしくは、「Go Gopherが可愛いからGo。」のように考えて決めるかもしれません。あるいは、このようにはっきりと決まらない場合には、おそらく次のような検索になるでしょう。「どのプログラミング言語を最初に学ぶべきか？」もっともインフォグラフィック（情報を視覚的に示した図）で検索しようとする人はあまりいないかもしれませんが、探せば次のようなものが見つかります。画像：「どのプログラミング言語を最初に学ぶべきか？」のインフォグラフィック最初に学ぶプログラミング言語を決めるのは楽しいものです。しかし、最初のプログラミング言語を何とか使えるようになるまでに、何百時間もの練習が必要です。そのため、次の要素について考えるべきです。言語の求人需要言語の将来性学習の難易度学習中に形にできるプロジェクト毎年新しいプログラミング言語が誕生し、これらの言語について学術論文が執筆されます。それからWeb上のコミックも。先月のこのコミックは一見の価値があります。 (左から右に読み進める3コマ漫画) 画像：8つのプログラミング言語を使って姫を救う方法（toggl社によるコミック） JavaScriptを使う城に攻め込むために、ライブラリを選び、ノードを生成して、フレームワークを構築するのに何時間も費やすしかし、フレームワークが完成する頃には、城の要塞が破壊されていて、姫は他の城へと逃げていた Cを使う城に攻め込むためのライブラリと、姫を救うためのライブラリを準備したら――いざ出陣！姫と、彼女の犬、彼女の衣服全て、彼女の食べた全てのものを救い出す。失敗――ヌルターミネーターを忘れていたかもしれない？ C#を使う LINQ（統合言語クエリー）を使った救出計画を説明するだけで、数時間かかる。諦めてStack Overflowで質問をして、Jon Skeet氏（Googleのエンジニアで、『C# in Depth 』などの著者）に全て任せる Javaを使う「城の攻略計画」を、プロダクション環境に迅速にデプロイするオーバーロードで、2種類の城を定義する。しかし姫はいない（オーバーロードできない）。 LISPを使う GOを使う「捕らわれた姫の救出」はサポートされていなかった。標準ライブラリに、すでに自由の身になった姫を発見する。この姫はJPanelで作られたのか？ PASCALを使う姫、城、救出計画を宣言する酒に入りびたり、任務のことは忘れる PHPを使う姫をPHPで救わなければならない最初に学ぶプログラミング言語を選ぶときには、選択肢が不足することはありません。次のグラフは、過去12年間において、プログラミング学習に関して最も検索されているキーワードです。 Javaには浮き沈みがあります。Pythonの検索は徐々に増えていて、最も人気の高い言語となりつつあることが伺えます。しかし、これら2つの言語に加えて、過去数年で検索数がゆっくりと増えている存在がいます。それがJavaScriptです。これらのプログラミング言語を論じる前に、明らかにしておきたい点があります。特定の言語が、他のどの言語よりも客観的に優れていると主張するつもりはありません。エンジニアは最終的に複数の言語を学ぶべきだという考え方には、同意しています。エンジニアは最初の言語をまず深く学習すべきだという考えです。――また、その最初の言語としてJavaScriptを選ぶべきだと考えています。最初に、現在プログラミングが教育機関でどのように教えられているかを見ることから始めましょう。コンピュータサイエンス入門画像：大学のコンピュータサイエンスの課題におけるコードの質（x軸に時間、y軸にコードの質）ソースコードの行数がゼロの状態まずシンプルなプロトタイプを作成するプロトタイプのままにしておく罪悪感を感じる指導教官に、デモを提出するよう言われるエンジニアの友人に相談したところ、ソフトウェアテストについて初めて知る課題の提出期限伝統的に大学においてプログラミングは、コンピュータサイエンスの領域の科目として教えられてきました。コンピュータサイエンスそのものは、数学の延長線上にある学問と見なされたり、または電気工学の学位取得課程のカリキュラムに含まれています。あなたもすでに聞いたことがあるかもしれませんが、「筆と顔料について学ぶだけではプロの画家にはなれないのと同様に、コンピュータサイエンスの教育だけではプロのプログラマにはなれない。」――エリック・レイモンド 2016年現在も多くの大学は、プログラミングをコンピュータサイエンスであるかのように扱い、コンピュータサイエンスを数学であるかのように扱っています。その結果、多くのプログラミング入門のコースでは、Cのような抽象度の低い言語や、MATLABのような数学に特化した言語が主に使われているのです。コースを担当する学部の教授もあまり変わることはなく、TIOBE社によって毎年公表される人気プログラミング言語のインデックスや、次のIEEEによるランキングも順位はほとんど変わりません。 10年前から、上位ランキングに並ぶこれらのプログラミング言語は、ほとんど変わっていません。しかし、学術界において変化が起こり始めています。 2014年、PythonやJavaは、アメリカの上位の教育プログラムにおいて最も人気のある言語として追い抜きました。画像：アメリカのトップ39位のコンピュータサイエンス学科の入門コースにおいて使われる言語のランキング（Philip Guoによる調査）また、もう1つの変化も起こりつつあります。仕事で使われているプログラミング言語は、教育課程で教えられる言語とは異なるのです。画像：最も人気のあるプログラミング言語　Stack Overflowが2016年に行った調査によると、49,397人のエンジニアが回答した最も人気のある言語が「JavaScript」でした。エンジニアの半数以上がJavaScriptを使っています。JavaScriptはフロントエンドのWeb開発に不可欠であり、徐々にバックエンドの開発にも関連する言語になっています。また、ゲーム開発やIoT（Internet of Things：モノのインターネット）などの分野にも広がっています。求人広告でも、JavaScriptはJavaの次によく見られるようです。画像：世界最大の求人情報サイトIndeed.comによるデータしかし、JavaScriptはあなたにとって正しい選択でしょうか？あなたが最初に学ぶプログラミング言語として選ぶ価値はあるでしょうか？私が最初に述べた4つの要素の点から、考えてみましょう。要素1：言語の求人需要知的好奇心からプログラミングを学ぶ場合には、ここは読み飛ばしても構いません。しかし、ほとんどのプログラミング学習者は、プログラミングを自分のキャリアに生かしたいと考えている人が多いので、この要素は重要になります。先にも述べたように、Javaは最も多くの求人広告に掲載されている言語です。そしてJavaScriptが僅差で2位です。 JavaScriptは、約20年前に誕生しましたが、Netflix、Walmart、PayPalなどの企業にアプリケーションを構築する主要なツールとして使われるようになったのは最近のことです。その結果、多くの企業がJavaScriptを書けるエンジニアを雇い始めていますが、雇用市場においてはまだ人数が足りていないのです。画像：Indeed.comによるデータ Javaのエンジニアの求人倍率は約2.7倍です。同様にPHPやiOSのエンジニアの求人倍率も高めです。一方、JavaScriptの求人倍率は約0.6倍しかありません。JavaScriptのスキルを持っていれば、売り手市場です。 [PR] Webデザインで副業する学習方法を動画で公開中要素2：言語の将来性 JavaScriptは他のどの言語よりも、速いスピードで発展しています。画像：GitHub Octoverse 2016より Google、Microsoft、Facebook、Netflixなどの企業からの潤沢な投資と才能のあるエンジニアの貢献によって、言語としても発展を続けているのです。例えば、TypeScript（JavaScriptのスーパーセットである静的型付き言語）は、100人以上のオープンソースの貢献者によって、改良が続けられています。彼らの多くはMicrosoftやGoogleで働くエンジニアです。 Javaの場合には、このような企業間の協力は難しいと思います。オラクルは（サンマイクロシステムズの買収によりJavaの所有権を取得し、）Javaのソースコードを利用しようとする会社に対しては、著作権侵害訴訟をよく起こしています。要素3：学習の難易度画像：XKCD comicのパロディほとんどのエンジニアは、高水準のスクリプト言語が比較的学びやすいということに同意すると思います。JavaScriptはPythonやRubyと同様にこのカテゴリに含まれます。大学では最初のプログラミング言語としてJavaやC++などが教えられていますが、初心者にとっては難易度がかなり高いといえるでしょう。要素4：学習中に形にできるプロジェクト JavaScriptはこの点において特に優れています。JavaScriptはブラウザを搭載したデバイス上であれば、どこでも動作します。基本的に何でも構築することが可能で、ほとんどあらゆるプラットフォームで動作します。 JavaScripが普及したことにより、Stack Overflowの共同設立者であるJeff Atwood氏は、新しく次のルールを宣言しました。「JavaScriptで書くことができるアプリケーションは、最終的にはJavaScriptで書くこと」そして時間が経つにしたがって、このルールは力が強くなっています。 Javaもかつて、どこでも動作すると約束されていました。しかし、今年初めにJava Appletが廃止されたことは記憶に新しいかと思います。 Pythonにも同じような問題があります。「友人のために作ったゲームをどうやって渡したらいいですか？学校の生徒たちがインストールしなくてもいいように、このゲームを私のスマートフォンに移植して彼らに見せる方法はありますか？」――この質問を受けたことにより、教育用の言語としてPythonを使うことをやめた：James Hague氏の記事より（『Retiring Python as a Teaching Language』）これとは対照的なのが、私たちのオープンソースコミュニティのメンバーがブラウザ上でCodePenを使って構築したアプリで、次にご紹介します。ブラウザ上で見れば動作します。 1970年代スタイルのサイモンゲームライフゲーム (Conway’s Game of Life) スター・ウォーズをテーマとした検索システムローグライクゲームの一種であるダンジョンクロウル( Dungeon Crawl ) 一つの言語をよく学ぶこと、その次に2つ目の言語を学ぶこと。もし様々な言語をどれも中途半端に学ぶとしたら、学習効果は望めません。基礎力をつけて次に進むには、最初の言語をよく学ぶ必要があります。そうすれば、2つ目の言語の学習ははるかに簡単になるはずです。そこから、さらに多くの言語を学ぶことで、より応用力のあるエンジニアになれます。コンピュータ内のメモリの操作の仕組みを理解するには、Cが適しています。またCは演算の処理速度も速いです。 C++はゲーム開発に適しています。 Pythonは科学と統計学に適しています。大手のIT企業で働くとしたら、Javaを使えることが重要になります。それでも最初に学ぶ言語はJavaScriptがおすすめです。次に、予想される4つの反論に答えてみます。反論1：JavaScriptは処理速度が遅いのでは？ JavaScriptは、実用的な目的の範囲では、処理速度も速くパフォーマンスの高い言語です。次のグラフは、主要な言語のベンチマーク（処理速度の測定結果）を示しています。 JavaScript (Node.js)は、Python、Ruby、PHPよりも処理速度の順位が上です。C++、Java、Goなどのパフォーマンスの高い言語に近い処理速度が実現されています。画像：ネスト構造のループの処理速度（秒）反論2：JavaScriptは静的型付け言語ではない PythonやRubyと同じように、JavaScriptは動的型付き言語です。便利なところもありますが、困った点もあります。例えば、exampleArrayという配列を生成して、値を設定して、長さを取得するとします。しかし誤ってexampleArrayを文字列として定義した場合、次のようになります。この種のエラーは、動的型付き言語ではよく起こります。そのため、ほとんどのエンジニアはエラーを防ぐためにチェックを行い、テストも実施します。あなたが最初に学ぶプログラミング言語は絶対に静的型付け言語にしようと考えているとしても、私はJavaScriptを最初に学ぶことをおすすめします。TypeScriptをすぐに理解できるというメリットもあります。反論3：しかし、本当に作りたいものはモバイルアプリですそうだとしても、私はやはりプログラミング初心者にJavaScriptを学ぶことをおすすめします。 JavaScriptは、AngularJS、Cordova、React Nativeなどのフレームワークを、ネイティブアプリの開発ツールとして使えます。モバイルアプリで面白いことを実現するには、例えばNode.jsやExpress.jsなどのWeb開発用フレームワークを組み合わせて用いて、バックエンドを構築する必要があります。また実際にモバイルアプリの開発の仕事に携わるまでには、時間がかかる可能性があることも伝えておきたいと思います。特に最初のうちは、エンジニアの仕事の半分近くはWeb開発に関わります。全体の仕事に占めるモバイルアプリの開発の割合は、わずか8％ほどしかありません。「あらゆることに関してアプリの開発が求められ続ける」という壮大な構想は、現実ではありません。その代わりに、ほとんどのスマートフォンのユーザーは、これ以上新しいアプリをダウンロードしない傾向にあります。ユーザーがアプリを使っていることは確かですが、多くの場合、そのアプリはFacebook、Google Mapsなどほんの一握りです。そのため、モバイルアプリの開発におけるエンジニアの需要が高いのは、特に大手の企業においてであるのが現状です。モバイルアプリの開発は将来予測が難しい仕事だといえます。JavaScriptを使うことで、モバイルアプリの開発、メンテナンス、配布をより簡単に行うことが可能です。そのため、 FacebookやGoogleなどの企業は、JavaScriptを使ったモバイルアプリ開発において役立つツールに、巨額の投資をしています。 2016年現在、ほとんど全ての開発はWeb開発です。現代においては、全てのものがWebというプラットフォームに関係するからです。あなたがいつも会話に使っているデバイスから発信される電波も、あなたの子供を送迎する車も、――すべてのものがWebを通して繋がっているのです。そのためJavaScriptが重要なのです。反論4：JavaScriptは10日間で書かれたおもちゃ言語（toy language）なのでは？ C++も人々から嫌われやすい言語ですが、それにも関わらずJavaScriptと同じように成功し、現在ではほとんどどこにでも普及しています。そのため、人気のあるエリート言語ではなくJavaScriptを学んでいることを誰かに批判されたときには、C++の開発者の有名な言葉を思い出してください。「世の中には2種類のプログラミング言語がある。それは、人々から嫌われる言語と、誰にも使われない言語だ。」――ビャーネ・ストロヴストルップ氏まとめ今回、言語の将来性、学習難易度を元にJavaScriptという言語をおすすめしていますが、当然身につけたい言語が決まっている場合はその言語を優先すべきです。とはいえ、今後エンジニアを目指すのであればその言語を使用している求人の量、起業を目指すのであればその言語が使えるエンジニアの数が重要指標になります。これから学習しようと思っている初心者の方は、独学で始められるJavaScriptの学習サイトも合わせてご覧ください。 [お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでdfn要素を使って用語を定義する方法を現役エンジニアが解説【初心者向け】

目次

dfnで用語を説明するには（用語定義について）

dfn要素とは

HTML

表示結果