JavaScript

JavaScript

JavaScriptのアロー関数の使い方とハマった箇所1点

今回はJavaScriptのアロー関数の使い方と、今回ハマった箇所をサンプルコードを交えて、簡単に解説しています。詳細はMDNの下記に詳しく書いています。MDN:アロー関数式アロー関数の使い方アロー関数を使用すると、普通に関数を書くよりもシ...
JavaScript

JavaScriptで画像をドロップして画面に表示する(ondrop, ondragover)

JavaScripでondropとondragoverを使用した時にちょっとハマったので、今回はこの2つのイベントについてまとめてみました。最初にJavaScriptのondropとondragoverのイベントの説明を簡単にします。画像を...
JavaScript

JavaScriptのFetchAPIで取得した画像・PDFを表示させる方法!

JavaScriptでFetch APIを使用して、画像やPDFを取得した後にブラウザに表示する方法について書いています。簡単なサンプルコードを用意して試してみました。Fetch APIでファイルを取得した後にwindow.openを使用し...
JavaScript

JavaScriptの配列操作まとめ!(追加 / 削除 / 取得 / 結合 / 判定)

JavaScriptで配列を使うときに、よく使いそうな配列操作をまとめてみました。配列の宣言から始まって、追加・削除・取得・結合・判定について書いています。配列の宣言をするJavaScriptで配列を作るには、角括弧([])を使用するか、A...
JavaScript

JavaScriptで画像ファイルをbase64文字列に変換する方法!

今回はWebフォームで画像ファイルを選択した後に、JavaScriptを使用してBase64形式に変換する方法を書いています。実際に画像をフォームに設定して変換する、簡単なサンプルを作ってみました。JavaScriptで画像をbase64文...
JavaScript

JavaScriptのif文で変数・値を判定した場合の挙動11個

JavaScriptのif文に変数や値を渡した時の判定がどうなるか、挙動を11個確認してみました。空の配列やオブジェクト、undefinedなどを、if文に入れてみて判定がどうなるか試してみました。最後に試した内容を表にまとめています。nu...
JavaScript

JavaScriptのArray.mapの使い方!(forEachとの違いは?)

JavaScriptのmapメソッドの使い方について、書いています。配列からmapメソッドを呼び出すことで、ひとつずつ要素を取り出して、新しい配列を作成します。前回はforEachについて、こちらに記事を書きました。forEachと同じよう...
JavaScript

JavaScriptのArray.forEachメソッドの使い方!(配列要素で繰り返し処理)

今回はJavaScriptの配列でforEachメソッドを使う方法について、書いています。配列からforEachメソッドを呼び出すことで、ひとつずつ要素を取り出して繰り返し処理を行うことができます。使い方を解説した後に、forEachを使用...
JavaScript

[JavaScript入門]for文を使い方と、4パターンのコード(繰り返し処理)

今回はJavaScriptでのfor文の使い方について、書いています。使い方を解説して、for文を使用した簡単なプログラムを作成した後に、4パターンのコードを書いてみました。実際に作成して動かすこともできるのでやってみてください。JavaS...
JavaScript

[JavaScript入門]switch文の使い方と、3パターンのコード(条件分岐)

今回はJavaScriptでのswitch文の使い方について、書いています。使い方と基本的な動作検証を確認した後に、3パターンのサンプルコードを書いています。JavaScript入門シリーズの前回は、JavaScriptの配列について書きま...
JavaScript

Fetch APIの使い方(JavaScriptでHTTP通信)

最近JavaScriptでFetch APIを使用して、SPA構成のアプリケーションでデータの登録や取得をすることがあったので、まとめてみました。検証に使っているブラウザはChrome96です。最初にFetch APIの使い方を解説していま...
JavaScript

JavaScriptでfilterを使う方法!【使用例3選】

JavaScriptでfilterの機能を使ったので、使い方やサンプルなどを記載しています。MDNでfilterについて説明しているドキュメントはこちらです。JavaScriptのfilter機能とは?JavaScriptのfilterは配...