『GAFAコーディング面接こんな感じでした』を読んで

GAFAコーディング面接こんな感じでした - yambe2002’s diary を読んで、課題のコードを書いてみる気に。

元記事だと「URL の履歴を保存するデータ構造」がひとつだけど、ふたつ (進む用 + 戻る用) に分割した方が良さそう。

あと、今更 React のチュートリアルを読んだので、練習を兼ねて。

ついでに Bootstrap 5 alpha もチラ見しよう。

Web ブラウザの履歴を管理するようなコード

比較用にいくつか書いた。

• CodePen
  • jQuery × Bootstrap 4
  • React (Class Component) × Bootstrap 5 alpha
  • React (Hooks) × Bootstrap 5 alpha

感想

Bootstrap 5 alpha

v4 と v5 の差異

• v4 からの破壊的変更は少なめ
• 気になった点は以下
  • Custom forms 廃止 (通常のフォームに統合)
  • フォームのレイアウト周りの廃統合
    • .form-row -> .row
    • .form-group -> .mb-3
    • .form-inline -> .col-auto など
    • フォームラベルに .form-label が必要に
    • cf. https://v5.getbootstrap.com/docs/5.0/forms/layout/
  • .form-control-file -> .form-file
  • .form-control-range -> .form-range
• IE 11 などのサポート終了
  • とはいえ、結局どうなる？
    • Bootstrap 5 dropping IE 10 & 11 browser support: where does that leave us? - Themesberg Blog
    • Internet Explorer 11 and Polyfills for Bootstrap 5 · Discussion #31222 · twbs/bootstrap · GitHub
• jQuery 廃止
  • DOM API (Vanilla JS) が高速なのは分かるし使うけど、書き易くはない。。

React

state と props の違い

• state
  • コンポーネント内部で使うプライベート変数のようなオブジェクト
  • 変更は必ず setState() メソッドを使うこと
• props
  • 別のコンポーネントから渡される、読み取り専用のオブジェクト

React と HTML における属性名の差異

• class -> className
• for -> htmlFor
• readOnly -> readOnly など

フック

• 関数コンポーネントを使って、クラスコンポーネントより完結に書ける機能
  • 他にも色々便利らしい
  • this が不要になるだけで嬉しい
  • 今から書くなら、クラスコンポーネントよりフックを使えとのこと
• 公式ドキュメントは分かりづらいので、以下を参考に
  • 5分でわかるReact Hooks - Qiita
  • React Hooks、関数コンポーネントを使ってみた - Qiita
• ただし、公式の フックの FAQ は良かった
• CodePen で import React, { useState } from "react"; を使うには
  const { useState } = React; と書く

jQuery との比較

• JSX とコンポーネントにより、JS 上での CSS セレクターによる要素の指定がほぼ不要に。
• sate オブジェクトで状態を保持して、それを更新するだけで自動的に DOM 側にも反映できるので簡潔に記述できる。

TODO

• コンポーネントをもっと分割できるのか？
• フォームの検証はどう書くのが良いのか？
• 良いコードをもっと読まないと。