新米フロント担当がWEBエンジニアについてざっくりと紹介する：非エンジニアに向けて

エンジニアを知らない人に向けて、WEBエンジニアについてざっくりと分類・紹介するブログ！最近は非エンジニアに向けて、WEBエンジニアについての説明を口頭で4回ほどしました。さすがに口頭だけだと限界があるので、読み物としてまとめていきたいと思います。新米フロントエンジニアがざっくりと紹介するシリーズ！！

どもども！このブログでテックブログの投稿数がめでたく50本に達成した龍ちゃんです。投稿を初めて10か月程度なので、結構頑張ったなと自分でも思っています。そんな記念する50本目の記事が「WEBエンジニア」を題材にした内容となっています。

まずは、このブログを作るに至った経緯について説明しておきます。会社と全く関係ないところで、エンジニアの勧誘作業（キャリア相談）なるものを定期的にやっているんです。大体はお酒を飲んでいるときなのですけども…。そこで、自分の仕事の話もすると結構な確率でエンジニアの仕事に興味を持たれます。頑張って口頭で説明をするのですが、非エンジニアに向けてWEBエンジニアの説明をすることが結構大変だったんです。そんなこんなで、ブログにまとめる次第です。

カロリー高めなので、WEBエンジニアをざっくりとみていくパートとフロントエンドエンジニアについてざっくりとみていくパートに分けたいと思っています。社会人歴２年目のぴちぴちエンジニアが独断と偏見で書いているので、もしミスや指摘がありましたら優しく教えてください。疑問に関してはコメントで投げかけてください。

それでは本題に入っていきます。

1 WEBエンジニアについてざっくりと分類
2 勉強をしていくためのキーワード
3 終わりに

WEBエンジニアについてざっくりと分類

まずは、WEBエンジニアのステップについて僕が考えていることを書いておきます。

WEBにかかわるスキルは、それはもうすごくたくさんあります。希望を言うのであれば、すべての技術を高いレベルで保持・運用することができるのが望まれます。まぁ現実的に不可能ですよね。そして理論だけ学んで進めていくのも楽しくないですよね。あとエンジニアといっても無数にジャンルがいるわけです。決して軽んじているわけではないので、許してください。

そこで、私は「WEBエンジニアの始まりは４つの内のどれか」という説を押していきたいです。DBエンジニアやセキュリティエンジニアの皆さんはごめんなさい。複雑なので、いったん割愛させてください。そして営業やPMの皆さんいつもお世話になっています。スキル面ではややこしくなるので割愛します。４つの内訳としては、以下になります。

デザイナー
フロントエンドエンジニア
バックエンドエンジニア
インフラエンジニア

こちらからキャリアを通して、新しいスキルを覚えて進化していくのがエンジニアだと思っています。それでは各職種同士の関わりについてみていきましょう。

各説明は、図にも載せています。後の章で各キャリアに必要なキーワードを載せておきますね。

いきなり、この図を乗っけるのも不親切なので「Googleカレンダー」をもとに説明をしていきたいと思います。

まずは、ブラウザでGoogleカレンダーを開きましょう。この時点でインフラエンジニアにはお世話になっています。

インフラエンジニアの仕事としては、フロントに表示するためにWEBページを保存して、ブラウザからアクセスが来たらWEBページを表示します。これで表示されるのが、皆さんが良く見ているGoogleカレンダーのページになります。実は一番働いている可能性があるのがインフラエンジニアになります。継続的に情報を表示するために、サーバーをメンテナンスする必要があります。バックエンドが動作する環境もインフラエンジニアが整備したサーバーになります。

フロントエンドエンジニアの仕事としては、ブラウザで動いている部分になります。Googleカレンダーで説明すると、カレンダーをクリックしたら疑似的に予定が表示され、詳細入力画面が出てくるなどの動きの部分になります。バックエンドとのつなぎ込みの説明をするならば「データを伴わない画面上の動きはすべてフロントエンド」という認識で大丈夫です。図の赤枠部分のクリックを行うとデータが送信されます。データの送信という部分までは、フロントエンドエンジニアの責務になります。バックエンドサーバーにデータを送信して、返答を受け取るという一連のやり取りが、フロントエンドとバックエンドのやり取り部分です。フロントのみでデータのやり取りを実装する方法もあるのですが、それはまた別の機会にしておきます。

バックエンドエンジニアの仕事としては、フロントエンドエンジニアから来たデータをもとにデータベースに対する処理を行います。例えば、予定の保存や編集のことです。一見、ブラウザ側に情報があるように見えます。ですが、ほとんどのサービスでバックエンドサーバーを介して情報をやり取りしています。ブラウザが閉じても情報が消えていなければ、フロントエンドがバックエンドから情報を取得して表示している可能性が高いです。

デザイナーは出てきませんでしたが、フロントエンドが作成したデザインの元を作っています。完成品を作っているのはエンジニアですが、制作過程では頭が上がらない存在ですね。

勉強をしていくためのキーワード

では、ざっくりと解説したところで書く勉強をしていくにあたって「必要だな！」と思う知識について書いておこうと思います。といっても「ワタシフロントエンドエンジニア」なので、ふんわりと書いておきますね。

デザイナー

デザインの勉強ってどうすればよいのでしょうか？軽く勉強した限りでは、以下の2点を重点的に行いました。

とりあえずネットと本で勉強してみました。体系的に学んでいないのですが、ありがたいことに世の中には入門系の書籍が無限にあふれています。そのおかげで、デザインの書籍が本棚にパンパンです。ネットの記事では、クリティカルな情報が転がっていたり、実際に動きのあるサイトが見れます。この辺りを読み漁ることから始めるのをお勧めします。

そして、実際に手を動かしてみましょう。デザインツールとしてはFigmaをお勧めしています。無料でも使うことができるので、とてもおすすめです。使い倒すことをお勧めしています。私自身もまだまだですが、ブログコンテンツをFigmaで作ることで使えるようになりました。

Figmaの記事も書いているので読んでみてね♡

フロントエンドエンジニア

フロントエンドとしては、とりあえずHTMLとCSSを学びましょう。そしてJavaScriptとTypeScriptを学びましょう。ReactかVueなどのフレームワークなどの勉強をして、CSSフレームワークの勉強をしていきましょう。

ここに関しては、本職なので次のブログでまとめます。ここにリンクが入る予定です。

バックエンドエンジニア

バックエンドの勉強に関しては、知り合いのバックエンドエンジニアに執筆を依頼しています。期待ですね！！！

インフラエンジニア

インフラもどこから勉強すればよいのか難しいところです。WEBに関係する広い知識が求められるということだけふんわりと知っています。

学びやすいところで言えば、「Azure」や「GCP」といったクラウドの技術がPCさえあれば学ぶことができるのでお勧めです。公式のチュートリアルが充実しており、登録してすぐは無料で勉強することができます。ちょっと自信がついたら、DockerやKubernetesを学ぶこともよいかもしれません。あまり詳しいこともかけないので、調べてみてください。一緒に沼にはまりましょう。

とりあえず、僕は「Azure」と「Docker」の勉強だけしていましたね。アプリが実際にWEB上にアクセスできるのって楽しいですよ。

知り合いのエンジニアに聞いたら、Raspberry Pi（ラズベリーパイ）を買って、自分でサーバーを作ればいいじゃないかとか言っていました。初心者の人は泣きたくなるので絶対やめましょう。でもきっと楽しいです。