axiosとはどんな場面で使用するライブラリか

axios Javascript ライブラリ非同期

axiosとは？ axiosを使用した処理例 axios以外のJavascriptのHTTPクライアント axiosとは？ axiosは、JavaScriptで使用される人気のあるHTTPクライアントライブラリです。主にWebアプリケーションやNode.jsアプリケーションでサーバーとのHTTPリクエストを…

#axios #非同期 #fetch #ライブラリ #Request

2024-04-13

Next.jsとは？React.jsとの書き方の違い

React.js Next.js フレームワーク Javascript

Next.jsとは？React.jsとの違い Next.jsで書いた処理の例 Next.jsで書いたサーバサイドレンダリング処理の例 Next.jsで書いたサーバサイドレンダリング処理でAPIからデータを取得する場合の例 Next.jsとは？React.jsとの違い Next.jsはReact.jsのフレームワ…

#Next.js #React.js #フレームワーク #Javascript #SSR

2022-12-31

amp-date-pickerの初期値を今日(ページを開いた当日)にする方法

AMP HTML Javascript

amp-date-pickerの初期値 dateオプションにPODを設定 amp-date-pickerの初期値 AMPでもカレンダー機能を使用するためには、amp-datepickerが便利ですが、オプションの設定は普通のJavascriptのdatepickerに比べてわかりづらく、詰まるポイントになります。 A…

2020-10-13

yarnでnightwatch.jsを動かす簡単設定

Javascript Node yarn

nightwatch.jsとは nightwatch.jsはE2Eテストフレームワークとして最も有名なものの1つではないでしょうか。開発したWebのアプリケーションに対して1つ1つ手動でテストをしていくのは大変なので、Seleniumでテストを自動化させることが主流になっていますが…

2020-06-23

vue-slickをNuxt.jsで使用した時の「window is not defined」エラー解消法

Javascript Vue.js Nuxt

vue-slickを使用した場合のエラーエラーの解消法解消法1 解消法2 Nuxtでは同様のエラーが発生するプラグインが多い vue-slickを使用した場合のエラー複数画像のスライド表示を簡単に実装できるJavascriptのプラグインであるslick.js。これをVueやNuxtに…

2020-06-13

Nuxtのrouterやmetaを自由にカスタマイズしたい

Vue.js Nuxt Javascript

Vue.jsとNuxt.jsのrouterの違い Nuxt.jsでのルーティングは便利だけどデメリットもどうやってNuxtでルーティングをカスタマイズする？ metaの設定は？ Vue.jsとNuxt.jsのrouterの違い Vue.jsでは、ルーティングを設定する際にrouter/index.jsなどで自分で自…

2020-06-09

文章どうしの差分を取得するならdiff-match-patchが便利

Javascript

文章どうしの差分を取得モジュールのインストールコードの実装文章どうしの差分を取得文章の差分を取得するような機能を作りたい時、diff-match-patchを使えば簡単に実装することができます。 PythonやGo、PHPなど、各種言語にライブラリが用意されてい…

2020-06-09

複数のURLリンクを一発でタブ表示！

Javascript

Javascriptのwindow.open 複数ページを開く時のネックになるポイント Javascriptのwindow.open Javascriptでaタグの「target=_blank」の要領で、別タブでページを開きたいことありますよね。そんな時にはwindow.open('ここにURL', '_blank')を使えばOKです…

2020-06-09

target="_blank"にはrel=noopenerを付けないと超怖い

HTML セキュリティ Javascript

target="_blank" rel="noopener"を付けないとどうなる？どんな場面で悪用されてしまうのかまとめ target="_blank" 外部ページへ遷移する際に使われるtarget="_blank"。あまり知られていないのですが、そのまま使うと実はセキュリティ的なリスクをはらんで…

2020-06-09

NuxtでQRコードを簡単に生成する機能を実装！こんなに簡単に実装できたのか！

Vue.js Nuxt Javascript

QRコード生成機能は実装が簡単！モジュールのインストールコードの実装筆者が実装してみたページ QRコード生成機能は実装が簡単！ URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。実際に実装してみましたが、超簡単にできたので共有…

2020-01-07

Nuxtのソース表示でcssが全部出力されないようにする方法

Nuxt Vue.js Javascript

Nuxtでソースの表示 extractCSSの設定を変更するだけで解決 Nuxtでソースの表示ブラウザ上からページのソースを見ることができますが（Chromeで「ページのソースを表示」を実行する）Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されま…

2019-12-25

Vue.jsではjavascript:void(0)をなくそう

Javascript

aタグのイベントイベントを止める方法が用意されている aタグのイベント javascriptでは数々のイベントを設置するもの。ホバーした時、スクロールした時、、、など色々パターンはありますが、特に多いのはクリック時のイベントではないでしょうか。そして…

2019-12-18

Vue.jsから開発モードでクロスドメインのアクセス

Vue.js Javascript

開発時のVueとサーバサイドのポート番号ポート番号が異なることでの問題点 proxyTableで解決開発時のVueとサーバサイドのポート番号 VueでサーバサイドのAPIを使用する開発をしており、サーバサイドのサーバも起動させている場合、Vueとサーバサイドのポー…

2019-12-12

Nuxtの$axiosにおけるgetと$getの違い

