カテゴリ: JS

検索結果: 11件

article-thumbnail

JavaScriptでオブジェクトのプロパティ確認

【概要】if文等で以下のようなエラーが出力された場合の対処法についてまとめます。js Cannot read property 'プロパティ名' of null【詳細】[概要]以下のようなオブジェクトを例とします。let user { id: 1, name: 'hoge', test: { id: 1, name:'test' }};下記のようにuserオブジェクトに存在しないmailプロパティを取得しようとするとエラーになります。・プロパティ取得例let mail user.mail;・エラー内容js Cannot read property 'mail' of nullエラーを回避する為には事前にオブジェクトの定義を確認する必要があります。[対応]・特定プロパティが存在するか確認するif ('mail' in user) { let mail user.mail;}・オブジェクトが定義されているか確認するif文にオブジェクトを記述します。オブジェクトが定義されていればidを取得する処理を記述するとします。ただ、これはuserオブジェクトが定義されている場合、必ずidプロパティが存在する事を前提とします。if (user) { let id user.id;}上記のように状況に合わせた対応をしてみて下さい。

カテゴリ: JS 2021-01-11 19:14:12
article-thumbnail

JavaScriptの連想配列の比較と抽出方法

【概要】JavaScriptの連想配列の比較と抽出方法についてまとめます。【詳細】・前提以下のようなobj1とobj2というオブジェクトがあるとします。obj2に存在しない配列のみをobj1から抽出します。抽出データ用にobj1のコピーをobj3に格納します。※ 「let obj3 obj1;」とすると、obj3の内容を変更した際にobj1にも影響する為、JSONのメソッドを使用してコピーを作成する必要があります。let obj1 [ { id: 1, name: 'hoge' }, { id: 2, name: 'fuga' }, { id: 3, name: 'hogehoge' }, { id: 4, name: 'fugafuga' }, { id: 5, name: 'hogefuga' }];let obj2 [ { id: 1, name: 'hoge' }, { id: 3, name: 'hogehoge' }, { id: 5, name: 'hogefuga' }];let obj3 JSON.parse(JSON.stringify(obj1));・抽出方法for (let o2 of obj2) { let index obj3.findIndex(({name}) name o2.name); obj3.splice(index, 1);}・抽出方法詳細obj2をループさせます。obj2に存在する値がobj3に存在した場合、obj3から対象の配列を削除します。これにより、obj2に存在しない値のみを所有した連想配列が作成されます。

カテゴリ: JS 2020-10-21 23:01:05
article-thumbnail

JavaScriptでタイムスタンプから日付フォーマットを出力する

【概要】JSでタイムスタンプを元に日付フォーマットを出力する方法についてまとめます。ここでは下記を例にしてその設定から出力までをまとめます。「1602832648283」のタイムスタンプがあった場合に、出力される結果は「10/16 16:17」になります。【詳細】・タイムスタンプの作成タイムスタンプは以下のように作成可能です。let date new Date();let timestamp date.getTime();※ 上記で作成されるタイムスタンプは実行した時間になります。・タイムスタンプから日付を出力するタイムスタンプを元にDateオブジェクトを作成します。これによって、タイムスタンプが指している時刻の取得は完了です。あとは下記のように月日時間を取得します。const date new Date(1602832648283);const month date.getMonth() + 1;const day date.getDate();const hour date.getHours();const minutes date.getMinutes();console.log(month + '/' + day + ' ' + hour + ':' + minutes);出力結果10/16 16:17※ 月に1を足している理由「date.getMonth() + 1;」で1を足している理由は、getMonthメソッドが「0-11」を範囲として出力します。つまり、1月を出力しようとした場合、そのまま出力すると0になります。よって、1を足す事で指定した月が出力されます。

カテゴリ: JS 2020-10-21 00:29:50
article-thumbnail

JavaScript(Puppeteer)で特定の要素が存在するか確認する

