0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript入門メモ

Last updated at Posted at 2021-02-08

#項目

  • node.js
  • 基本的なやつ全般
  • 真偽値
  • if文
  • for文
  • 関数
  • 配列操作
  • cosole.???でオブジェクトの中身を見る

追記
全体的に変数の宣言をvarで書いてしまったが、基本的にはletの方が良い
varはif文やらfor文やらで作った変数を外で使いたい場合のみにした方が良いかもしれない

node.js

node.jsとはサーバサイドでJavaScriptを動かせるものとの事だが、簡単にいうとpythonとかみたいに自他問わずpc等で動かせる環境というやつ。

bash
#brewでバージョン管理出来るやつをいれる
brew install nodebrew

#確認
nodebrew -v
#バージョンが色々表示されたらOK

mkdir -p ~/.nodebrew/src

#インストール
nodebrew install-binary stable
#安定版で安牌

#確認
nodebrew ls
------------------------------------
v~~.~~.~~

current: none
#こんなのが出てくればOK
------------------------------------

#有効化
nodebrew use v~~.~~.~~

#確認
nodebrew ls

------------------------------------
v~~.~~.~~

current: v~~.~~.~~
#こんなのが出てくればOK
------------------------------------

#PATHを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

#zshの場合のPATH通し
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

#ターミナルを再起動(sourceでも良いけど)
node -v

#ここでバージョンが出ればOK

基本的なやつ全般

//末尾にセミコロン
//実行は node ディレクトリ名
//node test.jsみたいな
------------------------------------------------------------------------------------------
// コンソールにログ出力
console.log("Hello World");

//Hello World
------------------------------------------------------------------------------------------
//変数の宣言
var name = "あああ";
console.log(name);

//あああ
------------------------------------------------------------------------------------------
//配列
var lis = [];
//pythonのappendみたいのがpush
lis.push("abc");
console.log(lis[0]);

//abc
------------------------------------------------------------------------------------------
//オブジェクト(pythonで言う辞書)
var object = {};
//object.~~ ←ここでkeyを指定する
//keyは[~~~]で指定しても良いらしい
object.name = "abc";
//object["name"] = "abc";
console.log(object);
console.log(object.name);

//{name:"abc"}
//abc
------------------------------------------------------------------------------------------
//undefined
//値自体が割り当てられないと言う事
//nullとは違う
var value = undefined;
//or
var value;
------------------------------------------------------------------------------------------
//データ型の変更(strに)
var value = 123;
var value2 = value.toString()
console.log(value2 === 123)
console.log(value2 === "123")

//false
//true
------------------------------------------------------------------------------------------
//==と===の違い
//==はデータ型関係なく数値が同じかどうか
//===はデータ型も含めて数値が同じかどうか
//変なの
var value = 123;
var value2 = value.toString()
console.log(value2 == 123)
console.log(value2 === "123")

//true
//true
------------------------------------------------------------------------------------------
//データ型の変更(intに)
var value = "123";
//parseInt(変数名,何進法で変換するか2~32)
var num = parseInt(value,10);
console.log(num === 123);

//true
------------------------------------------------------------------------------------------
//インクリメント(1ずつ増やす)
//デクリメント(1ずつ減らすは--)
var number = 1;
console.log(number);
//+1した値を返す
console.log(++number);
//+1する前の値を返し、ついでに+1しといてくれる
console.log(number++);
console.log(number);

//1
//2
//2
//3
------------------------------------------------------------------------------------------
//AND演算子(両辺がtrueならtrue,そうでないならfalse)
console.log(true && true)
console.log(true && false)

