マガジン

  • カフェ五選

    あああいいい

  • カフェ一覧

    あああ

最近の記事

通信の基本をまとめてみる

ポイント 非同期処理と非同期通信って単語が似てるからごっちゃになるけど、意味合いは違う 非同期処理:Promise 非同期通信:Ajax HTTP通信とはHyper Text Transfer Protocol の略称 webで通信のやり取りをする上での規約やルールのこと httpsは通信の暗号化ができるので、基本的にはこちらを推奨 クライアント(僕らが持ってるPCやスマホ)からHTTPリクエストが送られて、HTTPレスポンスとして情報が返却される HTTPリ

    • JavaScriptのイベントの設定方法とバブリングについて

      この記事は下記の内容について説明します イベントの設定方法は3パターンあり、それぞれの方法 イベントのバブリングによって発生する問題と回避方法 イベントの設定方法 HTMLに直接イベント関数を埋め込むパターン <button onclick="changeBackGroundColor()"> のように直接HTML内にイベントを記述する JS側でイベントメソッドを設置するパターン 指定したいDOM(ここではbutton-js)を取得して、そのDOMに対してbutto

      • JavaScriptでthisっていつ使うの?

        使うシーンは主に2パターン Object内の変数を呼び出すときthisを使う Objectそのものを返す(関数の戻り値をObjectそのものにしたい)ときにthisを使う 1. Object内の変数を呼び出すときthisを使う オブジェクトのスコープ内の変数を呼び出すパターン const person = { name: '高橋', age: 24, getName() {        // personオブジェクト内の変数 name を呼び出したいので

        • Navigator.geolocationプロパティを使って現在地を中心に地図を描画する方法

          記事は3部に分割しています。 Step1 : 一番簡単な地図の貼り付け方 Step2 : Maps JavaScript APIを使って地図を描画する方法 Step3 : 現在地を中心に地図を描画する方法 writing now…

        通信の基本をまとめてみる

        マガジン

        • カフェ五選
          0本
        • カフェ一覧
          0本

        記事

          Vue3で作ったプロジェクトにMaps JavaScript APIを使って地図を描画する方法

          記事は3部に分割しています。 Step1 : 一番簡単な地図の貼り付け方 Step2 : Maps JavaScript APIを使って地図を描画する方法 Step3 : 現在地を中心に地図を描画する方法 準備 VueCLIでプロジェクトを作成する Google Maps Platform でAPIキーを発行する 方法はこちらから Maps JavaScript API のライブラリを導入する 公式サイト $ npm i @googlemaps/js-api-loa

          Vue3で作ったプロジェクトにMaps JavaScript APIを使って地図を描画する方法

          Maps JavaScript API とは?一番簡単な地図の貼り付け方

          記事は3部に分割しています。 Step1 : 一番簡単な地図の貼り付け方 Step2 : Maps JavaScript APIを使って地図を描画する方法 Step3 : 現在地を中心に地図を描画する方法 Maps JavaScript APIとは? ウェブアプリ用に動的でインタラクティブな地図、位置情報、地理空間のエクスペリエンスを作成し、高度にカスタマイズできるようにするための便利なAPIのこと 便利なAPIとは? 地図の表示をカスタマイズしたり、指定した場所にピ

          Maps JavaScript API とは?一番簡単な地図の貼り付け方

          FlexBoxを使ってheaderとメインコンテンツとfooterの高さを調整する

          ga実現したいこと headerとfooterの間のコンテンツ(メインコンテンツ)の高さが低い時でも、常にheaderは画面上に、footerは画面下に固定して表示されている メインコンテンツの要素が増えて高さが出た時は、メインコンテンツの高さに合わせてfooterが画面下に表示されている OKパターン NGパターン 実装 index.html <div class="container"> <header>Header</header> <main>

          FlexBoxを使ってheaderとメインコンテンツとfooterの高さを調整する

          Vue3でSVGアイコンのライブラリ vue-tabler-icons を導入する

          導入方法 vue-tabler-icons 公式サイト vueでvue-tabler-iconsを使う方法 公式github vue-tabler-iconsのライブラリをinstallする $ npm install @tabler/icons --save ルートディレクトリである src/main.ts のファイルでimportして、プロジェクト全体で使えるようにする(下記の宣言で、どのファイル・どのコンポーネントからも呼び出せるようになる) import

          Vue3でSVGアイコンのライブラリ vue-tabler-icons を導入する

          Vue3でSCSSの変数を呼び出して使う方法

          プロジェクトのルートディレクトリ直下にvue.config.jsを作成 src/assets 配下にscss ディレクトリを作成、その中に variables.scss ファイルを作成(ファイル名、ディレクトリ名は任意でOK) vue.config.js 内に以下を記述 公式ドキュメント const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpi

          Vue3でSCSSの変数を呼び出して使う方法