さんプログラミングを勉強してるけど何かを作るとなると方法が分からないな〜。WEB制作なら簡単そうだしHTMLとCSS勉強しようかな〜。プログラミングの勉強を始めたばかりの頃、私はこう思っていました。WEBエンジニアとして就職、あるいはフリーランスとして独立するのであれば、ポートフォリオは非常に重要です。あなたが会社の面接担当者の場合、こちらの2名だったらどっちを採用したいですか?どっちが優秀?Aさん「Progateで各コースを10週して、Lvを500まであげました!Rubyに関しては本も3冊読んでます。Authenticationを用いてSNSログインができる簡単なサービスを開発しました。CRUD機能、ransackを用いた検索機能の実装、webpackerを使っています。」Bさんは難しい言葉を使っているようですが、これらを全て実装するのに1ヶ月のRailsの勉強で十分です。実際にスキルがない...という方へ向けてポートフォリオを作るときに重要なポイントをご説明します。静的WEBサイトもしWEBエンジニアになりたいのであれば、WEBサイト制作の勉強をしすぎるのは無駄です。WEBサイト、特に静的なWEBサイトを作るスキルとWEBサービスのスキルは大きく異なるからです。Railsを軸としてドメイン設計が必要なのに比べて、WEBサイト制作はデザインを考えてフロントの記述をしていきます。あなたが、TwitterやInstagramのようなサービスやアプリ開発をしたいのであれば、静的なWEBサイト制作の勉強ではなく、DB・ドメイン設計から考えてコードを書く練習をしましょう。そのためのポートフォリオは、簡単なWEBサービスがベストです。実際に、筆者が未経験からエンジニア転職をした際の話をします...未経験エンジニアの実体験なので、WEBサイトのポートフォリを2つ作って、面接に持って行きました。自己紹介サイトと、好きな料理の写真をjQueryで動きをつけながら表示するサイトの2つです。面接で見せたのは合計6社でしたが、それらを高く評価してくれたのは0社です。僕は正直拍子抜けでした。褒めてくれると勘違いしていたからです。結果、その6社は全て不採用でした...。相手が評価してくれるポイントを考えて、ポートフォリオサイトを作らないと無駄な努力に終わってしまうということを学びました。重要なポイントはこれだ!僕のように失敗しないように、未経験エンジニア転職で「評価されるポイント」をご説明します。Railsでのエンジニア転職を例にお話します。基礎的なCRUD機能を実装するCRUDとは(Create/Read/Update/Delete)の頭文字をとって、Railsの基本的な機能の総称のことです。CRUDを学ぼう!」ログイン、ログアウト機能、ユーザ毎の投稿や更新、そして削除ができるような簡単な簡易SNSが最適でしょう。そのほかにもTodoアプリや掲示板、日記アプリなども比較的カンタンに作ることができます。(2)データベース設計思想を説明できるRailsでの開発においてデータベースの設計は重要なポイントです。自分が作りたいサービスがどのようなもので、そこで必要となるデータの要素をどのようにDBに格納していくべきか。これを考えることもエンジニアの重要な仕事の一つです。簡易SNSであれば、usersテーブル、postsテーブル以外にも独自のテーブルを作ってみましょう。それがどのような理由で作られたのか、を説明できるといいでしょう。(3)フロントのデザインはBootstrap使わないBootstrapは非常に有能なWebアプリケーションフレームワークで、簡単に言えば、簡単に綺麗なデザインを作ることができるツールです。一方で「Bootstrapぽさ」がにじみでてきます。それでも十分な場合もありますが、フロントエンジニアの場合は「デザインの理由」を説明できることも重要です。このボタンはこのように動くのか、なぜ情報はこの配置なのか、このサービスを使うUXを考えた作りになっているのか、それらまで考えることで「ひとつ上の未経験エンジニア」になれます。(4)サービスの理念、コンセプトを話せる簡易SNSの開発だとしても、なんの面白みもないサービスを作っても面接官の心には留まりません。あなたが「Vtuber」が好きなら、「VtuberなりきりSNS」もいいでしょう。「料理」が好きなら「1万円以上の費用をかけて作るレシピSNS」などどうでしょう。作るのがワクワクしませんか?それに、面接においても「あなたらしさ」を出すことはとても重要なのです。(5)開発の課題を考えながら作る面接という場においては一番重要なのがこの点です。「これを作ってみて大変だったところは?」です。この質問の意図は、「あなたがどの程度の力量で、どんなとこにつまづき、どう対処する人か」を見るためです。上で述べたような重要ポイントの開発において、大変だったところとどのようにして乗り越えたかを話せるようにしておきましょう。使うべしここからは「未経験転職のテクニック的な部分」をお話しします。先人のエンジニアたちが長く愛用しているパッケージ管理ツールのgemが数多く存在します。RailsでWEBサービス開発を行う会社の多くがこれらのgemを使って開発をしています。これらを使って開発を進めて行くことをお勧めします。おすすめここまではRailsのお話をしてきましたが、フロントサイドはどうでしょうか?JavaScriptのフレームワークとして、日本では三強が肩を並べています。それが、「React」と「Vue」です。「おい!jQuery忘れるな!」というお声もあるかと思いますが...未経験エンジニアの差別化をしていくためには新しいフレームワークを取り入れた方が適切だと考えています。Progateしかやったことないという方には分かりづらいかもしれませんが、実際の現場で生のJavaScriptを使って開発をすることは稀です。Reactなどを始めとするフレームワークを使ってチーム開発をしていきます。今からReactあるいはVueに慣れておくといいでしょう。環境構築+github管理+heroku公開そしてそれらのコードはなるべく手元のPCで動くように環境構築しましょう。それが中期的にはベーススキルになります。Cloud9などのクラウド開発環境も非常に好ましいですが、現場でそれらを使うことは稀です。入社後でも通用するスキルと環境を構築できるよう努力しましょう。同様の理由でコードはgithubで管理するのがいいでしょう。bitbucketでもいいのですが、情報が多く転がっているgithubの方が初心者には優しいと考えています。最後に、サービスを開発して公開することが重要です。手元でしか動かないサービスはもったいないです。公開する方法はherokuを使いましょう。初心者でも易しく使うことができます。まとめまだ自分には難しい!と思われるかもしれません。皆さんのライバルは同じ未経験エンジニアではなく、経験者のエンジニアです。彼らと同じ環境で戦えるだけの姿勢を見せることは前提といえます。それでもポートフォリオ開発が難しいという方はまずはプログラミングスクールに入って勉強するといいでしょう。人気記事【2019年最新版】Twitterで評価の高いスクール5選まだプログラミングスクール選びで悩んでませんか?現役エンジニア、フリーランスエンジニア、個人事業主が語る、プログラミング初心者〜エンジニア就職のアドバイスをまとめました。いう方へオススメする、最強の転職法は以下よりお読みいただけます!未経験からエンジニアになる方法をみるプログラミングスクールをでてもエンジニアにはなれません!残念ながら、プログラミングスクールを出れば誰でもエンジニアになれるわけではありません。収入別おすすめプログラミング言語RECOMMENDこちらの記事も人気です。ひびのあおい(WEBエンジニア)本ブログメディアを運営しているWEBエンジニアです。短大卒からブラック企業に入ってしまい、うつ状態...。そこからプログラミングにハマってエンジニアとして自社開発企業にジョイン。