• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for JavaScript

JavaScript

Nuxt.jsのバージョンを動作検証済みバージョンへ変更しHello Worldプログラムを実行しよう

2021-08-10 By プログラミング入門ナビ編集部

概要

create-nuxt-appを利用すると、その時点での最新のNuxt.jsでプロジェクトが作成されます。

最新バージョンでは、コースの通り進めることができなくて、本質的ではないところで躓いてしまいますので、コースで使用しているバージョンにダウングレードします。

本コースは、この記事は、Udemyにて公開中のオンライン講座「Nuxt JS入門決定版!Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」及びのProglus(プログラス)で公開中のオンライン講座「Nuxt.JS入門」サポート記事です。

流れはこのようになっています。

  1. インストール済みの依存パッケージを削除
  2. package-lock.jsonを削除
  3. package.jsonを修正
  4. nuxt.config.jsを修正
  5. 依存パッケージを再インストール
  6. pages/index.vue を編集
  7. 動作確認(Hello World!)

この記事では、3.15系から2.8系へダウングレードする方法について紹介します。

1. インストール済みの依存パッケージを削除

node_modules フォルダを削除します。

2. package-lock.jsonを削除

3. package.jsonの修正

①scriptsを下記のよう書き換えます。

v2.8当時の書き方に修正する。

修正前

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

↓
修正後

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

② nuxtのバージョンを2.9未満の最新版(2.8系の最新版)に設定

 "nuxt": "<2.9"

4. nuxt.config.jsを修正

@babel/preset-envのエラーが出ないように検証した結果を反映している。

編集前

build: {
}

↓

編集後

 build: {
    babel: {
      presets({isServer}) {
        const targets = isServer ? { node: 'current' } : { ie: 11 }
        return [
          [ require.resolve("@babel/preset-env"), { targets }  ]
        ]
      },
      plugins: [
        "@babel/syntax-dynamic-import",
        "@babel/transform-runtime",
        "@babel/transform-async-to-generator"
      ]
    }
  }

5. pages/index.vue を編集

v2.8当時の書き方に修正する。

編集前

<template>
  <Tutorial/>
</template>

<script>
export default {}
</script>

↓

編集後

<template>
  <section class="container">
      <p>Hello World</p>
  </section>
</template>

 
<script>
export default {}
</script>

6. 依存パッケージを再インストール

$ cd hello
$ npm install

補足:cd helloは、現在のディレクトリがhelloではない場合のみ(helloがカレントディレクトリではない場合のみ)、実施する

7. 動作確認(Hello World!)

開発用のウェブサーバを起動

$ npm run dev

※ 終了する場合はcontrol + c

8. 動作確認(Hello World!)

Nuxt.jsバージョン確認&Google Chromeで指定のURLを開く

ページにHello World!と表示されれば動作確認OK。

よくあるご質問

Q. 記事の通り実行してもバージョンが変更されません。
Ans. 各種編集後のファイルが保存されていないケースが多いです。再度ご確認ください。

補足

ダウングレードするとプロジェクト直下にpluginsフォルダや、assetsフォルダ等ができない場合があるようですが、手動で作成すれば動作します。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: JavaScript, Nuxt.js

TypeScriptとは?JavaScriptとの違いは?人気の理由を徹底解説!

2020-11-30 By プログラミング入門ナビ編集部

議論するエンジニアたち

はじめに

ITエンジニア

TypeScriptというプログラミング言語をご存知でしょうか?

JavaScriptと名前が似ているからその仲間かな?と思った方、あながち間違っていません。

この記事では、使いやすいと人気上昇中のTypeScriptについて詳しく解説します。

TypeScriptとは

TypeScriptは2012年にMicrosoft社によって開発されたオープンソースのプログラミング言語です。

2017年にはGoogleの社内標準言語として採用されたことから注目を集めています。

いったいどんな言語なのでしょうか?

JavaScriptの進化版

TypeScriptは下記の理由からJavaScriptの進化版のプログラミング言語といわれています。

  • Alternative JavaScript(AltJS)である
  • JavaScriptのスーパーセットである

まず「Alternative JavaScript」についてですがこれは「JavaScriptの代替言語」という意味です。

JavaScriptは汎用性が高く世界中で普及している言語ではありますが、多少ややこしいところや使いにくいところがあります。

