近年「フロントエンドエンジニアになりたい！」と言う声をSNSでよく聞きます。 「フロントエンドエンジニア」という肩書き・名乗りを聞いて、皆さんはどういったエンジニア像を思い浮かべるでしょうか。 <h2 id="h8eee5a7ecd">2種類のフロントエンドエンジニア</h2>巷で言う「フロントエンドエンジニア」は以下の2種類に大別されるので、誤った認識を持たないように注意が必要です。<ul><li>Web制作者</li><li>Web開発者</li></ul> フロントエンドエンジニアと言うくくりでも、話が噛み合わなかったり、そもそも主眼に置いている価値観が違ったりとで不幸を生むケースがあります。 Web制作者がフロントエンドエンジニアを求めている企業に応募したところ、企業はWeb開発者を求めていた...なんてミスマッチを生んでしまった例を聞いたことがあります。 フロントエンドエンジニアの肩書きの方がどちらの属性であるかを理解しておくと、無用な軋轢も減るのではないでしょうか。 今回は主にWeb初学者の方に向けて、両者の特徴を挙げてみます。 僕はWeb開発者寄りのフロントエンドエンジニアですが、この記事で申し上げたいことは「Web制作者とWeb開発者のどちらが優れているか」といった議論ではありません。あらかじめご認識おきください。<h2 id="hdaff647446">Web制作者の主な業務とは</h2>まずはWeb制作・クリエイター業務についてです。 Web制作者・クリエイターの業務は、以下のようなものが主となります。<ul><li>Web&quot;サイト&quot;のデザイン設計</li><li>デザインツール（Adobe XD&#x2F;Figmaなど）を使ったデザインカンプの作成</li><li>デザインカンプを元にしたHTMLマークアップ・CSSコーディング</li><li>JavaScript・jQueryを用いた、サイトに動きをつける実装</li><li>WordPressを用いたCMS構築</li></ul>企業・案件によってはデザイナーがデザインカンプまでを作成、HTML・CSSマークアップをフロントエンドエンジニアが担当するといった分業がなされます。 ただ、僕はWeb制作者に求められるのは上記の業務の中でも「Webデザイン」のスキルが重要視されると考えています。 JavaScriptやPHPによるプログラミングスキルよりも、デザインスキルやマークアップスキルの方が重視されると言えるでしょう。 (セマンティックにマークアップができることはWeb開発者にも求められることですが...) エンドユーザーのUXを向上させ、クライアントのビジネスの成功に結びつけるためには相応のデザインスキル・優れたUI&#x2F;UXへの理解がWeb制作者に求められます。<h2 id="hcd43afbd6e">Web開発者の主な業務とは</h2>そしてWebシステムの開発を主に行うWeb開発者・ディベロッパーの業務について。 Web開発者・ディベロッパーの主な業務は以下のようになります。<ul><li>Web&quot;アプリケーション&quot;の開発</li><li>React, Vue, AngularなどのJavaScriptフレームワークを使ったリッチなSingle Page Application（SPA）の開発</li><li>Redux, Vuexなどを使ったフロントエンドアーキテクチャのstore設計</li><li>Next.js, Nuxt.jsなどを使ったServer Side Rendering(SSR), Static Site Generation(SSG)のアプリ開発</li><li>CI&#x2F;CDパイプラインの構築など、フロントエンドDevOps</li><li>フロントエンドアプリケーションのユニットテスト・E2Eテストの構築</li><li>etc...</li></ul>範囲が広すぎて書き切れないですね。 BFF（Backend For Frontend）の構築とかもおそらくフロントエンドWeb開発者の担当領域だと思います。 Web制作者と比較するとプログラミングのスキル、アーキテクチャへの理解、パフォーマンス改善などがより求められると考えています。 近年はWeb制作に比べるとJavaScriptよりはTypeScriptで書くことが多く、jQueryは使わなくなってきている印象が強いです。 そしておおよそ組織内にデザイナーがいるので、制作者に求められるデザインスキルを開発者に求められることは比較的少ないです。 さらにシステム保守の観点から、疎結合で、堅牢で、保守性の高いコンポーネント設計を考えて設計・実装することも重要です。<h2 id="ha214098e44">まとめ</h2>フロントエンドエンジニアは、Webデザインスキルが重視されるWeb制作者とWebプログラミングスキルが重視されるWeb開発者に大別されるということを書きました。 フロントエンドエンジニアの担当範囲は本当に広いです。それゆえ同じ「フロントエンド」というワードの中で制作ベースの考えと開発ベースの考えで乖離が起きたりするケースがあります。 例えば「Web制作はプログラミングであるか否か」みたいな議論ですね。 個人的にはHTML&#x2F;CSSはあくまでマークアップ言語で、動的処理を中心としたプログラミングとは別物、という考えです。 しかしながらWeb制作者でもJavaScriptによるプログラミングをするでしょうし、Web開発者でもデザインツールを使ってそれを元にコンポーネント設計などをするわけです。 両者の境界は非常に曖昧なものなので、明確に住み分けができるものではありません。 言ってしまえばただの言葉の定義の問題なので。 フロントエンドエンジニアを自称するものとして、制作と開発のどちらに軸足を置くか、そのスタンスは明確にしておきたいですね。 僕自身はWeb開発者としてアプリケーションを作ることを軸にし、時々Web制作もやるというスタンスでこれからも取り組んでいこうと思っています。 どっちもできるほうが面白いし仕事の幅も広がりますからね。

