VOYAGE GROUPインターン『Treasure』講義編2
VOYAGE GROUPの3週間インターン『Treasure』の講義パートを振り返り。フロントエンド技術・React/Vue・Promise・非同期処理の学びをシェア！
Treasureという3週間で、講義+チーム開発を行うインターンに参加してきた時の振り返りになります！本記事では講義パートのフロントエンドについて書いています📝
講義パート
2日目 8/13(火)
フロントの講義 その1
インターネット技術の時代の流れについての紹介後に
- JSのsync, async, defer
- classとclojure
- fetchやaxios
について比較しながら学んでいきました。
3日目 8/14(水)
フロントの講義 その2
クロージャとクラス
- クラスだと
.thisに依存する- bindしたいオブジェクトにはbindを忘れずにすること
Promise
- fetchの返り値
- 基本的にfetchは
new Promiseしなくても良い
- 基本的にfetchは
- Canselできない
.then()でチェーンする時は、横に伸びるコードを書くより、行を分けた方が可読性が良い
fetch(function(res) {
return res.json();
}).catch(function(error) {
display(error);
});よりも
function parseJson(res) {
return res.json();
}
fetch.then(parseJson).catch(display);の方が短く記述できる。
また、axiosというライブラリの方がエラーハンドリングや処理の記述が容易に行えたりするので便利だったりします。しかし、fetchは外部リソースを読み込む必要がない・対応しているブラウザがaxiosより多いといったメリットもあるので、どの技術を使用して実装するのかお互いの側面を理解した上で選定していきたいですね。
フレームワークの選定
- いち早くIndexされるのが重要
- 便利なフレームワーク・ライブラリはあるので、日々キャッチアップするのは大切
- 設定不要で、ファイル変換・’依存解決・バンドルまで行う
- Configファイルを書かせない
- Webpackと真逆の立ち位置
React/Vue
- propsとstate
- props:親コンポーネントから渡される不変なパラメータ(read only)
- state:コンポーネント自身が管理している自身の状態
2つの種類のComponent
- Stateless Component
- Reactの例:
Function stateを持たないので、依存するのは親からのprops- Viewとロジックが分割されるので責務が明確になる
- Reactの例:
- Statefull Component
- Reactの例:
Class,Hooks - lifecycleを持つ
- Reactの例:
などの内容を学んだ後に、Reactで先日のGoの講義で作ったAPIを使って機能追加していきました。