自分用メモ
※参考:JavaScriptとは?出来る事やライブラリについて
目次
jsやjQueryでエラーで動かない時の対処法
JavaScriptやjQueryといったフロントエンド言語を使っていて
「うまく動かない」「原因がわからない」といったことは
初心者にはよく出てくるし、現役エンジニアでも珍しくない。
この場合、現役エンジニアがどのように調べているのかを解説。
①コンソールでエラーがないか確認する
ディベロッパーツールの「console」を見てみる。エラーの種類は、JavaScriptが原因のものもあれば、
サーバーとの通信に失敗した場合のエラーも表示されるので、
JavaScriptのエラーだけを見ること。
コンソールにはエラーメッセージが表示される。
表示されたメッセージをコピペしてGoogle検索にかけて、
コードを修正していけば大丈夫。
②処理がおかしい箇所を特定する
ケアレスミスのこと。「Console」にコードを入れると、左側に「ログの結果」が、
右側に「そのログの処理の場所」が表示される。

こうして確認すると、どこの場所で間違えたかが分かる。
③デバッグをしてみる
デバッグとは、「バグ(不具合)を見つける方法」のこと。処理を1行1行止めながら、ステップ実行ができるのが特長。
やり方は以下の通り
①「Sources」タブを選択
②左側のjsファイルを選択
③上の中央の画面に、jsファイルの中身が表示されるので確認する
④行番号をクリックすると、その箇所で処理を一旦止める事ができる。

jQueryとは?
jQueryは、JavaScriptを使いやすく拡張したもの
jQueryの中身は、ごく普通のJavaScriptである、とも考えられる。
「jQuery」と「JavaScript」は異なる言語ではない。
jQueryは、単なるJavaScriptのプログラムでしかない。
jQueryで出来ることは、JavaScriptでも実現可能。
用途としては、WebサイトやWebアプリの制作で用いられる事が多い。
jQueryを利用するには、jQueryファイルを読み込む必要がある。
読み込み方法は以下2つがある。
①ファイルをDLしてから読み込む
②Webから直接jQueryファイルを指定して読み込む
jQueryで出来ること
・Ajax:外部ファイルを動的に読み込む
・属性や要素の操作
・フェードイン、フェードアウト等のスライドショー
・マウスオーバーでの画像エフェクト
・メニュー機能の増加ソートや検索機能の制作
・イラストやグラフ、図形などの描写
・SNSシェアボタンの設置
・リアルタイムで動く画像の作成
・レスポンシブデザイン対応
・フォトギャラリー:
→09→gallery→finish→index.html
・スライドショー:
→10→slideshow→finish→index.html
備忘録メモ
jQueryは「ライブラリ」である
ライブラリとフレームワークはややこしいので違いを理解する
※参考:ライブラリとフレームワークの違い
この記事へのコメントはありません。