JavaScript

DOM操作まとめ〜JavaScript

2018年10月19日

JavaScriptでDOM操作を行うまとめです。 JavaScriptの「Documentインターフェイス」はJavaScriptが記述、または読み込まれたHTMLのノード情報を保有しています。そのため、console >>続きを読む

ES6で classを使う方法

2018年10月17日

JavaScriptにはclassの概念がありませんでした。オブジェクト指向はprototypeを使ってそれらしいことを行なっているのですが、他言語をマスターした人にとっては奇々怪界なものです。しかしながらES6ではc >>続きを読む

変数の宣言 letとconstの使い方〜モダンなJavaScript

2018年10月15日

変数宣言のキーワードモダンなJavaScriptでは変数宣言する場合、「var」,「let」,「const」を使えるようになりました。旧来よりJavaScriptで変数を宣言する場合は、「var」キーワードが使われて >>続きを読む

自作関数について〜モダンなJavaScript

2018年9月12日

FUNCTION関数 JavaScriptの自作関数はfunction statementで定義します。 functionキーワードと、関数の名前、引数は丸括弧でくくり、カンマで区切ります。そして命令文は波括弧 { } >>続きを読む

ループ文〜モダンなJavaScript

2018年9月10日

ループ文は繰り返し何かを実行するために必須のアルゴリズムです。JavaScriptで利用可能なループ処理を学習します。 for文 for文によるループは、指定された条件が「false」と評価されるまで繰り返されます。基 >>続きを読む

Dateオブジェクトの使い方〜モダンなJavaScript

2018年9月7日

Dateオブジェクトについて JavaScript には日付のためのデータ型がありません。そのため、日付を取り扱うためのには、「Date オブジェクト」を使います。「Date オブジェクト」は日付の設定、取得、操作を行 >>続きを読む

オブジェクトリテラルの使い方〜モダンなJavaScript

2018年9月5日

オブジェクトリテラルの使い方オブジェクトリテラルの作成オブジェクトリテラルを作成するには{}で囲みます。値の記述方法は配列に似ていますが、インデックス番号の代わりにプロパティ名を明示する必要があります。他のプログラミ >>続きを読む

配列の色々な操作〜モダンなJavaScript

2018年8月29日

