TECH EXPERT体験レビューDay9｜J Queryってやる意味あるの？オワコンなの？

テックエキスパート体験9日目に入りました。日曜日ということもあり、教室には短期の方よりも夜間・休日の方の方が多い印象ですが、今日もいつもと変わらず賑わっています。

さてテックエキスパートでは基礎カリキュラムが終わるとJ QueryやJavascriptなどの言語も入ってくることになるのですが、１つだけ懸念があります。

それは「J Queryって学ぶ必要があるの？」ということ。

というのも、以前J Queryなんてオワコンだよという話を聞いた事があるからです。そこでまずはJ Queryとはどんなものなのか、そしてオワコンなのかちょっと考えてみたいと思います。

Jqueryとは

簡単に言うとJ QueryというのはJavaScriptをより簡単に使いやすくしたものということができます。

RubyとRuby on Railsの関係に似ているかもしれません。例えばJavascriptで書くと非常に複雑な処理が、J Queryで書くとものの数行でできてしまう。そんな感じのイメージです。

特にJ Queryが優れているのはイベントの設定が簡単にできるということでしょうか？マウスオーバーした際のアクションや、クリックした際の挙動なども簡単に付与する事が可能です。

で、J Queryってオワコンなの？

で、気になるJ Queryがオワコンなのかどうなのかという問題。結論からお伝えすると、現在ではただのWEBページよりもPWAやSPAが主流になりつつあり、そういったページをコーディングするのにJ Queryは向いてないからオワコンということっぽいです。

PWAとは

PWAとは下記のようなWEBサイトのこと。たしかに最近よく見かけますね。これが最先端というのは頷けます。

PWAとは
PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。

PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。引用：https://www.seohacks.net/basic/terms/pwa/

SAPとは

SPAとはSingle Page Applicationの略で、単一のWebページでアプリケーションを構成する設計構造の名称です。

例えばGmailなどでページの遷移なくデータの読み込みが出来たりすると思いますが、そんな感じでシングルページで色々なことができるのがSPAです。

参考記事；https://digitalidentity.co.jp/blog/creative/about-single-page-application.html

SAPを作るならJavascriptのhtml書き換えが重要だけど、それをJ Queryでやるのは向いてなさすぎるということかな？

で、問題のオワコンですが、上述したようなSAPのページなどを作る際にはJ Queryでは面倒臭すぎてオワコンであるということが主張されているそうです。

一方で、静的なページでちょっと動きを付けたい場合や簡単なページを作るだけであればまだまだJ Queryは活躍する場面は多いようです。

いま勢いがあるのはAngular・React・Vueあたりのライブラリらしいいです

この辺全然知らないのでまた勉強したいのですが、いま人気というか勢いがあるのはこの辺らしいです。

まあいずれもJavascriptのライブラリであるという点で一緒なのですが、ちょっとどんなものか簡単に概要をコピペしておきたいと思います。

Angular

「Angular（アンギュラー）」は、Googleによって開発されているJavaScriptフレームワークです。非常に人気があり、WEBアプリケーションの開発では、Reactなどと並び、最も使われているJavaScriptフレームワークの一つです。

サーバーと連携する機能もあるので、WEBアプリ開発においては何でもできるといっても過言ではないでしょう。無償で利用できるうえ使い方もわかりやすいので、初心者から上級者まで幅広く使われています。引用：https://www.sejuku.net/blog/9019

React

ReactはFacebookで利用されていることで有名なライブラリです。

ReactはFacebookが開発しているUI(MV*フレームワークでいうViewのようなもの)に特化したJavaScriptライブラリです。

大きな特徴としてVirtual DOM(仮想DOM)と呼ばれるレンダリング機構がそなわっており、Webページの表示を従来のフレームワークと比較すると大幅に向上させることが可能になっています。引用：https://www.to-r.net/media/react-tutorial01/

Vueとは

Vue.jsとは、UI(ユーザーインターフェース)を構築するためのJavaScriptフレームワークです。Vue.jsでコードを書く時は、冗長な記述を少なくすることができます。Vue.js独自の規格やルールも少ないため、他のフレームワークよりも自分の好きなやり方でアプリ開発を行うことも可能です。引用：https://udemy.benesse.co.jp/development/web/vue-js.html

 

備忘録コーナー

それではここから備忘録コーナーです。今日はあまり深いことは学習していないので基本をさらっといきたいです。

さすがにprograming学習も100時間を超えてくると何となく理解が早くなった気がしています。（気がしているだけですが）

 

CSS 行間を真ん中にする方法

CSSで文字を行間の真ん中に配置したい場合は、リストやdivの高さとline-heightをおなじにすればOK。

オブジェクト指向のDRY

オブジェクト指向ではDRYといってDon’t Repeat Your selfの通り、繰り返しを避けるという原則があるようです。

繰り返し同じコードが出てくるとバグの温床になりからだそう。

if/else文を書く際の注意点

if/else文を書く際には、読み手が理解しやすいように少しだけ工夫が必要。例えば、条件式には否定ではなく、肯定を使い、単純な条件を先に書くなど。

 

正規表現

特定の文字列が出ているか確認したり、特定の文字を取り除いたりすること。正規表現に関してはRubyだけでなくJavaScriptなど様々な言語でほとんど共有して使うことができる。

