【モダンJavaScript】新卒エンジニアの基礎学習
こんにちは！
プラコレの新卒エンジニアのひなこです！
日々フロントエンジニアとして開発を行っています！
最近の開発MTGでIMAGINIAの先輩とお話した時に
勉強したいことがたくさんあり、何から勉強したらいいか
混乱してしまっていると最近の悩みを打ち明けた際に、
「誰かに教えられる知識」こそ確実な知識だと
アドバイスをいただきました！
そこで、まず自分が身につけていかなければならないことは
フロントエンジニアの後輩ができた時に、
どんな質問にもすぐに、確実なことを答えられるような知識であると考え、
Reactの基礎から復習・勉強してみております！
以前先輩エンジニアからおすすめしていただいた
『モダンJavaScriptの基本から始めるReact実践の教科書』
という本を買い、勉強しています！
読んでみると、“何となく“理解していたことを
本質から理解でき、新たな知識をインプットできています！
では、下記私が最近勉強したReactの基礎です！
後輩ができた時には、この記事を見せながら、
うまく説明ができそうなくらい理解が深まりました！
モダンJavaScriptの基礎
DOM（Document Object Model）
HTMLを解釈し木構造で表したもの。
木構造とは？という方は、▼こちらを見るとイメージしやすいと思います！
JavaScript HTML DOM
https://www.w3schools.com/js/js_htmldom.asp
仮想DOM
オブジェクトで作られた仮想的なDOM。
仮想DOMはReactなどで使われている。
パッケージマネージャー（npm、yarn）
|
1 2 |
npm install パッケージ名 yarn install パッケージ名 |
のコマンドを叩くことで、package.jsonが更新→パッケージの情報が追記される。
package-lock.jsonやyarn.lockが作成されたり、更新される。
|
1 2 |
npm install yarn install |
のコマンドを叩くと、node_modulesが生成→パッケージが展開される。
ちなみに、node_modulesは
プロジェクト下にpackage.jsonとpackage-lock.json（もしくはyarn.lock）があれば、
同じnode_modulesを作ることができるため、githubに上げる必要はない！
ECMAScript
JavaScriptの標準仕様。
ES6が導入された時が転換期であり、下記の機能が追加された。
・let, const
・アロー関数
・Class構文
・分割代入
・テンプレート文字列
・スプレッド構文
・Promise
モジュールハンドラー
開発はファイルを分けて行い、
本番化前にビルドする際にファイルを1つにするもの。
モジュールハンドラーの主流は、Webpack。
ちなみにビルドとは、プログラムの元から実際のプログラムを作る作業のこと。
トランスパイラ
JavaScriptの記法をブラウザで実行できる形に変換するもの。
トランスパイラの主流は、Babel。
モジュールハンドラーとトランスパイラを使用することで、
効率良く開発することが可能、かつ実行する際にはうまく変換してくれるため、便利なツールである。
SPA（Single Page Application）
画面毎にHTMLファイルを用意する必要が無くなり、
HTMLファイルは１つのみでOK!
J画面遷移は、JavaScriptのDOMの書き換えで実装する。
メリットは
①UXの向上
表示速度が0.1秒遅くなれば1%売り上げが減り
1秒早くなれば10%売り上げが増える
と言われているらしい！
②開発効率が上がる
部品化するためのコンポーネントを使い、修正がしやすくなる。
const, letでの変数宣言
JavaScriptを使用した開発では、大抵constを使う。
letは、Stateで管理せずに、処理の中で値を上書きしていくような変数を書く時に使われる。
| 上書き | 再宣言 | |
|---|---|---|
| let | O | O |
| const | X | O |
ただし、下記の場合は、constでも変数を変更することができる。
・真偽値
・数値
・巨大数値
・文字列
・undefined
・null
・一意で不変な値
・オブジェクト
・配列
・関数
テンプレート文字列
変数（${name}）を文字列として使いたい場合の書き方。
|
1 |
const message = `アンニョンハセヨ！ ${name}氏！`; |
アロー関数 () => {}
|
1 2 3 |
const getName = (value) => { return value }; |
■引数が1つの場合は()を省略可
|
1 2 3 |
const getName = value => { return value }; |
■処理が1行で返却する場合は{}とreturnを省略可
|
1 |
const getFullName = (firstName, lastName) => firstName + lastName; |
■返却値が複数行になる場合、()で囲むことでまとめて返却可能
|
1 2 3 4 5 6 |
const getFullName = (firstName, lastName) => ( { firstName: firstName , lastName: lastName } ); |
分割代入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const myName = { firstName: firstName , lastName: lastName } // 上のオブジェクトを分割代入すると.... // ↓ // 方法① const {firstName, lastName} = myName; // 方法② (変数名を付けることも可能) // ▼namae、myojiに変更する場合 const {namae: firstName, myoji: lastName} = myName; |
配列も分割代入可能。
|
1 2 3 4 5 6 |
const myName = [“キム“, “ナムジュン“]; // 上のオブジェクトを分割代入すると.... // ↓ const [lastname, firstName] = myName; |
オブジェクト内の値を使って処理を書く時は、
分割代入を用いてシンプルに記述することで可読性の高いコードになる！
まとめ 〜小話を添えて〜
何事も基礎が大事と言いますが、
まだまだ知らないことばかりであったと反省しつつ、
自分にはまだまだ“伸びしろ“がたくさんある！！と思うので、
これからもコツコツ知識を身につけていきたいと思います！
勉強を通して、知らなかったことを知れるというのは
楽しいですね！
素敵なアドバイスをくださった先輩にとても感謝です！！
また、プラコレに入社して半年になるのですが
困ったことがあれば、すぐに相談に乗っていただける、
助けてくださる先輩方（自分が所属しているチーム限らず、プラコレの皆様）が
いるというのは、とても恵まれている環境だと感じています！
一緒に働きたいと思える仲間がいる環境で、
このように働くことができて、幸運だと思います！
▼冒険社プラコレが気になった方はこちらから！
https://www.wantedly.com/companies/pla-cole