JavaScriptを利用し、web制作を行うには、これまでに学んだことに加え、HTML, CSSの知識やその他の発展的なスキルが求められます。
今回は、JavaScriptとセットで学ぶべきこととJavaScript学習後に学ぶと良いことを紹介していたいと思います。
CSSアニメーション
JavaScriptを学ぶ上で、CSSやCSSアニメーションの知識はマストになってきます。
アニメーションにもよりますが、CSSで再現可能なものは、CSSで実装した方がパフォーマンスが良かったりします。また、CSSやJavaScriptのみでアニメーションを再現することもありますが、実務においてはその両方を組み合わせて再現することの方が多いです。「jQueryでテキストアニメーションを自作してみよう」で実装した、CSSにアニメーション前後のスタイルを作成し、JavaScript側でそれらのクラスを付け外しするパターンです。
では、実際にどのような知識が必要になるかと言いますと、例えば、transformには複数の記述法が用意されていますが、アニメーションにおいては3dが最もパフォーマンスが良いとされていることや、JavaScriptで何らかの要素を拡大したい場合は、widthとheightの値を変更するより、transform: scale3d()を利用して実行した方が良いなどといった点があげられます。
実務では、上記のようなことにこだわって制作していかなければなりませんので、JavaScriptとセットでCSSアニメーションの知識を付けていきましょう。
JavaScriptの3大フレームワーク
近年では、webアプリケーションのアーキテクチャとしてリッチなUIを提供することができるSPA（Single Page Application）という形式が注目を集めています。
SPAとは、名前のとおり、単一のページで構成されるwebアプリのことです。
JavaScriptにはSPAを開発するための3つの主要なフレームワークがあります。
Angular
Googleを中心に開発されているフルスタック（全部入り）のフレームワークです。フロントエンド開発に必要となる要素が一通り用意されています。
React
Facebookを中心にコミュニティによって開発されているライブラリです。3大フレームワークと称していますが、実はReactはフレームワークではなくライブラリです。Angularよりも導入コストが低く、手軽に導入ができます。また、記述方法としてJSXを採用しており、JSの中にHTMLを書いているような感覚で記述することができます。
Vue.js
オープンソースで開発されていて、ビュー層に特化したシンプルかつ高速フレームワークです。シンプルなアプリを作るうえで向いていて、断片的に適用していけることからプログレッシブフレームワークとも言われています。
このようにJavaScriptを身に着けるだけで、自分のできる幅がぐんと広がるのでフレームワークの知識も付けていきましょう。
TypeScript
TypeScriptとは、JavaScriptを拡張したプログラミング言語で、Microsoftがオープンソースとして開発しました。TypeScriptは、言わば型付けされたJavaScriptで、コンパイルすると標準のJavaScriptが生成されます。また、TypeScriptはGoogle社内の標準言語として採用されています。
上記で紹介した、Angular、React、Vue.js等とTypeScriptを併用して開発をすると、TypeScriptの静的型付けがつくことでエディタによる補完機能を使って素早く安全に開発を進めることができるようになるので、フレームワークの次にTypeScriptにも挑戦してみましょう。
Node.js
Node.jsとは、JavaScriptをサーバーサイドで実行することができる実行環境です。そもそもJavaScriptはクライアントサイドでしか使用されない言語ですが、Node.jsはPHPやJava等と同じような使い方ができるようになるということです。「サーバーサイドJavaScript」と呼ばれたりします。
また、Node.jsはノンブロッキングI/Oによる非同期処理によって、サーバーへの接続台数が1万台以上になると速度が遅くなる問題（C10K問題）を解決することができます。軽量なため、リアルタイムで複数の人が使用する場合でもパフォーマンスが落ちることが少ないです。
パフォーマンス
webサイトは、ユーザーに閲覧してもらって初めて意味をなします。どれだけデザインやコンテンツに優れたサイトでも、閲覧してもらえなかったら意味がありません。
「実務でHTML,CSSを使うためにさらに勉強すべきこと」で、低パフォーマンスはユーザーの離脱に直結するとお伝えしましたが、制作を行う上で、ユーザーの離脱を防ぐためにはどうすればいいか考え実装していくことは、デザイン通りにレイアウトを組むのと同じくらい大切になってきます。
また、JavaScriptはどう実装するかでパフォーマンスへ大きく影響を与えます。小規模のサイトやJavaScriptでの実装箇所が少ないサイトであれば、そこまで影響を与えることはありませんが、実装箇所が多くなればなるほど、その影響は大きくなります。
web制作において、JavaScriptはアニメーションを実装する際に用いられることが多いですが、表示速度や可用性に問題がなくとも、アニメーションにガタつきがあれば、それはパフォーマンスのいいサイトとは言えません。このようにパフォーマンスとは機能単位で考え、対策していかなければならないものなのです。
コーダーやエンジニアを目指す上で、パフォーマンスの知識はマストですし、身に着けることで規模の大きな案件にもジョインしやすくなりますので、積極的に学んでいきましょう。
一つずつ作れるものを増やし幅を広げよう
今回は、JavaScriptでさらに勉強することについて紹介しました。
できることが増えることで、仕事の幅が大幅にアップします。
一つずつできることを増やし、スキルアップしていきましょう。