【概要】特定の要素が存在するかを確認する方法をまとめます。ここではPuppeteerを使用し、画像のURLまで遷移し、imgタグが存在するか存在しないか(404ページ)を確認する方法を例にまとめています。【詳細】[ソース概要]通常画像のURLに遷移するとbodyタグの配下にimgタグがあります。しかし、404で画像が存在しない場合はbodyタグの配下にimgタグはありません。よって、bodyタグ配下にimgタグの有無を判断基準とします。imgタグが存在すればimgResult変数にtrueを代入し、404の場合はfalseを返します。[ソース]await page.goto(imageSrc, { timeout: 10000, waitUntil: "domcontentloaded" });let imgResult await page.evaluate(() { let bodyElm document.getElementsByTagName('body'); let imgElm bodyElm[0].getElementsByTagName('img'); if (typeof imgElm[0] ! "undefined") { return true; } else { return false; }});※ imageSrc変数には画像のURLが入っています。

カテゴリ: JS 2020-08-22 14:49:14
article-thumbnail

JavaScriptでローカルストレージを使用する方法まとめ

【概要】ブラウザのローカルストレージの使用方法をまとめています。ここでは保存、削除、保存されているKeyを読み込む方法をまとめています。【詳細】・保存方法1. Keyと値を保存するlocalStorage.setItem('Key', 'Value');2. オブジェクトを保存する保存する場合は「JSON.stringify()」関数を使用します。let obj { id: 1, name: "test"};localStorage.setItem('Key', JSON.stringify(obj));・データの取得方法1. データ取得localStorage.getItem('Key');2. オブジェクトで格納しているデータを変換して取得する「JSON.parse()」関数を使用してオブジェクトの形にします。JSON.parse(localStorage.getItem('Key'));3. 保存されているデータを全件取得するif文の「localStorage.hasOwnProperty()」関数を使用しないと「length」や「key」といった値も取得してしまいます。let storageList [];for (let key in localStorage) { if (localStorage.hasOwnProperty(key)) { storageList.push(key); }}・データを削除するlocalStorage.removeItem('Key');・ローカルストレージを初期化するlocalStorage.clear();

カテゴリ: JS 2020-08-15 16:49:17
article-thumbnail

JavaScriptの即時関数サンプル

【概要】ブラウザで即時関数を設定したページを開いた際にJSを実行するソース例です。ここではブラウザのローカルストレージを使用した例も記述しています。【即時関数の基本】ページのscriptタグ内に即時関数を組みます。lt;script$(document).ready(function () {...処理...});lt;/script上記を記述したページを開いた際に「...処理...」部分が実行されます。【ローカルストレージを使用した即時関数サンプル】[フローチャート]1. ローカルストレージに登録されているkeyを全て取得2. ローカルストレージに登録されているkeyがidに設定されているタグを取得3. 2で取得したタグのクラスに「registerd」を追加[ソース]lt;script$(document).ready(function () { let localStorageList []; for (let key in localStorage) { if (localStorage.hasOwnProperty(key)) { localStorageList.push(key); } } for (let key of localStorageList) { let elms document.getElementById(key); for (let elm of elms) { elm.classList.add('registerd'); } }});lt;/script

カテゴリ: JS 2020-08-11 00:29:02
article-thumbnail

JavaScriptのメソッド実行において親要素と子要素のメソッドを同時に実行させない方法

