新人エンジニアのメモ

新人エンジニアの日々学んだことをアップしていきます。最近はQiitaも始めました。https://qiita.com/nacho0707

【JavaScript】ラッパーオブジェクトとは

ラッパーオブジェクトとは プリミティブ型の値を操作する機能を付与するためのオブジェクト 【JavaScript】データ型(プリミティブ型とオブジェクト型) 主なラッパーオブジェクト ラッパーオブジェクト 説明 Number 数値に対する操作を提供する String 文字…

【JavaScript】Arrayオブジェクト

Arrayオブジェクトとは 配列を管理するJavaScript標準の組み込みオブジェクト メソッドを使用して配列を操作できる Arrayオブジェクトの主なプロパティとメソッド プロパティ/メソッド 説明 length プロパティ。配列の要素数を返す。 pop() 最後の要素を削除…

【JavaScript】要素の取得方法まとめ

ID名を指定して取得する。 document.getElementById(); HTML id = "js-exsample"javaScript document.getElementById('js-exsample'); タグ名を指定して取得する。 document.getElementsByTagName(); element.getElementsByTagName(); HTML <li>Sample2</li>javaScrip…

【JavaScript】JSONオブジェクト

JSONオブジェクトとは JSONデータを扱うためのJavaScript標準の組み込みオブジェクト JSONデータとオブジェクトを相互に変換できる 主にHTTP通信など文字列形式データを取り扱う必要がある場合に使用する JSONとは 配列とオブジェクトを使用したテキストベー…

【JavaScript】組み込みオブジェクト(グローバルオブジェクト)

組み込みオブジェクト(グローバルオブジェクト)とは JavaScriptであらかじめ提供されているオブジェクト JavaScriptが動作する環境であればどのような環境でも使用できる 主な組み込みオブジェクト 組み込みオブジェクト 説明 Object 全てのオブジェクトの…

新卒2年目のHTML5プロフェッショナル認定 レベル1合格体験記

はじめに HTML5プロフェッショナル認定 レベル1とは 資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明できます。 HTML5を使ってWebコンテンツを制作することができる。 ユーザー体験を考慮したWebコンテンツを設計・制作する…

【JavaScript】URLエンコード

URLエンコードとは URLに使用できない文字が含まれる場合に、使用できる文字に変換する処理のこと。 対して、URLデコードはURLエンコードされた文字を元に戻す処理のこと。 URLエンコード、URLデコードは、データをクエリ文字列としてWebサーバに送信する場…

【JavaScript】strictモード

strictモードとは 厳密なソースコードの記述が必要な設定のこと strictモードに設定すると、今まで許容されていたバグになりやすい記述でエラーが発生するようになる。そのため、バグが少ないソースコードを記述でき、大規模なWebアプリケーションの開発に向…

【JavaScript】ガーベージコレクション 

ガーベージコレクション 不要になったメモリを自動的に解放する仕組みのこと ガーベージコレクタと呼ばれるソフトウェアによって行われる 割り当てられたメモリが参照されなくなると、ガーベージコレクションの対象となる

【JavaScript】undefined

undefinedとは 値が定義されていないことを表す値 以下のような場合に返される 値を代入していない変数を使用した場合 定義されていないプロパティにアクセスした場合 関数に戻り値が指定されていない場合

【JavaScript】Infinity

Infinityとは すべての値より大きい値を表すJavaScript標準のグローバルオブジェクトのプロパティ なお、グローバルオブジェクトのisFinite()を使用すると有限数かどうかを取得できる。 引数がInfinity、-Infinity、NaNの場合はfalseを返す。 isFinite()の使…

【JavaScript】NaN

NaNとは 数値でない(Not a Number)ことを表すグローバルオブジェクトのプロパティ。 ※グローバルオブジェクトとは・・・JavaScriptで常にグローバルスコープ上に存在するオブジェクト 数値では表せない不正な値を表現する場合に使用される。 自分自身および…

【JavaScript】データ型(プリミティブ型とオブジェクト型)

100記事突破しました!! データ型について javaScriptのデータ型はプリミティブ型とオブジェクト型に大きく分けられる プリミティブ型とオブジェクト型の違い プリミティブ型 文字列、数値、真偽値、null、undefined、シンボルの6種類 ◎undefined 値が定義…

【JavaScript】変数宣言(var、let、 const)

変数を宣言できるものとしてvar、let、 constがある 宣言方法 例:var 変数名; 値を代入するには=を使用し、変数名=値;とする JavaScriptでは、変数のデータ型は柔軟であり、あらかじめデータ型の決められた変数にデータに代入するのではなくプログラム実…

【JavaScript】識別子

識別子とは 変数やメソッド、オブジェクトなどを識別するために付ける名前 識別子を決めるルール アルファベットまたは_(アンダースコア)、$(ドルマーク)で始まる 2文字目以降は、上記に加え数字も使用可能 予約語は使用できない

