asciidwango / js-primer Goto Github PK
View Code? Open in Web Editor NEW:book: JavaScript Primer - 迷わないための入門書
Home Page: https://jsprimer.net
License: Creative Commons Attribution 4.0 International
:book: JavaScript Primer - 迷わないための入門書
Home Page: https://jsprimer.net
License: Creative Commons Attribution 4.0 International
基本文法 #17
{ }
blockラベルは次のコードが動くという豆知識ぐらいにしか使わない気はする
http://
ここは単純に説明するだけだとそうですねって感じがするので、できるだけ実際の細かいユースケースに寄せたい。
とくにswitchとかはなんとなく使うパターンがあるとは思う(アンチパターンになりやすい)
Iterator関連は #68 に分離
これ先に配列とオブジェクトのデータへのアクセス方法をちゃんと書いた方が良さそう。
(ユースケースにかなり触れにくい)
オブジェクトは データ型とリテラルで書いているので、配列も同じ場所に array[index] でアクセスできるというのを書いたほうがよさそう。
via #68 (comment)
リテラルのところで、配列へのアクセス方法と 0-based indexであることは書いたほうが他の章的に解説しやすいので、簡単に触れる(2-3行程度)
#78 (comment) より。
node-static が広く使われているようなので、全体を通して統一したほうがよさそう。
各ユースケースのpackage.jsonで依存するか、ルートでインストールしてpeerDepsにしておくかなど決めたい。
//
/* */
正規表現とのリテラルの話は一行程度で触れたいけど、ここでは本質できないのでふれない。
値の評価 #14 の次あたりにさっと混ぜておくと説明がスムーズにできそう。
他の言語やってる人前提なら、単純にこう書くぐらいなので基本文法の中でもかなり短い
#13 これもCONTRIBUTING.md関連になります。
用語の統一などは後から修正がしやすいですが、
文体的な、面は後から揃えるのが大変なのでIssueとして立てておきます。
文体的な話としてどちらで書いていくかというのを話し合うIssueです。
(本文と箇条書きは別の文体というのは問題ないと思います)
textlint-rule-no-mix-dearu-desumasuを設定すれば、どちらに統一するかというのはチェックできるようになっているので、どちらかに決めるというのはある程度自動的に決められます。
が、文体は多分書籍の雰囲気とかどういう人向けに書いてるかというのにも影響がありそうなので、どういう雰囲気を目指すのかという話になるかもしれません。
いくつか書いてみて、次回のミーティングとかで方針を決められるといいかもしれません。
リポジトリにミーティングノートを追加しました
@kahei 間違って mtg-note
ブランチを先にpushしてしまって、mtg-note
がデフォルトブランチになってしまいました。(ブランチがない状態だと最初のブランチがデフォルトとなってしまうようです)
コラボレーター権限だとデフォルトブランチの変更ができないので、以下の手順でデフォルトブランチをmaster
に変更をお願いできますか?
#8 で基本文法の章を書くことになったので、基本文法に関するメタIssueです。
Issueの目次のような感じ かつ 基本文法の章にあったほうがいいものをメモって置くIssueです。
この辺でもうある程度書ける
その他の書く候補
TODOアプリをユースケースとして作ってみようと言う話があったので。
#17 基本文法
#112 関数のうち "関数宣言" について
var obj = { method : function(){} }
と書くこともできるがこれは関数式と同じスクリーンショットの撮影方法と、サイズ・形式について
実行環境との一貫性を考えてFirefoxで撮影したい
サイズ固定はレスポンシブモードでよさそう?スクリーンショット機能もある。
形式はpngで問題ない?オンラインで見られるならjpgにしておくほうが親切か?
懸念点:
#31 制御構文からの分離
#31 制御構文 -> iteration(ココ) の順番
for(;condition;)
と同じin
演算子in
演算子について学ぶ必要があるhasOwnProperty
と組み合わせる必要がある
Object.create(null)
で作られたものだと簡単に崩壊するObject.keys()
/Object.values()
で代用できるhttp://
がなぜvalidかという豆知識
while(regexp.exec("test"))
でマッチングnull
を返すのはexecとObject.getPrototypeOf
だけSymbol.iterator
で任意のオブジェクトをiterableにできるプログラミングにおいて、同じ処理を繰り返すために同じコードを書くことはありません。
ループや再帰呼び出し、イテレータなどを使い繰り返し処理は抽象化されます。
ここでは、もっとも基本的な繰り返し処理となるループについてを学んでいきます。
話しておきたいことなどを書く場所です。
基本文法 #17
式(Expression)と文(Statement)についての解説をする。
について解説する。
式(Expression) は演算子 #32 の説明に必要 https://asciidwango.github.io/js-primer/basic/operator/
文(Statement)とブロックはループ #31 の説明に必要 https://asciidwango.github.io/js-primer/basic/condition/
式はそれ単独では基本的に完結せず、文または式の一部として使用される言語要素です。また、式の最大の特徴として、値を返すという点が挙げられます(文は値を返しません)。
-- 式(Expression)と文(Statement) - よねKENのプログラミング研究
文は実行されて副作用
手続き型言語の単位は「文」
文は一文一文ごとに「実行」される。実行の結果は「副作用」によってのみ表現できる
こういう関係なのかな
+-------------------------------------+
| |
| Declaration |
| |
| |
| +----------------------+ |
| | | |
| | Statement | |
| | | |
| | +--------------+ | |
| | | | | |
| | | Expression | | |
| | | | | |
| | +--------------+ | |
| | | |
| +----------------------+ |
| |
+-------------------------------------+
概要: JavaScriptは式と文で構成されている。
コラム的な扱い
2016-05-27のES2016以降を含めるかどうか?でも議論したけど、策定プロセスやどこで誰が決めているのかという事について触れる。
JavaScriptでは先行実装的を取り入れたという形のツールやライブラリが多い。
ECMAScriptのProposalsは、必ず仕様に入るわけではないので、あくまでそれは提案中の仕様にすぎないという話は現実的に知っておいたほうが良い。(変に振り回されても困るため)
そのため、その判断基準を身につけるという意味での話が必要となる。
仕様以外のはなしとしてもopinionが強いものが結構多い(これは単に人数が多いというのもある)ので、そういう情報の読み方探し方という話になってしまうのかもしれない。
Node.jsのCLIアプリで何か一つユースケースがあるといいのではないという話が #5 ででた。
具体的に何かは出てなかったので、考える必要がありそう。
/cc @laco0416
#17 基本文法
変更を定義して、その変数から値を取り出す/評価するという話をした後に、
「そもそも値とはどういうものがあったどうやって定義するのでしょうか?」という流れ。
この節は普通にやっても結構膨大なので、上手い見せ方が必要な気がする。
JavaScriptは動的型付け言語だが、データには型があり典型的なプリミティブの型について理解する。
またプリミティブの型の多くにはリテラル表現が存在する。
このデータ型とtypeofの関係についてを解説する。
typeofでちょっと変なnullの例を見たところで実際のタイプ別に見ていく。
JavaScriptのデータ型はそれぞれリテラルをもっている。
実際にもっと詳細な形を見たい場合は、そのTypeごとに定義されている方法を使う。
実際にプリミティブな値を書くときは殆どのケースでリテラルを利用します。
既に書いていますが、改めてリテラル表現を見ていきます。
0x
, 0b
\u{}
最後にオブジェクトについてです。
JavaScriptは全てがオブジェクトと言われているぐらい重要な概念です。
もちろんオブジェクトにもリテラルがありますが、{}
と[]
についてをまず見ていきます。
実際の色々なオブジェクトについては次の章で見ていきましょう
2016年5月27日のミーティングで事前に書いておきたいアジェンダを書いておく場所です。
ES6 または ES2015という表記をメインに使うかどうか
最初に ES6 === ES2015 という話は書くが、メインの用語としてはどちらを使うかどうかを決める必要はありそう。
Dr. Axel の本はES6で、続きの今書かれてる本はES2016...という感じにしている。
(微妙に関連して、この機能はES6から使える みたいな表記をアノテーションとして入れておいた方が、後々役立つ気がするが、これは別Issueっぽい。関係あるのは基本文法が殆どだけど)
基礎文法 #17
#27 型/リテラルの続き -> #32 演算子 -> 型変換
異なるデータ型の変換をするにはどうやるのかを学ぶ。
また暗黙的な型変換はなぜ避けるべきなのか、明示的な変換のやり方について書く。
明示的な型変換には演算子を使ったハック的な方法があるが、そうではないやり方の方がいいこと、またなぜそういう傾向があるのか(早いとか)についてを簡単に書く。
参考
2 - "1" !== 0 + "1"
+"string"
という + 演算子がアルゴリズムステップの過程で ToNumber
をするという副作用を期待しての変換1 == "1"
1 + "1"
||
は 0 がfalsyであることに気をつける必要がある== null
のみ!
は評価した値を反転ので、暗黙的な型変換が行われる[[class]]
とtoStringの問題"0" == false; // true -- UH OH!
false == 0; // true -- UH OH!
false == ""; // true -- UH OH!
false == []; // true -- UH OH!
"" == 0; // true -- UH OH!
"" == []; // true -- UH OH!
0 == []; // true -- UH OH!
[] == ![]; // true
var a = 42;
var b = [ 42 ];
a == b; // true
var a = {
valueOf: function() { return 42; },
toString: function() { return 4; }
};
a + ""; // "42"
var a = "3.14";
var b = a - 0;
b; // 3.14
toString/valueOfどちらを呼び出すというのかという違い。
書籍で扱う実行環境の数は少ないほど記述のブレが減るため、いずれは決めておく必要があると思います。
その実行環境を何にするのかを話し合うIssueです。
現在のブラウザでES6対応が進んでいるものとしては、以下のようなものがあると思います。
この中でクロスプラットフォームなものとしては
となります。
また、ES6の対応状況としてECMAScript 6 compatibility tableを参照した場合、
となっています(この数値にはES6 Modulesは含まれていません)。
Chromeの残りは末尾呼び出し最適化で、こちらの方は実装が進んでいるので数ヶ月以内に100%実装になると思います。
Moduleも実装は進められています。(こっちは仕様も一緒に進めつつなのでいつ終わるかはよくわからない)
<script type="module">
本題ですが、実行環境としてはFirefox(Spidermonkey)かChrome(V8)のどちらかになるとは思います。
Chromeを選択した場合、ブラウザ以外にもV8を使った実行環境としてはいくつか選択肢があると思います。
ブラウザじゃないメリットとしては、バージョンが固定しやすいとか専用のものを作りやすいというぐらいですね。
逆にブラウザじゃないと別途インストールしないといけないものが増えたり、初めて見るものが増えるとかですかね。
ここで決めておくどっちのブラウザか(どっちもか)、またChromeならブラウザかそうでないものがいいのかぐらいな気がします。
ユースケースのひとつ
Ajax通信を行ってデータを表示する簡単なアプリケーション
GitHubのAPIを使ってユーザーIDからプロフィールを出す
コミットするときのルールはCONTRIBUTING.md
を作ってそこにまとめておくといい気がしていますが、必要になるであろうコミットメッセージのルールはどうしようかというIssueです。
多分AngularJS Commit Conventionで大丈夫ですよね?
component commit title
commit type / /
\ | |
feat(rule-context): add template url parameter to events
body -> The 'src` (i.e. the url of the template to load) is now provided to the
`$includeContentRequested`, `$includeContentLoaded` and `$includeContentError`
events.
referenced -> Closes #8453
issues Closes #8454
commit type
: feat | fix | docs | style | refactor | perf | test | chorePromise本の時に同じルールを参照してて、typeにwrite
とか欲しくなりましたが、feat
で代用できると思うので、その辺の読み替えが必要になりますが、CONTRIBUTING.mdにその事をかいておけばいいとは思ってます。
#17 基本文法
演算子について
+
)-
)*
)/
)%
)**
)+
)-
)++
)--
)==
)!=
)===
)!==
)>
)>=
)<
)<=
)&
)^
)~
)<<
)>>
)>>>
)&&
)||
)!
)typeof()
とかけるとけど、これは()
という演算子とtypeof演算子が組み合わさっているだけ = 関数ではない()
を使う||
は 0 がfalsyであることに気をつける必要がある== null
のみ== null
は === null && === undefinedという意味+= 1
-= 1
+
は文字列結合としても使える+
は数字と文字列のみとする+
は文字列を数字に変換する+
は Number(string) にする-
は数字に変換する-
を文字列に使うのはハック的なやりかた!
は真偽値を反転させる!
は評価した値を反転ので、暗黙的な型変換が行われる[[class]]
とtoStringの問題/
と正規表現リテラルとコメントは紛らわしいという問題があるnew
とかin
、...
演算子はどうするか?in
演算子はプロトタイプチェーン...
はspread の話でまとめたい+0
と-0
は異なるObject.is
では判定できる**
=
*=/=%=+=-=<<=>>=>>>=&=^=|=**=
演算子はJavaScriptの歴史が詰まった感じなので、色々だけここでまとめられるものはまとめたい。
演算子は検索がしにくいのもあるため、このページに書いてあったような気がするという感じにまとめたい
基本文法だとユニットテストを書くまでではない(逆に書きにくい)ものが多い。
以下の形式でdoctestライクのテスト方法を追加する。
let a = 42;
console.log(42); // => 42
これにより、サンプルコードのコメントに書いた評価結果と実際の出力が一致するかをテストできる。
評価したい式; // => 期待する評価結果
or
console.log(評価したい式); // => 期待する評価結果
コードはMITでいい気がするけど、文章のライセンスは特に決めてない。
Pull Requestする時とかに決めてないと問題になりそうだから、そのうち決める必要ありそう。
現在は特にないが、ウェブサイトとして公開した時に、リリース情報の通知を受け取れるフォームを用意する。
メールアドレスを入れてもらって、リリース時に通知する形での利用。
基本文法 #14
変数とプロパティは一緒に説明すべきかは微妙そう。
オブジェクトの説明のあとになりそう。
この書籍のユースケースでは prefer-const ではいいと思ってるけど、REPLで確かめて見て! みたいなケースだとlet
の方が繰り返し定義できて便利である。
ここではなぜ複数あるのかとその意味の違いについてだけ簡潔にやる
基本文法 #17
これやっかいな概念で2-3箇所にまたがったものになってる。
これだけで一つのまとまりとして振り返る形でやったほうが理解がし易い(スコープってどこに書いてあったけ? みたいなときに、この辺かというまとまりが見える)ような気がする
この節では、JavaScriptのFunctiuonコンストラクタ的な話。
#20 関数宣言では、宣言方法、呼び方、値の返し方について学ぶ。
ここでは、 #20 では解説してない、スコープやクロージャーなどの挙動的な動作が中心になる。
Let’s Learn JavaScript Closures — Free Code Camp
この記事、クロージャーとArrow Functionを理解するのにすごくよく書けてる
JavaScript文法の基本(フラナガン本の目次より抜粋)
・字句構造
・型、値、変数
・式と演算子
・文
・配列
・オブジェクト
・関数
・クラスとモジュール
・正規表現パターンマッチング
ユースケース解説に入る前に、ES2015に則った形で上記の簡潔な解説を入れてはどうか?
---
description: This is a short description of my page
---
GitBookとGitHubはFront Matterをサポートしているので、そこにメタ的な情報を入れておくと便利かもしれない。
その章のサマリとかタグとかがあると機械的なチェックに役立つ可能性がありそう。
すぐに役立つものではないので、将来的にあったほうがいいものを考えておくといいかもしれない。
コンソールへの表示方法を扱っているが、開き方については書かれてない
ここで開き方について簡単に触れる。
(変数宣言より前に持って行ったほうが楽かも)
<script>
を使っての実行(ブラウザ(推奨はFirefox)を使ったコンソールの開き方と実行)この本のURL として示しやすいページが欲しいので用意する。
合わせて #33 のフォームを配置する。
このリポジトリはtransferしたり、リポジトリ名を変更したりする可能性があるから、URLが一番問題になりそう。(少なくてもリポジトリ名は変更が必要…)
とりあえずな感じだとgh-pagesで用意しておいて、ちゃんとタイトルとかが決まったらそっちにリダイレクトする感じになる気がする。(transferしないでgit的に移すだけ)
JavaScript Plugin Architectureで試した感じでは、多くの人は一番ランディングページっぽいページをブクマとかする傾向があった。
GitHub.com はCSPが有効でFirefoxだとブックマークレットとかも使えないとかそういう要因もありそう。
📝
Organization | Repository only | |
---|---|---|
Domain | 一番柔軟で変更に強い | 複数のリポジトリが必要になるとダメ |
No Domain | ドメインがない以外は特に問題なし | 単一のリポジトリなら問題なし |
ドメインを使う場合はOrganizationを作って、Organizationにドメイン設定したほうが楽(リポジトリ単体だと扱いにくくなる)
複数リポジトリが必要になる可能性としては、ユースケースのサンプルを見られるURLを用意したい場合とかはリポジトリを複数作ってそこのgh-pagesに公開すると楽。
ドメインはJS.ORG | DNSのサブドメインという選択肢もあるけど、名前決めないと行けない問題は同じ
http://azu.github.io/promises-book/ でも実装したもの。
コードをその場で実行できるものをウェブ版で見られるようにしたい。
推奨ブラウザを設定すれば、殆どそのまま実行できるような仕組みだけでも良い気がする(Babelのような変換を挟まなくていい)
実行しながら読むと理解の補助になるというのは、Promise本の感想やオンライン勉強会でやった時に感じているので、この機能は結構重要になりそう。
類似する仕組みをもっているもの
URLにsourceという名前が出てくるのはちょっと嫌であるため。
#55
基本文法 #17 というよりは事前の注意事項に近い気がする
ES6において、Strict modeはデフォルトであるという認識。(Module空間ではStrict Modeではないいけない)
逆にこれは var
なしの変数宣言がstrict modeではできないなどの説明をするための事前情報として触れるべきものであるという認識。
なので、strict modeの存在は書くべきで、書籍中のコードは書かれてないけどstrict modeがデフォルトであるという話が必要そう
#46
この書籍はES2015以降をベースとしたJavaScript入門書となる予定です。
基本的なStableのECMAScriptのバージョンを扱います。
プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、
今のJavaScriptアプリケーションを読み書きできるようになることを目標にする内容です。
(プログラミングが初めてという人が対象ではないです)
この本は、主に次の2種類から構成される予定です。
また、書籍として出版予定があります。
新しいユースケースが思いついたら、新しいIssueを作ってここにまとめる。
Issue切るほどでもないアイデアを思いついたら、とりあえずここに書いておく形で利用しています。
その他全体的な構成についての意見を募集しています。 ✋
といったようなコメントを書いてくれると参考になります。
Module内では動かないし、普通は使わないし、最近そこまで見ない。
なので外してしまうのがいいと思う。
Markdown中に出てくるコードブロックもLintをしているつもりだったけど、
npm run eslint:md
のglob指定は間違っているので修正する
summary-to-path | xargs eslint -c .md.eslintrc --ext .md
にすれば、文章を対象にできる。
連絡用のIssueを立てておきます。
さて、3月になったのでまたミーティングを行いたいと思います。
皆さんのご予定はいかがでしょうか?
基本文法 #17
事前にリテラル #27 で少し触れる
/(:?)/
GitBookのページ上からGitHubの編集画面に飛ぶリンクが欲しい。
https://github.com/rtCamp/gitbook-plugin-edit-link を使い、
ページからGitHubの編集画面へ直接飛べるようにする。
サンプルコードのテストを常に回しておきたい
今はJavaScriptをサポートしていないブラウザはないため、過去に書かれたHTMLコメントをエラーとしないために追加されました。
くどい表現になってる。
言いたいこととしては
• JavaScriptをサポートしてないいないブラウザはもうない
• そのためこのハックはいらない
• しかしサポートを切ると過去に書かれたサイトの互換性がなくなってしまう
• そのためブラウザはこの機能を捨てることができない
• 事実上実装されている機能であるなら、ちゃんとしようとして明記しようとなった
• そうしてできた仕様
というわけだけど、長い
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.