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.

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困ったときに、質問や相談できる相手がいるため挫折しなかった
・プロとして必要なスキルのみを深く学べたので無駄がなかった
・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に無料相談に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まですべて無料でご利用できます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

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

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

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

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

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

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

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

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

HTML

バナー広告の改善に！CTRを上げるクリエイティブ事例20選

本稿は、Canva Design Schoolのブログ記事を了解を得て日本語翻訳し掲載した記事になります。なお本記事は、デザイナーであるMaria Jo...

Webデザイン

HTMLに挿入した背景画像を繰り返さない方法を現役デザイナーが解説【初心者向け】

HTMLに挿入した背景画像を繰り返さない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nb...

HTML

HTMLでテーブル枠線が2重線になる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでテーブル枠線が2重線になる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】

value属性を使ってHTML内の入力初期値を指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

HTML

HTMLのキャッシュを無効にする方法を現役エンジニアが解説【初心者向け】

HTMLのキャッシュを無効にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

HTML

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

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ファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？

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で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でオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

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のデバッグを行う方法を現役エンジニアが解説【初心者向け】コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

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++などが教えられていますが、初心者にとっては難易度がかなり高いといえるでしょう。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

プログラミング

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

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

dfn要素とは

HTML

表示結果