//true
//false
------------------------------------------------------------------------------------------
//OR演算子(どちらかがtrueならtrue,そうでなければtrue)
console.log(true || false)
console.log((false || false)

//true
//false
------------------------------------------------------------------------------------------
NOT演算子(true,falseを反転させる)
console.log(!true)

//false
------------------------------------------------------------------------------------------
//不等価演算子(!=で両辺が等しくない場合にtrueを返す)
//当然!==で型も違うかを判断出来る、基本こっちの方が良いと思う
console.log(10 !== "20")

//true
------------------------------------------------------------------------------------------
//関係演算子(所謂 > とかを使い、条件が合ってればtrue)
console.log(10 > 1):

//true
------------------------------------------------------------------------------------------


#真偽値
真偽値(true,false)というのが有り、

  • 0とかNaN、空文字やnullundefinedfalse
  • それ以外の値や配列はtrue
    と扱われる。
    これへの変換はBoolean()を使用する。
javascript
var value1 = 0
var value2 = 9999

var boolean1 = Boolean(value1)
var boolean2 = Boolean(value2)

console.log(boolean1)
console.log(boolean2)

//false
//true

#if文
pythonとかと何ら変わりは無い

if (条件式){
  処理内容
} else if (条件式) {
  処理内容
} else {
  処理内容
}
var number = 1;
if (Boolean(number) === true){
  console.log("Hello, World")
} else if (Boolean(number) === false) {
  console.log("Hello, Japan")
} ;

//Hello,World

ちなみに似たような動きのswitch文も有る、
使い分けとしては可読性をあげたい時とか?

var name = "white";

switch (name) {
  case 'black':
    console.log('Hello');
    //1処理ごとにbreakした方が良いらしい
    break;
  case 'white':
    console.log('World');
    break;
  //elseと同じ
  default:
    console.log('Hello, World');
}

//World

##三項演算子
所謂公式の内包表記みたいな1行で書けるやつ

条件式 ? trueの時の処理 : falseの時の処理;
var name = "white";

var message = name ===  "white" ? "Hello, World" : "Buy";
console.log(message);

//Hello, World

#for文
種類がいくつか有る

let lis = ["A","B","C","D"]

###無印のfor

for (var i = 0; i <= 3; i++){
  console.log(lis[i]);
}

//A
//B
//etc

###for in(基本objectで使ってる)

let obj = {name:"tom", age:14, sex:"M"}

for (let i in obj){
  console.log(obj[i])
}

//tom
//14
//M

###for of(pythonのforに似ている)

for (let i of lis){
  console.log(i)
}

//A
//B
//etc

取り敢えず今はこれぐらいで...

#関数

function 関数名(引数){
  処理内容
}

//呼び出し
関数名(引数);

この形で書く

//例
function sum(a,b){
  return a + b
};

let x = sum(2,5);
console.log(x)

//7

###callback関数
関数の処理中に引数として他関数の処理を使いたい場合に用いる

function hello(a){
    console.log("hello, " + a)
}

function world(callback){
    var a = "world"
    callback(a)
}

world(hello);

//hello, world
  • 他関数の処理を使いたい関数は、引数にcallbackを入れる
  • その関数内で`callback(他関数に必要な引数)
  • ここだと擬似的には
var a = "world"
console.log("hello, " + a)

こんな感じの処理がされている

  • 普通に引数として関数を渡すと、その関数の処理の結果が渡されてしまう

###return
pythonとかと同じ

function sum(a,b){
  return a + b
}

let x = sum(2,3)
console.log(x)

//5

#配列操作
###長さの取得

let ar = ["A","B","C"]
console.log(ar.length)

//3

###追記

let ar = ["A","B","C"]
//末尾に追記(appendと同じ様に)
//pushを使う
ar.push("D")
console.log(ar)

//["A","B","C","D"]
------------------------------------------------------------------------------------------
//先頭に追記
//unshiftを使う
ar.unshift("a")
console.log(ar)

//["a","A","B","C","D"]

###結合

//concatを使う
let ar1 = ["A","B"]
let ar2 = ["C","D"]

let ar3 = ar1.concat(ar2)
console.log(ar3)

//["A","B","C","D"]

###配列からの取得

  • 基本はpythonみたいにar[0]って感じでスライスして取得できる
  • 末尾を取得するのは.length -1
//例
let ar = [1,2,3]
for (i = 0; i < ar.length; i++){
  console.log(ar[i])
}

//1
//2
//3
  • 置き換えもar[0] = ???みたいに指定してやるやつ
  • 先頭を取得してそのまま元配列から削除してしまうのは.shift()
//例
let first_one = ar.shift()
console.log(ar)
console.log(first_one)

//[2,3]
//1

-末尾の場合は.pop()

//例
let final = ar.pop()
console.log(ar)
console.log(final)

//[1,2]
//3

###要素入れ替え

  • 配列の途中から要素を入れ替える、.splice(消す場所,そこから幾つ分消すか,入れる値1,入れる値2,etc...)
let ar = [1,2,3,4]
var disp = ar.splice(1,2,8,9)
console.log(ar)
console.log(disp)

//[1,8,9,4]
//[2,3]

###途中に要素を追加

  • .splice()を使う
  • 2番目の引数を0にする事で、入れ替える値の数を0に、そうする事でただ割り込ませる事が出来る
  • .splice(場所,0,入れたい値)
let ar = [1,2,3,4]
ar.splice(2,0,9)
console.log(ar)

//[1,2,9,3,4]

###要素の削除

  • これも.splice()
  • 入れる値を指定しない事で削除だけ出来る
  • .splice(場所,消す値の数)
let ar = [1,2,3,4]
ar.splice(2,2)
console.log(ar)

//[1,2]

###要素の検索(先頭から)

  • .indexOf(検索する値)を使う
let ar = [1,2,3,4,5]
let where_num = ar.indexOf(2)
console.log(where_num)

//1

#cosole.???でオブジェクトの中身を見る

console.log(JSON.stringify(object));

//OR

console.dir(object);
0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?