category / JavaScript

JavaScript

【JavaScript】三項演算子を入れ子にする

三項演算子は『?』と『:』で条件式を書くことができます。 例えば、itemsの1番目がバナナの場合、結果が果物になり、バナナ以外の場合、結果が食べ物になる三項演算子をかくと、 となります。 例えば、itemsの1番目がバナナ場合、結果が果物になりますが、1番目がバナナではなく、…

続きを読む
2022年07月07日1 分
JavaScript

【JavaScript】デバッガーを使って、コードの実行を追跡する方法

デバッガーを使うと、コードがどのように実行され、どの値を返しているかがわかるようになります。 以下のコードがあるとします。 こちらのコードに debugger を追加します。 Chrome…

続きを読む
2022年06月13日3 分
JavaScript

【JavaScript】moduleを使ってみる

出勤簿を記録するため、timeCard.js を作ってみます。 timeCard.js を index.js にエクスポートしたい場合は、エクスポートしたい関数の前に、 export を追加します。 index.js に timeCard.js…

続きを読む
2021年10月06日1 分
JavaScript

【JavaScript】Promise、resolve、rejectを使って、サイコロの半丁をやってみる

サイコロを振って、半か丁かを表示する方法を JavaScript でやってみます。 今回は、Promise、resolve、reject を使ってみます。 まずは、 Promise で、rollTheDice 関数を作ります。 引数は、 resolve 、 reject…

続きを読む
2021年10月05日1 分
JavaScript

【JavaScript】fetchでエラーが発生した場合の処理方法

前回は、複数回 fetch を使って API を呼び出す方法を紹介しました。 今回は、fetch でエラーが発生した場合の処理方法を紹介します。 前回と同じ、API で犬の画像を取得し、ブラウザで表示します。 今のところ、API…

続きを読む
2021年10月04日3 分
JavaScript

【JavaScript】複数回fetchを使って、APIを呼び出す方法

前回は、 XMLHttpRequest を使用して、API を取得できるようにしました。 前回は、fetch を使って API を呼び出す方法を紹介しました。 今回は、複数回 fetch を使って API を呼び出す方法を紹介します。 犬の写真を…

続きを読む
2021年10月03日2 分
JavaScript

【JavaScript】fetchを使ってAPIを呼び出す方法

前回は、 XMLHttpRequest を使用して、API を取得できるようにしました。 今回は、 fetch を使用して、前回使用した API を取得してみます。 まずは、 getData 関数を作成します。 fetch を使って、API…

続きを読む
2021年10月02日2 分
JavaScript

【JavaScript】APIを呼び出す方法

JavaScript で API を呼び出して、犬の写真を表示するようにします。 まず、 XMLHttpRequest を使用して、API を取得できるようにします。 GET の横の『""』に、API の URL を入れていきます。 使用する API を、Public APIs…

続きを読む
2021年10月01日5 分
JavaScript

【JavaScript】クラスメソッドを連続で呼び出す方法

次のクラスと変数があったとします。 受注した件数だけ getScore で、 recieved に件数を追加したいと考えています。 console.log(tanaka.recieved); で確認すると、 recieved に…

続きを読む
2021年09月30日2 分
JavaScript

【JavaScript】開発者にクラスの外部で呼び出さないよう注意する方法

次のクラスがあったとします。 address は、外部で呼び出してほしくないのでプライベートだということを、開発者に知らせたいとします。 その場合、プロパティ名の前にアンダースコア『 _ 』を追加します。 this.address の address の前に『…

続きを読む
2021年09月29日1 分
JavaScript

【JavaScript】クラスを継承する

従業員のクラスを作成してみます。 Person と Staff のコンストラクターがあるとします。 Staff クラスで、tanaka を呼び出してみます。 console.log() で確認すると、 コンストラクターが機能しています。 では、 prototype…

続きを読む
2021年09月28日3 分
JavaScript

【JavaScript】getterとsetterを使って、社員の入社や新入社員を確認してみる

company のオブジェクトがあるとします。 この会社では、なぜか新入社員が退職するので一番最後の方が新入社員として、新入社員を取り出してみます。 値を取り出すには、 getter を使います。 また、配列の最後の値を取り出したいので、 pop…

続きを読む
2021年09月27日1 分
JavaScript

【JavaScript】コンストラクター関数を使って、得点の加点・減点をやってみる

前回は、JavaScript でコンストラクター関数を使ってみました。 今回は、コンストラクター関数を使って、得点の加点・減点をやってみます。 まず、 Perticipant コンストラクターを作成します。 Perticipant…

続きを読む
2021年09月26日2 分
JavaScript