それをカバーするために「記述を別の言語で行った後に全く同じ挙動をするJavaScriptプログラムに変換して使用しよう」という動きがあるのです。

その「別の言語」の一つがTypeScriptで、後ほど取り上げますがJavaScriptと比較し記述しやすくなっています。

なお、AltJSはTypeScriptだけではありません。

他にもRubyのように記述できるCoffeeScriptや、Googleが大規模Webアプリのために開発したDart等があります。

また、TypeScriptはJavaScriptのスーパーセットです。

これは簡単にいうと「全てのJavaScriptの文法はTypeScriptでも使用可能」ということなので、既存のJavaScriptプログラムはTypeScriptプログラムとして実行できます。

こういった点が、TypeScriptはJavaScriptの進化版であるといわれる所以です。

GitHub人気急上昇言語の一つ

GitHub人気上昇言語ランキング

GitHubが年次で発表する世界の開発状況に関するレポート「The State of the Octoverse」では、人気急上昇のプログラミング言語を紹介しています。

ここでTypeScriptは5位に入っており、人気の高さが見て取れますね。

先ほど他のAltJSとして先述したDartが1位なのは、iOSアプリ・Andoridアプリの両方を同じ環境で開発できるプラットフォームであるFlutterで使用できるため注目を集めているのが理由でしょう。

Rust・Kotlinといった言語も上位に入っていますが、これらはTypeScriptと同様に、後述する「静的型付け」が可能なので人気が上がっているのではないかと分析されています。

JavaScriptとの違い

コードを比較する開発者たち

TypeScriptがJavaScriptの進化版であることは説明しましたが、どういった点が異なるのでしょうか。

静的型付けができる

プログラミング言語にはデータの型(整数・文字列・ブーリアン等)について、プログラマーがあらかじめ明示的に決める「静的型付け」のパターンと、実行時に自動的に決められる「動的型付け」のパターンがあります。

JavaScriptはもともと動的型付けで、プログラミングの際にデータ型を気にせず気軽に記述できるのですが、変数に想定と違うデータ型が代入されてエラーが起こる可能性がありそれは実行時になるまでわかりません。

TypeScriptでは動的型付けだけでなく静的型付けもオプションとして選択可能です。

もし最初に定義したデータ型と異なる値が代入される箇所があればコンパイル時にエラーとして検出されるため、意図しないエラーを低減させることができます。

クラスを作成できる

JavaScriptはオブジェクト指向のプログラミング言語です。簡単にいうと、ソースコードの中で同じような動作をする部分をひとかたまり(オブジェクト)としてまとめておき、後から簡単に使い回すことができる仕組みがあります。

「クラス」はオブジェクトの設計書であり、どんなデータを持ってどんな操作ができるのかを記述したものです。

オブジェクト指向のプログラミング言語のほとんどはクラスを作成できるようになっているのですが、JavaScriptは2015年に発表された新標準(ECMAScript 2015)より前ではクラスを使えませんでした。

また、新標準でクラスを使えるようになったとはいえ、まだ一部のブラウザや一部バージョンによってはこの新標準への対応が行われておらず、正しく動作するとは限りません。

そのため旧仕様のJavaScriptはまだ一般的に使用されており、ここでクラスを作ろうとすると関数などを活用して無理やり記述する必要があったのですが、TypeScriptではクラスを作成することができます。

nullやundefinedのチェック可能

JavaScriptプログラムを実行時に、参照した値がnullやundefinedでエラーになったことはありませんか?

これは最もよくある実行時エラーの一つですよね。

TypeScriptではこういったエラーを最小化するため、コンパイル時にnullやundefinedの可能性がある変数をチェックすることが可能です。

このような仕組みは「null safe」や「null安全」と呼ばれ、事前にエラーを減らすための方法として注目を集めています。

TypeScriptの利点

議論するエンジニアたち

JavaScriptとの違いをふまえて、TypeScriptの利点についても見ていきましょう。

大人数で開発してもエラーを抑えられる

データ型の間違い検知やnull・undefinedチェックができるので、実行してみるまでわからなかったようなエラーを事前に撲滅できます。

また、大人数で開発している場合に、自分は文字列しか入らないと想定して書いた部分に対して別の開発者が数値を入れてしまうことがあるかもしれません。

動的型付けは規模の小さいコードを少人数で書く時はスピーディーで手軽なのが利点ですが、大人数になればなるほどこのように想定しないエラーやバグの原因となりやすいです。

また、エラーが発生してしまった後も何が原因なのか突き止めにくくなります。

TypeScriptのように静的型付けやnull安全が担保されていればそのリスクも減りますね。

先述の人気急上昇言語でも静的型付け言語が上位に入っていたのはそういった背景に基づいているといえるでしょう。

コードが読みやすい

クラスを記述できるので、クラスが作れないなか無理にオブジェクト指向を実現していたJavaScriptと比較し読みやすいコードが書けるのが利点です。

また、データ型も明示的に記述するため、どんな型が入る想定で書いているのかが伝えやすく、読む側としても読み取りやすくなります。

nullやundefinedチェックがあるため宣言しっぱなしの変数も減り「これ何のための変数なんだろう?」といった疑問も少なくなるでしょう。

まとめ

いいね!と微笑む開発者たち

人気急上昇中のTypeScriptについて、JavaScriptと比較しながらその特徴やメリットを紹介しました。

JavaScriptを学習したことのある方は学んでみてはいかがでしょうか。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: JavaScript, TypeScript

JavaScriptのundefinedとnullの違いを徹底解説!0や空文字列についても確認しよう

2020-11-05 By プログラミング入門ナビ編集部

はじめに

困っている男性

JavaScriptのコンソールで「undefined」や「null」といった単語を目にしたことはありませんか?

どちらも変数を参照した時のエラー発生時等に出てくるワードですが、この2つの違いは何なのだろう?0(ゼロ)や空文字列(””)とはどう違うの?

といった疑問を初心者の時は特に抱えやすいです。

この記事では、そんなモヤモヤを解決します!

undefinedは「存在しないデータ」

まずundefinedはどんな時に登場するのでしょうか。下記の例を見てください。

var value = 1;
console.log(value); //1

このように、変数valueを宣言し、その時に値を代入すればログに出力するために参照されても問題なくその値を表示することができます。しかしこの時、値を代入しないとどうなるでしょうか?

var value;
console.log(value); //undefined

上記のように、valueという変数を宣言したけれどもまだ値を何も入れていない場合、この変数の中身を表示しようとしても何も表示できず「undefined」となります。

JavaScriptでは変数の中身に応じたサイズの「入れ物」(メモリのこと)を確保しますが、上記のように、宣言されただけでまだ何の値も入っていない場合はどんなサイズの入れ物を用意すればいいのかわからないため、実はまだ入れ物すら用意されていない状態です。つまりデータとしてまだ存在していません。

また、下記の例も見てください。

var list = {id: 1, name: "apple"};
console.log(list.price);    //undefined

listという連想配列に、id、nameというキーがありますね。nameにappleという要素が入っているので、商品管理用か何かのデータと想像してください。

ここに、価格を表すキーがあっても良さそうなので、次の行で「list.price」というふうにpriceというキーを呼び出しています。

しかしそのようなキーは存在せず、ここでもundefinedが返ってきます。

このように、存在していないデータ・または宣言されただけでまだ値の代入がされていないデータを参照しようとした時に返されるのがundefinedです。

nullは「値なし」

undefinedと混同されやすいものに「null」があります。

nullとは「意図的にオブジェクトの値が存在しないことを表す値」です。下記の例を見てください。

var zip1 = "112-0004";
var zip2 = "112004";
var pattern = /^\d{3}-\d{4}$/g;
console.log(zip1.match(pattern));   //[ '112-0004' ]
console.log(zip2.match(pattern));   //null

上記ではmatchメソッドを用いてパターンとのマッチングを行い、与えられた文字列が郵便番号として成り立つかどうかを確認しています。

matchメソッドは特定のパターンとマッチする文字列があればその文字列を返しますが、もしない場合は何を返すでしょうか?

空の文字列?そうではありません。

あまり無いケースですがもし入力文字列も検索文字列も空文字列「””」であった時、空文字列が見つかりそのまま空文字列が返されることになりますが、ここで「見つからなければ空文字列を返す」というルールだと矛盾が生じてしまうからです。

似たようなことは他のメソッドでもあり得ます。

そこで、「該当はありませんよ」ということを明示的に表すための値が必要です。

これがnullですね。

実際に上記のコードでzip1とzip2という文字列を郵便番号パターンに該当するかどうかmatchメソッドで確かめています。

