はじめに

Web制作では切っても切り離せない存在の「JavaScript」。
難しいイメージがあり、敬遠される方も多いのではないでしょうか？

ですが、WebデザイナーでもWebコーダーでもJavaScriptを理解しておくことはとても重要です。

例えば、

Webデザイナー🧑‍🎨
→ JavaScriptで表現できること / できないことを知っておくことでデザイン時にその考慮ができる。
Webコーダー👩‍💻
→ HTML、CSSのみ(いわゆるマークアップエンジニア)だとノーコードツールや単価低下の影響で市場価値が低下しつつあるので、JavaScript力の向上が求められる。

といったように、Web制作に関わる方はJavaScriptの理解が必須になりつつあります。

今回は「Webデザイナー / WebコーダーがJavaScriptの理解を深めるためにやるべきこと９選」を対象を２段階に分けてご紹介したいと思います。

２段階の内訳と対象は以下の通りです。

見出し番号	対象
1 ~ 5	WebデザイナーなどWeb制作作業を行う人全般
6 ~ 9	JavaScriptでバリバリコーディングする人 / する予定の人

本記事が参考になるかもしれない方

👩‍💻 WebデザイナーでJavaScriptの特徴について学びたい
👨‍💻 Webデザイナー / WebコーダーでJavaScriptを扱う方 / 扱う予定のある方
🧑‍💻 エンジニア経験が浅い方

本記事があまり参考にならないかもしれない方

🧑‍🏫 エンジニアの実務経験が十分ある方

本記事内では説明しないこと

タイトルにある通り「やるべきこと」を順に紹介していきますので、
基本的に各項目について、文法などの詳細な内容には触れません。
(詳細まで書くとこの記事内では収まらないため)

参考になりそうなリンクを添えておくのでそちらを見ていただきたいです。

1. 業界を知る🌐

いきなり大きな話から入りますが、この知識が少ない状態で業務をしている方も
意外といらっしゃるのではないでしょうか？

✅ 自分がIT業界のどのポジションでどんなことをしているのか
✅ JavaScriptはどこでどうやって動くのか
✅ JavaScriptに関連する様々なIT知識

などを理解することは後々大事になってきます。

とは言ってもかなりの知識量になるので、この記事内では詳しい説明は割愛します。
以下を参考に勉強してIT業界について理解を深めておきましょう。

ITパスポート試験 (資格取得の必要はないですが、合格できる程度の知識があることが望ましいです。)

参考記事

この後に紹介することと同時に少しずつ学習していくと吉です。
Web、IT業界では知識が増えてくると、別々に学んでいたことが繋がる日がいつかやってきますので地道に学んでいきましょう。

2. マークアップ言語、スタイル言語を知る🧑‍🎨

本記事はJavaScriptメインなので割愛しますが、JavaScriptの前にHTML・CSSを理解しておきましょう。
以下のサイトが理解しやすいです。

3. JavaScriptの歴史、特徴を知る🕰

プログラミング言語は世の中にたくさんあるので、
自分が扱う言語の特徴を押さえておくことは重要です。
JavaScriptの立ち位置を理解するためには１つめに紹介した業界知識が必須になってきます。

業界知識が浅い状態でJavaScriptの歴史や特徴を学んでも
「ふーんそうなんだ」くらいの感覚になると思いますが、業界知識が深まってくると
「これはそういう意味だったのか」と理解できるようになってくると思います。

参考記事

4. JavaScriptの文法を知る🖌

JavaScriptを書くためには文法を学ぶ必要があります。
プログラミング言語は1つでもミスがあると意図した動きになりませんのでしっかりと学びましょう。

全てを覚えるのは現実的ではないので、基礎を集中して学びましょう。
基礎がしっかりしていれば、少し調べるだけで応用が効くようになります。

文法については書籍やWebに山ほど解説がありますのでこの記事では説明しませんが、
おすすめの書籍を載せておきます。

歴史や特徴も知れるのでおすすめです。

参考記事

5. JavaScriptを書いて動かしてみる🎮

文法の勉強は大事ですが、プログラミングはとにかく手を動かさないとなかなか身につきません。
まずはお題を解決するコードを書いてプログラミングの感覚を掴みましょう。

Webで公開されている練習問題がおすすめです。

Webから入った方はJavaScriptをコピペして使うことが多いと思いますが、
意味を理解していないとちょっとした改修や不具合に対応できません。

