未経験がポートフォリを作るときの5つのポイント

サキ さん
プログラミングを勉強してるけど何かを作るとなると方法が分からないな〜。WEB制作なら簡単そうだしHTMLとCSS勉強しようかな〜。

 

プログラミングの勉強を始めたばかりの頃、私はこう思っていました。

もしWEBエンジニアとして就職、あるいはフリーランスとして独立するのであれば、ポートフォリオは非常に重要です。

もしあなたが会社の面接担当者の場合、こちらの2名だったらどっちを採用したいですか?

 

どっちが優秀?
Aさん
「Progateで各コースを10週して、Lvを500まであげました!Rubyに関しては本も3冊読んでます。」

 

Bさん
「Firebase Authenticationを用いてSNSログインができる簡単なサービスを開発しました。CRUD機能、ransackを用いた検索機能の実装、webpackerを使っています。」

 

Bさんは難しい言葉を使っているようですが、これらを全て実装するのに1ヶ月のRailsの勉強で十分です。

でも、実際にスキルがない…という方へ向けてポートフォリオを作るときに重要なポイントをご説明します。

WEBサービス > 静的WEBサイト

もしWEBエンジニアになりたいのであれば、WEBサイト制作の勉強をしすぎるのは無駄です。

WEBサイト、特に静的なWEBサイトを作るスキルとWEBサービスのスキルは大きく異なるからです。

 

もうすこし詳しく言うと、

WEBサービスはRuby on Railsを軸としてドメイン設計が必要なのに比べて、WEBサイト制作はデザインを考えてフロントの記述をしていきます。

もしあなたが、TwitterやInstagramのようなサービスやアプリ開発をしたいのであれば、静的なWEBサイト制作の勉強ではなく、DB・ドメイン設計から考えてコードを書く練習をしましょう。そして、そのためのポートフォリオは、簡単なWEBサービスがベストです。

 

実際に、筆者が未経験からエンジニア転職をした際の話をします…

未経験エンジニアの実体験
なので、WEBサイトのポートフォリを2つ作って、面接に持って行きました。自己紹介サイトと、好きな料理の写真をjQueryで動きをつけながら表示するサイトの2つです。

面接で見せたのは合計6社でしたが、それらを高く評価してくれたのは0社です。

面接官
「ふ〜ん… で?」

僕は正直拍子抜けでした。もっと褒めてくれると勘違いしていたからです。

結果、その6社は全て不採用でした…。

相手が評価してくれるポイントを考えて、ポートフォリオサイトを作らないと無駄な努力に終わってしまうということを学びました。

 

重要なポイントはこれだ!

僕のように失敗しないように、未経験エンジニア転職で「評価されるポイント」をご説明します。今回はRuby on Railsでのエンジニア転職を例にお話します。

(1) 基礎的なCRUD機能を実装する

CRUDとは(Create/Read/Update/Delete)の頭文字をとって、Railsの基本的な機能の総称のことです。

>>(参照) 「作って学ぶRuby on Rails Vol.13 CRUDを学ぼう!」

ログイン、ログアウト機能、ユーザ毎の投稿や更新、そして削除ができるような簡単な簡易SNSが最適でしょう。そのほかにもTodoアプリや掲示板、日記アプリなども比較的カンタンに作ることができます。

 

(2)データベース設計思想を説明できる

Railsでの開発においてデータベースの設計は重要なポイントです。

自分が作りたいサービスがどのようなもので、そこで必要となるデータの要素をどのようにDBに格納していくべきか。これを考えることもエンジニアの重要な仕事の一つです。

簡易SNSであれば、usersテーブル、postsテーブル以外にも独自のテーブルを作ってみましょう。さらに、それがどのような理由で作られたのか、を説明できるといいでしょう。

 

(3)フロントのデザインはBootstrap使わない

Bootstrapは非常に有能なWebアプリケーションフレームワークで、簡単に言えば、簡単に綺麗なデザインを作ることができるツールです。

