フロントエンドエンジニアが抑えるべき項目

初学者

初学者はまずprogateから:

• https://qiita.com/howling_wolf/items/b45d63ec08426933c1e3

TypeScript

• https://speakerdeck.com/recruitengineers/typescript-2023

デザインパターン

• オブジェクト指向
  • ポリモーフィズム, 継承, カプセル化
• アンチパターン
  • DRYの法則: 同じコードは書かないという思想。弊社では徹底しています
  • 車輪の再発明: 同じものを発明してしまうこと。ライブラリを使いましょう
  • グローバル汚染
  • スパゲッティコード: 依存関係が絡み合いすぎてパスタみたい
  • 秘伝のタレ: 属人化したコードのこと
• シングルトン
• 三大柱: 汎用性(=保守性)、拡張性、可読性

デバッグ

• Chromeのデベロッパーツール(要素の検証)を使いこなす
  • 例: console画面
    • $0 で検証中の要素にアクセスできる
• debugger をコード内に書いて、ブレークポイントを作る

運用系

• Git, Github, たまにAzure
• SourceTree
• Atlassian製品系
  • JIRA
  • Confuluence
• Slack
• スクラム開発
  • アジャイルボード
  • カンバンボード
• Evernote, Bear
• PDCAサイクル

テスト

• (テスト駆動開発)[https://www.youtube.com/watch?v=hZuUufSOE5c&list=PLVfguzhs1GgPClzBDeVt7nrWKGQ8EFIRS&index=3]
• Jasmin
• Jest
• Selenium

SPA -> SSR(SSG)

• React x NextJs
• (Gatsby)

ナレッジキュレーションサイト

• Zenn
• Qiita

エディター

• VSCode
• Sublimt Text 3

マーケティング（フロントより）

• SEO
• Google Analytics
• OGP (SEM )
• A/Bテスト

デザイン（フロントより）

• Figma
• Sketch

バックエンド（フロントより）

• API通信: REST API, GraphQL
  • GET, POSTなどの通信プロトコルもセットで
• CORS（クロスオリジン)問題

知っておくと評価に繋がる

• API: GraphQL
• ツール系: Postman
• バックエンド系(CGI): Go, Python, Ruby on Rails
• インフラ系: もちろんAWSだが、FirebaseやHerokuなどの軽めのものでもOK
• ネイティブアプリ開発知見

ハイブリッドアプリ

• PWA

おさえておくと評価に繋がる

• 基本情報技術者試験、応用情報技術者試験
• Google Trends, Node Trends
• Macのショートカット（まじで）
  • Spotlight検索:
    • ⌘ + Space して 2~3文字打つだけでアプリを手前にもってける
  • Dockの切り替え
    • ⌘ + Tab
    • ⌘ + Shift + Tab
  • ⌘ + Q: アプリのkill（停止）
  • ⌘ + H: アプリの非表示
  • ⌘ + T: タブの生成
  • ⌘ + N: 新規生成

知っトク！言葉

• CUI, GUI
• BaaS: Firebaseとか
• CI: Jenkinsとか
• テストツール: Jasminとか
• SPA, SSR
• API通信系: RESTfulAPI, GraphQL, SQL, RDB
• インフラ系: AWS
• CMS: WordPress
• ECサイト: Base, Stores.jp
• userAgent
• 三項演算子
• 関数型プログラミング
• オブジェクト指向
• デザインパターン
• ベンダープレフィックス
• サードパーティ