zip1には該当文字列があったためその文字列が返されていますが、zip2はパターンとマッチする文字列がなかっためnullが返ってきていますね。

注意したいのが、このzip1.match(pattern)もzip2.match(pattern)もそれぞれmatchメソッドの返り値として存在するデータであり、前者には文字列が、後者にはnullが入っているということです。

このように、データとして存在はしているが「値なし」であることを明示的に示すための値がnullです。

0や空文字列””は「値あり」

同じようにundefinedやnullと混同されがちなのが0(ゼロ)や空文字列(””)です。

立派な値としての0・空文字列

ゼロや空文字列は立派な値です。

nullも値ですが、先述の通り「値なし」を表す特殊な値でした。undefinedはそもそもデータとして存在しないことを表します。

例として山田さん・鈴木さん・佐藤さんからなるクラスでテストを実施したとしましょう。

山田さんの点数は70点、鈴木さんは0点、佐藤さんは遅刻したためテストを受けられませんでした。

ここで、田中さんの点数は何点でしょう?鈴木さんは?佐藤さんは?

答えは順に「undefined、0、null」となります。田中さんはこのクラスに存在していないですし、佐藤さんは存在していますがテストを受けられなかったので点数はつけられません。

鈴木さん(と山田さん)だけがテストの点数という値を持っていて、0点ではありますがこれもれっきとした点数であり、ここが田中さん(undefined)や佐藤さん(null)との違いです。

混同されやすい理由

なぜこれらは混同されやすいのでしょうか。それはよく条件分岐などで書かれる下記の記述が原因かもしれません。

