初学者としてJavaScriptを学ぶ | さにあらず
はじめに 僕が以前書いたModern JavaScript 概観、そして Electron へは、読んで貰えただろうか？ あれは初学者には全く向いてないエントリだ。 あのエントリは、僕の理解したモダンな JavaScript 全体について概観することを目的としているからね。 あれを読んで、「今の JavaScript ってこんなに大変なのか…」と感じた人は多いだろう。 しかし、ある程度のソフトウェアを開発するために技術全般を概観しようとすれば、ああいう分量になるのは致し方ない。 と言う訳で、今回はちゃんと初心者向けのエントリを書いた。 少し多く感じるかもしれないが、丁寧に説明しようとしたからだと好意的に解釈して欲しい。 開発環境 Thinkpad X1 Carbon 2016 年モデルに Windows10 をインストールしてある。 ハードウェアスペックは、こうだ。 CPU i7 66
オブジェクト指向って便利なの？ - JavaScript勉強会
プログラミングのやり方って、いろんな方法が考えられてきました。 何かを作るとき、ゼロから作るのは大変だけど、先人の努力や工夫を拝借して作ると、その分だけ楽ができますね！ プログラミングのやり方はまだまだ発展途上＝改善の余地があるんだろうけど、現状はどうなっているのでしょうか？ shokuren.hateblo.jp オブジェクト指向のやってることはわかるけど、説明してる人の何が言いたいのかはわからん 疑問が２つ。 一人で作ってて、小規模な案件なら、むしろ書く量が増えて面倒だったりしません？ なので、そうしないほうがいいこともある？というのが一つ。 腕が上がるとor効率化を図るといつの間にかオブジェクト指向になってるとか？が2つ目。 オブジェクト指向ってどうなのさ？ (1) オブジェクト指向プログラミングを使わない方が良い場合もあるの？ (2) オブジェクト指向プログラミングは効率化に役立っ
3.3 動作のバリエーションを増やす 《条件分岐(else if)》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.3 動作のバリエーションを増やす else if サンプルコード 3.3 動作のバリエーションを増やす 構造化プログラミングの基本動作は、 順次 選択（条件分岐） 反復（繰り返し） の３つです。 （参考）JavaScript学習 準備編 - JavaScript勉強会 選択（条件分岐）は「if」で書きますが、場合分けを増やしたいとき「else if」という書き方が用意されています。 else if (p.81) if文の条件式がfalseになると、else以降が実行されます。 elseの後ろにまた別のif文をつけ加えることができます。 サンプルコード <html> <head> <meta charset="UTF-8">
JavaScriptでカリー化を理解する | SIBYL System
完全適用と部分適用 完全適用(full application)はいわゆる関数です。部分適用(partical application)は、引数の一部を渡すことをいいます。部分適用である関数add4は第1引数は固定の値で、第2引数のみ渡しています。 // 完全適用 var add = function(a, b){ return a + b; }; add.apply(null, [4, 5]); // 部分適用 var add4 = function(a){ return add(4, a); } console.log(add4(5)); // -> 9
3.2 入力内容に応じて動作を変更する 《変数》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 変数とは 1) 変数を「定義する」 変数名のつけ方 予約語とは アルファベットの大文字・小文字を区別する 変数の使用例 代入演算子（=） 変数に保存された内容で動作を切り替える 比較演算子 型とは まとめ 今日はJavaScriptの変数について学びます。 「変数」（variable）は、データを入れておく「箱」「容器」みたいなものです。 変数 (プログラミング) - Wikipedia プログラミングにおいて、変数（へんすう、variable）とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。 変数とは (p.71) ある行で得ら
薄いフレームワーク指向の Web クライアントサイドプログラミング - Hatena Developer Blog
こんにちは、Web アプリケーションエンジニアの id:nanto_vi です。先日開催された Kyoto.js #12 において、「薄いフレームワーク指向の Web クライアントサイドプログラミング」と題した発表を行いました。とある Web アプリケーションの開発にあたって、JavaScript による GUI プログラミングにどう取り組んだかという話になります。当日のスライドの内容に口頭で伝えた内容を加え、以下にまとめます。 前提 SPA ではない そこまで覚悟しなくてもよい 薄いフレームワーク指向 cf. ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011 開発期間が決まっている Web アプリケーションを新規開発するにあたり、クライアントサイドをどう実現するか。ここでは開発期間が決まっているというのが大きな要因となり、チームメンバーの
3.1 確認ダイアログボックスを表示する 《条件分岐 (if) 》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 条件分岐 if 3.1 確認ダイアログボックスを表示する 戻り値・返り値 trueとfalse if文 else以降は省略することもできる クリックされたボタンでメッセージを変える まとめ 条件分岐 if (p.62) 「もし～なら」 「もし～でないなら」 というように、ある条件が成り立つかどうかで動作を変えるのがif文です。 今回のサンプルでは、クリックされたのが[OK]なのか、それとも[キャンセル]なのかを判断して、その後の動作を変えるのにif文を使います。 正しいif文を書くためには「条件」を設定する必要があります。 この条件の設定に必要なブール値（true / false）について理解してから、実際にif文を書くことにし
オブジェクト指向の用語「プロパティ」「メソッド」 - JavaScript勉強会
JavaScriptの勉強をしていて、説明の順番を変えた方がいいかも？と思われる箇所がありました。 →「オブジェクト」という仕組みと、その用語についてです。 jsstudy.hatenablog.com windowやdocumentなど、すべてのオブジェクトは、メソッド以外に「プロパティ」を持っています。 オブジェクトのプロパティとは、そのオブジェクトの状態を表すものです。 「オブジェクト」「プロパティー」「メソッド」…英語の専門用語がいきなりたくさん出てくると、訳が分からなくなるかも！？ JavaScriptの教材を作る場合、 先に、データ構造（変数、定数、配列など）の話を出す。 次に、オブジェクトの話を出す。 という順番が分かりやすいのではないか？と思いました。 （まあ、人それぞれだと思いますが…。） オブジェクト指向プログラミングの仕組みと用語 「プロパティ」や「メソッド」という仕
2.4 HTMLを書き換える 【JavaScript超入門】 - 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の書き換えを行いま
Symbol - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback Symbol is a built-in object whose constructor returns a symbol primitive — also called a Symbol value or just a Symbol — that's guaranteed to be
JavaScriptプログラミング講座【Symbol について】
// ------------------------------------------------------------ // Symbol オブジェクトを作成する // ------------------------------------------------------------ var symbol_obj0 = Symbol(); var symbol_obj1 = Symbol(); // 出力テスト console.log(symbol_obj0); console.log(symbol_obj1); // ------------------------------------------------------------ // Symbol オブジェクトを作成する（デバッグ用の説明文付き） // -------------------------------
Symbolについて - JS.next
概要 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
Symbol - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback Symbol は組み込みオブジェクトであり、コンストラクターは一意であることが保証されているシンボルプリミティブ（シンボル値または単にシンボル）を返します。シンボルは、他のコードがオブジェクトに追加する可能性のあるキーと衝突しないように、また、他のコードがオブジェクトにアクセスするために
ECMAScript6にシンボルができた理由
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ECMAScript6 (ES6, ES2015) で導入された新機能の大半は、読めば便利さが想像くらいはできるけど、自分にとってしばらく訳がわからなかった新機能が「シンボル」（MDNのリファレンス）。これまで文字列だけで上手くやってきたJavaScriptに、急になぜこんなものが導入されたの？ イマイチ分からなかったので、調べたことのまとめ。 シンボルの簡単なおさらい 知ってる人は読み飛ばし推奨。詳しく見たい人は、こことかの他のページを参照。 ES6で導入された、 Symbol() で作成できる特殊な値。 Symbol() は、 ty
これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する
なんとなくjQueryを使っているけど、実はJavaScriptの基礎がよくわかっていない……。そんなJavaScript初心者のために、変数とデータ型をていねいに解説します。 Webプログラミング言語「JavaScript」を学ぼうと決めたものの、どこから始めていいか分からないなら、この記事がちょっとしたヒントになるかもしれません。プログラミングを習得するのに特別なスキルは必要なく、誰だってゼロからスタートしています。一歩ずつ進めていけば大丈夫です。 この記事がおすすめの人は？ 以下のどれかに当てはまる人なら、この記事を読むメリットがあります。 プログラミング言語を使った経験がない JavaScriptを使った経験がない 以前JavaScriptの習得に挑戦したが、資料が不十分、または難しくてついていけなかった JavaScriptについての知識は少しあるが、基礎レベルからさらにステップ
2.3 ダイアログボックスを表示する 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。 jsstudy.hatenablog.com 2.3 ダイアログボックスを表示する アラートダイアログボックス ダイアログボックスとは？ 2.3 ダイアログボックスを表示する (p.50) コンソールに続いて紹介する２つ目のアウトプットは、ダイアログボックスへのアウトプットです。 使い方はconsole.logとほとんど変わらず、簡単です。 <body> <script> window.alert('出力したい文字や計算式など'); </script> </body> 上記のHTMLファイルをChromeで開くと、以下のようなアラートダイアログボックスが表示されました。 「OK」ボタンか、右上の「×」ボタンをクリックすると、消えます。 アラートダイアログボックス windo
JavaScriptでmacOSを自動操作できるJXA - JavaScript勉強会
JavaScriptに、ちょっと便利な用途がありました！ Macには、操作を自動化できるAppleScriptという道具が用意されています。 このAppleScriptの代わりに、JavaScriptも使えるようになっていました。 JavaScript for Automation (JXA)とは？ qiita.com AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。 そもそも、AppleScriptって何？ AppleScript - Wikipedia AppleScript（アップルスクリプト）は、アップルが開発したClassic Mac OS/macOS用のオブジェクト指向のスクリプト言語。 AppleScriptはMac OSのスクリプティング機構Open Scripting A
知らないうちにMacがシステム標準でJavaScriptで操作できるようになってた (JXA) - Qiita
知ってる人には今更と思いますが、今まで知らなかったのでメモメモ。 AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。宇宙航空研究開発機構とは無関係です。 (追記：JXAは公式の略称です →Introduction to JavaScript for Automation Release Notes) 詳しくは Appleの公式ドキュメント か、「参考」にあるリンクへどうぞ。 もう一つ記事を書いたのでこちらもよかったらどぞ。 Macのキーボード入力、マウスクリックをJavaScriptで (JXA) Script Editorで使う方法 まずScript Editorを使う方法を説明します。 好きなテキストエディタを使いたい場合は飛ばしてください。 (でも「用語説明」の表示の仕方は覚えておいて
element - MDC
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback Element は Document が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが Element を継承しています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オンラインでJavaScriptやPHPを実行する環境 - JavaScript勉強会
