記事一覧
通信の基本をまとめてみる
ポイント
非同期処理と非同期通信って単語が似てるからごっちゃになるけど、意味合いは違う
非同期処理：Promise
非同期通信：Ajax
HTTP通信とはHyper Text Transfer Protocol の略称
webで通信のやり取りをする上での規約やルールのこと
httpsは通信の暗号化ができるので、基本的にはこちらを推奨
クライアント（僕らが持ってるPCやスマホ）からHT
JavaScriptのイベントの設定方法とバブリングについて
この記事は下記の内容について説明します
イベントの設定方法は3パターンあり、それぞれの方法
イベントのバブリングによって発生する問題と回避方法
イベントの設定方法
HTMLに直接イベント関数を埋め込むパターン
<button onclick="changeBackGroundColor()"> のように直接HTML内にイベントを記述する
JS側でイベントメソッドを設置するパターン
指定し
JavaScriptでthisっていつ使うの？
使うシーンは主に2パターン
Object内の変数を呼び出すときthisを使う
Objectそのものを返す（関数の戻り値をObjectそのものにしたい）ときにthisを使う
1. Object内の変数を呼び出すときthisを使う
オブジェクトのスコープ内の変数を呼び出すパターン
const person = { name: '高橋', age: 24, getName() {
Navigator.geolocationプロパティを使って現在地を中心に地図を描画する方法
記事は3部に分割しています。
Step1 : 一番簡単な地図の貼り付け方
Step2 : Maps JavaScript APIを使って地図を描画する方法
Step3 : 現在地を中心に地図を描画する方法
writing now…
Vue3で作ったプロジェクトにMaps JavaScript APIを使って地図を描画する方法
記事は3部に分割しています。
Step1 : 一番簡単な地図の貼り付け方
Step2 : Maps JavaScript APIを使って地図を描画する方法
Step3 : 現在地を中心に地図を描画する方法
準備
VueCLIでプロジェクトを作成する
Google Maps Platform でAPIキーを発行する
方法はこちらから
Maps JavaScript API のライブラリを導入
Maps JavaScript API とは？一番簡単な地図の貼り付け方
記事は3部に分割しています。
Step1 : 一番簡単な地図の貼り付け方
Step2 : Maps JavaScript APIを使って地図を描画する方法
Step3 : 現在地を中心に地図を描画する方法
Maps JavaScript APIとは？
ウェブアプリ用に動的でインタラクティブな地図、位置情報、地理空間のエクスペリエンスを作成し、高度にカスタマイズできるようにするための便利なAPI
FlexBoxを使ってheaderとメインコンテンツとfooterの高さを調整する
ga実現したいこと
headerとfooterの間のコンテンツ（メインコンテンツ）の高さが低い時でも、常にheaderは画面上に、footerは画面下に固定して表示されている
メインコンテンツの要素が増えて高さが出た時は、メインコンテンツの高さに合わせてfooterが画面下に表示されている
OKパターン
NGパターン
実装
index.html
<div class="contain