フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
Tweet Tweet前回は、開発、実行、デバッグ手法などクライアントサイドJavaScriptとHTMLについてまとめた。ここでは、HTMLをJavaScriptから操作するときに用いる形式であるDOMについて解説する。 1 DOMとは DOM(Document Object Model)とは、HTMLドキュメントやXMLドキュメントをプログラムから利用するためのAPIである。DOMではHTMLドキュメントやXMLドキュメントをオブジェクトのツリー状の集合(DOMツリー)として取り扱う。DOMツリーの中の一つひとつのオブジェクトはノードと呼ばれる。 DOM Level 1 DOM Level 1にはCoreとHTMLの2つのモジュールから構成される。CoreはHTMLに限らない一般的なDOM操作についての仕様で、HTMLはHTML文書に特有のメソッドについての仕様である。 DOM Lev
Tweet Tweet前回は、配列、JSON処理、日付処理、正規表現などJavaScriptのデータ処理についてまとめた。ここでは、開発、実行、デバッグ手法などクライアントサイドJavaScriptとHTMLについて解説する。 1 クライアントサイドJavaScriptの重要性 Webアプリケーションの発達 インターネットの発展により複雑な機能を提供するWebページが作成されるようになった。これらのWebページは一般に単なる文書ではなくアプリケーションであるという意味からWebアプリケーションと称される。 Webアプリケーションの機能を実現するためには2つの場所で処理を実行する。すなわち、サーバサイドとクライアントサイド(Webブラウザ)である。サーバサイドの処理は、Java、Perl、Python、Ruby、SQLなどといった多様な言語で実装される。それに対してクライアントサイドの機能を
Tweet Tweet前回は、関数自体の演算と状態を持つ関数である関数とクロージャについてまとめた。ここでは、配列、JSON処理、日付処理、正規表現 JavaScriptのデータ処理について解説する。 1 配列 配列は順序のある要素の集まりである。JavaScriptの配列の長さは可変である。なぜならJavaScriptの配列はオブジェクトだからである。 JavaScriptの配列 JavaScriptの配列はリテラル表記とnew式(後述)の2つの方法で生成できる。配列リテラルはブラケット([])の中に配列要素をカンマで区切って並べる。要素がない配列は長さゼロの配列である。要素には任意の値やオブジェクト参照を指定できる。 配列の要素アクセス 配列の要素のアクセスはブラケット演算子([]演算子)で行う。[]内には添字の数値を書く。添字は0から始まる。要素のない添字を指定するとundefine
Tweet Tweet前回は、オブジェクト指向を支援する機能を提供するオブジェクト指向言語であるJavaScriptにおける変数とオブジェクトについてまとめた。ここでは、関数自体の演算である関数と状態を持つ関数であるクロージャについて解説する。 1 関数宣言文と関数リテラル式 関数宣言文と関数リテラル式で関数を宣言できる。関数宣言文で宣言した関数は宣言より前に呼び出し可能である。 2 関数呼び出しの整理 関数呼び出しの分類は以下の通り。 メソッド呼び出し:レシーバオブジェクト経由での関数呼び出し(applyとcallの呼び出しも含む) コンストラクタ呼び出し:new式での関数呼び出し 関数呼び出し:上記2つ以外の関数呼び出し 関数宣言文の巻き上げ 関数宣言文で宣言した関数は、宣言した行より前のコードから呼べる。 3 引数とローカル変数 argumentsオブジェクト 関数内でargumen
Tweet Tweet前回は、JavaScriptの文法規則 文、式、演算子についてまとめた。ここでは、オブジェクト指向を支援する機能を提供するオブジェクト指向言語であるJavaScriptにおける変数とオブジェクトについて解説する。 1 変数の宣言 変数の役割は値の格納やオブジェクトを名前で呼ぶことである。宣言しただけで何も代入していない変数の値はundefined値である。 2 変数と参照 変数が名前を付ける対象の代表はオブジェクトである。オブジェクトそれ自体には名前がなく、名なしのオブジェクトを名前で呼ぶために使うのが変数である。変数には基本型変数(値型変数)と参照型変数の区別がある。参照とは、オブジェクトの位置情報を指し示すモノと言える。 関数の引数(値渡し) 値渡し(call-by-value)とは、JavaScriptの代入演算は右辺から左辺への値のコピーと考えるといった規則の
Tweet Tweet前回は、5つの基本型とオブジェクト型 JavaScriptの型についてまとめた。ここでは、JavaScriptの文法規則 文、式、演算子について解説する。 1 式と文の構造 JavaScriptのソースコードは文の集まりである。文は文と式から構成される。式は式と演算子から構成される。 式を最後まで分解すると、識別子(変数名や関数名)とリテラル値(数値や文字列の直接表記)と演算子(記号が予約語)になる。 2 予約語 予約語(reserved word)はECMAScript第5版は以下の5つに分解される。 キーワード:break、do、instanceofなど 将来の予約語:class、enum、extendsなど null:リテラル値 true:リテラル値 false:リテラル値 3 識別子 識別子は変数名や関数名など、開発者がプログラムの中で定義する単語である。識別
Tweet Tweet前回は、インタプリタ言語、動的型言語など JavaScript の言語仕様についてまとめた。ここでは、5つの基本型とオブジェクト型という合計6つの型がある JavaScript の型について解説する。 1 型とは 型とは対象の特徴を決定づけるものである。JavaScriptには以下の5つの基本型がある。 文字列型 数値型 ブーリアン型 null型 undefined型 5つの基本型以外をオブジェクト型と呼ぶ。つまりJavaScriptの型は6種類に分類できる。なお、基本型のインスタンスを「値」と呼び、オブジェクト型のインスタンスをオブジェクトと呼ぶ。 型に関してJavaとの比較 型に関してJavaScriptとJavaの比較は以下の2つである。1つは動的型と静的型という視点、もう1つはクラスベースとプロトタイプベースの視点である。前者では、Javaのように変数に型のあ
2013-09-16 50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング! やり方 適当プログラミング解説シリーズ はじめに。 ラングトンのアリ(Langton's ant)を知っていますか?ラングトンのアリはWikipediaのラングトンのアリによると、以下のように記述されています。 ラングトンのアリ(英: Langton's ant)は、クリストファー・ラングトンが発明した単純な規則で記述される2次元チューリングマシンである。 実際の3匹のラングトンのアリの早送りされた動きです。 一見複雑そうに見えますが、ルールはたったこれだけです。(上のgifでは色のあるマスが白のマスとしています。) 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、
サイトの表示や動作を自己流にアレンジできる JavaScriptが使えるようになると、greasemonkeyも使えるようになると言われていますが、個人的にはDOMの概念について理解しておかないと使えないと言っても良いかもしれません。 JavaScriptには大きく分けると ナビゲータオブジェクト(ブラウザの判別やハンドラ等) ビルトインオブジェクト(newで始まる予め用意されたオブジェクト) DOM(Document Model Object いわばDHTML) 基本的にはこの3つです。 ではgreasemonkeyはDOMを理解していないとできないのか!?と言われればそうではありません。主にgreasemonkeyでやっている事は内容の書き換えですのでDOMを用いる場面が多いというのが結論となってきます。DOMを用いなくてもgreasemonkeyは製作出来ますが、基本的にナビゲーター
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く