未経験からコーダーになるのに最低限必要なスキルが分かった
私が実務をする前（2019年〜2020年の1月辺り）はコーダーになるのにどんなことができないといけないかがネットで見つけることができなかったので試行錯誤して色々とやったのですがかなり無駄が多かったです。
それについてはこの記事で解説しています。
ネットの情報はざっくりとしか解説してなくてこれができないといけないというのがわからなかったので無駄にProgateでPHPコースを全部勉強しています。
コーダーとして実務をしてもうすぐ1年5ヶ月位経ちますが色んな所で働いてから未経験から実務をする時に最低限できないといけないスキルが分かりました。
今回は必須と思えるスキルについて解説しますのでコーダーになる人の参考になれば嬉しいです。
解説する内容が全部できれば実務未経験でも採用にしてくれる会社は絶対に存在します。
一般企業でコーディングするなら今回解説する内容の全てができなくてもいいですが私が一般企業で働いた印象では一般企業の実務は大したことをしないから経験を積むのには適していません。
まずコーディングができる人がほとんどいないし私が働いた所はコーディングを5年くらいやってる人が1人いたけどインデントを全くしてなくてW3Cの文法ルールに全く従ってなくて大したことがない人でした。
また私は色々と酷い目に遭いました。
それでは説明します。
Contents
勉強に使う期間（一応）
ネットに簡単にできるみたいな情報があまりにあるので一応解説しますが3ヶ月とかの短期間でもできるとは思います。
ただ仕事をしてなくて1日中勉強できる人の場合で働きながら勉強する人は1年くらいは勉強したほうがいいです。
特にYouTubeでインフルエンサーが簡単に稼げると言ってるのは全て嘘なので気をつけましょう。
色んなジャンルのサイトのコーディング
コーポレートサイト、ECサイトなど色んなジャンルのサイトがありますがECサイトは難しくていきなりやるのはきついと思うのでそれ以外を探してトップページのコーディング模写をしましょう。
色んな種類のサイトのコーディングをした方がいい理由は面接でどんなサイトのコーディングができるかを聞かれる可能性があるからです。（私は大体ECサイトを作れるかを聞かれていました）
トップページだけでいいのはポートフォリオサイトを見る面接官はほとんどがトップページだけをざーっとしか見ないからです。（私が応募した会社で私の前でポートフォリオを見直していた人はトップページしか見てませんでした）
それと他のページも作ると1つの実績が完成するまでに時間がかかりすぎるからです。
模写の内容をポートフォリオに使う
そしてコーディングしたページのデータをGitに上げてそれをポートフォリオサイトの実績として使いましょう。
既存のサイトを模写するのはお勧めしません。
理由は模写したサイトを他の人が検索したときに営業妨害になるからです。
仮に既存サイトを模写するならheadタグの中にnoindexタグを貼り付けて検索に引っかからないようにしないといけません。
そうなると実績を作ることができないのですが私が模写をしたい人用のデザインカンプを作りました。
ポートフォリオに掲載可能ですので使っていいですが絶対に「練習用」と記載して下さい。
ポートフォリオサイトの作り方はあとで解説します。
当然ですがレスポンシブにしないとダメでどの順番で画面を作るかですがPC→（タブレット）→SP（スマホのこと）の順に作ればいいです。
だからメディアクエリは「@media screen and (max-width:〜px)」にします。
ネットを見ると「min-width」で説明している内容が多いですが今はパソコンサイズからサイトを作る場合が多いみたいです。
私が働いていた制作会社はタブレットとSPの画面は同じものとして作っていました。
ブレイクポイント（画面が切り替わる所）ですが私がコーディングするときは↓です。
大きいパソコン画面→小さいパソコン画面（@media screen and (max-width:1023px））→タブレットとsp画面（@media screen and (max-width:767px））
スタイルの管理はFLOCSSとBEM
スタイル(CSSのこと)はCSSで管理をせずSassで管理をします。
ただ Sassが使えればいいだけではなくFLOCSSというスタイル管理の方法があってそれができないといけません。
製作会社によって細かくフォルダ名とファイル名は違いますが自分のやり方でできないといけません。（ちなみに私は実務をしてからFLOCSSの存在を知りました）
FLOCSSを使う際にBEMというクラス名の命名規則を使います。
だからこの2つを使いこなさないといけないですが慣れるのに時間がかかります。
サイトのトップページの模写をしながら少しずつ使い方に慣れた方がいいです。（私は2ヶ月位かかった気がします）
jQueryでまず実装できるようにした方がいい内容
ハンバーガーメニュー、スムーススクロール、画面をスクロールしたときに下からフェードインはどのサイトでもまず使うので覚えましょう。
Progateが終わったばかりの状態で何を実装できるようになればいいのかが分からないと思いますが（私は全く分かりませんでした）とりあえずこれだけできるようにして他の内容は実務をやりながら覚えていけばいいです。
特にハンバーガーメニューはネットに実装方法の記事がいっぱいあってどれで実装すればいいかがわからないと思います。
いろんなやり方をできる必要はなく1つでよくて自分にとって実装しやすい記事を信じて大丈夫です。
あっ、私は今は理解しようとしますが初めての時はコピペなのでコピペで使えればいいです。
ブログサイトを作れるようになる
ブログサイトの実装内容は実務でいらない内容がいーっぱいありますがサイトを作れるようにすると自分のポートフォリオサイトが作れるからブログサイトを作れるようにしましょう。
私がサイトを作るためのチュートリアルを作成しました。ここからその記事を読めます。
本でやりたい人もいると思います、そんな人は超初心者でもこれ1冊でサイトを作ることができるおすすめの参考書があります。
ポートフォリオに必要なテンプレート
WordPressサイトのファイルはテンプレートと言いますが私はポートフォリオサイトに下記のテンプレートを使います。
トップページ（index.php）、実績を表示するページ（single.php）
これだけです、お問い合わせフォームも設置したかったらpage.phpも使いますがぶっちゃけ実務未経験の人に仕事の依頼なんかないからお問い合わせフォームは必要ないです。
制作会社で実務をしましょう
ある制作会社の面接を受けたときに言われたのですが特にコロナになってから未経験の営業が1日1回は来るようになったそうです。
一度だけ登録制みたいな所の依頼を受けてコーディングしましたが依頼の内容が勝手に変わって必要ないことまでさせられそうになり中止にしました。
こんな感じで営業に応えてくれてもどんな扱いをされるか分からないので制作会社で実務をした方がスキルが上がるのが早いと思います。
●いいねをつけてもらえると励みになります。