Nuxt Vue.js Javascript

Nuxtで使用する$axios getと$getの違い getで取得するパターン $getで取得するパターン POSTも一緒？ Nuxtで使用する$axios SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、 Nuxtの場合はnuxt-community/axios-moduleの…

2019-12-11

VueやNuxtで消えないdefault child route のWARNING

Vue.js Nuxt Javascript

routerでchildrenを設定していると表示されるWARNING 不要なname設定 routerでchildrenを設定していると表示されるWARNING VueやNuxtでは、routerの設定でchildrenを使うと構造的に見やすいルーティングを生成できますよね。ただし、以下のような一件問題な…

2019-12-09

Nuxtでfunction()から始まるようなJavascript構文を呼び出し

Javascript Nuxt

function()から始まるような構文モジュールを使って呼び出し Google Tag Managerを使いたい時 Google Fontsを使いたい時その他の方法 function()から始まるような構文サイト制作でJavascriptのライブラリを使う昨今、サイト表示時点で外部にアクセスする…

2019-07-09

Nuxt.jsでプロジェクトを作成してみた

Vue.js SPA Javascript

Nuxt.jsとは？ Nuxt.jsプロジェクトの作成 Nuxt.jsとは？ Nuxt.jsとは、Vueアプリケーションを作成するフレームワークです。通常のVue.jsの開発で頻繁に使用する以下の機能を最初から含んでいます。・Vue 2 ・Vue Router ・Vuex ・Vue Server Renderer ・vu…

2018-11-22

Vue.jsでビルド時にgzipファイルを出力する方法

Javascript Vue.js npm

出力ファイルは極力圧縮したい Vue.jsでのnpmビルド時に同時に圧縮手順サーバ側でgzipを読み込む設定にする出力ファイルは極力圧縮したい Webサービスにおいて、コンテンツ内容や機能面の充実度が重要であることは言うまでもありませんが、ページのパフォ…

2018-10-17

Vue.jsのv-ifやv-forで無駄にタグを増やしたくない時はtemplateで代用するのが便利

Vue.js Javascript

Vue.jsでの分岐やループ処理 templateタグを使う Vue.jsでの分岐やループ処理 Vue.jsでは分岐やループ処理で、動的にタグを描画したい場面がありますよね。例えばリストを動的に増やしたい時は、liタグにv-forを付与したり、ある文言が特定の条件を満たした…

2018-10-16

Vue.jsでURLの#(シャープ)を取り除く方法

Vue.js Javascript

URLの#(シャープ) historyモードにすることで解決 URLの#(シャープ) Vue-cliでvue.jsのセットアップを行った時、開発環境のURLを叩くと後ろに#(シャープ)が付いてしまいます。http://localhost:8080と入力しても、http://localhost:8080/#/ となってしまいま…

2018-08-31

XSSってどうやって仕込まれる？

セキュリティ SPA Javascript

XSSについてどうやってタグを入れられる？ GETパラメータにスクリプトを入れる方法 POSTでスクリプトを埋め込まれる方法まとめ XSSについてこのページを閲覧している方ならご存知とは思いますが、まずはXSSについて超簡単に説明します。この事象は入力フ…

2018-08-28

SPAサイトのCSRF対策

セキュリティ Vue.js Javascript

CSRF対策について CSRFとは？ CSRFによる被害通常のCSRF対策 SPAサイトのCSRF対策方法1 リファラで判断方法2 ログイン時に発行したトークンを照合方法3 CORSと組み合わせてOriginをチェック CSRF対策について CSRFとは？このページに来られた方ならもう…

2018-08-14

Spring BootのFormクラスでIntegerの項目にNULLはPOSTできない

Spring Boot Thymeleaf Java Javascript

NULLをPOSTした時点でStringとして認識されてしまう数値(Integer)型の項目で空の可能性がある場合 AjaxでPOSTする時の例 NULLをPOSTした時点でStringとして認識されてしまう Spring Bootにおけるフォームから値をPOSTする際の挙動になりますが、Integer型の…

2018-07-10

Vue.jsのdataプロパティで配列の変更はspliceで置き換えろ！

Javascript Vue.js

dataプロパティで配列の定義変更する場合はspliceで置き換え削除する場合もsplice 末尾に追加する場合は従来通りpushを使え多次元配列はループなどで同様に変更可能それぞれの配列の2番目（インデックスのキーが1）の値を変更する場合 dataプロパティで…

2018-07-09

Vue.jsのdataプロパティでオブジェクトの変更は$setで置き換えろ！

Javascript Vue.js

dataプロパティでオブジェクトの定義変更する場合は$setで置き換え配列中のオブジェクトはループなどで同様に変更可能例1) 配列の2番目（インデックスのキーが1）の場合にvalueを変更する場合例2) nameが「test2-Name」の場合にvalueを変更する場合 data…

2018-07-06

ThymeleafでJavascriptエラー(SAXParseException)

Thymeleaf Javascript

Thymeleafでのorg.xml.sax.SAXParseException例外解決方法1 「&」をエスケープ解決方法2 エスケープしなくても使用できるようにコメントを挿入する Thymeleafでのorg.xml.sax.SAXParseException例外 Thymeleafは構文チェックが厳しく、Javascriptなどをそ…