前提とゴール
- 誰かがフロントのベースは作ってくれた
- どういう構文使えるのかわからん
- 参照するリファレンスの場所、なぜそれを見るのか、がわかればゴール
- 個人的な所感です
- それは見ないでくれ、みたいな記事が多すぎるため
- flow,Angularなど、使ったことないので外していますが、結論はきっと同じです
そのフロントは何で書かれている？
1. Babel(らしい)
見る場所
MDNのJavaScriptのリファレンス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference
理由
Babelはcoreとpluginにわかれており、読み込んでいるpluginにより、使える構文がかわります
pulginは、ECMAScriptという仕様を元に用意されています
MDNのリファレンスには、いい感じにECMAScriptの仕様がまとまっています
MDNのリファレンスを見て書いた構文がエラーになった場合、フロントのベースを作った人に聞きましょう
エラーは、pluginが足りていないか、Babelの設定がよくない、あたりが原因です
適当にググって古い情報にあたると消耗します
2. TypeScript(らしい)
見る場所
公式のリファレンス
メニューの Handbook に、基本的な構文があり、
https://www.typescriptlang.org/docs/handbook/basic-types.html
メニューの What's New に、TypeScriptのversionごとの追加的な仕様が書いてあります
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-5.html
そして、MDNのJavaScriptのリファレンス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference
理由
ECMAScript＋TypeScript特有の構文、が使えます
MDNのリファレンスを見て書いた構文がエラーになった場合、フロントのベースを作った人に聞きましょう
エラーは、TypeScriptの設定がよくない、TypeScriptではまだ使えない、あたりが原因です
適当にググって適当な情報にあたると激しく消耗します
どこにもない構文だった
後述するReactとかのライブラリの都合である可能性はありますが、Web APIかもしれません
見る場所
MDNのWeb APIのリファレンス
https://developer.mozilla.org/ja/docs/Web/API
理由
Fetch API や、 DOM 、 Service Worker API などは、JavaScriptとは別の仕様の話です
MDNのリファレンスに、いい感じにまとまっています
React？Redux？Vue？Vuex？
1. React(らしい)
見る場所
公式のリファレンス
MAIN CONCEPTS に、JSXなど基本的な書き方が並んでおり、
https://ja.reactjs.org/docs/introducing-jsx.html
ADVANCES GUIDES に、TIPS的な内容が書いてあります
https://ja.reactjs.org/docs/accessibility.html
慣れてきたら API REFERENCE に、細かく書いてあります
https://ja.reactjs.org/docs/react-api.html
TypeScriptを使っている場合は、 TypeScript側 にもJSXについてのリファレンスがあります
https://www.typescriptlang.org/docs/handbook/jsx.html
理由
JSXはReactの書き方です
Reactだときちんと認識して、公式を見ましょう
TypeScriptの兼ね合いは、どこを見ればいいのかややこしいですね
2. Redux(も使っているらしい)
見る場所
公式のリファレンス
Basic Tutorial に、基本的な概念が並んでいます
https://redux.js.org/basics/actions
慣れてきたら API Reference に、細かく書いてあります
https://redux.js.org/api/api-reference
理由
ReactとReduxは混ざりがちで、どちらの概念なのかわかりづらいと思います
ざっくり言うと、Actions, Resucers, StoreはReduxの概念なので、
Reactのリファレンスを見ても書いてないです、Reduxのリファレンスを見ましょう
3. Vue(らしい)
見る場所
公式のリファレンス
右上のメニューの 学ぶ > ガイド に、基本的な内容が書いてあります
https://jp.vuejs.org/v2/guide/syntax.html
慣れてきたら 学ぶ > API に、細かく書いてあります
https://jp.vuejs.org/v2/api/
TypeScriptを使っている場合は、 Vue側 にリファレンスがあります
https://jp.vuejs.org/v2/guide/typescript.html
理由
VueはJSXとも違う書き方をします
(JSXでも書けますが、たぶん書いてないでしょう)
公式を見ましょう
4. Vuex(も使っているらしい)
見る場所
公式のリファレンス
右上のメニューの ガイド に、基本的な概念が並んでいます
https://vuex.vuejs.org/ja/guide/state.html
慣れてきたら APIリファレンス に、細かく書いてあります
https://vuex.vuejs.org/ja/api/
理由
VuexもReduxと同じく、Vueと概念が混ざりがちです
ざっくり言うと、Store, State, Getters, Mutations, ActionsあたりはVuexの概念です
Vuexのリファレンスを見ましょう
補足
プラグインなどで、公式のリファレンスには書いてない書き方も多くあります
package.json を開いて、フロントのベースを作った人に、 この書き方はどのプラグインか？ 聞きましょう
まとめ
Qiitaを閉じて、MDNのリファレンスと、ライブラリのリファレンスを見ましょう
とてもメンテナンスされているからです