【JavaScript】コンストラクター関数を使ってみる

名前と住所を生成する、Person オブジェクトを作ってみます。 コンストラクター関数名は、常に大文字から始まるルールがあるので、『person』ではなく、『Person』とにします。 コンストラクターを呼び出すには、『new…

続きを読む
2021年09月25日1 分
JavaScript

【JavaScript】forEachで、SetやMapを使ってみる

Set を使用した、曜日の配列があるとします。 forEach でこの配列を使ってみます。 確認すると、 key と value が同じ値になりました。 これは、 Set には key がないためです。 key を省略することも可能ですが、省略して…

続きを読む
2021年09月24日1 分
JavaScript

【JavaScript】forEachを使って、配列の値を取り出してみる

次の出演者のリストがあったとします。 こちらのリストから一つずつ取り出すには、 forEach を使います。 配列から一人ずつ取り出すことができました。 forEach は、インデックスと配列全体を取り出すことができます。 1 番目のパラメーターは、現在の要素、…

続きを読む
2021年09月23日1 分
JavaScript

【JavaScript】2つの配列を結合する

二つの配列があったとします。 この二つの配列を結合するには、 .concat を使います。 console.log() で確認すると、 二つの配列が結合されました。 別の方法として、スプレッド演算子を使用する方法もあります。 こちらも、二つの配列が結合されました。

続きを読む
2021年09月22日1 分
JavaScript

【JavaScript】メニューを注文する関数を作ってみる

JavaScript でメニューを注文する関数を作ってみます。 まずは、注文を受け付ける、order 変数を作ります。 次に、注文を作成する関数を作ります。 関数の中には、注文、数量、価格を操作できるようにしておきましょう。 orderCreate 関数の中に、 order…

続きを読む
2021年09月21日2 分
JavaScript

【JavaScript】入力内容をアスタリスクで隠し、下4桁だけ表示する方法

確認欄を作成したい時、第三者に見られないようにするために、文字列を隠したいと思います。 まずは、mask 関数を作ります。 数値と文字列両方に対応するために、number を文字列型にします。 隠す部分と表示する部分を .slice を使って、下 4 桁で分けます。 下…

続きを読む
2021年09月20日1 分
JavaScript

【JavaScript】文字列の中の、特定の文字を取得する方法

movie の変数があるとします。 movie の 1 番目の文字を取得してみます。 console.log(); で確認すると、 一文字目である、『オ』が表示されました。 変数の後に、 [] を書き、 [] の中に…

続きを読む
2021年09月19日2 分
JavaScript

【JavaScript】Mapを使って、データの追加や削除をする方法

データ構造ですを作成する方法として Map があります。 Map は、key と値のペアで保存されます。 実際に作ってみましょう。 まずは、new Map()でからのデータ構造を作ります。 Map に key と値を入れるには、 .set…

続きを読む
2021年09月18日2 分
JavaScript

【JavaScript】重複している値を削除して、値を取り出す方法

曜日の配列があるとします。 この曜日の配列は、『wed』が重複しています。 重複している『wed』を取り除くには、セットを使います。 書き方は、 new Set(〇〇) です。 〇〇の中は、変数名や配列が入ります。 console.log() で確認すると、 『wed…

続きを読む
2021年09月17日5 分
JavaScript

【JavaScript】オブジェクトをループして、keyを取り出したり配列を作成したりする

オブジェクトをループして、key を取り出したり、配列を作成したりしてみます。 営業日のオブジェクトがあるとします。 営業日のオブジェクトから mon、wed、fri を取り出すには、 Object.keys を使います。 console.log(); で確認すると、 key…

続きを読む
2021年09月16日3 分
JavaScript

【JavaScript】営業時間と定休日を設定する

営業時間の変数があるとします。 例えば、火曜日の営業時間にアクセスしてみます。 火曜日は設定されていないので、undefined で返ってきました。 では、火曜日の営業開始時間にアクセスしてみます。 今度は、undefined ではなく、エラーが返ってきました。 一つ前の『tue…

続きを読む
2021年09月12日3 分
JavaScript

【JavaScript】for-ofループを使ってみる

都道府県の配列があったとします。 for-of ループを使って、こちらの都道府県を一つずつ取り出してみます。 確認すると、 北海道から順に取り出すことができました。 また、for-of ループは、 entries が使えます。 それぞれインデックスと都道府県名の配列になりました。

続きを読む
2021年09月11日1 分
JavaScript

【JavaScript】Null合体演算子とは何ですか?

初期値が 0 の personNumber があるとします。 or で、次の式を確認してみます。 or の場合、0 は評価してくれず、5 を評価します。 0 を評価する場合は、null 合体演算子を使います。 書き方は、『||』の代わりに、『??』を使います。 console…

