【Webサイトやアプリの表側】フロントエンドにも色々な種類があるよ、という話

フロントエンド

この記事を読んでほしい人

  • これから何をすれば、フロントエンドエンジニアになれるの?と悩んでる方
  • Webサイトなどの見た目に興味がある方

フロントエンドにも、色々な種類があります。

「サイトやアプリの見た目や動きを実装する」のがフロントエンドエンジニアの主な仕事なんですが、

サイトを作るのか?アプリを作るのか?だけでも、

どういった方法でコーディングしていくのかが変わってきます。

今回は、フロントエンド業務の種類について、書いていこうと思います!

フロントエンドエンジニア業務の種類

Web制作・Webアプリ開発のフロントエンドエンジニアが共通してよく使うのは、下記の言語です。

  • HTML
  • CSS
  • Javascript
  • PHP

このあたりの言語は、1から書けて損はないでしょう。

Web制作とWebアプリ開発で、使用するツールやフレームワークが異なる

Web制作とWebアプリ開発で違うところで言えば、

これらの言語を使って、より良くコーディングするために「使われるツールやフレームワークが違う」

というイメージです。

ちなみにフレームワークとは、

「開発に必要な機能をあらかじめ用意した枠組み」ですね。

Web制作でよく使われるのは、

  • WordPress
  • jQuery
  • ノーコードツール

Webアプリ開発でよく使われるのは、

  • Javascriptのフレームワーク(Vue.jsやReact.jsなど)
  • PHPのフレームワーク(LaravelとかCakephpなど)

例えば、Web制作でLaravelやVue.jsを使うこともありますが、あまり一般的ではないです。

今後もしかしたら流行る可能性はありますが、

現在ではWordpress、jQueryが使われることが多いかなと。

なぜツールやフレームワークが違うかといいますと、

作ることにおいて、「重点とする部分が違う」というのが一般的な考え方かなと思います。

  • Web制作ではSEOやCSSでのスタイル調整、サイトの動き実装が重点的
  • Webアプリ開発では、アプリのUI/UXなど使い方が重点的

たとえば、フレームワークを使ってサイトを構築すると、

SEOにこだわった制作をする上で効率的でなかったり、

WordPressでアプリ開発をするのが一般的でない、みたいなイメージです。

※あくまで「重点的」に考えることが多い、ということなので、Web制作でもUI/UXにこだわることはありますし、アプリ開発でスタイルにこだわることもあります。

Web制作寄りフロントエンドの場合、SEOやデザインにも興味を持ったほうが良い

Web制作をやりたい場合、

SEOやデザインに興味を持ったほうが良いと思います。

理由は単純で、作れるだけだと良いものができないからですね。

SEOを知っておけば、そのルールにある程度従ってコーディングできますし、

デザインについて知っておけば、どういうコーディング設計にすればよいか、スムーズに答えが出てきます。

あとは、Web制作のコーディング作業は、比較的難易度は低いです。

本気で頑張れば3ヶ月くらいで一通りHTMLやCSSで最低限コーディングできるようになるでしょう。

その分競合が多いため、その他のSEOやデザインに興味を持てれば、

フロントエンドエンジニアの人材として重宝されるんじゃないかなと思います。

またデザインやSEOなど、コーディング以外の作業を一人でできるようになれば、

フリーランスになる道も見えてきます。

ちなみにWordpressがWeb制作でよく使われるのは、

SEOに強い制作ができること、が一つの理由として挙げられます。

他にも制作をより効率よくするための機能がついてます。

また、最近ではノーコードツールも流行ってきていまして、制作する時間だけで考えると、ノーコードツールを使って制作するのもアリだと思いますが、

より細かくデザインを整えたり、SEOにこだわっていくには、

基本的なHTMLやCSS、Javascriptの使い方を覚えておくべきでしょう。

Webアプリ開発寄りフロントエンドの場合、UI/UXやコードそのものに興味を持てたほうが良い

Webアプリ開発をやりたい場合、

UI/UXには興味を持てたほうが良いかなと思います。

使いやすいアプリやツールを開発することが目的なので、

「ここはどういった機能で実装すれば、ユーザーが使いやすいか」を

知っておいたほうが良いかなと思います。

またアプリ開発では、より複雑なコーディングを行います。

JavascriptやPHPのフレームワークを使うとき、

それぞれのマークアップ言語・プログラミング言語を応用させて使うイメージです。

なので、JavascriptやPHPを1から書けておいたほうが良い、というのはもちろん、

HTMLやCSSの使い方もフレームワーク上で書くときは、基本の書き方と若干異なりますので、各言語の基礎力は身につけていった方が良いと思います。

面白み自体は共通

フロントエンドの面白みは、実装した見た目や機能が、ブラウザ上で直ぐに反映されてくれるので、

達成感を味わいやすいことが一つの醍醐味でしょう。

また、お客さんがサイトやアプリを見て、使いやすさを認めていただいたり、

デザイン面を評価していただいたときは嬉しいです。

僕はWeb制作寄りのフロントエンドでして、

以前勤めていた会社で、

結構動きがついていて、短納期のサイトをコーディングする案件があったんですが、

お客さんから「モーダルの動きがいい」というお言葉をいただいて、

「頑張って作ってよかったな〜」と思った経験があります。

(もちろん、上流工程を担当するディレクターやデザイナーにも感謝しました。)

そういった、「他の人からデザインや使いやすさの共感を得る」という経験を積み重ねていくと、

いいものが作れるフロントエンドエンジニアになれるのではないかなと思います!