Written by TSUYOSHI

【初心者向け】 フロントエンドエンジニアにおすすめの学習方法

PROGRAMMING

フロントエンド初心者「どういう学習方法なら早く成長できるのかな?」

こういった疑問にお答えします。

本記事の内容

  • 基本機能は一度、自分で書いて実装してみる
  • 有名なライブラリは自分で実装してみておくことも重要

初心者のフロントエンドエンジニア向けに、学習において「車輪の再発明」はおすすめであるということを解説します。

既にライブラリなどで存在する機能は、フルスクラッチ(ゼロから自分で書く)のではなく、ライブラリなどを使う方がよいとされています。
これは知っての通り「車輪の再発明」と呼ばれるもので、過去に優秀なプログラマーが書いたライブラリは優れていてバグなども吸収できているはずということから、自分でわざわざ書かずにそれを使うべきということです。

ただ僕個人的には初心者の頃は、敢えて自分で機能を作っていった方がよいと考えています。
今回はフロントエンドエンジニアの視点で、主にWeb制作をする際のフルスクラッチでコードを書くことの重要性についてお伝えします。

基本機能は一度、自分で書いて実装してみる


基本機能は一度自分で実装できるようにしておくとメリットがあります。

主にJavaScriptとHTML&CSSの組み合わせで実装する基本的な機能の話になりますが、タブ、アコーディオン、スムーススクロール、stickyなどよく使う機能については、使う機会がほぼ間違えなくあるはずなので、前もって実装してみることをおすすめします。

一度、実装したことがある機能やコードは経験となり、実装の依頼をされた時も即座に「できる」と回答が可能になります。実装にかかる時間見積もりも正確にすぐ出すことができるようになります。

顧客や開発者とのミーティングの場などでは聞かれたことを即答できることは進捗を管理する上でも非常に有効です。
詳しい見積もり時間は後で答えるとしても、「だいたいこれくらいで可能です」という幅をもたせつつも正確な時間見積もりができると、相手からの信頼も増すはずです。

ゼロからコードを書くことは難易度が全然違う

普段ライブラリを使っていて簡単そうに見える機能も、初心者の頃は、いざ自分でフルスクラッチでゼロから実装しようとすると極端に難しいと感じることがあると思います。これは経験が少ないからです。

基本機能やライブラリなどが、どうやって実装されているのかの構造を知っておけば、「どういう仕組か」や「どういう手順で組み立てればよいか」がわかります。初心者の頃は、自分でいろいろと試しに実装してみるとこのあたりの経験値が溜まっていき、成長スピードはとても早くなると思います。これは僕の経験からおすすめの方法です。

ちなみに自作した機能などは、すぐに取り出せるように自分で管理しておくと、必要な時にすぐ使えるのでGitHubなどでPrivateで管理するなどもよいと思います。

有名なライブラリは自分で実装してみておくことも重要

初心者ならいろいろ手を出さずにまずは基礎を固める

初心者の頃は、実践で使うことになった機能のみを実装すべく、それを前もって予習するなどして学習すればよく、まだ使うかどうかもわからない機能にたくさん手を出すよりは基礎を固めるなどに集中した方がよいと思います。

初心者の頃は覚えることが多いですし、ライブラリなどで構造の解説を見ても知識不足でよくわからないということもあります。そのため、基礎(HTMLやCSSの基礎、JavaScriptやjQueryの基本的な使い方)をまずは固めるというのは地味ですが重要だったりします。

脱初心者の時期なら、いろいろなライブラリの解析などをしてみる

脱初心者をするくらいの慣れてきた頃には積極的に、実装したことのないライブラリなどをプライベートの学習で実装するのは有益です。
ライブラリで使っている機能がどのような仕組みで実現できているのかなどが理解できるようになるため、いろいろ見たり実装するほど知識として習得しやすくなるからです。

スライダー機能などは有名なライブラリがいくつもあるので、通常は自作不要になりますが、これも一度自作しておくことをおすすめします。
実際に実装することは、どのように組めば実現できるのかという構造を理解することになるし、それが他の似たような機能を実装するときに役立ちます。
また既製品のライブラリだと細かい仕様に対応できないこともあるため、その際は自作するようになる可能性があります。そのライブラリの中身を触るのは複雑になるため、自前で実装した方がよいということになるからです。仮に自前で実装することになった時も、一度自分で組んだことがあれば、即座に対応できるメリットもあります。

ただ自前の実装をすると思いもよらないバグが発生したり、解決に時間がかかる問題が出てくるなどもあり、現場の開発ではライブラリを使える場合は基本的にはライブラリを使うのがベターです。
何でもかんでも自作しておけばよいということではないですが、ライブラリの利用と自作をバランス良く対応できるようになると、実装スピードと品質が上がるようになります。

まとめ:できるだけ自分で機能を実装してみることは早い成長につながる

  • 初心者の頃は基礎を重点的に学び、脱初心者くらいの時にゼロベースでいろいろ作り始めるのがおすすめ。
  • フルスクラッチで機能を実装することは成長につながる
  • ライブラリなどは使えるようにしつつも、どのようにその機能を実現していることを知っておくことは成長につながる

ご参考になれば幸いです。

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています