2020年1月9日コーダーとして働きたいけれど、入ってからどんな業務をするの?必要なスキルがあれば知りたい!未経験からコーダーを目指される方、こんな悩みを持ってませんか?ありがたいことに、10月1日からコーダーとして転職することができました。【30歳でも可能】未経験からコーダー転職!応募から内定までの記録実務未経験からコーダーとして内定をもらうことに成功しました。30歳という一般的には年齢のハンデはありつつも、8社応募して...まだ1週間ですが、修正案件1件と、大きめの新規案件を振っていただけたりと、めちゃくちゃ勉強になる日々を過ごしてます。同時に、「これもっと勉強しなきゃな」「転職前にもっと理解しておくべきだったなあ」と感じていることもあります。今回は、入社してからの1週間を振り返りつつ、コーダーが必要と感じたスキル感をまとめていきたいと思います。まとめ:勤務1週間で感じた必要なスキル感コーダー1日目:環境構築、WordPress化に苦戦コーダー初日!当日の気持ちをぶっちゃけると、こうへいまあ初日だから、会社の紹介とかオリエンテーションとかがメインだろうな〜到着していきなり、逆アップかまされます。使用するエディタやソフトは基本的に個人の自由なので、PCの環境構築は自分でやります。新品のPCならやりやすいのですが、僕の場合は、前任者のPCをそのまま引き継ぐ感じでした。開発環境の構築は苦戦しがち。昨日はほとんど丸一日かかったwとはいえ、自分が使うPCなので先輩が環境構築してくれるわけじゃない。2019エディタなんかはインストールしてプラグインを入れるだけなので簡単なのですが、自宅のPCではgulpを使っていたので、環境構築に苦戦。先輩に聞いてもなぜかGulpだけはインストールできずw結局SassのコンパイルはGUIツールのPreprosを使ってますが、結果的にめちゃくちゃ使いやすいです。Prepros転職する前に、エディタの設定をエクスポートしておくとか、ブックマークもエクスポートして同期できるようにまとめておくなど、事前準備も大事だなーと思いました。簡単なLPのコードを確認しつつ、「基本的なところは綺麗にかけてるし、WordPressの構築をしてみようか」とのことで、WordPress化をしていきました。WordPress案件は多いらしく、クライアントに合わせたカスタマイズが求められる。2019今回行った課題のデザインは、30DAYSトライアル2ndの最終課題にそっくりでした。以下はデイトラの最終課題のデザインですが、こんな感じで、WordPressのテンプレートファイルを作った後、記事に投稿した情報をNEWS部分に表示するという課題でした。記事のカテゴリーに[リンク無し]というカテゴリーを作り、条件分岐すればできたのですが、それだとカテゴリーが増えたりした時にややこしくなる。カスタムフィールドを使うのが妥当、ということだそうです。Fieldsというプラグインがわかりやすかった。チェックを入れたら、○○するという条件分岐はよく出てくるみたいなので、覚えておきたい。2019コーダー2日目:PerfectPixcelでコーディング2日目にやったことWordPressカスタムフィールドの実装ローカル開発環境の構築PerfectPixcelでコーディングカスタムフィールドの実装は、2日目まで持ち越しましたwローカル開発環境は、初日の開発環境構築の時にMAMPを入れていたのですが、たくさんの案件を管理するため、VirtualHostというものの設定を行いました。ここでは詳しく説明しませんが、要は案件ごとにローカル環境が作れるというものです。導入方法などは、Qiitaにざっくりまとめました。ピクセルパーフェクトでコーディングPCイメージ、SPイメージをピクセルパーフェクトでコーディングしていきます。30DAYSトライアルで使用していたツールだったので、使い方がわかっていたのは助かりました。PerfectPixcelただ、デザイン通りにコーディングしたらいいというわけではなく、どのデバイスで見てもデザインが崩れないようにすることが重要になります。デザインカンプ通りにコーディングしましたが、スマホ画面が崩れてた💦デザインが750pxで作られてたので、スマホ実機で見ると1/2ほどの画面サイズになる。✅Chromeの検証を使って、様々なサイズで確認する。2019ポイントは、Chromeの検証(デベロッパーツール)を駆使しまくる複数のデバイス幅でチェックするこれかな〜と思います。Chromeの検証(デベロッパーツール)を駆使しまくるデベロッパーツールの使い方は、様々なサイトで紹介されているので割愛しますが、最近知ったのが、デベロッパーツールで変更した内容をそのまま保存する方法です。2018デベロッパーツールで色々試したのはいいものの、「あれ?どこ修正したんだっけ?」というのが結構ありました。これを使えば解決しそうです!複数のデバイス幅でチェックする複数のデバイス幅でチェックする癖をつけないといけません。Webサイトが公開されたら、様々なデバイス、ブラウザから閲覧されることになります。デザインに崩れがないかJavaScriptやCSSが正常に読み込まれているか試しに、僕が作成した30DAYSトライアルの課題を見てみると、悲惨な結果でしたwまず、PCイメージを見ると、デザイン通りにコーディングできている感じがします。タブレットサイズもデザイン崩れがなかったので、割愛します。次に、スマホイメージです。デベロッパーツールから、デバイスを選択してそれぞれの表示イメージを確認します。iPhone6/7とiPhone5/SEを比較してみました。幅を狭めても、デザインが崩れてしまったり、違和感のないように作らないといけません。スマホイメージだけでなく、4Kディスプレイのような大きな画面サイズでみた場合も同じです。100%の幅で表示するのか、インナー幅で固定するのか、しっかり統一されたデザインになっていることを確認します。デザイン通りにコーディングするだけはなく、ここまでできて、パーフェクトピクセルのコーディングなんだなあと感じました。コーダー3日目:PhotoShopからの画像スライスに苦戦3日目にやったこと先輩からのコードレビューフィードバック画像入れ替え案件でPhotoShopからの画像スライス2にめちゃくちゃ苦戦しましたw先輩からのコードレビューフィードバック細かくコードをチェックしていただいてフィードバックをもらえました。.map{}トップページのアクセスsectionの.mapみたいな感じページが複数にわかることを考慮して、#topをつける。2019クラスの命名とかメディアクエリの使い方とか、めちゃくちゃ勉強になる。一からサイトをコーディングするとき、クラス名をつけるのに迷ってましたが、過去の案件とかをみさせてもらいながら、「迷った時のクラス命名リスト」を作っていこうと思いました。クラス命名を助けてくれるツール「codic」を使ってみるのもありかと思います。codic画像入れ替え案件でPhotoShopからの画像スライスとにかく2日目に苦戦したのはこれ!初めて案件を振って頂いたのですが、画像入れ替えの案件でして、PSDから該当の画像を特定してスライスする必要がありました。1pxでもスライスがずれると、デザインが崩れるみたいで、かなり苦戦しながらスライス切りましたw今日一番苦戦したのは、PSDから正確にスライスすること。2019コーディングの知識はもちろんですが、その周辺知識があればかなり捗るはず。2019コーダーに必要なものは、コーディングだけじゃないなと思い知らされた日でした。参考になったリンク→【Photoshop講座】スライスで簡単!Web画像の書き出しをしてみようコーダー4日目:新規案件!レスポンシブコーディングの考え方なんと、4日目にして新規案件を振っていただきました!頑張ります!とは言ったものの、かなりボリュームのある内容。下層ページありで、WordPressの実装まであります。ここで重要になるのが、レスポンシブコーディングをいかに簡単に、管理しやすくするかということです。メディアクエリでもいいのですが、要素のサイズをデバイスサイズと共に可変にしておかないと、前述した例のようにデザインが崩れてしまいます。2019スマホイメージでは、ピクセルで絶対指定をしない。rem,%などの相対指定を使ってサイズを調整しておく。することで、デザインカンプより小さい画面サイズになってもデザインが崩れにくい。pcとspのcssを管理しやすくする為に、cssファイルごと分けるやり方もあった。こんな感じで記述しておけばわかりやすい。750px)">こんなメディアクエリの書き方もあり。インライ記述でHTMLに書き込み、PCとSPでスタイルシートを分けて管理する方法。CSSの中身には、メディアクエリを記述する必要もないのが良い!vwとは、ビューポートの幅の1/100の大きさを持った単位.。計算式を書いておけば、includeすればvwに変換してくれる。/*18px分のvwに変換される*/}includeするだけで簡単に変換できるのでおすすめです!わからない方は、だりあさんがツイートされていたツールを使用してみるのもアリかと思います、入力するだけで変換してくれるので簡単です。長くなってしまったのでまとめます!未経験から転職したコーダーがどんなスキルを身に付けておいた方がいいのか。Sassを知ってる)WordPressは、Web制作とセットになってるので、簡単なサイト構築くらいはできるようにしておくと良いと思います。投稿した記事をトップページに表示させたり、ナビゲーションメニューを実装したり、大きなカスタマイズはいきなり求められませんので、簡単なものから。カスタムフィールドはやっておいた方がいいかもしれません。(会社によっては、WordPress構築はプログラマーに投げる、なんてとこもあるみたい)5のPhotoShopの操作でかなり苦戦しました、というかずっと苦戦してます!w思えば、30DAYSトライアルのデザインカンプってずっとXDデータだったから、PSDを触ってコーディングする機会って少なかったのかも。そのためXDには慣れてますが、そもそもXDでデザインカンプがこないwうちの会社はデザインデータはPSDで来ますが、制作会社によっては、形式がバラバラの場合があるそうです。Illustratorで来たり、sketchで来たり、XDで来たりwそれぞれに対応しないといけない会社もあるようですので、面接時には要チェックですね。ちなみに、こちらのサイトで練習用のPSDデータがありましたので、練習用に使ってみてはどうでしょう?時間があれば、練習用のPSD作ってみようかなとも思ってます。いつになるかわかりませんが、完成したらおしらせします。終えた後の腕試しには、iSaraがおすすめです。デザインカンプからコーディングしたい人は、こちらに無料のpsdデータが配布されてます。綺麗にコードをかけるようになりたいWordPressのカスタマイズができるPhotoShopの操作に慣れて爆速でコーディングするまずは綺麗にコードをかけるようになりたいというのが目標です。独学で勉強しているうちは、コードを書くのは自分だけだったけど、コーダーとして働くのなら、「誰が見てもわかりやすいコード」を目指さないといけないなあ〜と感じてます。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。