<ol><li>2種類のフロントエンドエンジニア</li><li>Web制作者の主な業務とは</li><li>Web開発者の主な業務とは</li><li>まとめ</li></ol>

「フロントエンドエンジニア」と一言で括っても、その中には「Web制作者」と「Web開発者」がいるということを解説しています。

フロントエンドエンジニアにおけるWeb制作とWeb開発

プログラミング未経験のあなたに。「プログラミング言語、どれを学べばいいの？」という疑問の解決にはJavaScript（JSと略されることもあります）を学習すると今後の選択肢が大きく広がる理由を解説します。 自分がフロントエンドエンジニアとしてJavaScript &#x2F; TypeScriptを普段から書いているので「ポジショントークだ！」と思われる方もいるかもしれませんが、そんなことはありません。事実最初の一歩はJavaScriptを選択するのが最良だと実感しています。<h2 id="h85fe204893">そもそもJavaScriptって何？</h2><blockquote>JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です —ウェブページが読み込まれるたびに、単にあなたが見ている静的な情報を表示する以上のことをしています— 更新されたコンテンツの定期表示や、インタラクティブな地図や、2D&#x2F;3D グラフィックのアニメーションや、ビデオジュークボックスのスクロールなど — たぶん JavaScript が組み込まれています。</blockquote><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript" target="_blank" rel="noopener noreferrer">MDN</a>より引用 JavaScriptはGoogle ChromeやSafariのようなWebブラウザ上で動かすことのできる（ほぼ）唯一のプログラミング言語です。 (HTML 、CSSはマークアップ言語という見解なのでここではプログラミング言語として取り扱いません。) 「ブラウザ上」で動くことから、サーバーを介すことなくHTMLやCSSを動的に操作することが可能です。 この特徴はRuby, Java, PHPなど他のサーバーサイド言語とは一線を画しています。 Javaというワードが出たので少し補足をすると、JavaとJavaScriptは全くの別物です！！メロンとメロンパン、ハムとハムスターくらい違うようなものです。JavaScriptを勉強したのに略して「Javaができます！」なんて宣言しようものなら全く見当違いなプロジェクトに入ってしまうことでしょう。<h2 id="h6e0bc74471">初学者にJavaScriptを勧める4つの理由</h2><h3 id="h0a6eb0e124">実行結果が目に見えやすいから</h3>先述の通り、JavaScriptはブラウザ上で実行ができるプログラミング言語です。 Google Chromeの開発者ツール(キーボードのF12ボタンで開きます)のコンソールタブでも記述・操作が可能で、JavaScriptがどんなものかはすぐに体験することができます。 JavaScriptの主な用途としてHTML・CSSを操作するため、書いたプログラムによって操作されたHTML・CSSが目に見える形で変更されることが確認できます。 これはプログラミングの楽しさを知る上で重要なことだと思っています。結果が目に見えるのはやりがいを非常に感じやすいです。<h3 id="h3548271cc4">フロントエンド開発のほぼ唯一の選択肢だから</h3>ブラウザ上で動かすことのできる言語はJavaScriptのみであるという点が他言語との明確な違いになります。 かつてはPHPやRubyなどのサーバーサイド言語でHTMLを生成してSafariなどのブラウザで表示できる形態にして、ブラウザ側のJavaScriptで動きを少しつけてあげることが主流でした。 近年は、バックエンドとフロントエンドの境界線を引く潮流であり、バックエンドではデータを処理した上でフロントエンドに必要なデータを送り、フロントエンドで受け取ったデータに基づいたHTMLの組み立てを行うことが主流です。 2010年代のフロントエンド開発の技術革新の動きは目まぐるしく、React、VueなどのJSフレームワーク・ライブラリの躍進、Node Package ManagerのようなOSSライブラリ管理の発達、コードフォーマッティングやテストライブラリの拡充など、フロントエンド開発が効率的になり、かつ動きが大きくレスポンスも速いリッチな画面を作ることが容易になってきています。 これまではバックエンド言語を主に書くエンジニアが片手間にJavaScriptを書くことが多かったのですが、アプリケーションにリッチな画面を求めたいビジネスは年々増えており、フロントエンド専任のエンジニア(モダンフロントエンドエンジニア)の需要が右肩上がりになってきています。 面白いユーザー体験（UX）を作るためにはリッチなフロントエンド、つまりJavaScriptの活用が欠かせないことになってきています。 すなわちJavaScriptを確りと身に付けられれば需要増のモダンフロントエンドエンジニアの入り口に立つことが可能ということです。 プログラミング言語学習において、教材ではView部分もサーバーサイド言語で行っていることがありますが、ViewはReactやVueなどのJSフレームワークに任せてしまう時流になっているので注意が必要です。<h3 id="h866bf37d24">汎用性が高いから</h3>JavaScriptがブラウザ上で動くことは前述しましたが、JavaScriptはNode.jsというサーバーサイドのJavaScript実行環境でも動かすことができます。 また、React NativeというiOS&#x2F;Androidアプリを開発するためのフレームワークが存在し、JavaScriptを書くことができればスマートフォンアプリまで開発することができるのです。 つまり、バックエンドもフロントエンドも、スマホアプリでさえも全てJavaScriptで大筋作ることができるというわけです。 これはスタートアップなど人数のあまり多くないチームや個人開発で非常に有用です。言語間のスイッチングコスト(プログラムの書き方の作法の違い)がほぼ無いからです。 広く開発に使うことのできる言語ということで、将来性も抜群です。 Node.jsの伸び代はかなり有ると思っており、今後も注目しています。<h3 id="hb504ebc6e2">JavaScriptユーザー&#x2F;開発者が多いから</h3>Webアプリケーション開発においてJavaScriptは必須であることから、JavaScriptを使う開発者は非常に多いです。 PHPとJavaScript、RubyとJavaScriptなど併用して使っていたエンジニアも大勢います。 ユーザーが多いということはそれだけ知見が集まりやすいことに繋がります。初学者が困ったときに他のエンジニアに質問をした際に解決できる可能性も高いということです。 JavaScriptのユーザーコミュニティは活発であり、例えば<a href="https://qiita.com/" target="_blank" rel="noopener noreferrer">Qiita</a>の投稿数ランキングでも常にJavaScriptは上位にランクインしています。 また、JavaScriptのOSSライブラリも積極的に開発が進められています。 Node Package Managerを活用してライブラリを使うことができるため、自身が使いたい機能を探せばそれに見合うライブラリが存在することも多いです。 ライブラリの活用で車輪の再発明をする必要がないのです。（車輪のチューニングは必要だったりしますけどね） 一方、少し注意が必要なのはJavaScriptの言語改定のところです。 2015年にJavaScriptの構文に大きく変更がかかり、より安全で便利に、そして効率的にプログラムを書くことができるようになりました。 インターネット上では未だに非推奨となった<code>var</code>を変数宣言に使うような記事もあったりするので、情報源が古くなっていないかは注意しましょう。<h2 id="ha214098e44">まとめ</h2>JavaScriptは「実行結果が見えやすいため学習モチベーションが高めやすく」、「フロントエンド開発の唯一の選択肢のため専門性も高く」、「バックエンドやスマホアプリ開発にも応用の効く汎用性の高い言語であり」、「開発ユーザーも多くて情報を得やすい」パワフルなプログラミング言語であることをご紹介しました。 新たなライブラリやフレームワークも次々開発されて活発であるため、将来性も高く進化し続けている言語であると言えるでしょう。 ぜひ最初の一歩にJavaScriptを選んでみてはいかがでしょうか。 JavaScriptから派生したTypeScriptの紹介は今回は留めておきます。昨今のデファクトスタンダードはTypeScriptなので、最初からTypeScriptを学ぶことも非常に有用な選択肢です。 ProgateのNode.jsコースは学ぶ順序としては理にかなっているなと思ったのでこちらも覗いてみてください。 <a href="https://prog-8.com/paths/node" target="_blank" rel="noopener noreferrer">https://prog-8.com/paths/node</a>

<ol><li>そもそもJavaScriptって何？</li><li>JavaScriptを勧める4つの理由<ol><li>実行結果が目に見えやすいから</li><li>フロントエンド開発のほぼ唯一の選択肢だから</li><li>汎用性が高いから</li><li>JavaScriptユーザー&#x2F;開発者が多いから</li></ol></li><li>まとめ</li></ol>

プログラミング未経験のあなたに。「プログラミング言語、どれを学べばいいの？」という疑問の解決にはJavaScriptを学習すると今後の選択肢が大きく広がる理由を解説します。

フロントエンドエンジニアにおけるWeb制作とWeb開発

プログラミング学習の最初の一歩にはJavaScriptが有力な選択肢である4つの理由