初めてのLP制作依頼の作業をしている、ねこらのん（@nekoranon256）です。
わからないものをGoogleで調べていると…
ということが結構多かったので私視点で調べるときにタメになるもりけんさんのツイートをまとめました。
（2020年7月12日までのツイートまとめ）
目次
『調べるときにタメになる』ツイート一覧
エラーや実装上困ったときは「まずは英語」で検索してみてください。
1. 日本語記事より品質がいいケースが多い
2. そのエラーは世界中の誰かが解決しています
3. もしくはみんな困っていて議論が巻き起こっていたり、一時的な代替案もあります
以下詳しく示します— フロントエンドエンジニア (@terrace_tech) July 3, 2020
2, 3. 特にstockoverflowとgithubは検索キーワードに含めてもいいくらい
なので、まずはそのエラーを解決する為の信用あるソースはどこかを理解する
1. ドキュメント(仕様書)
2. github issue or pullrequest
3. stackoverflow
4. 海外の個人記事
5. 日本の個人記事いずれも最終更新日をチェック
— フロントエンドエンジニア (@terrace_tech) July 3, 2020
よく使う英語検索する際のキーワード
「〇〇 〇〇 〇〇」
それぞれ「言語、ライブラリや困っている箇所、解決したい事」例えば JavaScript setTimeout usecase
1. usecase
2. error
3. what
4. how to use
5. understanding
6. overview
7. example
8. settimeout vs cleartimeout
9. doesn't work— フロントエンドエンジニア (@terrace_tech) July 3, 2020
1. 使い所がわからない時
2. error エラー内容をそのまま貼り付ける
3. 何なのかさっぱりの時
4. 使い方知りたい
5. もっと深く理解したい時
6. ざっくり理解したい
7. コードで知りたい
8. 違いを知りたい(違いがわからない)
9. 特定の箇所が動かない時— フロントエンドエンジニア (@terrace_tech) July 3, 2020
未経験からエンジニアになるためのツイート
自分の教え子で完全未経験からWeb業界就職させた経験から言えることは
1. まずはその業界に入ることを最優先
2. 方向性、どの技術を伸ばしたいかだけはこだわる
3. 単価に惑わされないを言い聞かせ続け
ロードマップを書かせて、順番に積んでってもらって6ヶ月ぐらいでおめでとうが言えました— フロントエンドエンジニア (@terrace_tech) July 4, 2020
未経験からエンジニアになるキャリア戦略は主に2つ
1. バイトで使いたい言語ができるところに「どこでもいいので」入る
- 他就労形態よりハードルが下
- 経験者となり、本来入りたかったところに入る2. 個人開発でアプリ、サービスを作りリリース。「保守・運用」する
- 未経験の域を超える— フロントエンドエンジニア (@terrace_tech) June 13, 2020
今思ったけど
未経験からの案件獲得面接時に
githubにあがっているアプリを
「現役エンジニアのレビューを受けて、修正して、繰り返して
リリースまで持っていきました。これがコミット履歴です」みたいなのってアピールになるかもしれないな...ポートフォリオはこれです!だけだと他の皆と同じなので
— フロントエンドエンジニア (@terrace_tech) June 26, 2020
恐らく採用担当はあなたのTwitterを見るので
投稿を日々の学習で充実させておくと
「この人技術以外にも魅力あるな」のアドバンテージあります・本名
・本人顔アイコン
・毒投稿は掃除フォロワー数多く
せっかく頑張っているのに
裏垢ぽいのはもったいないです就活中だけでもさらけ出しましょう
— フロントエンドエンジニア (@terrace_tech) June 28, 2020
会社員、派遣、転職活動中の方。
フリーランスに憧れる人いると思うのですけど
フリーランスは個人開発で食べていくことに憧れがある人が多いです
安定収入を得たいという気持ちがあるからだと思います
今、日中まだ「運良く」働いていない方。
飛び級でサービス作っちゃうことをお勧めします— フロントエンドエンジニア (@terrace_tech) June 13, 2020
エージェントとしてあなたを売りやすくする為には
・アウトプット(あればあるほど良い)
・自分の強みを明確に。「〇〇の専門です」
・一番長くいた職場と短い所を見られるので答えを用意
・チーム内でどのように振舞うかをイメージさせる
・積極的に喋りアピールする
・リモートだと喋り方重要
・自信— フロントエンドエンジニア (@terrace_tech) June 16, 2020
よく固定ツイートに貼ってある成果物。
ポートフォリオと共にgithubにソースコードを公開することをお勧めします
写経かもしれませんが、
どんなにgifアニで動きがあるサイトを示しても、
ソースコードが全て
どんな環境で作ったのかも— フロントエンドエンジニア (@terrace_tech) June 19, 2020
何か新しい技術や概念に出くわしたら、「〇〇の知らなかった100の事」みたいに数字をつけてひたすら到達するまで調べ、ノート、してください
以前より知識つくし、深いところまで知ることになります
またゴールが明確なので達成感あります例えば「Reactの知らなかった100のこと」など
— フロントエンドエンジニア (@terrace_tech) June 20, 2020
転職活動中の方にお勧めしたいこと
・Web上にある全てのアイコンを自分の顔にする
・それらのアイコンを統一する
・本名(姓名)にするgithub,wantedly,qiita,codesandbox,Twitter,blog,note,gmail
全部どれも信用を上げることができるし、責任が伴うので、真剣さと誠実さが伝わります
— フロントエンドエンジニア (@terrace_tech) June 21, 2020
なぜやるか
・github → 自分が書いてきたコードと作品を外部に示す為
・codeSandbox→環境設定なしに小さなサンプルを作ったり挙動を確認する為
・Twitter、qiita→技術以外の評価ポイント。アピールにも
ブログ→アウトプットすることで理解する。採用者からの評価を上げる。将来それで稼げる可能性— フロントエンドエンジニア (@terrace_tech) June 25, 2020
実務未経験の方に最初の現場としてお勧めするのはECサイトなど更新業務がある会社の求人です
・更新業務でHTML,CSSに慣れる
・Photoshop、Illustratorの技術習得
・たまに特集ページ、LP制作で一枚まるまるコーディングする機会あり
・JavaScriptは業務改善や機能追加、広告に対して使う機会がある— フロントエンドエンジニア (@terrace_tech) July 4, 2020
英語が必要
これからのフロントエンドに関して知りたければ海外記事を読み、海外大手企業がどんな技術を使っているか、日本をリードするフロントエンジニアをフォローして、調べればよく、何かに入る必要はないです
自分から率先して漁るようになりましょう— フロントエンドエンジニア (@terrace_tech) July 14, 2020
プログラミングと同じくらい英語が大事。
案件の中には「英語ドキュメントを読める人」という条件もあります— フロントエンドエンジニア (@terrace_tech) June 19, 2020
サービスの作り方
何をどう作っていいかわからない場合
文章でルールを列挙してみてください
例えば1. 画面には質問とoとxボタンが表示されている
2. どちらか選んだら次の問題が現れる
3. 1と2を10回繰り返した後、今まで答えてきたものが表示される
4. ボタンを押下すると...〜診断の出来上がり。みたいな
— フロントエンドエンジニア (@terrace_tech) June 24, 2020
このルール(仕様)を細部まで決めれるかどうかがポイントで
これに書いてないものは仕様漏れ、実際作っていて実現が難しい場合は考慮漏れになりますこういう場合はどうなる?とかの目線で
例えば
・5問目でブラウザバックしたら?
・urlは問題に応じて変わる?
・リロードしたらどうなる?— フロントエンドエンジニア (@terrace_tech) June 24, 2020
エンジニアの現場
【初めてフリーランスとしてフロントエンド現場に入った時困ったこと】
1. 支給されたMacで環境構築を自分でやる
2. 技術がマッチしていないと「即戦力」にはなれないので活躍するのは難しい
3. わからないことが多すぎて質問が多くなる
4. 自分のことで精一杯すぎて開発のキャッチアップが遅くなる
->— フロントエンドエンジニア (@terrace_tech) August 1, 2020
みなさん華やかな技術を使っていろいろ手を出したくなるかもですが、
実際の現場では
・bug修正
・機能追加
・トライ&エラー
・調査
等がほぼで
他人のコードが読め、デバッグの方法、調査方法、実装イメージ(内部のコード理解)ができる
人ができる人です
根気と自走が求められることを忘れずに— フロントエンドエンジニア (@terrace_tech) June 23, 2020
エラー特定方法(ぐぐって解決するではない奴)
1. エラー箇所を確認
2. 再現方法を確認
3. どうしたら再現しないか(以前から再現した？編集したらなったか)
4. 大きい所から(そもそも? 環境?)
5. さらにスコープを狭めていく(ファイル単位? 値単位?)
6. 値をlog出力
7. 値が変わるところを特定
8. 修正— フロントエンドエンジニア (@terrace_tech) July 12, 2020
簡単なJSデバッグ解説 & 操作に慣れる(Mac、Chrome)
1. https://t.co/KW4dqHk943 訪れる
2. cmd + option + i -> 開発ツール立ち上げ
3. cmd + p でindex.jsと打つ(ファイル名がわかっている場合)
4. 7行目の端を赤くする(ブレイクポイントを追加)
5. リロード。止まる続く-> pic.twitter.com/rpZPf8lMUN
— フロントエンドエンジニア (@terrace_tech) July 14, 2020
極端な話、CSSを使えなくていいのはフロントのデータ寄りに特化した人かサーバーサイドからフロントをちょっと手伝ってくれている方ぐらいで、
多くの方はCSSをいじります
フロントならマスト
さらに前者のような人はCSSも強かったり飲み込みも早いので無敵
そのような人と仕事をすることになります— フロントエンドエンジニア (@terrace_tech) June 23, 2020
個人的に
これからのフロント現場での要望は、・reduxから何かの状態管理ライブラリへのリプレイス
・GraphQL対応
・JavaScript記述をTypeScriptへリプレイス
・CSS,SassをCSS in JSに変更
・Vue←→Reactへリプレイス
・パフォーマンス改善
・0から技術選定〜リリースまでやるだと予想している
— フロントエンドエンジニア (@terrace_tech) June 26, 2020
フロントエンドエンジニアのスキルについて
フロントエンドエンジニアの技術差
CSSを使える
↓
開発環境を自分で整えられる
↓
Reactなどのライブラリが使える
↓
状態管理ライブラリを使える
↓
ドメイン駆動を知っている
↓
TypeScriptを使える
↓
GraphQL(ApploClient)を使える
↓
サーバーサイドもいじれるそれぞれで単価が違う気がします
— フロントエンドエンジニア (@terrace_tech) June 18, 2020
今って、いろいろなフロントライブラリがそれなりに書ければそれなりにフロントっぽいですが、なぜそうなのか、違う選択肢はあるのか、人のコード読めるかとかよりリアルなところが大事ですね、
それは恐らく現場に入って培われる気がしてます。
教習所グルグル回ってても首都高乗らないとですよね— フロントエンドエンジニア (@terrace_tech) June 20, 2020
JavaScript
「JavaScript。どこまでできればとりあえず良いのですか?」
個人的に下記が理解できれば色々スタートできると思います・入門以外の書籍を読了
・ES6以降の記述
・Promise(async/await)
・高階関数
・DOM操作
・カリー化
・モジュール
・クロージャ
・クラス(オブジェクト指向構文, prototype, this)— フロントエンドエンジニア (@terrace_tech) July 27, 2020
もりけんさんのブックマークサイト
ああ、これブックマークものだわ...https://t.co/jxvviOOhHY
— フロントエンドエンジニア (@terrace_tech) July 17, 2020
【ブックマーク】
- Frontend_web_developerhttps://t.co/Yinp9aIJDG
- Web Fundamentalshttps://t.co/lpVCY3d8UN
- JavaScript tutorialhttps://t.co/jxvviOOhHY
- JavaScript infohttps://t.co/3zBZIVV6mf
- マンガJavaScripthttps://t.co/eirqN24XFv※以降ここのスレッドに追加していきます
— フロントエンドエンジニア (@terrace_tech) July 18, 2020
JavaScript学習方法の順番
JavaScriptの学習方法
1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る— フロントエンドエンジニア (@terrace_tech) June 30, 2020
5. ライブラリを導入する
6. 自作アプリをプロジェクト管理して作る(npm,yarn, webpack, git, dockerなども使い)
7. React or TypeScriptでリプレイスする— フロントエンドエンジニア (@terrace_tech) June 30, 2020
出来るだけ1,2を厚く、なんなら開眼JavaScript (書籍)や、パーフェクトJavaScript.JavaScript初級者から中級者になろう(Web)をやる
— フロントエンドエンジニア (@terrace_tech) June 30, 2020
3は自分の頭で出来るだけ考える。
クリックしたらどうなるか？
例えば、タブなら、3つのボタンとが3つの表示があり、表示はz-indexで全部重ねといて、ボタンにイベント仕込んで、クリックしたら渡ってきたidを持つ表示をdiplay blockにして表示させるみたいな。じぁ4つになったら？など— フロントエンドエンジニア (@terrace_tech) June 30, 2020
JavaScriptは前お勧めした書籍達を最初から最後まで3回ぐらい繰り返して
わからないところはググって
コンソールで練習と理解するために調査すればできますので信じてください別のことしないでください
— フロントエンドエンジニア (@terrace_tech) July 14, 2020
JavaScript学習用の書籍【動画学習はいらない】
自分は独学でJavaScriptを勉強したので当時、書籍を買いまくりました。
ちょっと前まではスクールや動画学習みたいなものは盛んではなかったのです。初めはマンガJavaScriptから入り、後にこの3冊。助けられました。感謝です。#駆け出しエンジニアと繋がりたい pic.twitter.com/UdHWFntEg1— フロントエンドエンジニア (@terrace_tech) March 7, 2020
そうそうこれも。良いですよ。練習問題もある pic.twitter.com/3fFHs1gDnC
— フロントエンドエンジニア (@terrace_tech) July 4, 2020
入門書もいいのですが、本格的な太い本を一冊持つことをお勧めします
海外で自分が英語が喋れなくても、周りが喋るような「キツい強制的な環境」もやがて順応するはずです
学習も何言ってるか分からないぐらいが自発的に調べます
つまり逆で
分からなかったら入門書で理解する— フロントエンドエンジニア (@terrace_tech) June 25, 2020
むしろ動画サイトしないで
本格JavaScriptとマンガJavaScriptだけ何回もやれば力つきます
理解してないから書けないので— フロントエンドエンジニア (@terrace_tech) June 28, 2020
JavaScriptで集中的にやるところ
JavaScriptの学習で集中的にやるところ、やる事
・入門以外の書籍を何回も読む
・ES6以降の記述
・正規表現、Promise、カリー化、モジュール、prototype、クロージャ、高階関数、クラス(オブジェクト指向構文)、値参照と参照渡し、this、ジェネレータ関数、イテラブル
・reduce, map, entries, filter— フロントエンドエンジニア (@terrace_tech) July 3, 2020
JavaScript学習の深みを出すために
JavaScriptとTypeScriptをより深く、言語仕様よりは読みやすく学びたい方はこれがおすすめです。ほぼ無料です https://t.co/SXz2bgO7gS
— フロントエンドエンジニア (@terrace_tech) June 9, 2020
今なら無料。見る👀 https://t.co/RoWV8V5l18
— フロントエンドエンジニア (@terrace_tech) June 17, 2020
JavaScriptエンジニアで必要なこと
よいJavaScriptエンジニアになる5つの簡単な変更
・変数や関数の名前をもっと解説的に、わかりやすく
・共通処理は切り出す
・ネストを深くしないで早く返すところは早く返す
・includesとlookupオブジェクトを使う
・コードを誰かに見てもらうことhttps://t.co/OcJPrCobPP— フロントエンドエンジニア (@terrace_tech) June 20, 2020
JavaScriptプログラマー全員が知っておくべき15のJavaScript概念https://t.co/xgkvdBxaww
— フロントエンドエンジニア (@terrace_tech) June 20, 2020
— フロントエンドエンジニア (@terrace_tech) June 20, 2020
redux
これからReduxを学習する方
・recoilの存在
・公式style guide
・Redux Toolkit
・react-reduxのhooksというものがあることを念頭に学習したほうがいいかもです
多くの動画サイトが実際の現場の書き方とは違うことがあるかもしれません— フロントエンドエンジニア (@terrace_tech) June 28, 2020
自分の塾生にはreduxでこれを作ってもらおう
公式のやつ#もりけん塾 pic.twitter.com/aWZPDL1M5u— フロントエンドエンジニア (@terrace_tech) June 9, 2020
react
同意
> Reactが、今後10年なくなる事は絶対にありえないでしょう
> シリコンバレーのエンジニアも「8割はReactで2割はAngular」って言ってたらしいです。知らんけど。ドイツでも「Vueなんて聞いたことない」とか？知らんけど。https://t.co/ccZ9MBQdY0— フロントエンドエンジニア (@terrace_tech) June 7, 2020
React現場のリアル
・TypeScriptで書けるか
・Reduxを理解しているか
・redux-thunk(or saga)使えるか
・古い書き方を置き換えられるか
・AtomicDesignを理解しているか
・更新しやすいStoreを書けるか
・周辺知識や共通部分をいじれるか
・GraphQL環境は平気か
・テスト書けるか
など求められます— フロントエンドエンジニア (@terrace_tech) June 9, 2020
React現場のリアル
・TypeScriptで書けるか
・Reduxを理解しているか
・redux-thunk(or saga)使えるか
・古い書き方を置き換えられるか
・AtomicDesign理解しているか
・更新しやすいStoreを書けるか
・周辺知識や共通部分をいじれるか
・GraphQL環境は平気か
・テスト書けるか
・既存コードを読めるか— フロントエンドエンジニア (@terrace_tech) July 24, 2020
react現場のリアルなレビュー
・testを書く。関数は外に抽出(map(f))
・極力idをpayloadに
・ドメイン知識はEntityに
・template(or organism)以下はロジック、ドメイン知識を持たない
・関数名と実装合ってるか
・any禁止
・ロジックはselectorに
・Errorをthrowする
・atomがmarginなどを持たない— フロントエンドエンジニア (@terrace_tech) June 11, 2020
Reactの状態管理は
・Redux
・useReducer
・Recoil
があるけどすぐにReduxがRecoilに置き換わることはなさそうなのでRecoilの動向をみつつReduxも学んでおいた方が良さそう。Recoilを学びたい方はこちらが助けになるhttps://t.co/7ue1VwMcv1— フロントエンドエンジニア (@terrace_tech) June 9, 2020
React とTypeScript同時に学習したい方向けhttps://t.co/xkSdgSdLSZ
— フロントエンドエンジニア (@terrace_tech) June 9, 2020
React初学者がフロントだけでとりあえず完結できる作った方がいいのってなんだろう
- カウンター
- TODOアプリ
- 検索機能
- ページネーション
- カレンダー
- お問い合わせフォーム
- ログイン機能(一部仮データ)
- 写真投稿(一部仮データ)
- ツリー構造のページ
これを順番にやろうか...#もりけん塾— フロントエンドエンジニア (@terrace_tech) June 6, 2020
よくあるReactのカウンターアプリ。その後どう機能を付け足した方が初学者の次のステップとして妥当か悩ましい
— フロントエンドエンジニア (@terrace_tech) June 8, 2020
reactのformライブラリ。記事はformikよりreact-hook-formを勧めている
・コンポーネントをimportしないでいい
・パフォーマンスがよい
・記述をスッキリできる
・inputに直接かけるhttps://t.co/JX52qJoTUr— フロントエンドエンジニア (@terrace_tech) June 16, 2020
JavaScript以外で必要なこと
フロントエンドの現場ではJavaScriptとキラキラライブラリだけできても仕事になりません
・Linux
・git(git-flow)
・docker
・npm(yarn
・webpack, lintなど各種設定
・キラキラライブラリで使われる周辺ライブラリ
・altJS(現場による
はほぼマストで
上記それぞれのエラーを対応可能かも問われます— フロントエンドエンジニア (@terrace_tech) July 3, 2020
typescript
みなさんJavaScriptをある程度やった後、Reactとかやり始める方が多いのですが
いろいろな事考えたら次はTypeScriptやる方が良い気がします
なぜなら現場によってreactなどは使うかどうかは分からないですが
TypeScriptは現場やライブラリに左右されずフロントならそれを使って書くのが未来だから
— フロントエンドエンジニア (@terrace_tech) June 26, 2020
実際の現場でTypeScriptに関するレビューでよくみる指摘
・anyは禁止で
・なぜasを使っていますか
・この型はこう書けます
・enumで書いてください
・undefined,nullを返してください
・この型は何をやる型か名前だけでわからなかったです
・その型はここの型を使えないですか
・この型は使ってますか
— フロントエンドエンジニア (@terrace_tech) June 19, 2020
CSS
心に留めておくべき8つのCSSベストプラクティス(SCSS)https://t.co/qTVeIVwPir
1. MobileFirst
2. 変数を設定
3. idとimportantを避ける
4. MagicNumbersを避ける
5. 構造を説明する名前
6. 0の扱い
7. インラインコメント
8. ネストしているMediaQueries— フロントエンドエンジニア (@terrace_tech) July 14, 2020
「CSS。どこまでできればとりあえず良いのですか?」
個人的に下記が理解できてればできることは多い気がします1 要素中央寄せ
2 擬似要素
3 擬似クラス
4 display
5 text周り
6 position
7 media query
8 CSSプリプロセッサー
9 クロスブラウザ
10 要素の可変対応
11 CSS設計 or CSS in JS— フロントエンドエンジニア (@terrace_tech) July 27, 2020
VScode関係ツイート
VSCode使っている方「javascript console utils」便利ですよ
調べたい値を選んで
- 「cmd + shift + l」でconsole.log("hoge", hoge)を書いてくれる- 「cmd + shift + d」で全てのconsole.log削除してくれる
デバッグ時いつも使ってます pic.twitter.com/v5HgPyYlB3
— フロントエンドエンジニア (@terrace_tech) June 7, 2020
VSCode使っているみなさん
「Soft Undo」(拡張なし)便利ですよ
ある文字を編集中にカーソルを同じファイルの別箇所に置いたあと、戻りたい場合cmd + u
で既に編集中のカーソルに当たっているので
そのままタイプ1つ前にいたカーソル箇所で編集が始まります pic.twitter.com/Q2dhbwnpCZ
— フロントエンドエンジニア (@terrace_tech) June 27, 2020
【今日のVSCode拡張機能紹介】「Quokka.js」
- VSCode上でできるplayground
1. Extensions検索「Qukka」と打つ。install
2. shift + cmd + p で「New JavaScript File」と入力
3. 適当に試したい文法を書く・結果がリアルタイムで良いですね
・TypeScriptもできますよ pic.twitter.com/qUyORGamic— フロントエンドエンジニア (@terrace_tech) July 1, 2020
モチベーション維持の方法
記事はモチベーション維持の方法を伝えている
自分の場合は
・始める前、日、週末、特定時間内の学習ゴールを決める
・飽きたら場所を変える
・ルーティンを作る(評価し変えて最適)
・頭で考えず体を学習する環境に置く
・1mmでも成長と認める
・できなくても自分を許すhttps://t.co/v8VVdmFEpq— フロントエンドエンジニア (@terrace_tech) August 1, 2020
おわりに
整理したくて不明点が増えたらまた随時、あげていくと思います！
もりけん塾（@terrace_tech）
Thanks：もりけんさん