続きを読む
2021年09月10日1 分
JavaScript

【JavaScript】残余引数を使ってみる

続きを読む
2021年08月29日1 分
JavaScript

【JavaScript】スプレッド演算子を使ってみる

company オブジェクトがあったとします。 新たに社員が入社したと仮定します。 company オブジェクトの staff を使って、新しいリストを作成してみます。 console.log(staffList); で確認すると、 新しいリストができました。 今は、staff…

続きを読む
2021年08月28日3 分
JavaScript

【JavaScript】オブジェクトの取り扱い方法の基本

例えば、次のオブジェクトがあるとします。 オブジェクトの中身を取り出すときは、 company.〇〇 とします。 company.name を console.log…

続きを読む
2021年08月27日3 分
JavaScript

【JavaScript】配列の順番を入れ替えてみる

JavaScript で配列を作るには、 [] を用います。 [] の中に値を入れます。 『田中』を取り出したい場合は、 と書きます。 配列の順番は 0 から始まりまるので、ご注意ください。 console.log() で確認すると、 『田中』が取得できました。 また、…

続きを読む
2021年08月26日1 分
JavaScript

【JavaScript】ボタンをクリックすると、入力した文字が出力される方法

入力した文字によって、ブラウザに表示される文字が変わればいいのに、と思ったこと、ありませんか? 今回は、ボタンをクリックすると、入力した文字が出力される方法を紹介します。 JavaScript…

続きを読む
2021年07月11日5 分
JavaScript

【JavaScript】フォームで必須項目を入力しない限り、送信できないようにする方法

ウェブサイトでフォームを制作している時、送信ボタンを制御したい場合、ありませんか? 今回は、フォームで必須項目を入力しない限り、送信できないようにする方法を紹介します。 基本のコードは、以下になります。 フォーム項目を必須にする フォーム項目を必須にするには、input…

続きを読む
2021年07月02日10 分
JavaScript

【JavaScript】画像が自動で変わるスライダーの作成方法

トップ画面でスライダーを作ってみたけれど、いざテストしてみると画像が変わらなかったこと、ありませんか? 今回は、画像が自動で変わるスライダーの作成方法を紹介します。 基本のコードは、以下になります。 まずは、position: absolute…

続きを読む
2021年06月15日10 分
JavaScript

【JavaScript】記号や文字列をエンコード・デコードする方法

URI(URL…

続きを読む
2021年06月05日10 分
JavaScript

【JavaScript】今日の日付と曜日を表示する方法

今日の日付をウェブサイトに表示したいけれど、どうやって表示すればいいのだろうと考えたこと、ありませんか? 今回は、JavaScript で今日の日付と曜日を表示する方法を紹介します。 まずは、現在の日付を取得してみましょう。 日付を取得するには、Date…

続きを読む
2021年05月23日10 分
JavaScript

【JavaScript】iPhoneやAndroidで個別にスタイルを指定する方法

パソコンでは、制作した通りにウェブサイトが表示されるのに、iPhone や Android ではスタイルがずれること、ありませんか? 今回は、iPhone や Android…

続きを読む
2021年05月21日10 分
JavaScript

【JavaScript】質問のボタンクリックすると、回答内容が表示・非表示する方法

サイト制作時、FAQ…

続きを読む
2021年05月20日10 分
JavaScript

【JavaScript】メニューバーをクリックした時、固定の場所にメニュー画面を表示する方法

メニューバーをクリックするとメニューが表示して、『×』をクリックするとメニューが消えるようにするにはどうすれば良いのでしょうか? 今回は、メニューバーをクリックした時、固定の場所にメニュー画面を表示する方法を紹介します。 まずは、html…

続きを読む
2021年05月15日10 分
JavaScript

【JavaScript】セールで見かける、あと〇日を表示する方法

オンラインショップで時々見かける、『あと ◯ 日で終了します』という表示。 下の画像のように表示するには、どうすればよいのでしょうか? 今回は、カウントダウンを表示する方法を紹介します。 まずは、HTML で土台を作ってみましょう。 『5 月 5 日(木)』と『終了まであと…

続きを読む
2021年05月03日20 分
JavaScript

スマホ画面でメニューを表示・非表示にする方法

画面のように、スマホ画面をタッチした時、メニュー画面が表示されるようにするにはどうすればよいでしょうか? まずは、簡単にメニューバーを作ります。 スマホでメニューを開いたり閉じたりするためのボタンを作成します。 今回は、Google fonts の Material Icons…

続きを読む
2021年04月20日20 分