JavaScriptの配列の作りかたには[]ブラケットを使う方法と、newArray()を使う方法があります。値は、数値でも文字列でもオブジェクトでも好きに入れることができます。 [crayon-5bc99def83f >>続きを読む

consoleの使い方〜モダンなJavaScript

2018年8月27日

「Console」オブジェクトについて JavaScriptで開発を行う際に「console.log()」は非常によく使われるし便利なものです。そもそも、「Console」オブジェクトは、ブラウザのデバッグコンソールへ >>続きを読む

JavaScriptのPromiseについて

2018年8月24日

Promiseとは Promiseは非同期処理が完了した時に次の処理を約束したり、または失敗を表現するクラスです。 JavaScriptで非同期処理を行うには通常はコールバック関数を利用します。けれども、これはコールバッ >>続きを読む

非同期処理とコールバック関数

2018年8月22日

JavaScriptは基本的にシングルスレッドで動いています。これはつまり、JavaScriptは並行処理はできないということです。同期であろうと非同期であろうと2つ以上の処理を同時に行なうことはできません。 Jav >>続きを読む

Vue.jsの基本（1）

2018年8月20日

Vue.jsについて Vue.jsはビュージェイエスと読みます。Vue.jsはViewに特化したライブラリです。今回はVue.jsを活用するための基本を学習します。 Vue.jsはおそらくAngularやRactよりも >>続きを読む

React入門（4）classコンポーネントの作成

2018年8月16日

Reactコンポーネントの作成には、関数型とclassを使う方法の2つがあります。関数型コンポーネントについてはReact入門（3）関数型コンポーネントの作成を参考にしてください。ここではclass型コンポーネントに >>続きを読む

React入門（3）関数型コンポーネントの作成

2018年8月13日

このページの詳細なサンプルは「GitHubの React_sample1 funcブランチ」にあります。コンポーネント Reactの思想としてUIの基本単位をコンポーネントと考えています。コンポーネントは部品と考えるこ >>続きを読む

React入門（2）render関数の使い方〜Hello worldの作成

2018年8月10日

このページで使用するサンプルの詳細はGitHubにあります。 Reactの環境設定方法は React入門（1）環境設定を参照ください。 Reactの開発環境を構築すると、開発用のサーバーが使えるようになっています。 >>続きを読む

React入門（1）環境設定

2018年8月8日

Reactとは ReactはFacebook社が開発したJavaScriptライブラリです。フレームワークとされる場合がありますが、正式にはライブラリです。 Reactは特にJavaScriptを多用したWebサービスに >>続きを読む

TypeScript入門（1）

2018年4月8日

TypeScriptはJavaScriptの問題点をカバーするためにマイクロソフト社により開発されたJavaScriptの代替言語です。 TypeScriptはコンパイルすることでJavaScriptに変換することができ >>続きを読む

Node.js入門（4）コマンドライン引数について

2018年3月28日

Node.js ではコマンドライン引数は process.argv で受け取ることができます。 process.argv　はコマンドで指定した引数を配列として格納されます。 process.argv 0: /Users/ >>続きを読む

Node.js入門（3）Node.jsでES2015(ES6) 入門

2018年3月25日

ECMAScriptはEcma Internationalによって標準化された仕様です。ECMAScript6は2015年に採用されたため、ES2015やES6などと省略されて呼ばれています。ここではES6で特筆すべき >>続きを読む

AngularJS入門（２）〜AngularJSで送信フォームの作成でモジュールの活用

2017年12月28日

前回のAngularJS入門（１）ではviewのみでできることでした。けれどもそれだけでは不足する機能があります。例えばセレクトボックスのoption部分をスクリプトで作成すると汎用性が上がってくるかもしれません。基本 >>続きを読む

値渡しと参照渡しについて

2017年12月25日

変数に値を代入する場合にその値のデータ型の種類によって「値渡し」と「参照渡し」があり、その扱われ方が変わってきます。そして、この考え方は多くのプログラミング言語で使われるものです。このことを知っておかないと思わぬ結果に >>続きを読む

AngularJS入門（１）〜AngularJSで送信フォームの作成でviewの活用

2017年11月4日

AngularJSはGoogleが開発に携わるJavaScriptのフレームワークです。AngularJSには様々なバージョンがあり、現在（2017/11月）ではバージョン5がリリースされています。尚、「Angu >>続きを読む

レスポンシブサイトの切り替えポイント〜javaScript

2015年10月20日

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替えまずは、CSSでのメ >>続きを読む

正規表現の使い方の練習〜JavaScript編

2015年7月21日

正規表現でreplaceする replace関数を使って正規表現の使い方を覚えるために簡単なスクリプトを書きました。 replace(検索文字列 , 置換文字列 )を使用して文字を置換します。プルダウンメニューで選んだ >>続きを読む

JavaScript基礎４

2013年6月24日

関数について一度定義すると何度も呼び出しが行えて、なんらかの処理をしたり、その結果を返す仕組みを関数といいます。関数にはfunction命令で定義するものと関数リテラルで定義する方法があります。さらにコンストラクタとい >>続きを読む

JavaScript基礎３

2013年6月24日

ループ制御繰り返し処理も非常によく利用される処理です。JavaScriptの繰り返し処理にはfor文、for…in文、while文、do…while文があります。 while文とdo&#8230 >>続きを読む

JavaScript基礎２

2013年6月24日

制御命令プログラミングでは処理を分岐していく必要がでてきます。その分岐方法としてif文とswitch文があります。 if命令文「もし～ならば、・・・命令を実行する。そうでなければ、・・・・命令を実行する」そんな分岐方 >>続きを読む

JavaScript基礎１

2013年6月24日

変数について変数の宣言方法 var 変数名 var 変数名 = 初期値例

	/*変数宣言後に初期値を設定*/	
	var num1;
	num1 = 987654;
	/*複数の変数宣言*/	
	var num2,num3,num4;
	/*変数宣言時に初期値を設定*/	
	var num5 = 123456;

/*変数宣言後に初期値を設定*/

var num1;

num1 = 987654;

/*複数の変数宣言*/

var num2,num3,num4;

/*変数宣言時に初期値を設定*/

var num5 = 123456;

変数名に用いることができるのは半角英数字です。変数名の最初は半角英文字か$ま >>続きを読む

JavaScriptにおけるオブジェクト指向3

2013年6月23日

プロトタイプベースオブジェクト JavaScriptではインスタンス化後にプロトタイプのメンバを追加することができます。そして、そこで追加したメンバは他のインスタンスでも使用できます。プロパティの宣言はコンストラクタで >>続きを読む

JavaScriptにおけるオブジェクト指向2

2013年6月23日

インスタンス化後に独自のメンバを追加インスタンス化後に独自のメンバを追加してみます。そのメンバは当然別のインスタンスには適用されません。

/*クラスの定義*/
var Animal = function(na,iro){
	this.name = na;
	this.color = iro;
	this.getName = function(){
		return '名前は' + this.name + 'です。'};
};
/*インスタンス化*/
var dog = new Animal('太郎','白');
/*書き出し*/
document.writeln(dog.getName());
document.writeln('色は' + dog.color + 'です。');
/*インスタンス化後にメンバを追加できる*/
dog.getSize = function(){
		return '大きさは不明です'};
document.writeln(dog.getSize());

/*インスタンス化*/
var cat = new Animal('トム','黒');
document.writeln(cat.getName());
document.writeln('色は' + cat.color + 'です。');
/*エラーとなり表示されない*/
document.writeln(cat.getSize());

/*クラスの定義*/

var Animal = function(na,iro){

this.name = na;

this.color = iro;

this.getName = function(){

return '名前は' + this.name + 'です。'};

};

/*インスタンス化*/

var dog = new Animal('太郎','白');

/*書き出し*/

document.writeln(dog.getName());

document.writeln('色は' + dog.color + 'です。');

/*インスタンス化後にメンバを追加できる*/

dog.getSize = function(){

return '大きさは不明です'};

document.writeln(dog.getSize());

/*インスタンス化*/

var cat = new Animal('トム','黒');

document.writeln(cat.getName());

document.writeln('色は' + cat.color + 'です。');

/*エラーとなり表示されない*/

document.writeln(cat.getSize());

スクリプト実行 >>続きを読む