subメソッド

指定した部分を置き換えられ得るメソッド。

name="中華を食べる"
name.sub(/中華/, "パスタ")

subの場合は該当する文字の最初しか変更できないので全部変更したい場合はgsubを使う

name="aabb"
name.gsub(/a/, b)
=> bbbb

電話番号のハイフンを取り除く場合

tel=090-9999-9999
tel.gsub(/-/,"")
=> 09099999999

 

matchメソッド

引数に指定した文字列が対象の文字列に含まれているかをチェックするメソッド。

name="aaabbb"
name.match(/[a-z]/)
=> aaabbb

matchデータオブジェクト

matchメソッドで取り出された内容はオブジェクトの形で出されるので [番号]で取り出すことも可能。

matchメソッドの様々なやつ

[a-z]

かっこで囲まれた文字のいずれか１個にマッチするかをチェック。例えば[a-z]ならa~zのいずれかにマッチしているかというチェック。

'name'.match(/[a-c]/)
=> a

\dで数字にマッチをみる

dは特殊文字で数字を表すそうで、この特殊を表す場合は＼をつける決まり。先ほどの[a-z]\dで組み合わせることにより、英数字のいずれかにマッチという正規表現の抽出が可能

{a,b}で直前の文字が少なくともa回、大きくてb回マッチするもの

これはパスワードとかの文字数制限に使えるもので、{}で括った回数までに入力を制限することができます。

iで大文字小文字無視

最後に「i」を付けると大文字小文字関係ないと言う風にすることができます。

まとめるとこん感じ

password="A1ab3456"
password.match(/[a-z\d]{6,8}/i)
=> A1ab3456

 

「.」でどの1文字にもマッチ

「.」があるとどの文字にもマッチする。（悪く言えばなんの文字でもマッチさせる）

「+」で、直前の文字の繰り返しにマッチ

「＋」は直前の文字の繰り返しにマッチする。つまり　aabbbbというのがあって、bを抽出したいという指示を出すと「bbb」という風に3つともとってくる。

これを生かすと「@以降全取得」みたいなことも簡単

mail=mail.name@gail.com
mail.match(/@.+/)
=> @gmail.com

その他正規表現まとめサイト

正規表現に関してはこちらのページに網羅的に掲載されています。

参考記事；https://qiita.com/agotoh/items/87960d256e427d5673a9

 

JavascriptをHTMLに表示するにはscriptタグを使う

そのままですがJavascriptをHTMLに表示するにはscriptタグにそのまま書いたり、scriptタグで別のjsファイルを読み込んだりします。

window.alert()

読み込んだ時にアラートを出せるメソッド。

window.alert("")でOK

条件式 if

rubyと似ていますが、Javascriptでもif文で条件分岐が作成可能です。

if(条件式){
処理
}

pushメソッド：末尾に配列の要素を追加

var team=["a","b","c"]
team.push("d")
team
=> d

※先頭に追加したい場合はunshift()

繰り返し

for(初期値:;条件式;増減値){
処理 
}

例えば10まで数字を繰り返す場合は下記のような感じ。

for( var i = 0 ; i < 11, i++){
console.log(i);
}

参考記事：https://www.sejuku.net/blog/20777

関数

javascriptで関数を定義する場合はfunction文を使用する。ちなみに関数とは様々な処理を１つにまとめられるメソッドです。

function name(){
処理
}

ここで言うとnameが関数です。nameの後ろのかっこは引数を持ってくることができます。

function name(user){
 console.log(user + "さんといいます");
}

参考記事：https://blog.codecamp.jp/javascript-function-use

J Queryについて

さてここからはJ Queryです。最近では勢いのないフレームワークですが、いまだに需要は多いようですので知っていて損はないかと思います。

J Queryを使えばHTMLの書き換えやクリックした時の挙動など様々なことが簡単に実装可能です。

HTMLの書き換え

$(function(){
  $("#セレクタ").text("あああ");
  $("#セレクタ").html("<span>あああ</span>);
});

この中で.textをするとテキストを指し、.htmlで入れ込みたいHTMLコードを入れることができる。

ちなみに、冒頭の$functionを「$]でくくっているのは、他のコードが全て読み込まれてからJ Queryを実行させるためです。

参考記事；https://rfs.jp/sb/javascript/jquery_abc/jquery-selector.html

その他の処理

htmlの書き換え以外にも様々な処理があります。この辺はイベントと一緒に設定される場合が多いようです。

fadeIn(),hide(),show().など。

また.html()と同じようにhtmlを追加できるものとしてappend()というものがあります。.html()では要素が上書きされますが、.append()だと単純に追加してくれるので便利です。※消す場合はremove

またclass名を追加したり削除したりするには　addClass(),removeClass()を使います

参考：https://www.sejuku.net/blog/37847

イベントについて

javascriptやjqueryではイベントを設定することができる。

on()メソッド

これがイベントを設定するメソッドで、何がおきたら何をするのかを指定することが可能。

$(function(){
 $("#セレクタ").on("イベント名",  function(){
 処理
 });
});

設定できるイベントは多数

click, dbclick, mouseover,mouseout,keydown,keyup,changeなど様々なイベントを設定することができる。