サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
js.studio-kingdom.com
はじめに デコレータ はじめに TypeScriptとES6のクラスの導入により、クラスやクラスメンバの注釈付けや修正をサポートするための追加機能が必要なシナリオとして存在するようになりました。 デコレータは、クラス宣言とメンバの注釈(アノテーション)とメタプログラミング構文の両方を追加する方法を提供します。 デコレータはJavaScriptのステージ1の提案であり、TypeScriptの実験的な機能として利用できます。 注意: デコレータは実験的な機能であり、将来のリリースで変更される可能性があります。 デコレータの実験的なサポートを有効にするには、 experimentalDecoratorsのコンパイルオプションをコマンドライン、またはtsconfig.jsonのいずれかで有効にする必要があります。 { "compilerOptions": { "target": "ES5", "e
イントロダクション ジェネリクスの"Hello World" ジェネリクスの型変数の使用 ジェネリクスの型 ジェネリクスのクラス ジェネリクスの制約 イントロダクション ソフトウェア工学の大部分は、明確に定義され一貫性のあるAPIを持つだけでなく、再利用性のあるコンポーネントを構築することにあります。 現在のデータでも将来のデータでも動作可能なコンポーネントは、 大規模なソフトウェアシステムの構築に欠かせない柔軟な機能を提供してくれることになるでしょう。 C#やJavaのような言語では、再利用可能なコンポーネントを作成するための主要なツールの1つにジェネリクス(generics)があります。 これは、1つの型ではなく様々な型で動作するコンポーネントの作成を可能にしてくれます。 ユーザーは任意の型でそれらのコンポーネントを使用することができます。 ジェネリクスの"Hello World" 始
このドキュメントはストリームを使用したnode.jsプログラムの基本的な書き方の手引書になります。 翻訳元の記事はgulpのドキュメントからリンクされていたGitHub上のsubstack氏のstream-handbookであり、 あくまでgulpをはじめとしたタスクランナーの内部処理で重要な役割を果たすファイル・ストリームについて書かれた手引書(handbook)であり、 gulpのドキュメントの一部というわけではありません。 写本 イントロダクション 何故ストリームを使用するべきなのか 基本 組み込みストリーム 制御ストリーム メタストリーム ステートストリーム HTTPストリーム IOストリーム パーサーストリーム ブラウザストリーム HTMLストリーム オーディオストリーム RPCストリーム テストストリーム パワーコンボ 写本 この手引書は、次のようにnpmのコマンドを実行するこ
このセクションは、基本的なモジュールの知識があることを前提にしています。 詳しい情報については、モジュールのドキュメントを参照してください。 相対(Relative) vs 非相対(Non-relative)モジュールimport モジュール解決の方針 拡張モジュール解決フラグ モジュール解決のトレース --noResolveの使用 よくある質問 モジュール解決は、importが何を参照するのかを把握するために、コンパイラを利用するプロセスになります。 import { a } from "moduleA";のようなimport文について考えてみてください。 aの使用するために、コンパイラは正確に何が提供されているのかを知る必要があり、 またmoduleAの定義を調べる必要もあります。 ここで、コンパイラは"moduleAはどのような形状をしていますか?"と尋ねます。 これは一見単純なよう
このガイドの手順に従って宣言ファイルを作成してきたので、今度はnpmに公開してみましょう。 宣言ファイルをnpmに公開するには、主に2つの方法があります。 npmパッケージを作成するか、 npm上の@typesに公開します。 宣言を公開するnpmパッケージを制御する場合、最初のアプローチが優先されます。 つまり、この場合は宣言とJavaScriptが常に一括りになります。 自分のnpmパッケージに宣言を含める方法について @typesの公開 自分のnpmパッケージに宣言を含める方法について パッケージに主となる.jsファイルがある場合は、 package.jsonファイルに主となる宣言ファイルを指定する必要があります。 バンドルされた宣言ファイルを指すようにtypesプロパティを設定します。 下記はその一例になります。 { "name": "awesome", "author": "Van
交差型(Intersection Types) 共用体型(Union Types) 型の保護と型の識別(Type Guards and Differentiating Types) Nullの型(Nullable types) 型のエイリアス(Type Aliases) 文字列リテラル型(String Literal Types) 判別共用体(Discriminated Unions) 多様性のthisの型(Polymorphic this types) 交差型(Intersection Types) 交差型(intersection type)は複数の型を1つに連結したものです。 これは既存の型を統合し、必要とする機能を全て備えた1つの型を得ることを可能にしてくれます。 例えば、Person & Serializable & Loggableは、PersonとSerializableとL
概要 ライブラリの種類の識別 依存について 補足 概要 大雑把に言えば宣言ファイルを構造化する方法は、ライブラリの使用方法によって異なります。 JavaScriptで使用するライブラリを提供する方法はたくさんありますが、それに合わせて宣言ファイルを書く必要があります。 このガイドでは、共通ライブラリパターンを識別する方法と、そのパターンに対応する宣言ファイルを記述する方法について説明します。 主要なライブラリー構造パターンの各タイプには、テンプレートセクションに対応するファイルもあります。 これらのテンプレートから使い始めることで、より早く理解を深めるのに役立てることができます。 ライブラリの種類の識別 まず、TypeScript宣言ファイルが表すことができるライブラリの種類を確認します。 各種類のライブラリがどのように使用され、どのように書かれているか、実際のライブラリの例を挙げて簡単に
イントロダクション Boolean Number String Array Tuple Enum Any Void NullとUndefined Never 型注釈(Type assertions) letに関する注意 イントロダクション プログラムが有用であるために、データの単位を数値、文字列、構造、真偽の値のような最も単純な単位で動作させる必要があります。 TypeScriptでは、便利なenum(列挙)型を含む、JavaScriptで期待されるであろう多くの型をサポートします。 Boolean 最も基本的なデータ型であり、単純にtrue/falseの値を持ちます。 JavaScriptとTypeScriptでboolean値として扱われます。 let isDone: boolean = false; Number JavaScriptのように、TypeScriptの全ての数値は浮動小
npm install --save-dev gulp merge-stream var gulp = require('gulp'); var merge = require('merge-stream'); gulp.task('test', function() { var bootstrap = gulp.src('bootstrap/js/*.js') .pipe(gulp.dest('public/bootstrap')); var jquery = gulp.src('jquery.cookie/jquery.cookie.js') .pipe(gulp.dest('public/jquery')); return merge(bootstrap, jquery); }); gulp.srcは、追加された順にファイルを処理します。 npm install gulp gulp-
このサイトは作成途中のものを公開しています。 また、Webpackのバージョンが1.13.0の頃に作成されたものですが、2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。 webpack webpack1 (旧サイト) 非推奨 webpack-dev-serverは小さなnode.jsのExpressサーバーで、 webpack-dev-middlewareを使用してwebpackのバンドルを提供します。 これは小さなランタイムも持ち、Socket.IOを介してサーバーへ接続されます。 サーバーはイベントに反応して、クライアントへコンパイル状態についての情報を発行します。 これは必要に応じた異なるモードを選択することが可能です。 下記の設定ファイル(webpack.config.js)があるとしましょう。 var path = require("path"); m
概要 tsconfig.jsonの使用 例 詳細 @types、typeRoots、types extendsによる設定の継承 compileOnSave スキーマ 概要 tsconfig.jsonが存在するディレクトリは、そのディレクトリがTypeScriptプロジェクトのルート・フォルダであることを示します。 tsconfig.jsonファイルにはルート・ファイルと、プロジェクトをコンパイルするのに必要なコンパイラのオプションを指定します。 プロジェクトは下記のいずれかの方法でコンパイルします。 tsconfig.jsonの使用 入力ファイルを指定せずにtscを実行します。 この場合、コンパイラはtsconfig.jsonファイルを現在のディレクトリから開始して、 親ディレクトリへと遡り続けてtsconfig.jsonファイルを探します。 入力ファイルを指定せずに、--project(
用語に関する注意: TypeScript1.5において用語の変更における重要な注意事項があります。 ECMAScript 2015の用語に合わせ、現在では、 内部モジュール("Internal modules")は"namespaces"となり、 外部モジュール("External modules")は単純に"modules"となりました。 具体的には、module X {は、namespace X {と書くのが好ましいと言えます。 イントロダクション export import デフォルトexport export = と import = require() モジュール用のコード生成 シンプルな例 オプションによるモジュール読み込みと、その他の最新のローディング・シナリオ 別のJavaScriptライブラリと一緒に動作させるには モジュール組み立てのガイダンス イントロダクション EC
型:Array このタスクを実行する前に、実行して完了させるタスクを配列で指定します。 gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // タスクの処理をここに書きます }); 非同期タスクのサポート fnが下記のいずれかを行う場合、タスクは非同期になります。 コールバックを受け付け // シェル内のコマンドを実行 var exec = require('child_process').exec; gulp.task('jekyll', function(cb) { // Jekyllのbuild exec('jekyll build', function(err) { if (err) return cb(err); // エラーを返す cb(); // タスク完了 }); }); ストリームを返す
イントロダクション 初めてのインターフェース 任意のプロパティ 読み込み専用プロパティ 過剰プロパティのチェック Function型 インデックス可能な型 Class型 インターフェースの拡張 ハイブリッド型 インターフェースによるクラスの拡張 イントロダクション TypeScriptの核となる基本原則のひとつに、値の型チェックが値が持つ形状に焦点を当てていることがあげられます。 これは、時には"ダックタイピング"または"構造的部分型"と呼ばれます。 TypeScriptでは、インターフェースはこれらの型の名付けの規則を満たし、 また、プロジェクトの外観を構成するだけでなく、コードの構造を定義する強力な方法になります。 初めてのインターフェース インターフェースがどのように動作するのかを、簡単な例で確認してみましょう。 function printLabel(labelledObj: {
このサイトは作成途中のものを公開しています。 また、Webpackのバージョンが1.13.0の頃に作成されたものですが、2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。 webpack webpack1 (旧サイト) 非推奨 このサイトについて Webpackの日本語リファレンスです。 webpackの公式サイト(英文) の内容を参考に作成していますが、非公式で個人による作成物であるため、誤りがあると思います。その点についてはご了承ください。 もし、間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 プラグイン webpackは豊富なプラグイン・インターフェースを持ち、 多くの機能はこのインターフェースを使用した組み込みのプラグインによって提供されます。 webpackが非常に柔軟なのは、この仕組みによるものです。 パフォーマンス webp
このサイトについて TypeScriptのハンドブックを日本語に翻訳してまとめています。 GitHubのMicrosoft/TypeScript-Handbook の内容を参考に作成していますが、非公式で個人による作成物であるため、誤りがあると思います。その点についてはご了承ください。 もし、間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このサイトではGitHubのドキュメントを元に翻訳していますが、同じ内容のドキュメントがTypeScriptの公式サイトに公開されています。 Back to top © https://github.com/Microsoft/TypeScript-Handbook このページは、ページトップのリンク先のTypeScript-Handbook内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式の
誤ったinnerHTMLの使用は、クロスサイト・スクリプティング(XSS)攻撃を許してしまう恐れがあります。 ユーザー入力を表示のためのサニタイジングは、ご存知のとおりエラーになる傾向があり、 適切なサニタイズに失敗することでインターネット上でのWEB脆弱性を引き起こす原因になります。 我々の設計哲学は、安全にする事は“簡単”であるべきで、 開発者は“安全では無い”操作を実行する際には、その意図を明確にすべきというものです。 このdangerouslySetInnerHTMLというプロパティ名は故意に怖がらせるような名付けをしており、 このプロパティ値(文字列の代わりにオブジェクトを使用)は、サニタイズされたデータを示すのに使用することが出来ます。 セキュリティへの影響と適切にデータがサニタイズされていることを完璧に確認した後に、 __htmlキーとサニタイズされたデータの値を含む新しいオ
このページは、Webpackの公式ドキュメント内で紹介されていたMaxime Fabre氏によるWebpack your bags - madewithloveの記事を madewithloveブログの「Content is published under the Creative Commons BY-SA license」に基づいて翻訳したものになります。 ブログで紹介されているWebpackのバージョンは1系のものになります。 2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。 webpack webpack1 (旧サイト) 非推奨 もしかしたら、あなたは既にここで紹介するWebpackと呼ばれるクールなツールについて聞いたことがあるかもしれません。 ある人は「このツールはGulpのようなビルドツールだ」と言い、またある人は「これはBrowserifyのよう
文字列として指定されたコードをJavaScriptのコードとして評価します。 文法 eval(string) 引数 説明 説明 eval()はグローバルオブジェクトの関数プロパティです。 eval()関数の引数は、文字列になります。 もし、文字列が式であれば、eval()はその式を評価します。 引数が1つまたは複数のJavaScriptの記述を表すのであれば、 eval()はその文を評価します。 JavaScriptは計算式を自動的に評価します。 もし、文字列として計算式を組み立てた場合、 eval()を使用して後ほどそれを評価することが可能です。 例えば、変数xがあるとします。 "3 * x + 2"とする式を文字列値として変数へ割り当て、スクリプト内の後ろの地点でeval()を呼び出すことで、 xを伴う式の評価を延期することが可能です。 もし、eval()の引数が文字列で無ければ、ev
これは、元はReactの公式ブログへ投稿されたものです。 個人的な見解になりますが、ReactはJavaScriptを使用した大規模で高速なWebアプリケーションを開発する、 最も優れた方法であると考えています。 これは、FacebookとInstagramにおいて、我々にとって良い結果をもたらしてくれています。 Reactの優れた点の1つに、アプリケーションの構築を、どのように考えさせるかという事が挙げられます。 このページでは、Reactを使用した検索可能な商品データのテーブルを構築する過程を通して、学んでいきます。 まずは、モック作りから ステップ1: UIをコンポーネント階層に分割 ステップ2: Reactの静的版の構築 ステップ3: UIステートの必要最小限構成 ステップ4: ステートを使用するべき場所の特定 ステップ5: 別(逆)データフローの追加 最後に まずは、モック作りか
このサイトについて gulpの日本語リファレンスです。 gulpのGitHub内のドキュメント(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 はじめに gulpをグローバル上にインストール $ npm install --global gulp プロジェクトのdevDependenciesにgulpをインストール $ npm install --save-dev gulp プロジェクトのルートフォルダにgulpfile.jsを作成 var gulp = require('gulp'); gulp.task('default', function() { // デフォルトのタスクのコードをここに書きます }); gulpを実行 $ gulp デ
JSXはHTMLのように見えますが、幾つかの重要な違いが存在します。 注意: インラインstyle属性のようなDOMの違いについては、こちらを参照して下さい。 HTML実体参照 JSXのリテラルのテキストにHTML実体参照を挿入することが可能です。 <div>First · Second</div> 動的なコンテンツ内にHTML実体参照を表示したい場合、デフォルトでReactが広範囲に及びXSS攻撃を防護するために、 表示する全ての文字列に対してエスケープ処理を行うため、二重エスケープの問題が発生します。 // 悪い例: "First · Second"と表示される <div>{'First · Second'}</div> この問題を回避する方法が幾つか存在します。 最も簡単な方法は、Unicode文字をJavaScript内に直接書くことです。
補足事項 シンプルなアプリケーションであればバインドする際に指定するイベント名は"click"などの 標準的なDOMイベント名を指定しても良いですが、jQueryプラグインの作成、または アプリケーションが大規模で複雑なものである場合、ネームスペースを積極的に使用すべきです。 例えばネームスペースに".myPlugin"と指定してバインドさせておけば、バインドを削除する際にも このネームスペースを使用することで、他のコードからバインドされた処理を誤って削除することを 避ける事ができます。 特定のイベントハンドラを削除するには、selector引数を指定します。 セレクタ文字列はイベントハンドラをバインドさせたものに、正確に一致する必要があります。 委任されていないイベントを除いて、委任された全てのイベントのみを削除するには、特殊な値 "**"を使用します。 イベントハンドラは、引数に関数名
AngularJSでのi18nとl10n AngularJSへのロケールの提供 落とし穴 AngularJSでのi18nとl10n i18nとl10nとは何か? "Internationalization(国際的にする)"を省略したi18nは、 プロダクトの開発プロセスにおいて、言語と文化を簡単にローカライズすることが出来るようにする方法のことを指します。 "Localization(地域化)"を省略したl10nは、プリケーション適応のプロセスで、 独自の文化または言語マーケットにおいてのテキストのユーザービリティを有効にします。 アプリケーション開発者のためにアプリケーションを国際的にすることは、 アプリケーション外部の文字列と別の特定ロケール(日付または通貨フォーマットのような)の全てを抽象化することを意味します。 アプリケーションをローカライズすることは、翻訳とローカライズされたフォ
型:string routeパス($location.pathに対して一致する)を指定します。 もし、$location.pathが冗長なトレイリングスラッシュ(trailing slash - URLの終わりのスラッシュ)を含むか、またはそれが無い場合、 $location.pathはトレイリングスラッシュを追加または削除し、routeの実際の定義にマッチさせます。(翻訳に自信なし) パスはコロン(:name)から始まる命名グループを含めることが出来ます。 routeにマッチした場合、次のスラッシュまでの全ての文字が、 マッチした名前として$routeParamsに格納されます。 パスはコロンから始まりアスタリスクで終わる(:name*)命名グループを含めることが出来ます。 routeにマッチした場合、指定箇所に出来うる限りの全ての任意の文字が、 マッチした名前として$routePara
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ a form input input[checkbox] input[email] input[number] input[radio] input[text] input[url] ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController ngCopy ngCsp ngCut ngDblclick ngDisabled ngFocus ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress ngKeyup ngList ngModel ngMo
jQuery UI Sortableプラグインは、選択した要素をマウスによって並べ替え可能な要素にします。 テーブル行に適用したい場合は、tableではなくtbodyに指定しなければいけません。 型:jQuery or Element or Selector or String 初期値:"parent" 選択した要素をドラッグ移動する際のヘルパー要素が挿入される場所を指定します。 (z-indexによる重なりなどの問題に対処するため) jQuery ヘルパーを挿入する要素をjQueryオブジェクトで指定します。 Element ヘルパーを挿入する要素を指定します。 Selector ヘルパーを挿入する要素をセレクターで指定します。 String "parent"文字列を指定すると、ヘルパーは並び替え要素の兄弟要素になります。 $( ".selector" ).sortable({ appe
もし、事前にコンポーネントに配置したいプロパティが全て分かっているのであれば、JSXで簡単に割り当てる事が出来ます。 var component = <Component foo={x} bar={y} />; propsの変更は悪である。 もし設定したいプロパティが事前に分からない場合、 後からオブジェクトに追加したくなるかもしれません。 var component = <Component />; component.props.foo = x; // BAD component.props.bar = y; // こちらもBAD これは代入されるまで右辺のプロパティの型が正しいものであるかをチェックする手助けが出来ないため、アンチパターンです。 これは、プロパティの型エラーが不可解なスタックトレースで終了してしまう事を意味します。 propsはこの時点で、不変であると考えられるべきで
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ フィルター サービス $anchorScroll $animate $animateProvider $cacheFactory $compile $compileProvider $controller $controllerProvider $document $exceptionHandler $filter $filterProvider $http $httpBackend $interpolate $interpolateProvider $interval $locale $location $locationProvider $log $logProvider $parse $parseProvider $q $rootElement $rootScope $rootScopeProvid
次のページ
このページを最初にブックマークしてみませんか?
『js STUDIO | JavaScript、jQuery日本語リファレンス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く