【概要】JavaScriptのメソッド実行において親要素と子要素のメソッドを同時に実行させない方法についてまとめています。onclickやjQuery等でクリック時に実行させたい対象の親要素にもクリックで発動させるメソッドが組まれていると子要素のメソッドが実行された後に親要素も実行されます。親要素も実行させたい場合は設定する必要はありませんが、子要素のみ実行させたい場合はこのドキュメントを参考にしてみてください。【詳細】・JavaScriptの場合function showModal() { // showModalメソッド実行させたい処理を記述。 event.stopPropagation();}そのメソッドで実行させたい処理を記述した後に「event.stopPropagation();」を記述すると親要素のメソッド処理には移らず、実行されません。・jQueryの場合$(document).on('click','#hoge',function(e) { // id"hoge"の要素を押下した時に実行させたい処理を記述。 e.stopPropagation();});functionの引数に「e」をセットする事で「e.stopPropagation();」で処理を止めるメソッドを実行できます。

カテゴリ: JS 2020-08-10 01:03:25
article-thumbnail

JavaScriptによるCookie登録、取得、削除方法と検索履歴をCookie、ローカルストレージに保存する方法

【概要】JavaScriptでのCookieの操作についてまとめます。また、サイト内検索の検索履歴をCookieとローカルストレージに登録する方法もまとめています。Cookieの使用例としても参考になると思うので、良かったら参考にしてみて下さい。【基本操作】・Cookieに値を保存するdocument.cookie "KeyValue";・Cookieの特定の値を削除するdocument.cookie "Key; max-age0";・Cookieの全値を取得するdocument.cookie取得したCookie例"hoge1234; huga9876"・Cookieを配列で分ける上記のようにCookieの値を取得する場合、全ての値を取得します。Key毎に分けて配列に格納するには下記のようにsplitメソッドを使用します。let cookiesArray document.cookie.split("; ");【検索履歴をCookie、ローカルストレージに保存する方法】[概要]検索実行前にJavaScriptでCookieに検索ワードを登録し、画面遷移します。即時関数でCookieに登録されている検索履歴をローカルストレージに格納します。ローカルストレージに格納した値はCookieから削除します。[ソース]・検索formlt;form action"/search" method"post" onsubmit"return registerSearchWord()"lt;input type"search" name"search-word" value"" placeholder"キーワードを入力" class"search_box" requiredlt;button type"submit" value"検索"lt;/buttonlt;/form・検索実行前に検索ワードを登録するJSfunction registerSearchWord () {let date new Date();cookieKey 'search-' + date.getTime();searchWordElms document.getElementsByClassName('search_box');cookieValue searchWordElms[0].value;document.cookie cookieKey + "" + cookieValue;}・即時関数でCookieに登録されている検索履歴をローカルストレージに保存し、Cookieから検索履歴を削除するJSlt;script$(document).ready(function () {// ・Cookieを配列化して取得するlet cookiesArray document.cookie.split("; ");// ・ローカルストレージに登録する為のオブジェクト定義let searchHistory {word: '',createdAt: ''};// ・ローカルストレージに検索結果を登録し、登録したCookieを削除する// フローチャート// 1. CookieのKeyの文頭に「search-」があるCookieを使用する// 2. 検索ワードと検索時のタイムスタンプをオブジェクトに代入する// 3. ローカルストレージに検索履歴を保存する// 4. 登録したCookieを削除するfor (let cookie of cookiesArray) {if (cookie.indexOf('search-') 0) {let cookieStr cookie.replace('search-', '');let cookieArray cookieStr.split('');searchHistory.createdAt cookieArray[0];searchHistory.word cookieArray[1];localStorage.setItem(cookieArray[0], JSON.stringify(searchHistory));document.cookie 'search-' + cookieArray[0] + "; max-age0"}}});lt;/script

カテゴリ: JS 2020-07-26 00:33:51
article-thumbnail

JavaScriptでHTMLタグ操作方法まとめ

【概要】JavaScriptでHTMLタグの操作方法についてまとめます。ここでまとめている内容は下記になります。・クラスの追加と削除・style操作・テキスト操作・複数要素へのstyle適用する場合【詳細】[前提]下記のように対象タグの情報をelm変数に格納している事とします。let elm document.getElementById('id01');[クラス操作]・クラスの追加elm.classList.add('w-100');実行例lt;h1 id"id01" class"w-100"例lt;/h1・クラス削除elm.classList.remove('w-100');実行例lt;h1 id"id01"例lt;/h1[style操作]・スタイルに代入する方法elm.style 'background-color: #FFF';・プロパティを指定して代入する方法例下記の例は文字色と横幅の指定を行っています。elm.style.color '#FFF';elm.style.width '100%';・style全削除elm.style '';・特定プロパティの削除elm.style.color '';[テキスト操作]・innerHTMLinnerHTMLでは内部にHTMLタグが入っている場合、そのまま代入すると削除してしまいます。その場合はreplaceメソッドで変更して代入する事をお勧めします。elm.innerHTML elm.innerHTML.replace('タイトル1', 'タイトル2');・innerTextelm.innerHTML 'タイトル3';[複数要素へのstyle適用する場合]document.getElementsByClassName等のメソッドで対象の要素群を取得し、for文で回して適応します。let elms document.getElementsByClassName('hoge');for (let elm of elms) {elm.style.color '#FFF';}

カテゴリ: JS 2020-07-21 03:11:54