if(!data) { //処理; }

このdataには例えば新規メールの件数が入っていて、もし新しいメールが来ていたら読み上げる処理をするといったことができます。

もしくはdataには何かのアンケートの備考欄に書かれた内容が入っていて、もし何か入力されていたらアラートを出すといったこともできますね。

いずれもdataがゼロだったり空文字列だったりするとその処理をする必要がないため上記のコードのように「!dataが正ならばこの処理をする」(!dataで「dataの否定」という意味になります)と書かれるのが一般的です。

同様に、dataがそもそも存在しないデータ(undefined)だったり、nullが入っていてもこの書き方ではじいて処理をさせないようにできます。

実際に、真偽判定(trueかfalseか判定すること)では下記の通り全て偽(false)となります。

console.log(0 == true);             //false
console.log("" == true);            //false
console.log(null == true);          //false
console.log(undefined == true);     //false

そのため、この4つ(undefined・null・0・””)は同じなのでは?と混同されやすいようです。

しかし、先述の通りれっきとした違いがありますので混同しないように注意しましょう。

まとめ

講師が生徒に教える様子

undefined・null・ゼロ(と空文字列)の違いを解説しました。

初心者の時にはなかなか掴みにくい概念ですが、少しでも理解の助けになれば幸いです。

今すぐにわからなくても書きながら次第に理解が進んでいきますので、頑張りましょう!

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: JavaScript, null, undefined

前置演算と後置演算の違いについて!変数へ代入した結果が異なる理由を徹底解説!

2020-09-30 By プログラミング入門ナビ編集部

電卓と赤いペン

はじめに

電卓と赤いペン

JavaScriptで演算を行う時、予想と違う結果になって悩んだことはありませんか?

バグのもとにもなりますし、理由がわからないと修正方法もわからず困ってしまいますよね。

この記事では、よくある原因の1つである前置演算・後置演算の挙動の違いについて解説します。

意外に正しく理解できていないことも多いので、自信のない方はぜひこの機会に学習してくださいね。

前置演算・後置演算とは

まず、前置演算・後置演算とは何かについて説明します。

インクリメント・デクリメント

JavaScriptに限らず、多くのプログラミング言語に存在する演算方法としてインクリメント・デクリメントがあります。

前置演算と後置演算はこの演算に関わるトピックであるため、先にこの内容について理解しておきましょう。

インクリメント(increment)は英語で増加の意味で、値を1増やすことです。

下記のように変数の横にプラスを2回書くとインクリメントされて値が1増えます。

var x = 10;
x++;  //インクリメント
console.log(x);  //11

デクリメント(decrement)は英語で減少の意味で、値を1減らすことです。

下記のように変数の横にマイナスを2回書くとデクリメントされて値が1減ります。

var x = 10;
x--;  //デクリメント
console.log(x);  //9

前置演算・後置演算とは、このインクリメント・デクリメントを変数の前に書くか(前置)、後に書くか(後置)のことを指します。

前置演算の場合

前置演算では、変数の前に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
++x;  //前置演算
console.log(x);  //11

後置演算の場合

後置演算では、変数の後に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
x++;  //後置演算
console.log(x);  //11

変数単体の演算では同じ結果になる

上記のように、変数x(初期値:10)について、前置・後置に関わらず演算後の変数の値は同じ(11)です。

この通り、変数単体で演算を行う場合の結果は前置演算・後置演算とも同じとなります。

変数への代入結果

前置演算・後置演算で挙動が異なるのは別の変数への代入時です。

下記の例を見てください。

var x = 10;
var y;

var a = 10;
var b;

var y = ++x;  //前置演算
var b = a++;  //後置演算

console.log(x);  //11
console.log(y);  //11
console.log(a);  //11
console.log(b);  //10

このように、前置演算と後置演算で代入先の変数の値が異なっていますね。

一体なぜなのでしょうか。

前置演算と後置演算の違い

実は、前置演算では先にインクリメント(またはデクリメント)を行ってから他の処理を行い、後置演算では先に他の処理を行ってから最後にインクリメント(またはデクリメント)を行うという挙動の違いがあります。

文章では理解しづらいため、実際にインクリメントするときに起きていることをコードを見ながら確認しましょう。

前置演算で実際に起きていること

前置演算では先にxをインクリメントした後、yにxを代入します。

var x = 10;
var y;

y = ++x;  //「++x; の後に y = x;」と同じ

console.log(x); //11
console.log(y); //11

そのため、前置演算での代入の後、yは1増えた後のx(つまり11)、xはインクリメントされた値(つまり11)となる訳です。

後置演算で実際に起きていること

後置演算では先にbにaを代入した後、aをインクリメントします。

var a = 10;
var b;

b = a++;  //「b = a; の後に a++;」と同じ

console.log(a); //11
console.log(b); //10

そのため、後置演算での代入の後、bは1増える前のa(つまり10)のまま、aはインクリメントされた値(つまり11)となる訳です。

まとめ

パソコンの前で計算する男性

JavaScriptでの前置演算・後置演算の違いについて解説しました。

実はJavaScriptに限らず、C言語やJava等の一般的なプログラミング言語でも同じ違いがあります。

慣れるまではややこしいですが「前置演算は(代入の)前に演算」「後置演算は(代入の)後に演算」と語呂合わせで覚えるのがおすすめです。

正しく理解し使い分けて、バグを未然に防ぎましょう!

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: JavaScript, インクリメント, デクリメント, 前置演算, 後置演算

ウェブ開発でわからないことがあったらどうすればいい?MDNの使い方やメリットを紹介!

2020-07-28 By プログラミング入門ナビ編集部

技術リファレンス

はじめに

技術リファレンス

HTMLやCSS、JavaScript等を学習していると「このタグはどういう意味なんだろう?」「この記述は必須?不要?どっちだったっけ?」といった疑問が出ることがよくあります。

全てを熟知し覚えておく必要はないのですが、こういった場合に自分で調べられるようにしておくと学習が捗りますね。

この記事ではウェブ開発においてわからないことが出てきた時のおすすめの調べ方を紹介します。

動画解説

本記事の内容を動画でも解説しています。

https://youtu.be/eQBXwLYrXXc

MDNとは

MDNのトップ画面

MDNはMozilla Developer Networkの略称で、ブラウザのFireFoxなどを開発しているMozilla Foundationが運営している公式サイトです。

ウェブ開発に携わる人々の役に立つよう、関連する技術情報を公開しています。

わからないことがあったら、まずはこのMDNを参照するのがおすすめです。

強くおすすめする理由としては次のようなものがあります。

信頼性の高い情報が手に入る

オフィスにいる男性

ウェブ開発の学習をしていてわからないことがあった場合、基本的には検索サイトで調べる方が多いですね。

それ自体は問題ないのですが、検索結果に多く出てくる個人の方が書いたブログや技術系投稿サイトの情報を鵜呑みにしてしまうのは少々問題です。

よくまとまっていて大変参考になることも多いのですが、情報が古かったり、正確性が担保されていないといった懸念があります。

結局、そういった情報を参考にあの手この手を試してみたものの、なかなかその記事に書いてある通りにならず、よく調べてみるとかなり古いバージョンについての話だった、といったケースはよくある話です。

こうなってしまうと貴重な時間と労力の無駄ですね。

一方、MDNは情報の質が高いので実際の業務で参照しているエンジニアも多く非常におすすめのリファレンスです。

個人発信の記事と比較すれば多少取り付きにくい部分はあるかもしれませんが、こういった信頼性の高いサイトで調べることにも慣れていくことを強くおすすめします。

ウェブ開発に関する情報が一通り揃っている

MDNのテクノロジーメニュー

MDNのサイトで「テクノロジー」というメニューをクリックすると、取り扱っている情報のカテゴリが見られます。

HTML・CSS・JavaScriptといったウェブ開発に必須の技術に加え、グラフィックやHTTPプロトコルの話題もありますね。

特定の分野に絞って詳しく解説しているサイトは多くありますが、このように必要な情報が体系立てて網羅されているのがMDNの利点です。

HTMLならここ、CSSならこっち、というようにいろんなサイトを調べなくとも、MDNを参照すれば一通りの情報が揃うのは学習効率を上げるための大きなメリットといえます。

無料で使用可能

ハイタッチする仲間たち

ここまでの信頼性と網羅性を兼ね備え、かつ日本語版もあるという便利なMDNですが、無料で参照することが可能です。

教科書にすれば数冊分の情報に匹敵することを考えると、素晴らしい価値のあるサイトですね。

リファレンスという立ち位置である以上、ウェブ開発学習の全てを担うことは難しいですが、プログラミング講座や教材で開発の流れを掴みながら、わからないことがあったときに参照するにはうってつけです。

取り組んでいる講座や教材と組み合わせて使用すれば抜群のコストパフォーマンスを発揮します。

MDNを使ってみよう

早速、MDNの使い方を見てみましょう。

ブックマークしておくのがおすすめ

MDNは下記のリンクから閲覧可能です。ブックマークしておくとわからないことがあった際にすぐ調べられるので便利ですね。

MDN web docs

特定のワードについて調べたい場合は「テクノロジー」メニューからカテゴリを選ぶ方法がおすすめです。

例えばHTMLのアンカー要素<a>のタグに指定できる属性はどんなものがあるのか調べたい場合について見てみましょう。

「テクノロジー」メニューでHTMLをクリックし、左側の「HTML elements」をクリックして展開すると<a>がありますね。

MDN内での検索

これをクリックするとアンカー要素<a>の詳細ページに入り、指定可能な属性一覧を確認できます。

MDNのアンカー要素ページ

Google検索も便利

もしくは、調べたいワードが決まっているならばGoogle検索でMDNページを見つけ出すのも手っ取り早いです。

たとえばHTMLの段落要素<p>について調べたいとき「mdn html p」とGoogle検索してみましょう。

googleでのmdn検索画面

検索結果に出たMDNのサイトをクリックすると、直接詳細ページに飛ぶことができます。

MDNの段落要素ページ

まとめ

ウェブ開発でわからないことがあった際、おすすめの調べ方としてMDNの使い方やその利点を紹介しました。

自分で調べる癖が付けられると、学習スピードがぐんと上がります。

ぜひプログラミング学習のお供に活用してください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門(Proglus)

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: CSS, HTML, JavaScript, mdn, リファレンス

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 8
  • Go to Next Page »

Primary Sidebar

Proglus(プログラス)

Twitter

Follow @programmingnavi Tweets by programmingnavi

最近の投稿

  • 【06/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • AWSのパブリックIPv4アドレス有料化について 2024/2より
  • 【CSS】Google Fontsの利用方法について解説します!新UIに対応2023年11月更新
  • 【SQL】XAMPPのMySQLがXAMPPがポートの競合で起動できない問題について解決方法を解説します!
  • 【Colab】–NOMAL– と表示されて、ショートカットキー(ctrl+c)でコピーができない場合の解決方法を解説します!

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench node.js Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習

アーカイブ

  • 2025年6月
  • 2024年1月
  • 2023年11月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年5月
  • 2023年4月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2025 · programmingnavi.com ・About・プライバシーポリシー