jQueryで動きのあるページを作ろう♩Webデザインで自己肯定感もアップ!

[toc]

jQueryとは

まず、jQueryってなあに?って思ったあなたにはこちら  ↓

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。 jQuery – wikipedia

例えば、以下のアーティスティックな動きのあるページはJavaScriptで出来ています。
とってもきれいですよね!

これはプログラマーが作ったものですが、「Fork」すれば自分のものとして使う事が出来ます。
いくらフォークできても、やはりそこには著作権が存在することを忘れてはいけません。
著作者の意向を一番に尊重した上で使う様にした方がいいです。
Readmeファイルを必ず読んで使う必要性があります。どのプログラムでもそうする必要があります。

 

ライブラリとは

けれどもソースコードは複雑で多種多様なので、大抵のものは「ライブラリ」として公開されています。
だからほとんどの場合、勝手に使わせて頂く事が可能です。多くの人は難しいコードを覚えたいと思いませんから。。
そして このコードが少しでも解る様になれれば、アレンジして自分のものとしてライブラリに登録することもできます。
初心者の方は、一から勉強したいかもしれませんので、公式サイトも紹介しておきます。

What is jQuery ?   https://jquery.com/

サンプルアーカイブ(jQuery利用例)

「canvas」 とは

少し話が戻りますが、jsdo.itの公開ソースにある 「canvas」についても少し触れていきます。
端的に説明すると、HTML5で使用する「JavaScript」 の 「canvas要素」です。
HTML5についての説明が必要であれば、こちらに記事を投稿していますので ご一読ください。
つまり、HTML5の中に自由に描画できる領域を作成するというAPIです。
(*APIについて不明な場合は、前回の記事を参照ください)
APIは簡単にサービスが作れるプログラムでしたが、今回は静止画像を要素で定義して貼付ける手法として使われています。
HTML5といえばレスポンシブデザインなので、レスポンシブデザインについて再度復習しておく必要があるかもしれません。

デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。-Wikipediaより引用

jQueryは「JavaScript」と呼ばれるスクリプト言語で、Canvasとは違って「動的スクリプト」と呼ばれるものです。
「Java」というプログラミング言語もありますが、それとは別物です。ややこしいのですが、よく混同されるので、頭に入れておく必要があります。
もしあなたがホームページを開設したのであれば、今すぐにでもライブラリからソースを読み出しすることもできるという訳です。
それぞれのスクリプトを扱える様になれれば、今すぐにでもフロントエンドエンジニアの一スキルとして経歴書に書くことができます。応募できる会社が増えます。
サンプルデモ :ParticleJS-master

今日も最後までお読み頂きありがとうございました。

Liked Liked
No Comments