しかし、一方で「Bootstrapぽさ」がにじみでてきます。もちろんそれでも十分な場合もありますが、フロントエンジニアの場合は「デザインの理由」を説明できることも重要です。

なぜこのボタンはこのように動くのか、なぜ情報はこの配置なのか、このサービスを使うUXを考えた作りになっているのか、それらまで考えることで「ひとつ上の未経験エンジニア」になれます。

 

(4)サービスの理念、コンセプトを話せる

簡易SNSの開発だとしても、なんの面白みもないサービスを作っても面接官の心には留まりません。

例えばあなたが「Vtuber」が好きなら、「VtuberなりきりSNS」もいいでしょう。「料理」が好きなら「1万円以上の費用をかけて作るレシピSNS」などどうでしょう。

ちょっと作るのがワクワクしませんか?

それに、面接においても「あなたらしさ」を出すことはとても重要なのです。

 

(5)開発の課題を考えながら作る

面接という場においては一番重要なのがこの点です。

よく聞かれる質問が、

「これを作ってみて大変だったところは?」

です。

この質問の意図は、「あなたがどの程度の力量で、どんなとこにつまづき、どう対処する人か」を見るためです。

上で述べたような重要ポイントの開発において、大変だったところとどのようにして乗り越えたかを話せるようにしておきましょう。

詳細な機能は gem を使うべし

ここからは「未経験転職のテクニック的な部分」をお話しします。

Ruby on Rails では先人のエンジニアたちが長く愛用しているパッケージ管理ツールのgemが数多く存在します。

例えば、ログイン認証機能を作れる “devise” や投稿のページネーション機能を作れる “kaminari” などです。

RailsでWEBサービス開発を行う会社の多くがこれらのgemを使って開発をしています。是非これらを使って開発を進めて行くことをお勧めします。

フロントはReact か Vue がおすすめ

ここまではRailsのお話をしてきましたが、フロントサイドはどうでしょうか?

JavaScriptのフレームワークとして、日本では三強が肩を並べています。

それが、「React」と「Vue」です。

「おい!jQuery忘れるな!」

というお声もあるかと思いますが…未経験エンジニアの差別化をしていくためには新しいフレームワークを取り入れた方が適切だと考えています。

 

もしProgateしかやったことないという方には分かりづらいかもしれませんが、実際の現場で生のJavaScriptを使って開発をすることは稀です。Reactなどを始めとするフレームワークを使ってチーム開発をしていきます。

なので、今からReactあるいはVueに慣れておくといいでしょう。

環境構築+github管理+heroku公開

そしてそれらのコードはなるべく手元のPCで動くように環境構築しましょう。それが中期的にはベーススキルになります。

Cloud9などのクラウド開発環境も非常に好ましいですが、現場でそれらを使うことは稀です。なるべく入社後でも通用するスキルと環境を構築できるよう努力しましょう。

 

さらに、同様の理由でコードはgithubで管理するのがいいでしょう。bitbucketでもいいのですが、情報が多く転がっているgithubの方が初心者には優しいと考えています。

そして最後に、サービスを開発して公開することが重要です。手元でしか動かないサービスはもったいないです。公開する方法はherokuを使いましょう。初心者でも易しく使うことができます。

 

まとめ

まだ自分には難しい!と思われるかもしれません。

ですが皆さんのライバルは同じ未経験エンジニアではなく、経験者のエンジニアです。彼らと同じ環境で戦えるだけの姿勢を見せることは前提といえます。

もしそれでもポートフォリオ開発が難しいという方はまずはプログラミングスクールに入って勉強するといいでしょう。特にRuby on Railsについてはポテパンキャンプさんが非常に実践的な技術を身につけられる場所です!

是非、詳しくみてください!

 

人気記事【未経験あり】いまWEBエンジニアに人気転職サイト4選

 

 

人気記事【2019年最新版】Twitterで評価の高いスクール5選