基礎的な文法とわからないことを調べる癖をつけておけば、
コピペコードの意味を理解するのもそう難しくはないはずです。

6. 論理的思考力を鍛える🎲

JavaScriptは「プログラミング言語」です。
プログラミングでは論理的思考力(ロジカルシンキング)が重要になってきますので、
こちらも合わせて練習しましょう。

プログラムは指示(コード)通りに動くので、物事を道筋立てて考える力は必須になります。

個人的には以下の解説が分かりやすかったです。

よりプログラミング的な考え方を鍛えたい場合、少し難易度は高めですが
「アルゴリズム」を学ぶことをおすすめします。

比較的難易度の低い「バブルソート」などから取り組んでみると良いかと思います。

7. 綺麗なコードを意識する✨

基本的なJavaScriptを書けるようになってきたら、
次の段階として綺麗にコードを書くことを意識しましょう。

具体的には
✅ インデントがあってコードが読みやすい
✅ 処理が機能単位で関数にまとまっている
✅ 同じ処理を複数回書かずに関数やループを使ってまとめる
✅ 条件分岐、関数のネストを深くしすぎない
✅ 処理内容や役割がわかりやすい命名がされている
✅ 処理の意図がわかりづらい部分にコメントがされている
✅ 1ファイルのコード量が多すぎない

「他人が読んでも理解できるか」ということを考えながらコーディングしましょう。
また、適切な単位での分割や共通化を行うことで保守性の向上に繋がります。

「リーダブルコード」という本が有名ですので一読することをおすすめします。
Webで要約してくれている方もいますのでまずはそちらを確認してみても良いかもしれません。

参考記事

8. エラーの対応方法を知る🚨

プログラミングにエラーはつきものなのでエラー解決能力はとても重要です。

ここはある程度経験も必要になってきますが、経験を積むためにも
基本的な対処方法はチェックしておきましょう。

また、事前に起こりうるエラーを想定して「このエラーがでたらこの処理を行う」といった
「エラーハンドリング」もできるようにしておきたいです。

エラー解決の方法

✅ ブラウザの開発者ツールを活用する
✅ エラー文をしっかり読み、該当箇所をチェックする
✅ エラー文を検索する
✅ 範囲を絞って原因の切り分けをする
✅ 自分で解決できない場合は有識者に質問する
✅ 解決しない場合、目的を再度確認して別の手段を考える

参考記事

エラーハンドリング

以下の記事がわかりやすかったです。

9. JavaScriptのライブラリ、フレームワークを活用する🚄

よりコーディングを効率化したり、エラー対応をしやすくするためには
ライブラリやフレームワークを活用しましょう。

ここまでくるとフロントエンドエンジニアを名乗れるレベルだと思いますので、
スキルアップを目指す方は頑張って学習しましょう。

JQuery

JQueryはJavaScriptをシンプルに記述できるようになります。
JavaScript単体では複雑な実装もJQueryを活用することで簡単なコードで実装できたりして業務の効率化につながります。
ただし、闇雲に使っていては保守運用が大変になってしまうので、使い所や設計はきちんと考える必要があります。

参考記事

TypeScript

簡単に言うと、TypeScriptはJavaScriptの進化バージョンです。

基本的な文法はJavaScriptと同じですが、「型」(Type)という概念が追加されています。
変数や関数、関数の戻り値が「数値」なのか「文字列」なのかといったことを定義します。

これによって意図しない値の代入や意図しない値が戻されることを予防できるため、
エラーを事前に発見しやすくなります。

参考記事

React

ReactはJavaScriptのライブラリで、UI(ユーザーインターフェース)の構築に特化しています。
主にWebアプリ開発で使用され、最近では扱う会社も多く非常に需要の高いスキルとなっています。
Reactの他にも類似のライブラリとしてVue.jsやAngularJSがあります。

参考記事

最後に

Web業界やSNSなどの一部ではコーディングは簡単に身に付くと言われ軽視されがちですが、
実際は膨大な知識と論理的思考力が必要で難易度はかなり高いです。

いきなり初学者がすべてを理解できるほど甘くはありません。
しかし、基礎から地道に勉強・練習を重ねれば、徐々に身についてくると思います。

という感じで締めたいと思います。どなたかの参考になれば幸いです。