TECH EXPERT体験レビューDay10｜JavaScriptが難しい件

さて本ブログもいよいよ大台の10日目に突入しました。最近はJavaScriptあたりをやっているのですが、正直非常に難しいですね。

JavaScriptを使えば色々な処理が出来る一方で、理解するまでに少し時間がかかりそうです。そして様々な記事を参考にしているのですが、どれも難しく初学者にはハードルが高いなと思っています、、。

テックエキスパートの教材は言わずもがなですね。笑　もはやあてにしていません。笑

管理人

今日は備忘録のみとなります

JavaScript備忘録

イベントバブリング

Javascriptにはイベントバブリングという仕組みがある。これは、ある子要素がクリックされた場合、その親要素にもそれが伝搬し、クリックされたことになるというもの。

ちなみにストップしたい場合はstopPropagationでストップできるそうです。

参考記事：ちゃんと知ってる？JavaScriptのイベントバブリングを学ぼう

フォームの値を取得する方法

フォームの値を取得するにはval()を使用することで実現可能。

$(function(){
  $("#セレクタ名a").on("click" function(){
  input=$("#セレクタ名b").val();
  $("#セレクタ名c").text(input);
});
});

こんな感じにするとセレクタ名aをクリックした時にセレクタ名bの内容を読み込みセレクタ名cのテキストとして出力することができます。

Javascriptで配列を１つずつ取り出す方法

JavaScriptで配列を１つずつ取り出す場合には$.each()を使用する。第一引数に配列を取り、第二引数に行いたい処理を書く。また、その処理の引数には第一引数にインデックスをとり、第二に配列の要素が入る。

var names = ['a', 'b', 'c'];

$(function() {
  $("#セレクタ名").on("click", function() {
    var input = $("#input").val();
こっから！
    $.each(names▶︎取り出したい配列, function(i▶︎インデックス, name▶︎要素) {
      if (input === name) {
        $("#result").text(input);
        return false;
      }
    });
  });
});

RegExp(正規表現)

文字列の検索や抽出などが出来るようになる正規表現。これをJavaScriptで行うにはRegExpを使う必要がある。

基本パターン
var name=new RegExp(正規表現抽出の色々,iとかのあれ);

例
var name = "1, 2, 3, 4"
var a = new RegExp("[1-3]",\d);
var result = name.match(a);

=> [1,2,3]

まあ実はこんな単純な場合は、このRegExpなんて使わない方が断然楽なのですが・・・

var name="1,2,3,4"
name.match("[1-3]");

管理人

正直よく分からないんだけど、探したら分かりやすい記事があったので参考に置いておきます。

参考記事：正規表現

splitで文字を切る

.split()を使えば文字を切ることも可能。これに関してはquiitaのこちらの記事がとても参考になったのでそのまま引用させていただきます。

ar str = "abcdabcdabcd";   //strはstringの略で文字列の変数を作るときによく使うようです。
var s_str = str.split("d");　//1行目で定義したstrに対して文字列dで分けたものをs_strとします
console.log(s_str);　　//s_strを出力します。

var str = "abcdabcdabcd";   //abcdabcdabcd  
var s_str = str.split("d");　//  ["abc", "abc", "abc", ""]
console.log(s_str);　　// ["abc", "abc", "abc", ""]
※配列の形で出力される

繰り返し処理「.map()」

mapに関してはこちらの記事が分かりやすかったので参考にしています。map処理の基本的な使い方は下記。

var array = [ 配列データ ];
 array.map( コールバック関数 );

んーと、コールバック関数ってなんだっけ？

このコールバック関数、Javascriptでは頻出というか常識みたいなのですが、よく分からないので少し整理したいと思います。

整理しようと思い１時間くらい様々な文献をみましたが結局よく分からなかったです。とりあえず言えることは「コールバック関数とは関数に引数として渡せる関数のこと」です。

参考記事：https://wa3.i-3-i.info/word12295.html

mapはこんな感じで使う

でmapですが以下のように使うことができます。

var number=[1,2,3,4,5]

var example= number.map(▶︎これがコールバック関数function(value){
return value*2
});

console.log(example);
=> [2,4,6,8,10]

こんな感じです。なので.map()は配列１個１個を呼び出して何かしらの処理を行えるものということになります。

まとめ

とりあえずJavaScriptは関数が引数として関数を使えるのでややこしい感じですね。もう少し慣れていけば徐々にわかってくるような気もしますが、少し文献をあたるなど学習法を変えてみようかなと思っています。

とりあえずテックエキスパートの教材では全く分かりません。。。

テックエキスパートレビュー体験談