転職

未経験からコーダー転職後の1週間を振り返る【必要なスキル感】

  • コーダーとして働きたいけれど、入ってからどんな業務をするの?
  • 必要なスキルがあれば知りたい!

未経験からコーダーを目指される方、こんな悩みを持ってませんか?

 

ありがたいことに、10月1日からコーダーとして転職することができました。

【30歳でも可能】未経験からコーダー転職!応募から内定までの記録実務未経験からコーダーとして内定をもらうことに成功しました。 30歳という一般的には年齢のハンデはありつつも、8社応募して...

 

まだ1週間ですが、修正案件1件と、大きめの新規案件を振っていただけたりと、

めちゃくちゃ勉強になる日々を過ごしてます。

 

同時に、「これもっと勉強しなきゃな」「転職前にもっと理解しておくべきだったなあ」

と感じていることもあります。

 

今回は、入社してからの1週間を振り返りつつ、コーダーが必要と感じたスキル感をまとめていきたいと思います。

 

コーダー1日目:環境構築、WordPress化に苦戦

コーダー初日!

当日の気持ちをぶっちゃけると、

 

こうへい
こうへい

まあ初日だから、会社の紹介とかオリエンテーションとかがメインだろうな〜

 

到着していきなり、逆アップかまされます。

 

 

初日にやったこと

  1. 環境構築
  2. 課題LPのコーディング
  3. WordPress化

 

環境構築に苦戦

使用するエディタやソフトは基本的に個人の自由なので、PCの環境構築は自分でやります。

新品のPCならやりやすいのですが、僕の場合は、前任者のPCをそのまま引き継ぐ感じでした。

 


エディタなんかはインストールしてプラグインを入れるだけなので簡単なのですが、自宅のPCではgulpを使っていたので、環境構築に苦戦。。

 

先輩に聞いてもなぜかGulpだけはインストールできずw

結局SassのコンパイルはGUIツールのPreprosを使ってますが、結果的にめちゃくちゃ使いやすいです。

 

転職する前に、エディタの設定をエクスポートしておくとか、ブックマークもエクスポートして同期できるようにまとめておくなど、事前準備も大事だなーと思いました。

 

課題コーディングからのWordPress化

簡単なLPのコードを確認しつつ、「基本的なところは綺麗にかけてるし、WordPressの構築をしてみようか」とのことで、WordPress化をしていきました。

 

 

今回行った課題のデザインは、30DAYSトライアル2ndの最終課題にそっくりでした。

以下はデイトラの最終課題のデザインですが、

こんな感じで、WordPressのテンプレートファイルを作った後、記事に投稿した情報をNEWS部分に表示するという課題でした。

 

課題

  1. LPをWordPress化(下層ページは、Newsの記事ページのみ)
  2. 投稿情報をNews部分に出力する
  3. カスタムフィールドでチェックボックスを実装し、チェックを入れて投稿した記事はリンクを出力せず、テキスト情報だけ出す

 

特に③ですが、

記事のカテゴリーに[リンク無し]というカテゴリーを作り、条件分岐すればできたのですが、それだとカテゴリーが増えたりした時にややこしくなる。

カスタムフィールドを使うのが妥当、ということだそうです。

 

デイトラを進めている方は、ぜひやってみて下さい!

 

参考になった記事

 

コーダー2日目:PerfectPixcelでコーディング

2日目にやったこと

  1. WordPressカスタムフィールドの実装
  2. ローカル開発環境の構築
  3. PerfectPixcelでコーディング

カスタムフィールドの実装は、2日目まで持ち越しましたw

 

ローカル開発環境は、初日の開発環境構築の時にMAMPを入れていたのですが、たくさんの案件を管理するため、VirtualHostというものの設定を行いました。

ここでは詳しく説明しませんが、要は案件ごとにローカル環境が作れるというものです。

導入方法などは、Qiitaにざっくりまとめました。

 

ピクセルパーフェクトでコーディング

PCイメージ、SPイメージをピクセルパーフェクトでコーディングしていきます。

30DAYSトライアルで使用していたツールだったので、使い方がわかっていたのは助かりました。

 

 

ただ、デザイン通りにコーディングしたらいいというわけではなく、

どのデバイスで見てもデザインが崩れないようにすることが重要になります。

 

ポイントは、

  • Chromeの検証(デベロッパーツール)を駆使しまくる
  • 複数のデバイス幅でチェックする

これかな〜と思います。

 

 

Chromeの検証(デベロッパーツール)を駆使しまくる

デベロッパーツールの使い方は、様々なサイトで紹介されているので割愛しますが、最近知ったのが、デベロッパーツールで変更した内容をそのまま保存する方法です。

 

デベロッパーツールで色々試したのはいいものの、「あれ?どこ修正したんだっけ?」というのが結構ありました。

これを使えば解決しそうです!

 

複数のデバイス幅でチェックする

複数のデバイス幅でチェックする癖をつけないといけません。

Webサイトが公開されたら、様々なデバイス、ブラウザから閲覧されることになります。

 

  • デザインに崩れがないか
  • JavaScriptやCSSが正常に読み込まれているか

 

試しに、僕が作成した30DAYSトライアルの課題を見てみると、悲惨な結果でしたw

 

まず、PCイメージを見ると、デザイン通りにコーディングできている感じがします。

 

タブレットサイズもデザイン崩れがなかったので、割愛します。

 

次に、スマホイメージです。

デベロッパーツールから、デバイスを選択してそれぞれの表示イメージを確認します。

 

 

iPhone6/7とiPhone5/SEを比較してみました。

 

かなり幅を狭めても、デザインが崩れてしまったり、違和感のないように作らないといけません。

スマホイメージだけでなく、4Kディスプレイのような大きな画面サイズでみた場合も同じです。

 

