JavaScriptでのIPアドレス取得 Webサイトによってはブラウザが変わっても同じユーザーか判別するためにIPアドレスを使用することがある。 JavaScriptでIPアドレスを取得するにはfetchでipinfo.ioからJSONデータを取得する。 fetch('https://ipinfo.io?callback') .then(res => res.json()) .then(json => console.log(json.ip)) // => 125.87.160.34
![1分でわかるJavaScriptでのIPアドレス取得方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/eff0d2fa95fcd55100951f873dea66dd9d20fbf6/height=288;version=1;width=512/https%3A%2F%2Fiwb.jp%2Fwp-content%2Fuploads%2F2020%2F12%2Fjavascript-ipinfo-jquery-axios.png)
JavaScriptでのIPアドレス取得 Webサイトによってはブラウザが変わっても同じユーザーか判別するためにIPアドレスを使用することがある。 JavaScriptでIPアドレスを取得するにはfetchでipinfo.ioからJSONデータを取得する。 fetch('https://ipinfo.io?callback') .then(res => res.json()) .then(json => console.log(json.ip)) // => 125.87.160.34
Browsers (See also Installation.) There are many ways to use bluebird in browsers: Direct downloads Full build bluebird.js Full build minified bluebird.min.js Core build bluebird.core.js Core build minified bluebird.core.min.js You may use browserify on the main export You may use the bower package. When using script tags the global variables Promise and P (alias for Promise) become available. Blu
JavaScript Promise / Async Function の使い方 JavaScript の Promise や Async Function(async/await)を使った非同期処理の基本的な使い方についての解説のような覚書です。 同期処理と非同期処理 プログラムの処理は同期処理(sync)と非同期処理(async)に分類することができます。 同期処理は記述されたコードを順番に処理し、1つの処理が終了すると次の処理を実行します。そのため、どれかの処理に時間がかかるとその処理が終了するまでその次の処理に進むことができません。 以下の oneSecMsg() は1秒経過したらメッセージを表示して終了する関数で、この関数を実行すると1秒間処理がブロックされます。 以下を実行すると、「Start」とすぐに表示され、oneSecMsg() により同期的にブロックされ1秒後に「一秒経
Intro Promise.allSettled() と Promise.any() の仕様策定が進んでいる。 両者は近いレイヤの仕様では有るが、作業の進捗には差がある。 Promise.allSettled は Stage 4 であり、 Chrome や Safari TP には実装もされている Promise.any は Stage 2 であり、実装はまだない ここでは、これらがあると何が嬉しいのかを Promise.all(), Promise.race() の特徴を踏まえて解説する。 Promise.all()/race() Promise.all(), Promise.race() は、いずれも複数の Promise をまとめて処理する Utility Method のようなものである。 all は全ての Promise が Resolve したら Resolve し、 race
はじめに、の前に(2020/10/29 追記) (いつの間にか)MDNに、forEachはPromiseを待たない、という趣旨の説明が書かれています。 MDNを読めば、この記事の内容を読む必要は無いと思います……。 はじめに Javascriptでは、async/awaitを使う事によって、非同期処理が非常に簡潔に書ける様になっています。 今後はasync/awaitを使ったプログラミングが増えていくと思います。 node.jsで、async/awaitを使ったプログラミングをしていたのですが、ハマった事があったので、自分用の備忘録としてメモ書きです。 実行環境 OS: Debian 9.6 node.js: v11.2.0 問題となったコード 配列をconsole.logで出力するだけのプログラムです。 ただし、console.log(value)の前に、sleep(1000)が入ってい
JASRAC許諾第9009285055Y45038号 JASRAC許諾第9009285050Y45038号 JASRAC許諾第9009285049Y43128号 許諾番号 ID000002929 ABJマークは、この電子書店・電子書籍配信サービスが、著作権者からコンテンツ使用許諾を得た正規版配信サービスであることを示す登録商標(登録番号 第6091713号)です。
株式会社 エンジョイワークス 令和6年度 国土交通省PPP協定パートナー 宅地建物取引業 [神奈川県知事(3)第28062号] 一級建築士事務所 [神奈川県知事登録 第16506号] 不動産特定共同事業者 [金融庁長官・国土交通大臣 第114号](第1号、2号、3号、4号に掲げる事業を行う) 第二種金融商品取引業 [関東財務局長(金商)第3148号] 住宅宿泊管理業者 [国土交通大臣(02)第F00604号](関連会社グッドネイバーズにて取得) ファンド出資時の注意事項 出資に際しご負担頂くのは出資金額のみで、それ以上の支払は発生しません。出資金から年度毎に管理報酬を、その他銀行手数料等をご負担頂きます。 事業の状況により、利益の分配が行われない可能性及び返還される出資金が元本を割る可能性があります。詳しくはハロー!RENOVATIONの「ファンド情報」から内容をご確認ください。 不動産特
Vue.js サーバサイドレンダリングガイド 注意: このガイドは Vue.js またはサポートしているライブラリの以下の最小バージョンを必須としています: vue & vue-server-renderer >= 2.3.0 vue-router >= 2.5.0 vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0もし以前に、 SSR で Vue 2.2 を使用していた場合、 推奨されるコードの構造が少しだけ違うことに気がつくでしょう (新しいオプションの runInNewContext を false にしている場合)。あなたの既存のアプリケーションは依然として動作はするでしょうが、新しく推奨される方に移行されることをオススメします。 サーバサイドレンダリング (SSR) とは何か? Vue.js はクライアントサイドアプリケーションを構築
こんにちは、エンジニアの小宮です。今回はリモートデータベースのデータを直接SQLで操作することができるdblinkをご紹介します。dblinkを使用することで手軽にリモートデータベースのデータをローカルデータベースに反映できたりとなにかと便利です。 どういう用途でdblinkを使ったのか dblinkを使ってみよう! dblinkが使えるかのチェック! コネクションの確立 リモートからのデータの取得 コネクションの切断 活用例 リモートのDBと同じレコードをローカルに保存したい(INSERT文) ローカルのデータをリモートの内容に更新したい!(UPDATE文) dblinkのユースケース まとめ どういう用途でdblinkを使ったのか 業務の一環としてデータベースを分割する機会がありました。新しく作ったデータベースにもともとのデータベースからデータを持ってくる必要があり、そのとき使ったpo
こんにちは、技術戦略室の安田です。 今回はHtmlを描画してjsonの値として返信するAPIサーバが必要になり、Node.js、Vue.js、それとWebpackを使用してサーバサイドレンダリングサーバを実装しました。 サーバサイドレンダリング(SSR)...今更やる必要ある? モジュールをインストール 必要なファイルの作成 Vueのコンポーネント周りを記述 バンドルのエントリーポイントを記述 Webpackのバンドル設定を用意 Expressサーバと開発用ホットリロードサーバを用意 起動スクリプトを追記 Vue SSRを作ってみての所感 サーバサイドレンダリング(SSR)...今更やる必要ある? 2021年の現在、まだWebのトレンドはVue.jsやReactJSを駆使したSPAサイトのように感じます。 スマホやPCの性能もここ数年で向上し、クライアント側でHtmlを描写させることがペー
概要 先日、非同期処理に関して、下記のようなツイートをしました。 ・非同期処理A〜Cの3つ ・全て成功した場合のみ処理Dを実行 ・A〜Cは依存関係なし 上記ケースで、お約束かのように await A await B await C と書く事がないように、若手を指導しなければなあ。— Masaki Suzuki@フリーランスクラウドエンジニア (@makky12) 2020年1月9日 このツイートに対して、思った以上に反響を頂いた(と思う)ので、今回もう一度async/awaitのことを記事にしました。 ちなみに前回書いたasync/await関連の記事はこちら。 makky12.hatenablog.com なお今回の記事を書くにあたり、下記ブログを参考にしました。 (ブログを書こうと思ったきっかけもこれを見たから) 「メソッド実行とawaitの分離」の書き方など、役立つソースが多いです。
import React from "react"; import { useForm } from "react-hook-form"; const Example = () => { const { handleSubmit, register, formState: { errors } } = useForm(); const onSubmit = values => console.log(values); return ( <form onSubmit={handleSubmit(onSubmit)}> <input type="email" {...register("email", { required: "Required", pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: "i
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback Promise.resolve() は静的メソッドで、 Promise を与えられた値で「解決」させます。値がプロミスの場合は、そのプロミスが返されます。その値が Thenable であれば、Promise.resolve() は then() メソッドを、準備した 2 つのコールバックと共に呼び出します。それ以外の場合は、その値で履行するプロミスが返されます。 この関数は複数階層のプロミス風オブジェクト (例えば、何かで解
import ky from 'ky'; const client = ky.create({ prefixUrl: 'http://localhost:3001', headers: { 'Content-Type': 'application/json' }, timeout: 5000, // milliseconds }); import ky from 'ky'; const client = ky.create({ prefixUrl: 'http://localhost:3001', headers: { 'Content-Type': 'application/json' }, timeout: 5000, // milliseconds }); const getData = async (): Promise<void> => { try { const respons
« 前のページ 次のページ » コレクション内の各アイテムに対する処理は非常に一般的な操作です。JavaScript では簡単な for ループから map()、filter() にいたるまで、コレクションに対する反復処理の複数の方法を提供します。 イテレーターとジェネレーターは、コア言語の内部に反復処理が直接的に取り入れられており、for...of ループの動作を簡単にカスタマイズできる仕組みをもたらします。 詳細についてはこちらもご覧ください: Iteration protocols for...of function* と ジェネレーター yield と yield* JavaScript では、イテレーターはシーケンスおよび潜在的には終了時の戻り値を定義するオブジェクトです。 より具体的に言うと、イテレーターは、次の 2 つのプロパティを持つオブジェクトを返す next() メソッ
動作確認 ( yield, nextメソッドの動作を理解する ) nodeで動作確認します。app.jsというファイルを作成して、以下処理を記述します。 function* generatorFn1() { console.log('generatorFn1 1') yield 100 console.log('generatorFn1 2') yield 200 console.log('generatorFn1 3') } const generator1 = generatorFn1() console.log('start') console.log('next 1') console.log(generator1.next()) console.log('next 2') console.log(generator1.next()) console.log('next 3') c
# Vueで学ぶJavaScriptのオブジェクト指向今回やること Monsterクラスの作成スライムをインスタンス化モンスタークラスを継承し、メタルボディをもったMonsterMetalを作成はぐれメタルをインスタンス化さらなる拡張を行う場合(はぐれメタルを無理やり題材にしたのできれいなオブジェクト指向ではないです) がっつりゲームのモンスタークラスを作成する場合は以下の記事が参考になりそうです。 【Breed】RPGのモンスターなどのキャラクターを作成するときに使うデザインパターン - Qiita # Monsterクラスの作成まず簡単にドラクエのモンスタークラスを作成してみます。 ステタースを持っている攻撃する逃げる import merge from 'lodash/merge' export default class Monster { constructor(options
# JavaScriptの配列操作まとめ# JavaScriptの配列とはJavaScriptにおける配列の定義は 配列の各要素には0から始まる数字がキーとなるlengthというプロパティで、配列の要素数がわかる初心者の頃に間違いがちなのが、オブジェクト(連想配列)に対してfilter()などの関数を使用して、使えないよって言われるパターン。 連想配列って名前が勘違いの原因かと思います。 オブジェクトもキーを数字にして生成することは可能ですが、配列ではありません。 var drinks = { "0": "コーヒー", "1": "カフェオレ", "2": "メロンソーダ", } drinks[0] >> "コーヒー" drinks.length >> undefined
Vue.jsの配列操作でちょこっとハマったのでメモ。 dataに配列を定義した時、リアクティブデータとしてリアルタイムに更新されるようにするにはいくつか制約があるので注意が必要。配列を操作する場合は以下のメソッドを使えばVue.jsが変更を検知してくれる。つまりはリアクティブデータとしてリアルタイムに変更が反映される。 push() pop() shift() unshift() splice() sort() reverse() ところが、直接indexを指定して中身を書き換えたり items[2] = 'foo' 配列を空にするためにlengthを0にしたり items.length = 0 上記のやり方はVue.jsが配列の変更を検知できないので、リアクティブデータとして反映されない。これはJavascriptの言語仕様上の制約らしい。 Vue.jsで配列の中身をまるっと空にしたい場
前回、ubuntu20.10にデータベースFirebird3.0のインストールでハマった顛末を書きましたが、トラブルまでの流れを書いたので必ずしも正しいインストールの順序になっていません。 なので、今回は正しいインストールの順序を列挙するためにまとめました。 Firebirdのダウンロード以下のサイトからダウンロードできます。https://firebirdsql.org/en/firebird-3-0/ libtommathをインストール$ sudo apt-get update -y$ sudo apt-get install -y libtommath-dev libtommathのリンクファイルを作る$ sudo ln -sf /usr...
Vue.js配列操作 配列に要素を追加 See the Pen VwwbLgJ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. 配列から要素を削除 See the Pen bGGWVdW by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. v-forの中の(item,index)というところがミソで、配列を展開する際にその要素が配列内で持っているインデックスも取り出すことができます。 ↓最大値を求める際のreduce、参考にしたサンプルの通りに書いたのですが、Math.Maxのようなものを使用するイメージが強かったので、参考にしたサイト qiita.com 配列の要素を更新する See the Pen xxxdwro by すず@progateでお勉強はじめました (@hpsuzucat) on
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
では、解説していきます。 本記事で構築するもの 本記事では下記スライドのように確認画面や送信画面がない1ページで完結するお問い合わせフォームを構築します。フロントはVue.js、サーバーサイドはPHPを使用。一応、正しいメールアカウントを設定することでメールの送信も可能となっています。 注意点 本記事の主目的がメールの送信なので、構築する上で省略している部分が多々あります。特にバリデーションチェックについてはフロント側で簡単なものしか組んでいません。サーバー側なんてぱっぱらぱーの状態なのでその点ご注意ください! 開発環境はざっくり下記のような感じです。バージョンによっては動作しない可能性がございます。また、Node.jsやVue.jsのインストールにつきましては解説しておりませんので、予めご了承ください。 OS:Windows 10Vue CLI:4.5.11PHP:7.4.1サーバー:X
Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework. Get Started Star Sinon.JS on Github Get Started Install using npm To install the current release (v18.0.0) of Sinon: npm install sinon Setting up access Node and CommonJS build systems var sinon = require("sinon"); Direct browser use <script src="./node_modules/sinon/pkg/sinon.js"></script> <script> // Ac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く