これだけで十分!ポートフォリオをつくるために覚えておきたいツール・サイトまとめ

これから自分でサービス開発をしてポートフォリオにしたい!けど、どうやってやればいいんだろ…

という方へ向けて、ポートフォリオとなるミニウェブサービスやWEBサイトを作るために参考にしたいサイトやツール、技術をまとめます。2019年5月現在で実際に使われている、かつ使いやすいもののみをまとめました。

エンジニア転職やプログラミング学習の参考にしてください!

今回紹介するのはコチラ!

学習サイト

・安定のProgate
・無料動画で幅広く学べるドットインストール
・優良なアウトプットはUdemy
・各フレームワークのチュートリアルは優秀
・学問としてのプログラミングはUdacity
・深層学習エンジニア養成はDL4US
・Photoshopを学ぶならチュートリアルを実戦!
・幅広い大人の学習ならSchoo
・英語も一緒に勉強!codeacademy
・Pythonに特化したLearnPython.org
・データサイエンスに特化したDATAQUEST
・見るだけでも楽しい!UXデザインを学ぶならUXPin
・AndroidアプリならGoogle公式が優秀
iOSだって負けてない!

ツール・技術

・Github
・Heroku
・Firebase
・CircleCI
・Docker
・AWS
・Cloud9
・Google Chrome 開発者ツール

学習サイトでインプット!

まずははじめに紹介した学習サイトで徹底的に下準備をしましょう。

Progateや本を読んでプログラミング言語ばかりを学習するのははじめの間(50時間くらい)にしましょう。学習でいちばん大事なのはインプットではなく、アウトプットです。プログラミングにおいては「何かを作ること」が最も大事です。この記事ではその点にフォーカスしていきます。

オススメの手順としてはこんな感じです。

・【20時間】Progateで1,2周する
・【10時間】本を1,2冊読んで概要を把握する
・【50時間】ドットインストールやチュートリアルでデモ課題を作成
・【20時間】もし知識に不安ならチュートリアルを2周以上する
・【30時間】プラスαで各種ツールを使ってみる
・【100時間】これまだ自分のつくりたいものを作る

めっちゃ時間かかる!と思った方。残念ながらこれでもかなりスムーズな方です。そして、途中で挫折する方もいらっしゃいます。でも、逆に早い段階で「プログラミングに向いていない」ということが分かることも良いことだと思います。

大事なことは「アウトプットのなかで分からないことにぶつかっても、調べて解決しようとする姿勢」です。エンジニア仕事の大半は「分からないこと」です。そこで諦めることはできないので、なんとか調べて解決に少しでも近づく、その連続です。プログラミング学習も同様で、分からないことを「なんとかする」力はとても重要です。

各種ツールをざっくり解説します

point

先程紹介したツールや技術たちは、WEB開発において「常識」となりつつあるものです。なかにはプログラミング初心者には難しいものもあります。その場合はまず「それが何なのか?」を理解だけしておけばいいと思います。

■Github
書いたコードのバージョンをチームで管理するためのツールです。もちろん一人でも使えますし、無料で登録できるので初めてみましょう。

Heroku
「へろく」と読みます。Herokuはインフラ周りをクラウド上で管理できるWEBサービスです。Herokuに書いたコードを含むプロジェクトをデプロイ(アップロード)することで、Heroku上でコードを動かすことができます。

Firebase
Googleが開発するFirebaseはHerokuと同じように、バックエンドも含むインフラ周りをFirebase上で一括管理できます。少しのコードを記述するだけで超簡単にデプロイができるようになります。豊富な機能も魅力です。

CircleCI
CIとは開発・デプロイのプロセスを自動化するためのツールの総称で、そのなかでもCircleCIが無料で使いやすいのでおすすめです。未経験でCIで自動デプロイができるくらいまでになるとかなり強いです。

Docker
仮想環境を「コンテナ」という単位で管理するソフトウェアのことです。WEB系だと使われていることが多いので、勉強しておくと良いですね。

AWS
AmazonWebServiceの略で、クラウド上でサーバーやDBなどあらゆるものを管理できるWebサービスです。

Cloud9
Railsチュートリアルでもでてきますが、クラウド上でコードを書くことができます。手元の環境に依存しないので、スムーズにコードを書いてちょっと動かす、ということができます。

GoogleChrome開発者ツール
実際にフロントエンドエンジニアの多くはChromeの開発者ツールを使います。いろんな使い方があるので、ポートフォリオを作る時に開発者ツールを有効活用しましょう。

これらを全て使って実際にWebサービスを作ろうとすると、超大変です!おそらく実際のWebエンジニア(1年程度)でも一人でやろうとすると軽く2,3週間はかかりそうです。

ではどうするか?というと、ゴールに向かって必要なものを取捨選択しましょう。例えば「TwitterのようなSNSをWebで作る」としたらこんな感じでしょう。

・まずはgitで管理するためにGitを使えるようになる
・そのうえでGithubに登録して、プライベートリポジトリに登録
・更にデプロイはHerkou上へ
・コードを書き始める。Cloud9でなくても、localで動くようにすればOK
・余裕があればAWSのS3に画像ファイルなどをおいておく
・一旦この状態でデプロイ〜動くところまでをチェック
・Chromeの開発者ツールを使いながらデバッグ
・CircleCIで自動化、テスト自動化をしてみる

こんな流れです。ここまでに必要な知識はそれぞれのツールの概要を学んで、あとは使っていくことで効率的に覚えることができます。

もし分からないことがあったら?

まずわからないことがあったら「公式リファレンス」を確認するクセをつけるといいです。

ぐぐるとQiitaや技術ブログが上位に表示されるのですが、クラウド系のツールは特にUIはもちろん、機能や仕様も日々変化しています。Qiitaなどでは古い可能性があります。気をつけましょう。

もし公式リファレンスでもよくわからない場合は、TeratailやStackOverflowで質問をしてみましょう。意外とかなり早く、たくさんの回答がもらえるので、何日も詰まるようなことは避けられます。

じゃあ、何を作るべき?

最後にポートフォリオとして何をつくるべきでしょうか?

ここでエンジニアとしての種類について分類すると、Web制作系のエンジニアとサービス開発をするエンジニアの2パターンがあります。

前者は静的Webサイトの制作やデザイン、またはWordpressのテーマ編集なども含みます。一方でサービス開発の場合は、フロントエンドとバックエンド、インフラエンジニアという分類され、それぞれの専門分野に特化した技術を学習することが多いです。

さて、ここで自分がどっちの道に進みたいのか?一度考えてみてください。

もしWeb制作エンジニアなら、ポートフォリオとしてはLP(ランディングページ)やWebサイト、Wordpressテーマを作成するのがベストです。初めは模写で、段々とオリジナリティをだしたWebサイトをいくつも作っていく、というのがいいでしょう。

一方サービス開発をしたいのなら、先程少し出てきた「TwitterのようなSNS」の簡易版を作るなどもいいですね。難しいことは考えず、自分が好きなものに関連するミニサービスを作るようにすると、モチベーションも維持できるのでおすすめです。

もし技術に不安…というならインプットをもう少し増やすか、プログラミングスクールやオンラインでメンターを見つけて、技術力を磨いていきましょう!

 

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

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