こんにちは、Web アプリケーションエンジニアの id:nanto_vi です。先日開催された Kyoto.js #12 において、「薄いフレームワーク指向の Web クライアントサイドプログラミング」と題した発表を行いました。とある Web アプリケーションの開発にあたって、JavaScript による GUI プログラミングにどう取り組んだかという話になります。当日のスライドの内容に口頭で伝えた内容を加え、以下にまとめます。 前提 SPA ではない そこまで覚悟しなくてもよい 薄いフレームワーク指向 cf. ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011 開発期間が決まっている Web アプリケーションを新規開発するにあたり、クライアントサイドをどう実現するか。ここでは開発期間が決まっているというのが大きな要因となり、チームメンバーの

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 条件分岐 if 3.1 確認ダイアログボックスを表示する 戻り値・返り値 trueとfalse if文 else以降は省略することもできる クリックされたボタンでメッセージを変える まとめ 条件分岐 if (p.62) 「もし～なら」 「もし～でないなら」 というように、ある条件が成り立つかどうかで動作を変えるのがif文です。 今回のサンプルでは、クリックされたのが[OK]なのか、それとも[キャンセル]なのかを判断して、その後の動作を変えるのにif文を使います。 正しいif文を書くためには「条件」を設定する必要があります。 この条件の設定に必要なブール値（true / false）について理解してから、実際にif文を書くことにし

JavaScriptの勉強をしていて、説明の順番を変えた方がいいかも？と思われる箇所がありました。 →「オブジェクト」という仕組みと、その用語についてです。 jsstudy.hatenablog.com windowやdocumentなど、すべてのオブジェクトは、メソッド以外に「プロパティ」を持っています。 オブジェクトのプロパティとは、そのオブジェクトの状態を表すものです。 「オブジェクト」「プロパティー」「メソッド」…英語の専門用語がいきなりたくさん出てくると、訳が分からなくなるかも！？ JavaScriptの教材を作る場合、 先に、データ構造（変数、定数、配列など）の話を出す。 次に、オブジェクトの話を出す。 という順番が分かりやすいのではないか？と思いました。 （まあ、人それぞれだと思いますが…。） オブジェクト指向プログラミングの仕組みと用語 「プロパティ」や「メソッド」という仕

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。 jsstudy.hatenablog.com 2.4 HTMLを書き換える documentオブジェクトのgetElementByIdメソッド 要素のコンテンツのプロパティ textContent textContentは「プロパティ」～オブジェクトの状態を表す Elementオブジェクト オブジェクトのまとめ まとめ 2.4 HTMLを書き換える (p.50) 要素を取得する・コンテンツを書き換える JavaScriptでできるアウトプットの３つ目は、表示されているHTMLの書き換えです。 コンソールやダイアログボックスは、公開するWebサイトやWebアプリケーションで使用することはまれです。 JavaScriptではほとんどの場合、今回紹介するHTMLの書き換えを行いま

Standard built-in objectsSymbolConstructorSymbol() constructorPropertiesSymbol.asyncIteratorSymbol.prototype.descriptionSymbol.hasInstanceSymbol.isConcatSpreadableSymbol.iteratorSymbol.matchSymbol.matchAllSymbol.replaceSymbol.searchSymbol.speciesSymbol.splitSymbol.toPrimitiveSymbol.toStringTagSymbol.unscopablesMethodsSymbol.prototype[@@toPrimitive]()Symbol.for()Symbol.keyFor()Symbol.prototype.toSt

概要 ES2015ではUndefined、Null、Boolean、Number、String、Objectの６つの型に加えて、新しい型Symbolが導入された。 シンボルはプリミティブ型で、文字列のようにプロパティのキーとして使える特徴を持つ。 振る舞い シンボルはSymbolコンストラクタを呼ぶことで作られ、その時に引数として文字列を渡せば名前を持たせることができる。 sym1 = Symbol() sym2 = Symbol('name') typeof演算子で評価すると"symbol"が返される。 typeof sym1 // "symbol" Symbolコンストラクタをnew付きで呼び出すことは出来ないが、シンボルをObjectコンストラクタに渡すことでラップすることはできる。 new Symbol() // TypeError symobj = Object(sym2) ty

JavaScript では、シンボルはプリミティブ値です。 Symbol データ型を持つ値は「シンボル値」として見ることができます。 JavaScript の実行時環境では、シンボル値は Symbol 関数を呼び出すことで生成され、動的に無名の一意の値を生み出します。シンボルはオブジェクトプロパティとして使用されることがあります。 Symbol は任意で説明文を持つことができますが、これはデバッグ目的のみに利用されます。 Symbol 値は固有の識別子を表します。例えば以下のように使用します。 // 2 つのシンボルを同じ説明文で使用 let Sym1 = Symbol("Sym"); let Sym2 = Symbol("Sym"); console.log(Sym1 === Sym2); // "false" を返す // シンボルは固有であることが保証されます。 // 同じ説明文でた

ECMAScript6 (ES6, ES2015) で導入された新機能の大半は、読めば便利さが想像くらいはできるけど、自分にとってしばらく訳がわからなかった新機能が「シンボル」（MDNのリファレンス）。これまで文字列だけで上手くやってきたJavaScriptに、急になぜこんなものが導入されたの？　イマイチ分からなかったので、調べたことのまとめ。 シンボルの簡単なおさらい 知ってる人は読み飛ばし推奨。詳しく見たい人は、こことかの他のページを参照。 ES6で導入された、 Symbol() で作成できる特殊な値。 Symbol() は、 typeof すると 'number' でも 'string' でも 'object' でもなくて 'symbol' となる、まったく新しいタイプのプリミティブ値を生成する。 一旦作ったシンボルは、それ自身とのみ等しくなる、ユニークなIDとして機能する。 ===

なんとなくjQueryを使っているけど、実はJavaScriptの基礎がよくわかっていない……。そんなJavaScript初心者のために、変数とデータ型をていねいに解説します。 Webプログラミング言語「JavaScript」を学ぼうと決めたものの、どこから始めていいか分からないなら、この記事がちょっとしたヒントになるかもしれません。プログラミングを習得するのに特別なスキルは必要なく、誰だってゼロからスタートしています。一歩ずつ進めていけば大丈夫です。 この記事がおすすめの人は？ 以下のどれかに当てはまる人なら、この記事を読むメリットがあります。 プログラミング言語を使った経験がない JavaScriptを使った経験がない 以前JavaScriptの習得に挑戦したが、資料が不十分、または難しくてついていけなかった JavaScriptについての知識は少しあるが、基礎レベルからさらにステップ

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。