記事をシェアする

フロントエンドエンジニアとは何か?−業界研究@株式会社まぼろし−

記事をシェアする

7月7日に行われました、株式会社まぼろし様の業界研究授業の内容を書いていきたいと思います。

スポンサーリンク

木村様の講義

フロントエンドエンジニアとは何か?

フロントエンドエンジニアを理解する前に、そもそもフロントとは何でしょうか?それは

  1. ブラウザ上に表示されるもの
  2. ブラウザ上で動作するもの

この2点です。フロントエンドエンジニアは、この2点の情報設計を行っていきます。

具体的には、「動的機能の設計や実装」が主な仕事です。

動的機能とは?

動的機能とは、画面上の動きやサーバーとの通信によって、便利な機能を実装していくものです。

例えば、株式会社まぼろし様が開発している「UXRecipe」は、オンライン上でカスタマージャーニーマップが手軽に作れます。感情曲線を手動で操作したり、カードを選んでストーリーを作るなど、便利な機能が沢山備わっています。フロントエンドエンジニアの方は、このような動的機能の設計や実装を行っていきます。カスタマージャーニーマップは「UX名古屋」に参加した際に作ったことがあるのですが、何時間もかけて作成するため、このようなツールは便利だと感じました。

では、このような表現を行うにはどのような能力が必要なのでしょうか?

JavaScriptで動的表現をする

動的表現は、JavaScriptで行っていきます。JavaScriptはブラウザ上で唯一動作するプログラミング言語です。フロントエンドエンジニアになる第一条件として、このJavaScriptができなければいけません。しかし、JavaScriptも比較的簡単な言語と言われても、初学者には難解な言語です。そんな時に便利なのがjQueryです。jQueryには、以下のメリットがあります。

  • イベントハンドリングも簡単
  • ajaxも簡単
  • jQueryを使えば、JavaScriptで何ができるのかを知ることができる

特に3番目のJavaScriptで何ができるのかを知ることができるのは大きなメリットを感じていて、先に何ができるのかが分かれば目標ができて学習のモチベーションにつながっていくので良いと感じました。また、おすすめの学習本として、オライリーの「開眼!JavaScript」をおすすめしていました。さらっと読んだことがありますが、少々難しかったのでもう少し習得してからにします。

フロントエンドエンジニアの鍵となるもの

フロントエンドエンジニアにとって大切なことは、ただコードが書けるだけではありません。「設計」こそが重要であるということを教わりました。設計とは、「求められている機能をどう実現するかを考える」ということです。ついついコードを書きながら考えてしまいがちですが、言葉にすることでコーディングしやすくなります。今回はワークショップを通じて、実際に言葉にしてみる作業も行いました。

迷ったらシンプルな方が正解

ある機能を実装しようとした場合、プログラミングで何通りでもできます。そんな時に大事なことが、「迷ったらシンプルな方が正解」ということです。自分でも理解しているつもりだったのですが、シンプルにすることは簡単なようで非常に難しいです。これは慣れもあると思いますので、今後コーディングする際に意識していきたいと思います。

磯田様の講義

次に、磯田様の講義が行われました。磯田様はトライデントコンピュータ専門学校Webデザイン学科の卒業生の方で、技能五輪で銀メダルを取得しているという経歴を持っています。若いうちから有名企業の案件を担当されているなど、技能五輪に出場する身として、すごくいい刺激をいただきました。

在学中にすべきこと

この内容が興味深かったので、紹介させていただきます。まず、「ターミナルに慣れておくこと」が重要であると教わりました。ターミナルとは、あの黒い画面のことです。僕もサーバーを建てる際に「Tera Term」という黒い画面を触っているのですが、黒い水の入った水槽の中に手を突っ込んでいる錯覚に陥ることが度々あります。それだけ怖いターミナルですが、使いこなせば

  • Web製作のタスクの自動化
  • Gitの操作
  • ローカルサーバの使用

など、できることが広がっていきます。さすがにデータベースをいじるときは「phpMyAdmin」などを使っていますが、Web製作のタスク自動化は興味深かったので、挑戦してみたいと思いました。

また、Githubを活用することも重要であると教わりました。僕は使ったことがあまりないのですが、自分の作ったプログラムを評価してもらったり、コメントがもらえたり、さらに誰かが改変して最適なコードにしてくれるなどのメリットがあります。自分で何かプログラムができたら、在学中に使用してみたいと思いました。

フロントエンドエンジニアの方が実際どのようなことをしているのかは、なんとなく理解しているつもりでした。そのなんとなくが、今回の業界研究ではっきりして、いい勉強になりました。JavaScriptを早く習得して、自分でも動的な機能を実装できるよう勉強を進めていきたいと思います。

株式会社まぼろしの木村様、磯田様、ありがとうございました。

当日の様子は、「ウェブDeBLOG」でも紹介されておりますので、そちらもぜひ御覧ください。

スポンサーリンク

記事をシェアする

フォローする

トップへ戻る