Code Lab

CakePHP/Python/Swiftを勉強中... 好きなことで生きて行く!

僕が学校を卒業してエンジニアになるまでにやったこと

f:id:natuta:20170131215235p:plain

仕事を始めて1年経ちましたが、面接に来る方にちょっと「?」と思ってしまったことがあったので書いてみたいと思います。

 

学校や職安でよく、ポートフォリオとかサラサラとしか見ないからと言われましたが、50%の確率でソースまで見られてます。

僕は作ったものをしっかり見てもらって判断してもらいたかったので

面接の時に ”何がダメか” "どこが良いか" 聞いたんですけど、ちゃんと答えてくれる会社が半分いました。

なので、ポートフォリオはしっかり作っておいた方がいいです。

 

そこで、ポートフォリオを見て思ったことなのですが、

フロントエンドはHTML、CSSjava scriptができていればとりあえずおkだとは思います。

ただ、テンプレートを使っていることやコピペ、画像が多い。

 

まず、テンプレートが多いというのはWP(ワードプレス)を使っている人に多いパターン。

たしかにWPを使っていると良いって就活の時に調べていたらどっかのサイトに書いてありました。

ただ、テンプレートを使って見た目を整えてるだけじゃその辺の初心者でもできると思うんです。

WPってちょっと調べれば誰でも使えるものなんで...

僕が実際にポートフォリオ作った時にWPを組み込んでいたのですが、その時にオリジナルテンプレートを作りました。

このテンプレートを作っておくだけでWPの知識が普通の人より多くなるので面接での会話に出すことができます。

 

僕が就活の時に参考にしたサイトですが、結構古いので参考程度に...

www.webcreatorbox.com
webdesignrecipes.com

 

参考にした本

本格ビジネスサイトを作りながら学ぶ WordPressの教科書

本格ビジネスサイトを作りながら学ぶ WordPressの教科書

 
本格ビジネスサイトを作りながら学ぶ WordPressの教科書2

本格ビジネスサイトを作りながら学ぶ WordPressの教科書2

 

 新しいものが出ていたのでそれも紹介。 

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版

 

 

次にコピペ。

多分、コピペしても気づかれないだろうと思っていると思うんですけど...

(僕もばれないだろうと思ってた派です。)

今になってみれば、コメントとかほか書いてないのにここだけかなり詳しく書かれてるとか、変数名とかクラス名で異変?があるとコピペかな?とか思っちゃいますね。

でも、コピペって大事ですよね。

コードを理解するにはコピペが大事だとはおもんですけど、ポートフォリオに関しては自分の実力を見せるものなので、コピペがバレていなくても実際に仕事でやってと言われた時にかなり困ると思います。

なので、しっかり理解してから使うといいと思います。

 

そして、画像。

画像と言っても風景だとか素材なら別にいいんですけど

文字とか、バナーとか、タイトルとか、CSSで簡単にできるのに画像で作ってるのみると萎えます。

僕がフロントエンドの仕事をインターンでやってた時に画像は極力使わないって言われたことが影響していると思うんでうけど、マウスでなぞった時に文字がハイライトされてないとそれもできないのかと思ってしまうんですよね。

この画像問題はCSSjava scriptを勉強したら解決できると思うんで、そこらへんの知識を増やすといいかもしれないです。

 

フロントエンドの勉強はLig inc.さんとかwebクリエイターボックスあたりがわかりやすくおすすめです。

 

 

www.webcreatorbox.com
liginc.co.jp

 

 

HTML,CSS,jQueryはこの本がわかりやすかったです。

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 
作りながら学ぶjQueryデザインの教科書

作りながら学ぶjQueryデザインの教科書

 

 

以上が僕が面接に来る人に思ったこと。

 

あ、そうそう入社後に未経験の人にはwebページを印刷してdivを線で囲んでもらったりするんですけど、これは絶対に練習しておいたほうがいいです。

インターンでプロジェクトごとにやっていたので、僕はデザイン見たらhtmlを頭の中で組み立てることができるようになりました。

頭の中でhtmlを組み立てることができたらcssも大体決まっていると思うので考える時間を短縮できるので練習しておきましょう。

練習方法

  1. ウェブページを印刷orスクリーンショットを撮る
  2. divで囲まれているとこを四角で囲む
  3. ソースを確認して当たっているか答え合わせをする

こんな感じで練習してみてください。

慣れたら<li>とかも意識してみてください。

クラス名やid名を決めるのもいいかもしれないです。

慣れたら実際にコーディングしてみてください。練習する前より早くコーディング出来ると思います。

 

僕がポートフォリオを作る時やったことは上に書いてあるんですけど、

サーバーサイドを目指している人も、ちょこっと修正してと言われる時もあるので勉強しといて損はないかと思います。

 

そして、プログラミングをやるときに必要なエディタ。

こだわりを持っていくのは大切です。

この辺りだけだだと「Sublime Text」一択ですね。

Sublime Text」を勧める理由としては、軽量&プラグインが豊富なので初心者でもすぐに使い始められる。

入れておくと良いプラグインは以下

  • emmet
  • HTML
  • CSS

入れておけばよかったと思います。(結構前に設定したのでうろ覚え...)

Sublime Text プラグイン」で検索して、必要だな。使ってみたいなて思うものはどんどん入れちゃって大丈夫です。(軽量なのでいっぱい入れても軽い!)

また、今後PHPPythonなど複数の言語を仕様したい場合はAtomがオススメです!

この記事で紹介しているので、見てみてください!

shota-natuta.hatenablog.com

 

 

うーん。フロントエンドの人のために記事になってしまったかもなぁ...。