【エンジニアの目標設定】何を学習すれば何を作れるかを知っておこう

webデザイナーの平尾誠です。
普段はweb制作をしていますが、講師業もオンラインサービスのMENTAでしています。
主に初学者にデザインとHTML/CSSやWordpressを教えています。

今日も午前中、これからwebの学習をしたいと思っている未経験の方にヒアリングをしました。
不安を取り除き、現状の課題を明らかにするためです。

初学者の多くは、Progateとドットインストールをから始めます。
そこまでは正しいのですが、それから先に学習したことで何が作れるのかを理解していないまま進めている人が多いです。
これには毎回びっくりしています。

  • Air BnBみたいなサービスを作りたい
  • アニメーションがすごいデザインのサイトを作りたい
  • web制作でフリーランスになって稼ぎたい
  • 専門知識はいらないから、ブログを立ち上げたい

このように最初に目的を決めてから学習を進めましょう。
シンプルな動機で構いません。むしろそのほうがパワフルです。

プログラミングで未経験者からなにを学習すべきか

何も考えのないままに、HTMLとCSSの学習を始めるよリも、ちょっとだけどんなものが作れるかをイメージしながら学習しましょう。
目的を明確にしなければ言語を覚えたとしても、作りたいものがなくなります。

先に作りたいものをイメージすることで、逆算して習得すべきスキルを決めましょう。

目的別エンジニアの将来像

言語を覚えることは目的ではありません。
プロダクトを作るための手段でしかありません。

それによってあなたが習得すべき言語が変わるからです。

A:webデザインをしてコーディングもしたい

例:広告用に作られていて、画像が中心。一ページで完結している。

自分でデザインしてコーディングするのって楽しいですよね。
レスポンシブのLPを覚えるのを最優先にしましょう。

また、何はともあれ最初の入り口はココです。
このあたりの知識はプログラミングとは呼ばずに、マークアップって呼ばれます。

学習すること
HTML/CSS
デザインの知識とツール

B:コーポレートサイトをつくって稼ぎたい

例:必ずしも会社のページというわけではないが、公式情報の掲載を主な目的としたサイト。

管理画面から誰でもお知らせなどを投稿して更新したいならwordpressを覚えましょう。
案件数が多いので仕事を見つけやすいことがメリットです。
でも、作れるだけじゃ価格競争になるので、プラスαの提案力や課題解決能力が必要です。

学習すること
HTML/CSS/SCSS
Javascript/jquery
WordPress/PHP初歩
デザイン系ツール

C:ウェブサービス・ウェブアプリケーションをつくりたい

例:WANTEDLYなど調べることや使うことが目的のサイト。

覚えないといけない言語は下記です

かなり大規模開発になりので、上級者向けとなります。
機能実装がメインの領域です。
いきなりココからスタートするのは厳しいですね、前述している部分をある程度理解している必要はあります。

また、1人で全部を作ることは珍しい。というかつくりたいものの性質上、データベースとかバックエンドの知識が必要になるので複数人で一つのプロジェクトを回すことになります。

学習すること
HTML/CSS/SCSS
Javascript/jquery/React/Angular/Vue/Node
WordPress
がっつりPHP
MySqlなどのデータベース知識

D:サーバーやwebサイトの裏側の機能実装がしたい

バックエンドエンジニアって呼ばれます。
サーバー周りの使用を決めたり、サーバーを最初から作ったり、堅牢なセキュリティを作ったりです。
また、ユーザーデータを扱うことがほとんどで、ミスればどれもクリティカルです。

やってることは地味ですが、とても理解が深い知識が必要です。
割とお給料も高めのイメージです。

学習すること
HTML/CSS
CLI
PHP/Ruby/MySql/Node
Javascript

E:アニメーションをグリグリガリガリ動かしたい。

例:アニメーションがサイトのビジュアルを左右している。かなりリッチなインタラクション

例:アーティスティックすぎるサイトの好例

https://threejs.org/

アニメーションの専門職です。
表現力の高いデザイン的なプログラミングが求められます。
コーディングでデザインをリッチに見せるスペシャリストです。

彼らのことをインタラクションデザイナーとか、インタラクティブディベロッパーなんて呼んだりします。

ただ、限られたweb制作会社でしか技術を発揮できません。業界全体の案件数が少ない上に、エンジニアとしての希少価値も高い。

学習すること
HTML/CSS/Pug/SCSS
HTML5 canvas
Javascript/Vue/Three.js/WebGL/HTML5/p5.js/Pixi.js/Tweenmaxなどのプラグイン

まとめ

C・D・Eは全く違ったものですが、AとBの理解がないとこれらには進めません。
AとBを完璧に理解する必要もありませんが、結局後戻りして覚えないといけなくなります。

まずは、『こんなサイトを作れるようになりたい!』って具体的にイメージしてください。
言語は手段です。手段はたくさんあります。

一番大切なのは言語を使って何を作るかです。

時間がかかってもいいので、あらかじめ決めておきましょう。

MENTAで絶賛生徒募集中です。ここからお申し込みいただくと500円クーポンもらえます。お気軽に。

ほなね