[Web制作日記#22]jQueryを解説してみる。

夜遅くて眠い中日記を書いてます。どうもベアさんです。

22日目にしてアウトプットシリーズ最終回の今日は

ベアさん

jQuery(ジェークエリ)を解説していくよ〜〜

ってことで、いつも通りなんちゃってアウトプットしていきます。

ちなみに…過去作は以下の通りです↓

今回も「jQueryって何？」って人でもわかるように解説してますので、ぜひ最後まで読んでいただけると嬉しいです。

ベアさん

プログラマー / 起業家

Profile

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。

プロフィールを読む

X

jQueryを解説してみる

いつも通り

の２つを解説しますね↓

頭の中にあること

前提知識

って人もいるはずです。

まずはjQuery(ジェークエリ)の前提知識を解説します。

結論だけ言うと、

がjQueryの前提知識です。

JavaScriptとはフロントエンド(ユーザーが見る側)の操作が得意なプログラミング言語のことですよー！

また、フレームワークとは「プログラミング言語をまとめて使いやすくしたもの」でカレーのルーみたいなものです。

ベアさん

なので、ローディング画面など(例：株式会社モンブランさん)の動くWebサイトをjQueryで実装できるよ！

ちなみに…JavaScriptを知りたい人は下記でまとめてます↓

あわせて読みたい

[Web制作日記#7]JavaScriptを解説してみる。

詳細なできること

悩む人

いや、動くWebサイトって言われてもイメージわかないよ…

って人もいるはずです。

そこで、もっと詳しくできることを書きますね↓

など、要するになんでもできます笑

Webサイト見てて「かっこいい」って思ったことは大体できるのがjQueryであり、プログラミングです。

興味を持ってWebサイトなどを見てみると、楽しいと思いますよ！

コード・関数一覧

コードとか関数とか、書いといてなんですがほぼ覚えてないです。(なので、以降は調べながら書いてます笑)

基礎文法

みたいです。

例えば

// ボタンを押したら、ボタンの文言をClickedにする
$('button').click(() => {
  $('button').html('Clicked')
}

みたいな感じでコードを書けばOKなようです。

なので、必然的に覚えるべきは「メソッド」になりそうですね。(もっと言うと、何ができるのか？を覚えとく)

その上で、僕がパッと思いつくメソッドは

などがあります（え？すくな！）

ベアさん

ここまでjQueryについて覚えてないとは…笑

自分でもびっくりしてるよ！

まぁ、後で調べてみます！

調べてなるほど！って思ったこと

jQueryのメソッドを全然覚えてなかったので、よく使うメソッドを検索して一覧にしてみました↓

などなど…いっぱいありました！

参考にしたサイト↓

(わかりやすい記事ありがとうございます)

そんな感じです！あとは、必要になったら検索すればえっかな〜って思ってます。

他のサイト見て研究してる

日常ネタっていうか…ですが、ポートフォリオを作るにあたって他のサイトを見て研究してます。

人気のサイトってプロの方が作られてるので、やっぱり学びになることが多いんです。

ちょっとそのことについて共有したくて

の３つを書きますね。

結論は、「まずは要素、デザインともに似たように作って、ユーザーの反応見ながらオリジナリティを出せば良い？」って思ってます。

それでは、見ていきましょう↓

デザイン、要素ともに参考になる

人気のサイトを見てたら、まず参考になるのが「デザイン」です。

僕がデザイナーさんと一緒に仕事をしたり、お話しした時によく聞くのが

などです。

注目して欲しいのが「UIを他のサイトやサービスから持ってくることが多い」で、意外とパクリ笑が多いってことですね。

なので、僕も

ベアさん

人気のサイトの構成とか、真似させてもらうよ！

って素直に思いました。

いや〜これが後発組のメリットなので、存分に活かしつつ感謝もしつつ頑張ります。

プラスアルファをつけるべきか？

いいところは真似させてもらうのはよしとして、疑問に思うことがあります。

それは、

ってことです。

これは結構悩むところですが、個人的には「オリジナリティはなし」って思ってます。

なぜなら、大体のケースでダサくなるからです。ど素人で、その上にデザインが苦手な僕がオリジナリティ出したら終わります笑

ベアさん

ただ、オリジナリティ出さないのも問題があるよ！

主な問題は「埋もれちゃう」ことなんだ。

なので、全然反応がなかったり、サイト回遊率が低かったりした場合はオリジナルを足して差別化するのもありかなって思います。

以上、「オリジナリティは必要？」でした！

まだまだ道は長そう。。。

プロのサイトを見るたびに、Web制作の道は短そうでまだまだ長いことに気付かされます。

って思うことばっかりです。

でも、そんな中でも一歩ずつ頑張りたいです。

今日もブログが書けてよかったっす。本業の方が忙しくて夜遅いですが「毎日継続や」って思ってやってます。

挑戦されてる皆さん、一緒に頑張りましょう！

次回：ポートフォリオ作成編スタート！

次回はポートフォリオ作成編がスタートしたので、「これからやること」を改めて整理します。

割と戦略的なところで大切なことなので、興味がありましたらぜひ見てほしいです。

お楽しみに！

P.S

23話書いたよ↓

あわせて読みたい

[Web制作日記#23]ポートフォリオ作成編始まるよー！

Web制作日記のアーカイブはこちら↓

あわせて読みたい

Web制作日記のアーカイブ【随時更新】

ベアさん

プログラマー / 起業家

X

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。