jQuery入門

jQueryを使う意味と簡単な初期設定方法
【学校サイトなどでは教えないノウハウ】


 jQueryとはWebブラウザー内(クライアントサイド)のJavaScriptを、より簡単に使うための無料のライブラリーです。

 ライブラリーとは自分で多くのプログラムを作らなくても、他の人が最初から作ってきた多機能なプログラミング群なので、使うと手間や時間短縮などの得が多いです。

 jQueryを使うとアニメーションなどの多様な表現が出来ます。というのが多くのプログラミング・スクールの売り文句ですが、本当にそうなのでしょうか?

 初心者のうちはスクールで学べば仕事になると誤解している人が多いですが、ネットで検索すれば学ぶのは無料で、その分の予算を自分を宣伝する方に回すのが成功の元です。

 スクールだと売りたいので良い事しか書きませんが、不具合もあるようです。ここではそれも合わせて、jQueryの簡単な使い方を検証していきます。


jQueryは簡単ではあるがWebやHTMLの知識が少し必要

 WebページにJavaScriptを入れる事により、HTMLやCSSだけでは表現が出来ない動作などを表現できます。

 しかしHTMLやCSSは簡単ですが、JavaScriptはプログラミングの知識が要ります。しかしライブラリーを使うと暗記しなければいけない労力が減ります。

 自称プログラミングのプロの大企業の管理職などは、HTMLを軽視しますが、むしろライブラリーを多用する時代で、HTMLやSEOの方が重要なので軽視は大馬鹿です。

 以下がWebページでjQueryを動作させるソースコード(中身)です。ソースをブログなどで公表すると、タグが強制的に自動変換されたり、 JavaScriptなどのタグの使用が出来ないので、ネットビジネスなどを説明するメンター(師匠)仕事などでは、ホームページを作成できる能力が必要です。


alert1.html 動作を見る
<meta charset="utf-8">
<title>jQuery入門:jQueryでWebページを見る直前に アラート表示をする方法</title>

<!-- オフラインでも使える(推奨) -->
<script src="jquery-3.5.1.js"></script>

<!-- オフラインでも使える (軽量版)-->
<!-- <script src="jquery-3.5.1.min.js"> -->

<!-- オフラインだと使えない(非推奨) -->
<!-- <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->

<!-- /headタグの一行上とbodyタグの一行下にバリュードメインではJavaScriptのバナーが自動挿入される -->
</head>
<body bgcolor="#ffffff">
 <script>
   alert($("span.alert1").text());
 </script>>

<span class="alert1"> jQueryでは、このようにアラートを簡単に表示できます</span>

 JavaScriptの多くは多くの外国語が表示できるユニバーサルコードなので、metaではShift_JISなどではなくuft-8にしておきましょう。

 <!--とはコメントアウトというコメント化し、HTMLと認識させない方法です。これをする意味はページ作成をする時に分かりやすい説明になります。

 JavaScriptのプログラミング部分(ライブラリ)はHTML書類の中に入れる事が出来ますが、そうすると①検索エンジンで検索上位に上がらなかったり、 ②文章が長くなりすぎて作成するのが面倒になるので、外部書類化という「script src="jquery-3.5.1.js"」というようにHTML書類の外の JavaScript書類を読み込んだ方が整理された状態になります。


jQueryの設定方法は簡単で2通りあるが推奨は1つのみ

 他のプログラミング言語と違い、jQueryの設定方法は簡単です。最も簡単な方法は上記の「script src="https://ajax.googleapis.com/ajax/⋯」 のように外部サイトの書類を読み込む方法です。

 しかしこれだといつ外部サイトの方で削除するか分からないので、これだと機能せずに不安定です。しかしこれをやっているスクールなどもあります。 学校や大企業などというのは高い授業料のわりに、とりあえずしか教えずに、実際の作業のノウハウなどを教えません。

 またWebページやソフトウエアの作成では、非推奨な方法も存在しますが、それもたまには使えます。世の中は絶対正しいという事は存在しませんが、 大企業などの無能な管理職などは絶対的な価値観を押し付けます。

 例えば「jQueryと自作のJavaScriptを1ページに一緒に多く入れろ」などと言います。 しかしそれだと動作が変になる事があるので、そういう時はjQueryかJavaScriptだけと、他はPHPなどを使った方が無難です。


jQueryのライブラリー書類をダウンロードし
HTMLと同じ階層に設置するのが良い

 jQueryのライブラリー書類は公式サイトからダウンロードすると、最新版などもあり、最新の知識こそ必要とされます。

 jQueryの公式サイトのダウンロード・ページ から最新版なテキスト書類.jsを保存するだけです。

 上記のページのように英語で表示されていて、プログラミングどころか、得する情報の多くは英語表示が多いです。ただし日本語に翻訳機能もありますが、IT用語は覚えていた方が良いです。学校や駅前留学などで教える英会話の文学系な知識は無駄です。

 なお本ページで使っているjQueryのライブラリー書類「jquery-3.5.1.js」(約3MB)か、軽量版「query-3.5.1.min.js」(約1MB)をダウンロードする方が簡単ではあります。どうせどの書類も容量は軽いので全部、保存した方が得です。

 ダウンロードをしたら、動作させたいHTML書類などと同じ階層に設置します。これを無知な大企業の管理職などはcgi-binディレクトリのように「専用のフォルダにまとめろ」と、 作成者の別のフォルダを見ながら作成する無駄に面倒な作業をする苦労も考えずに言います。こうなるとPHP書類も専用フォルダに入れないと駄目だろ⋯

 Webサイトは質より量であり、質はソースの綺麗さではなく、閲覧者が見る見た目のイラストや企画やキャッチコピーなどの面白さなどです。 ソースは綺麗というよりも、検索エンジンが認める最新なHTML5などが重要ですが、大手サイトでさえ古いHTML4などです。

 大手サイトは検索関係無しに元から有名なので、無名・個人・中小企業などでは参考になりません。無名は大手がやらないような目新しい事を常にしないと、目立たずに儲かりません。 大手と同じように背景色を白地ばかりにするような、シックという地味さは通用しません。なのでjQueryでアニメなどです。

 しかしjQueryも新しくないのと、JavaScriptが多すぎると変な動きになるのと、今はAIやサーバーサイドスクリプトの時代なので、PythonやNode.jsなどのライブラリーなどの勉強をしたり、 Youtubeで動画配信をした方が得かもしれません。

 プログラマーという技術オタクの職人というのは目立たないので儲からずに、動画配信などで営業をした方が儲かるという事です。プログラミングをする手間を省くのがライブラリーを挿入であり、企業も学校で教えている基礎な文法などを暗記する受験勉強力よりも、融通のきいた応用力や営業力を求めているのでしょう。





著者:城神YU(しろかみゆ)
1997年頃にプログラミング経験がなかったのに紹介派遣で
ノートPCメーカーで安月給でJavaScriptも修正させられた人


このページの最初

このページの目次


jQueryは場合によっては、
他のJavaScriptと同じページで併用すると、
動作が変になる可能性があります。


SiroKami AI Defense System Cram-School © 46kami YU, All Rights Reserved.