どのようにしたらコーダーからフロントエンドへチェンジできるの？
というご質問を多くもらえるようになりました。
DMだとあまり詳しく書くことはできないので記事にしてみたいと思います！
私のフロントエンドへの道のり
まずザックリ振り返ってみます。
コーダー１年目より少し前ぐらいの時、オンラインスクールでアプリ開発の勉強を始めました！
約10ヶ月ぐらいはコーダーしつつ勉強だけしていました。
コーダーとして、少しづつフロントエンドに近づけるような案件を受注して近づける努力していた時代
約1年ぐらいコーダーしつつjs案件を個人受注してました。
web制作よりのアプリ開発をする会社を紹介してもらい、webサイトだけど表示はjsで実装するような案件やアプリ開発案件を持つ会社の案件を担当させてもらう
約10ヶ月ぐらいお世話になりました。
ここまで来て、初めてエージェント紹介でいわゆるフリーランスエンジニアと呼ばれるフロントエンドエンジニアとなりました。
１から４に達成するまでに3年ほどかかっています。
step1：アプリ開発の勉強を始める
初めてコーダーとしてパート勤務で仕事をさせてもらった会社から始まって丁度10ヶ月ぐらいたった夏、
高校留学で娘がカナダへ飛び立ちました。
娘がいなくなってしまった翌日、私はオンラインスクールに入ることを決意。
勉強開始しました。
どんなスクール？
私が勉強したスクール名はお伝えしませんが、おすすめなスクールの内容をお伝えしたいと思います。
フロントエンド（Vue,React）とバックエンド（言語は何でも可）、データベースを一貫して学ぶことができアプリ開発を一通り自分で作成できる内容
Web制作でもコーダーでもデザイン知識はあった方が良いし、デザイナーもコーディング知識があった方が活躍できるのと同じで
フロントエンドになりたいとしても、バックエンドの知識は絶対あった方が良いです！
実際に私はバックエンドの実務経験はないと伝えた上で参画した案件で、バックエンドタスクもやらせてもらえるようになりました。（正直、最初は辛いですが、、、）
バックエンドタスクが少しでもできるようになり、実務経験ができたことで単価も上がりました。
勉強ってどこまでやったら良いの？
コーディングもですが、プログラミング学習者で
完全に何も見ないで一から書けないとダメ！
と思い込んでいる方が一定数いますが、それは大きな間違いです。
プログラミングはカンニングOK！
どんな教材でも一回手を動かしてやってみて、理解できていなくても一旦それは終了で良いんです！
重要なのは、何でも良いので課題とは違う何かを自分で作成してみることです！
例えば課題でTODOアプリを作成したとします。
新規、編集、削除、表示と基本的なことが網羅されるので良くあるお題ですが、
その後は少し発展させて掲示板ぽいものを作成してみるとか。。
簡易のECサイトを作成してみるとか。。
課題では新規はテキストだけであったら、画像もアップロードできるようにしてプレビュー表示させてみるとか。
何かプラスαをつけるともっと良い勉強になります。
・全て覚えようとするのではなく、使い方を知るだけで良い
・課題でやった内容＋αぐらいのアウトプットを自分でする
もちろん、試験やテストなどを受験する場合にはある程度暗記も必要かもしれませんが、
一般的に仕事でプログラミングするだけであれば、覚えている必要は全くありません！
勉強中に並行してやるべきこと
コーダーとしての仕事
コーダーとしての仕事は週の半分はするようにしていました。
これは最低限の収入を得るという目的と次の仕事に繋げる為です。
周りへの周知
勉強が終わってから拡散するのでは遅いので、勉強中から是非拡散しよう！
今自分はReact, Vue案件やりたくて勉強しています！
React,Vueに興味があり勉強中であることを伝えて、React,Vueが必要そうな案件があった時に自分を思い出してもらえるようにする。
VueとWordPressでヘッドレスCMSを構築してポートフォリオ作成した。
実際に作成したアプリやポートフォリオなどができたら、こんなこともできます！
とアピールして、更に案件に繋がるようにする
勉強している内容と、自分が今後やりたい事、実際に作成してみたものを伝える
→ 制作会社によってはJS案件持っていたりします。そういう時にあの人！にお願いしようかな！と思い出してもらえるように、認知してもらうことが大切！
営業活動
営業活動とは書きましたが、、一つ前の周りへの周知とほぼ一緒です。
それよりは一歩踏み込んだ内容で周りへ周知活動をしました。
この時点になるのには、何か制作物がある状態が良さそうです。
私は勉強中にスクールのお代とかでいろいろ作成しましたが、最終的にWeb制作とWeb開発の中間ぐらいの位置にあるヘッドレスCMSをポートフォリオとして作成しました。
そのポートフォリオを公開してヘッドレスCMS案件をやりたいです！
といろいろなところに伝えました。（営業と言ってもこれだけ。。）
そんなところ、いろいろな人の目に止まり、
WordPress内の検索ページをJSで実装したい
できますか？
WordPressで構築しているサイトをヘッドレスにしたい！
という要望を頂けることに！！
勉強中に避けるべきこと
勉強していると、いろいろなものが情報として入ってきます。
どれも良さそうに見えます！
私は勉強中にWebGLとかThreejsとか３Dで動くアニメーションにすごーく興味が湧きました！（笑）
実際にスクールを更に受講しようかと思ったりもしましたが、やめました。
私の目標は後2年ぐらいで一定程度の稼ぎを得ないといけない状況だったので、調べたのですが、WebGLとかthreejsができたらもちろんそれだけで重宝されるかもですが、、需要がそこまでなさそうに見えました。
また、ここの分野はデザイナーさんとの密なコミュケーションが必須で回転したらどう表現するのか？とか、、
意図を上手に汲み取って実装するのは難しそう、
最終的にOKがでるまでに手戻りが結構ありそうでそれに見合う単価になるのか？疑問でした。
ここの記事にも書きましたが、
何か達成したい時にはやらないこと決める
これがとても大切です。
なので、私はフロントエンドの仕事のメイン業務にはならなさそうなWebGLを諦めました。
ですが、、正直今でも時間と余裕があったら勉強してみたいです！！（笑）
step2：コーダーとしてjs案件を受注する
最初におすすめは
営業（？）で頂けた案件でまずWordPress内の1ページ内にJSアプリを実装する
これが一番コーダーとして一番得やすいフロントエンドへの第一歩となる案件だと思います。
・検索機能
・ソート機能
・診断コンテンツ
・アンケート
上記などが多そうです。
検索機能はWordPressの機能のまま実装すると、必ずpost=リロードされます。
リロードには一定の時間がかかるのでサクッと検索という感じではありません。
それに比べてjsでSPA構成のアプリを作成するとリロードが発生しないので検索がスムーズとなるメリットがあります！
また検索結果表示ページのソート機能もjsで実装したら即表示を切り替えすることができます！
診断コンテンツやアンケートも1問づつpostしても良いですが、時間かかるので、jsのSPA構成にしておけばサクッと集計して、結果を表示させることが可能となります。
こういう小さななアプリ開発から入ることをおすすめします！
そして、この手の案件はWeb制作の分野でコーディング＋αのような感じであったりするものです。
なので、最初はこの分野の案件が一番受注できる可能性が高いと思います。
その為にはWeb制作会社とは繋がっておくことはとても大切です。営業先としてしっかり営業させてもらいましょう！
上記は私が書いた記事ですが、このようにページ組み込みアプリは簡単に作成できます！
良ければ参考にしてみてください。
次へのステップ
上記で1ページ内にjsアプリを実装したら、次はヘッドレスCMSです！
これは1ページに組み込むような簡単な案件ではなく、もう少し大きな案件となると思います。
・使用するフレームワークは何にするのか？
・CMSは何を使用するのか？
・公開先で使用するホスティングは何を利用するか？
などなど決めておくべきことがあります。
ヘッドレスCMSってどんな仕組み？と思う方には上記サイトとかわかりやすいと思います！
私はWordPressリニューアル案件で、
CMSはWordPressをそのまま使用してフロントだけGatsbyjsで実装するヘッドレス案件を2件担当させてもらいました！
この時の私の状況。。
Vueはできそう！
Reactは良くわからない。。
という状況だったのにも関わらずNuxtjsを選択しないで、Gatsbyjsを選択しました。
なぜ、Nextjsじゃなく、GatsbyjsだったかはたまたまGatsbyjsとは？という講習会に参加してなんか面白そう！
と思ったから。
ただそれだけで、できもしないReact系のフレームワークを選択しましたww
でもこの時の選択がその後の私を大きく変えてくれました。
Reactわからない。。と思っていたのですが、当たり前ですが、2案件納品後にはある程度理解できている状態になっていました。
VueよりReacの方が好きになっていて、、今のフロントエンドに繋がってます！
Reactにするか？Vueにするか？
これはどちらもできそうであれば、Reactをオススメしますが、Vueの方がコーダーには取り組みやすいです。
最初Reactが無理そうであれば、Vueでも全然大丈夫です！！
step2 → step3 へのフロントエンドの職探し
一番大変なのが、多分ココです！
残念ながら未経験、経験年数が少ないとエージェントは相手にはしてくれません。
エージェントは？
フリーランスエンジニアが良く利用するエージェントは残念ながら経験年数が全てのようです。。。。
この時点で私が書ける最大の年数は
・PHP：2年半
・vue：約1年
・React：数ヶ月
と3年以上のものはありませんでした。
ここでいうPHPはエージェントからすると、アプリ開発でのPHP経験値だと思うのですが、、、そんなものはないので、、
WordPressでPHP記述していた期間を含めました（笑）
ですが、これでもどこのエージェントからもメールでさよならです。
エージェント面談さえ進むことができませんでした。。
エージェントがダメなら
自分で探すしかありません。
多分転職を検討する人はここでするのでは？と思うタイミングでもあります。
私はコーダーとしてフリーランスでしたので、そのままフリーランス（業務委託）で仕事を探しました。
私はその時勉強させてもらっていたオンラインスクール（上記の最初とは別）を開催している方が知り合いの会社を紹介してくれました。
周りを見ていても、やはり紹介ぐらいしかなさそうです。。。
・スクールの主催者、メンターさんに紹介をお願いする
・自分も知り合いに紹介お願いする
メンターさんは開発会社と繋がっている人多いので、紹介してもらること多そうです！
また、制作会社の人から紹介してもらったという方もいました。
紹介を頼るしかない時期です。。
この時の為にも、、勉強中からどんどん周りに自分はアプリ開発の仕事を探しているということを周知して行きましょう！！
step3：フロントエンドの仕事開始！
紹介して頂いた会社でフロントエンドとして、参画させてもらいました。
最初の案件は
・Vueとcake PHP で構築してあるサイトのリニューアル案件
でした！vueで記事投稿、編集、削除、表示する、ごく一般的なフロントの内容でした。
ヘッドレスCMSを構築していたから、できます！！
と意気込んで参画したのですが、、、
この時点の私のレベルで対応できたか？？
APIでpostしてgetして表示したいだけなのに、、、なぜか表示が更新されないー(泣)
なんで？？
時間は過ぎていくだけ。。。(T_T)
複数箇所で使用するので汎用的なモーダルを作成しておいて下さい
汎用的なモーダルとは？？
フロントエンドの仕事に慣れていれば、コンポーネント化したりしてUIの部品をパーツ化することは一般的ですが、、、
その時の私には、そういうことさえ、、、良くわかっていませんでした。（泣）
その他、どのように実装したら良いのか。。。と思うことも多く、、大変迷惑をかけました。。。
幸いにもとても良い方でしたので、いろいろ教えて下さりどうにか形になりました。
唯一私に出来たこと
毎日撃沈する中、、、唯一私にも役に立てる！！
と思うタスクが！
それは静的なコーディングでした。
サイト内にいくつかLPページのようなものがあったり、
TOPページとかWordPressで最新記事3件表示のようなものがあったりしたので、そこの静的なコーディングを担当したりしながら、、
私はvueとの戦いを乗り切りました。
もしコーディングさえもまともに出来なかったら、、、私には居場所がなくなりもっと精神的に辛かったと思います。
初回案件終了後は、、
幸いにも、、こんなレベル私にその次の案件を振って頂きました。
ここの会社でやった案件は
・古いPHPフレームワークで構築されているサイトをvueに置き換える
・WordPressの1ページにReactで診断コンテンツ組み込み
・Reactでアプリ作成（見積もり書作成）
・jsでアナリティクスのようなサイト訪問者のアクションを集計するアプリ
などなど、担当させてもらいました。
一部だけの物もあり、最初からのものもあり。
本当に良い経験を積まさせて頂きました。
ここでの時給は3,500円でした！
約8ヶ月ほど稼働させてもらっていたのですが、仕事が減ったことが理由でここでの継続を諦めることになります。
最初はショックでしたが、、これが大きな転機でした！
step4：エージェント経由で開発案件にチャレンジ！
フロントエンドとして仕事させてもらって約８ヶ月！
その間にコーダーとして３年以上経ちました。
それを利用してエージェントにはPHP歴３年として出してエージェントの一次関門を突破しました！
エージェント登録して１次通過すると、電話がかかってきてエージェントとの面談をさせてもらえます。
ここまで来たら、１次通過成功です！！
フロントエンドとしての経歴は１年未満であっても、他の言語で３年以上あればエージェントの１次通過できる！
エージェントとしては３年以上の経歴がある言語の案件を紹介したがりますが、ここは自分の要望を言ってみましょう！
エージェント面談に望む為に
まずエージェント面談するためには職務経歴書（スキルシート）が必須です。
Web制作時代はポートフォリオが必要と言われますが、それではダメです。
wordで作成します。
これは結構重要です！
・どんな人なのか？
・どんなスキルを持っていてどんな貢献ができるのか？
・実務経験の案件を詳しく
（期間と自分の担当箇所）
・プラスα
私はしませんが、スキルシートを添削してくださる方やそういうサービスをしているエンジニアさん多いので、そういう方に一度添削してもらうと良いと思います！
プラスαは結構重要かな〜と思ってます。
私が何回か書き直した時に見直したポイントや面談でアピールしたことなど以前記事にしているので良ければ読んでみて下さい。
エージェントは一つ？
エージェントは一つだけではなく、複数登録したほうが良いです。
理由はエージェント同士が競争してくれるからです。
エージェントはどうしてもその人に案件に参画して欲しいので、より良い条件になるように！と努力してくれます。
エージェントは複数登録し、エージェント同士で競争し合ってもらった方がより良い案件、良い単価が出る。
注意すること
エージェントを複数登録する上で注意することはあまりないのですが、
オファーをもらうとだいたい１週間後ぐらいまでに返事を出さないといけない所が多いです。
なので、複数エージェント登録して面談をするのであれば、同じような時期にまとめて受けた方が良いです。
晴れて案件に参画したら？
自分の条件に合う案件からオファーもらうことができたら
できれば最初は１年は継続した方が良さそうです！
だいたい最初は１ヶ月契約、もしくは３ヶ月契約ですが、継続し続け１年ぐらい継続した経験があると
その後、非常に案件探しが楽になります。
他のエージェントからも最初に利用したエージェントからも評価が自然と上がります
フリーランスで３ヶ月の案件を繰り返す人は敬遠されます。
理由は一つで、初回の継続を継続できない人が一定数いるようです。
継続できない＝期待されていたパフォーマンスが出ない人
と判断されオファーが出づらくなります。
そうならない為にも継続できる案件であれば１年ぐらいは最低でも継続するようにしてみることをオススメします。
私は２年以上継続したら、どこのエージェントからも評価高くして頂けました！
私にももちろん勘違いなどあるので、間違うことありますが、
最初に指摘できちんと修正できていれば大丈夫です！！
さいご！
コーダーの全ての皆さんにフロントエンドをオススメしている訳ではありません。
コーディングしていて、WordPressのPHP記述が楽しい！
JS記述が楽しい！
とか、SEO対策とかではなくひたすらコーディングしているのが楽しい！
プログラミングしているのが楽しい！
とか、請負より準委任契約とかの方が合っていそう！
上記に当てはまるような方には是非オススメです！
簡単ではないし、時間もそれなりにかかるけど、、
それでもチャレンジしたい！という人を
応援します！！