100%の幅で表示するのか、インナー幅で固定するのか、

しっかり統一されたデザインになっていることを確認します。

 

 

ただデザイン通りにコーディングするだけはなく、

ここまでできて、パーフェクトピクセルのコーディングなんだなあと感じました。

 

コーダー3日目:PhotoShopからの画像スライスに苦戦

3日目にやったこと

  1. 先輩からのコードレビューフィードバック
  2. 画像入れ替え案件でPhotoShopからの画像スライス

②にめちゃくちゃ苦戦しましたw

 

先輩からのコードレビューフィードバック

細かくコードをチェックしていただいてフィードバックをもらえました。

クラスの命名とかメディアクエリの使い方とか、めちゃくちゃ勉強になる。

一からサイトをコーディングするとき、クラス名をつけるのに迷ってましたが、過去の案件とかをみさせてもらいながら、「迷った時のクラス命名リスト」を作っていこうと思いました。

 

クラス命名を助けてくれるツール「codic」を使ってみるのもありかと思います。

 

→ codic

 

画像入れ替え案件でPhotoShopからの画像スライス

とにかく2日目に苦戦したのはこれ!

 

初めて案件を振って頂いたのですが、画像入れ替えの案件でして、PSDから該当の画像を特定してスライスする必要がありました。

 

1pxでもスライスがずれると、デザインが崩れるみたいで、かなり苦戦しながらスライス切りましたw

 


コーダーに必要なものは、コーディングだけじゃないなと思い知らされた日でした。

 

参考になったリンク

 

コーダー4日目:新規案件!レスポンシブコーディングの考え方

なんと、4日目にして新規案件を振っていただきました!

頑張ります!とは言ったものの、かなりボリュームのある内容。

下層ページありで、WordPressの実装まであります。

 

ここで重要になるのが、レスポンシブコーディングをいかに簡単に、管理しやすくするかということです。

メディアクエリでもいいのですが、要素のサイズをデバイスサイズと共に可変にしておかないと、前述した例のようにデザインが崩れてしまいます。。。

 

スマホイメージでは、ピクセルで絶対指定をしない。

rem,%などの相対指定を使ってサイズを調整しておく。そうすることで、デザインカンプより小さい画面サイズになってもデザインが崩れにくい。

 

<link rel="stylesheet" href="./css/pc.css" media="screen and (min-width: 751px)">
<link rel="stylesheet" href="./css/sp.css" media="screen and (max-width: 750px)">

 

こんなメディアクエリの書き方もあり。

インライ記述でHTMLに書き込み、PCとSPでスタイルシートを分けて管理する方法。

 

CSSの中身には、メディアクエリを記述する必要もないのが良い!

 

 

fontvw($size){
$winW : 750; // 画面幅を設定する
font-size: ($size / $winW) * 100 + vw;
}

 

Sassであれば、mixinを使ってpx→vwの計算ができる!

p{
@include fontvw(18);
 /*18px分のvwに変換される*/
}

includeするだけで簡単に変換できるのでおすすめです!

 

わからない方は、だりあさんがツイートされていたツールを使用してみるのもアリかと思います、入力するだけで変換してくれるので簡単です。

 

まとめ:勤務1週間で感じた必要なスキル感

長くなってしまったのでまとめます!

未経験から転職したコーダーがどんなスキルを身に付けておいた方がいいのか。。?

 

必要と感じたスキル

  1. HTML/CSSでレスポンシブコーディングが作れる
  2. JavaScriptでライブラリを使って動きをつけられる
  3. WordPressの構築ができる
  4. ローカル開発環境が構築できる
  5. PhotoShopの操作、画像アセット、スライス
  6. SourceTreeでGit管理ができる(or Gitを知ってる)
  7. Sassが使える(or Sassを知ってる)

 

WordPressは、Web制作とセットになってるので、簡単なサイト構築くらいはできるようにしておくと良いと思います。

投稿した記事をトップページに表示させたり、ナビゲーションメニューを実装したり、大きなカスタマイズはいきなり求められませんので、簡単なものから。

カスタムフィールドはやっておいた方がいいかもしれません。

(会社によっては、WordPress構築はプログラマーに投げる、なんてとこもあるみたい)

 

⑤のPhotoShopの操作でかなり苦戦しました、というかずっと苦戦してます!w

思えば、30DAYSトライアルのデザインカンプってずっとXDデータだったから、PSDを触ってコーディングする機会って少なかったのかも。

そのためXDには慣れてますが、そもそもXDでデザインカンプがこないw

 

うちの会社はデザインデータはPSDで来ますが、制作会社によっては、形式がバラバラの場合があるそうです。

Illustratorで来たり、sketchで来たり、XDで来たりw

それぞれに対応しないといけない会社もあるようですので、面接時には要チェックですね。

 

ちなみに、こちらのサイトで練習用のPSDデータがありましたので、練習用に使ってみてはどうでしょう?

時間があれば、練習用のPSD作ってみようかなとも思ってます。いつになるかわかりませんが、完成したらおしらせします。

 

僕自身、これから身に付けていきたいスキルとしては、

  • 綺麗にコードをかけるようになりたい
  • WordPressのカスタマイズができる
  • PhotoShopの操作に慣れて爆速でコーディングする

まずは綺麗にコードをかけるようになりたいというのが目標です。

 

クラスの付け方だったり、インデントを綺麗にしたり意識することはたくさんあるけど、

独学で勉強しているうちは、コードを書くのは自分だけだったけど、コーダーとして働くのなら、「誰が見てもわかりやすいコード」を目指さないといけないなあ〜と感じてます。

 

細かいコードミスがたくさんあるのも徐々に減らしていきたいなあw

 

 

以上!