【APIの基礎知識】通信系API

通信系APIの主な特徴 Server-Sent Events WebSocket XMLHttpRequest WebRTC 通信 プロトコル HTTP WebSocket Protocol HTTP SDPなど 非同期 通信 〇 〇 〇 〇 常時接続 △ 〇 △ 〇 双方向 通信 × 〇 △ (リクエストやレスポ ンス時にサーバ間と データを送受信…

【APIの基礎知識】Server-Sent Events

Server-Sent Eventsとは 非同期でWebサーバからブラウザにデータを送信するための技術 ※ブラウザからWebサーバにデータに送信することはできない HTTP通信を用いてデータ送信を実現するため、データを送信すると通信は一度終了するが、自動的に再接続する

【APIの基礎知識】XMLHttpRequest

XMLHttpRequestとは ブラウザ/Webサーバ間で通信を行うための技術 非同期通信ができ、Ajaxを実装する際に用いられる HTTP通信を行うAPIのため、規定のポート番号は80番、または443番で、HTTPメソッドを指定することもできる XMLHttpRequestはリクエスト/レス…

【APIの基礎知識】WebSocket API

WebSocket APIとは ブラウザ/Webサーバ間で双方向の常時接続通信を行うための技術 チャットなどに用いられる

【APIの基礎知識】プッシュ通知

プッシュ通知とは サーバからユーザに対して任意のタイミングで通知できる仕組み Push APIを使用することで、ブラウザでもサーバからのプッシュ通知を受信できるようになる プッシュ通知に関連するAPI Push API:プッシュ通知を受信 Server-Sent Events:サ…

【APIの基礎知識】Service Workers

Service Workersとは Webページとは別のブラウザのバックグラウンドで動作するJavaScript実行環境 関連するAPIを組み合わせることで、オフライン処理やプッシュ通知などの機能を提供できる HTTPS通信でしか動作しない

【APIの基礎知識】Web Workers

Web Workersとは JavaScriptを並行実行するための仕様 ワーカと呼ばれるJavaScriptの処理単位を、Webページの描画処理を実行するメインスレッドから分離し、バックグランドで実行する Webページのパフォーマンス向上につながる

【APIの基礎知識】Indexed Database API

Indexed Database APIとは 構造化されたデータを保存する仕組み リレーショナルデータベースのように、インデックスによる検索やトランザクションによる安全な操作をできる JavaScriptにより操作を行う 格納できる値の種類は文字列やファイル、blobなど 格納…

【APIの基礎知識】Web Storage

Web Storageとは ブラウザにキーと値の組み合わせでデータを保持する仕組み localStorageとsessionStorageの2種類が存在する ⋄localStorageはブラウザが閉じられてもデータを保持し、ウィンドウやタブ間でデータを共有できる ⋄sessionStorageはブラウザが閉…

【APIの基礎知識】Touch Events 、Pointer Events

Touch Eventsとは 画面を指で操作しているときの状態変化に関連するイベント タッチスクリーンを想定した仕様になっている Pointer Eventsとは さまざまなデバイスからのポインタ入力を取り扱うためのイベント

【APIの基礎知識】DOM3 Events

DOM3 Eventsとは ユーザによるマウスやキーボードなどの入力操作を取り扱うためのイベント ユーザの操作に合わせてユーザインタフェースを変更できる DOM3 Events イベントの種類 説明 UIイベント UIやHTML文書の操作に関連するイベント フォーカスイベント …

【APIの基礎知識】DeviceOrientation Event

DeviceOrientation Eventとは デバイスの方角や傾きが変化したときに発生するイベント デバイスの左右の傾き(y軸)、前後の傾き(x軸)、ひねり(z軸)を取得できる DeviceOrientation Eventが発生したタイミングで、JavaScriptのプログラムを用いてユーザインタ…

【APIの基礎知識】Geolocation API

Geolocation APIとは デバイスの位置情報にアクセスすることができる 緯度、経度、高度、方角、速度、(緯度、経度、高度の)精度を取得できる 使用するにはユーザの許可が必要となる ブラウザの制約により、HTTPS通信でなければ動作しない 地図サービスと連携…

【APIの基礎知識】SVG

SVGとは Webで利用できるベクター形式の画像データであり、実態はXMLに基づいたマークアップ言語である SVGの画像は計算式によって表現されるため、画像を拡大しても画像の劣化が発生しにくいという特徴をもっている ※描画する画像ごとにDOMが追加されるため…

【APIの基礎知識】Canvas

Canvasとは JavaScriptを使用して、ブラウザ上に図を描画する機能 ビットマップ形式で描画を行う 静止画の描画を繰り返すことでアニメーションを実現できる ※アニメーション描画のメソッドは存在しない ブラウザに対応したファイルをCanvasに読み込み、加工…