エンジニアに必要な知識と習慣

東晶貿易でエンジニアとして活躍するためにはフロントエンド分野を習得する必要があります。

フロントエンドと聞いて分からない方が一定数おります。

フロントエンドとは、クライアント側とWebブラウザ側で動作する部分を示します。

フロントエンドエンジニアは、Webアプリケーションなどでユーザーが画面越しで操作する部分の設計や構築を行います。

フロントエンドと反対にバックエンドもあります。

バックエンドはログイン機能やデータ保存などユーザー側が使用する際に見えない部分を設計・構築します。

本記事ではバックエンドについて詳細は触れません。

以下では、フロントエンドの知識がどのようなものであるか、それを自身のスキルとして習得するためには何をするべきかを紹介します。

フロントエンドエンジニアになるためには以下のプログラミング言語を理解する必要があります。

フロントエンドエンジニアになるためには以下のプログラミング言語を理解する必要があります。

• HTML
• CSS
• JavaScript
• jQuery
• PHP
• MySQL

HTMLとはHyper Text Markup Language略称です。

日本語に直訳すると、「ハイパーテキストに目印をつけるための言語」です。

ハイパーテキスト(Hyper Text)とは、ハイパーリンクを埋め込むことができる高性能のテキストです。

ハイパーリンクの分かりやすい例は、Webサイトでテキストをクリックすると別のページに飛んでページが表示された経験はございませんか？笑

ハイパーテキストでは、表示しているWebページから別のWebページにリンクを貼り付ける・音声・動画・などのデータファイルをリンクで埋め込むことができます。

押せば別のページに飛ぶものをハイパーリンクといいます。

HTMLは関連する情報同士を結び付け、情報を整理する特徴があります。

マークアップ(Markup)とは、どの文章がどの役割を持つのかを示すことです。

文章には、見出し・段落・表・リストなど各文章には各役割がわかるように目印をつけます。

見出し・段落・表・リストなどの文章内の各部分を要素といいます。

そのため、今現在公開されているWebサイトの全てといっても過言ではないほどHTMLは使用されています。

CSSとは、Cascading Style Sheetの略称です。

CSSはWebページのスタイルを指定するために使用される言語です。

主にレイアウト・サイズ・色や表示スタイルを指定するために使用されます。HTMLのみで書かれたサイトは見栄えが良くありません。

HTMLに加えて、CSSを用いることにより日常で目にする綺麗で見やすいWebサイトが作成できます。

JavaScriptとはWebページに複雑な機能をつけるための言語です。

一番身近な例では、Webページで一度は目にする画像のスライドショーです。

これはjQueryというJavaScriptの派生言語で実装されます。

PHPは今回では詳しく紹介しませんが、簡単にいうとログイン機能やお問い合わせフォームの作成のときに使用される言語です。

東晶貿易で勤務するうえでPHPは使用しますが、まずはフロントエンド知識をしっかり身につけてから学習しましょう。

MySQLはデータの管理・更新・削除・検索操作するために使用される言語です。

こちらもフロントエンドエンジニアとして付加価値をつけるために学習するものです。

そのため、PHP学習と同時に行うことをお勧めします。

フロントエンドエンジニアとして必要な知識を紹介しました。

これは私が実際に行った学習方法ですので、読者の皆さんに参考になれば幸いです。

プログラミング言語を学習する際に注意して頂きたい点が以下となります。

• 完璧に理解しようとしないこと
• 丸暗記をしないこと
• 手を止めないこと

まずは、完璧に理解しないことです。

プログラミング言語は完璧に理解しようとする方が一定数おります。

プログラミング学習において重要なことは毎日継続して学習することです。

次に、丸暗記をしないことです。

プログラミングは学校のテストと違い全てを覚えておく必要はございません。

学校のテストと違い、不明点があればその都度調べることができるからです。

不明点が発見するごとに調べて、その都度解決するほうが作業効率も上がります。

そのため、暗記することはお勧めしません。

最後にリスト化された注意事項の中で一番重要なことは、とにかく手を止めないことです。

調べているときはもちろん手を止めても構いません笑

でも、不明点がどうしても解決できないときに手を止めないようにしましょう。

不明点が解決できないならその場は放置してそのまま学習を進めましょう。

不明点は時間の経過で再度学習することにより理解できることがあります。

そのため、不明点で何時間も時間をかけるのではなくどんどん学習しましょう。

フロントエンドエンジニアになるための学習方法

さあ、これからコードを行きましょう！と言いたいですが、まずはコードを書くためのツールを用意しましょう。

おすすめツールはvs code(Visual Studio code)です。

こちらは無料で利用でき、多くの方が利用しますのでお勧めです。

まずはコードを書くことになれるためにHTML/CSSから学習しましょう。

本で学習することも構いませんが、本は平均3000円と高いので手が出しづらいですよね。

以下に無料で基礎学習できるサイトがありますので、紹介します。

• ドットインストール
• Progate

ドットインストールは私も利用しておりました。

無料で完結に学べることができますので是非活用してみてください。

Progateは途中で有料会員のみと学習が途切れますが、コードを書くことがどのような感覚かを知ることができます。

まずは概要を知ることが重要です。基本的にはWebサイトを作成しながらコードに対して理解を深めます。

ここで一つポイントがございます。

学習の際制作したサイトに自分でひと手間加えてみましょう。

例えば赤の文字を黄色に、背景色をピンクにしてみたりしましょう。

少し自分でアレンジするだけで理解度と定着度は確実に上がります。

もし、学習意欲があれば有料会員になりましょう。

発展的な内容を学習できるようになりますのでお勧めです。

その後、ある程度基礎を固めたら実際公開されているWebサイトを模写してみましょう。

いきなり模写することは難しいです。

私も初めて模写したWebサイトを完成させるまで約2カ月かかりました。

模写は難しいことですが、学習した内容のアウトプット、不明点を検索して解決する能力は模写でしか養えません。完璧な完成度で作る必要ありません。

自身の感覚で7割近くできたと考えれば終わりにしましょう。

突き詰め過ぎても学習効率は良くならないので注意しましょう。

そのため模写のハードルは高いですが、やって損はないです。

模写は最低でも2~4つWebサイトを模写してみましょう。

ここまで東晶貿易で活躍するために必要とされるスキルの知識と著者の学習方法を紹介しました。

フロントエンドエンジニアとして活躍するためには基本知識をつける必要があります。情報量が多いのでもう一度復習しましょう。

フロントエンドエンジニアとして活躍するためには主に3つのプログラミング言語を習得する必要があります。

HTML・CSS・JavaScriptです。

HTMLは「ハイパーテキストに目印をつけるための言語」です。

HTMLは関連情報を結びつけることで、情報を整理する特徴があります。

CSSはWebページのスタイルを指定するために使用される言語です

色・フォント・レイアウトの表示スタイルを操作することができます。そのため、綺麗なWebサイトを制作するために必要となります。

JavaScriptはWebサイトに複雑な機能をつけるための言語です。

Webサイトで見る画像のスライドショーなどが実装できます。

最後に学習方法についてです。

プログラミング言語を勉強する際には3つのことを頭の片隅にいれましょう。

完璧に理解しようとしないこと・丸暗記しないこと・手を止めないことです。

難しい箇所に15分以上かけても解決できないなら無視しましょう。

長時間かけることが勿体ないので理解できなくても先のことを学習しましょう。

今後エンジニアとして活躍することを期待してます。