Webエンジニア目指して#21

どうも交代勤そろそろ潮時マンです

コードの埋め込みなんか違うよなあって思ってたんですけど、 Markdown記法なんてものがあったんですね！早速使っていきます

今回はJavaScript VIです

配列の末尾に要素を追加する

変数名.push()

使用例

const sample=[1,2,3,];
console.log(sample);
sample.push(4);
console.log(sample);

実行結果
-----
[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]

配列の要素ごとに処理をさせる(forEachメソッド)

配列名.forEach

使用例

const sample = ["a","b","c","d"];

sample.forEach((ArrayNo)=>{
  console.log(ArrayNo);
});

実行結果
-----
a
b
c
d

こんな感じでメソッドの中にある引数と処理のセットをコールバック関数というらしいです。 仕組みはわかるんですけど言葉にしようとすると難しい...

配列の中の条件に合う最初の要素を探す(findメソッド)

配列名.find

使用例

条件「配列名numbersの値が3の倍数」

const numbers = [1, 3, 5, 7, 9];

const foundNumber=numbers.find((number)=>{
  return number%3===0;
})

console.log(foundNumber);

実行結果
-----
3

findメソッドはこんな感じでコールバック関数の中身で見つけたい条件を記述します。 そして条件に合う要素を見つけたら終了します。なので最初の1つ目しか処理をしてくれません。 下のようにオブジェクトも扱う事もできます

条件「配列名charactersのプロパティidの値が3」

const characters = [
  {id: 1, name: "茄子"},
  {id: 2, name: "もやし",},
  {id: 3, name: "ハム",},
];

const foundCharacter=characters.find((character)=>{
  return character.id===3;
})

console.log(foundCharacter);

実行結果
-----
{ id: 3, name: 'ハム' }

配列の中の条件に合う要素を探す(filterメソッド)

findメソッドの複数版ですね。

配列名.filter

使用例

条件「配列名charactersのプロパティidの値が奇数」

const characters = [
  {id: 1, name: "茄子"},
  {id: 2, name: "もやし",},
  {id: 3, name: "ハム",},
];

const foundCharacter=characters.filter((character)=>{
  return character.id%2!==0;
})

console.log(foundCharacter);

実行結果
-----
[ { id: 1, name: '茄子' }, { id: 3, name: 'ハム' } ]

配列内の全要素に処理をする

配列名.map

returnを使って既存の配列を元に新しい配列を作ることができます。

使用例1

const oddNo=[1,3,5,7];
console.log(oddNo);

const evenNo=oddNo.map((number)=>{
  return number+1;
});
console.log(evenNo);

実行結果
-----
[ 1, 3, 5, 7 ]
[ 2, 4, 6, 8 ]

使用例2

const ingredients=[
  {id:1,flavor:"味噌",main:"うどん"},
  {id:2,flavor:"醤油",main:"ラーメン"}
];
console.log(ingredients[0].flavor);
console.log(ingredients[1].main);

const dish=ingredients.map((variation)=>{
  return variation.flavor + variation.main;
});
console.log(dish);

実行結果
-----
味噌
ラーメン
[ '味噌うどん', '醤油ラーメン' ]

forEachもmapも配列の全要素で処理をする。ん？何が違うの？と思ったんで試してみたところ、
forEachには返り値が無いしmapはconsole.logが実行されませんでした。
つまり
・forEachは関数の実行
・mapは配列作成 って感じですね。

JS VI、おわり！

ではでは。

Webエンジニア目指して#20

どうも冬の寒さにフルボッコで無気力系男子です

日の出に合わせて出社時間変えませんか？そうしましょう

というわけで前回必要だと感じたProgateのCommand Line基礎編やっていきます。

$ touch sample.txt　ファイル生成

$ echo "sample" >> sample.txt　ファイルへ入力

$ cat sample.txt　ファイルの中身を表示

↓これらを組み合わせて実行してみました。やっぱ結果が出てくると面白いですね

$ mkdir otameshi　フォルダ生成

$ cd otameshi　ディレクトリ移動

・　../や./みたいな階層の記述を使います。$ cdだけ入力するとホームディレクトリに飛べる

$ pwd　現在のディレクトリを表示

$ ls　現在のディレクトリ内にあるファイルのリスト表示

・　$ ls otameshi　のように書くことで下の階層のリスト表示も可

$ mv sample.txt otameshi　ファイルorフォルダの移動　otameshiにsample.txtを移動している

・　$ mv sample.txt rei.txtのように、３段目を新規のファイルorフォルダ名にすると改名できる　

・　ファイル名が既にあるときは２段目の中身で上書きし２段目のファイルは消える

・　フォルダ名が既にあるときは移動になる。

$ cp sample.txt rei.txt　コピー

・　$ cp -r otameshi otameshi2　フォルダコピーの際には-rが必要

$ rm sample.txt　削除

・　$ rm -r otameshi　削除の際のフォルダは-rが必要

終わり！基礎編しかないんですね。あんまり環境構築で出てきたものはありませんでしたが、echoだけ調べて追加してみました。 

次のおすすめはGit...?　jsの続きします。ではでは 

Webエンジニア目指して#19

お久しぶりです。長いことRFAやらポケモンしてたのもありますがRubyやらjsやらの環境構築で知らないことが多くてかなり寄り道してました。ポケモン100hやってしまいましたが飽きることができたのでよし

更新しないながらも書き溜めてたので断片的です。切りが良いところで終わらせようとしてしまうから内容が厚いとこうなってしまいますね〜解説的になってきてしまっているので自分に必要なメモ程度、というのを意識していきます。書き残すのが目的じゃないからね

ポートフォリオちょくちょく作るか〜ってところでFontAwesome使おうとしたら仕様が変わってました。ユーザー個別で提供するようになったんですね

さて、現在のWebページはほとんどリセットCSSなるものが使われているそうです。

リセットCSSは環境ごとの表示のばらつきを解決させる事ができます。

allのmargin:0;みたいなやつですね

なんか流行りのリセットCSSがあるらしいので初心者らしくしばらくはそれを使っておきます。CSSをコピーしてきて使い回すだけですね。

 というわけで今回はProgateのJavaScript Vです。

ファイルの分割

コードが増えてくると文が長ったらしくなるため、jsファイルを分割します。本文用、定義用みたいな感じで。

もちろん別ファイルになるということはそのままでは実行文がエラーを吐くので関連付けが必要です。

class定義用ファイルを分けたとして、まずはそのファイルの中で以下の文を記述します。クラス定義の後に書かないと効きません。

    class クラス名{
    }
    export default クラス名;

定義用ファイル側の記述が終わったら、次は本文側です。ファイル名の.jsは省略できます。"./"は相対パスのやつですね。同階層を指します

    import クラス名 from "./ファイル名";

この例では定義で分けましたが、ファイル間を跨いでデータを受け渡ししたい場合は全部これみたいです。定数でも関数でも。

デフォルトエクスポート

例えば、export default sampleだと別ファイルでimport sample2 from "ファイル名"　でインポートした際に、sample2をクラス名として扱います。これがデフォルトエクスポートです。

デフォルトエクスポートは１つのファイルで１つしか使えない文のため、名前付きのエクスポートをする必要があります。

つまり、基本的には

export {データ名1,データ名2}

と

import {データ名1,データ名2} from "./ファイル名"

を使うことになります。じゃあなんで最初にデフォルトエクスポート教えたんだ...

例に書いたように、複数データの受け渡しはカンマで区切って記述します。

パッケージ

パッケージなるものを導入すると、下のように実行文に色をつけたり、入力を受け付けたりすることができます。

インポート方法はさっきのとほとんど変わりません。

    例：chalk
    import chalk from "chalk";
    console.log(chalk.yellow("yellow"));

    例：readlineSync
    import readlineSync from "readline-sync"
    const name =readlineSync.question("名前を入力してください：")
    console.log("入力された名前：${name}")
    const price =readlineSync.questionInt("値段を入力してください：")
    console.log("入力された値段：${price}")

ただし、いきなりこいつを記述しても機能しません。
Node.jsの環境構築をしてプロジェクトを作成し、ターミナルにてnpmをインストールしてnpm install --save パッケージ名
のように命令してから使えるようになります。環境構築についてはメモを残せるほど理解してないので割愛...

さあこの辺でNode.jsでnpmを使ってプログラミングする準備ができたのかな？次回も引き続きjsの勉強といきたいところですが、環境構築しててlinuxの知識足りないなあと思ったので一旦寄り道します。ではでは

Webエンジニア目指して#18

 どうも激眠マンです

ブログ見返したら#15抜けてますね。下書きのまま眠ってました

--------------

1時間ほど苦戦したSassの導入ですが、無事成功しました。
ただMacの権限が厳しいだけでした。灯台下暗し？
ルートユーザーとしてログインしとかないとこういう環境構築はできないんで
ね...Windowsと違ってAdminでも内部をいじる権限はありませんでした。

--------------

JSの学習メモ残す際に、試してもないもの載せるのはどうなんだと思ったんで、今後は書いたものを実際に実行していくようにします。

ではProgateのJavaScript IVの続きです。

メソッド

任意の文字列を使ってクラスの中で使います。
ぶっちゃけやってることはクラスの中に関数作ってるだけです
constructorはインスタンス生成時に実行されプロパティの値を決めたりしますが、メソッドは生成時に実行されないため、呼び出して使います。クラスごとの動作・処理に使うみたいです。

下記のクラスの中の赤文字がメソッドに当たります。
その外は呼び出しです。普通に関数ですね

例では使ってませんが戻り値も使えます。

class Sample{
  constructor(name){
    this.name=name;
    console.log(`${this.name}が生成されました`)
  }
  greet(){
     console.log(`どうも、${this.name}です`);
  }
}
const sample= new Sample("tikuwa");
sample.greet();
const sample2=new Sample("karaage");
sample2.greet();


実行結果
----------
tikuwaが生成されました
どうも、tikuwaです
karaageが生成されました
どうも、karaageです
----------

調べ物してて良く見るコードの見た目覚えたんで使ってみました。

また、下記のようにメソッドで別のメソッドを呼び出すこともできます。
 

class sample{
  greet(){処理};
  info(){
    this.greet();
  }
    

クラスの継承

    class Mihon extends Sample{
      greet(){
        console.log(`やあ、${this.name}だよ`);
    }

これでクラス作成時に既にあるクラスから中身を継承できます。

継承元を親クラス、継承先を子クラスといいます。子クラスで定義したメソッドなどは親クラスでは使えません。

上の例では既にSampleにあるメソッドを定義していますが、継承したクラスで同じメソッドを定義すると上書きされ、 子クラスでそのメソッドを呼び出したときは上書きされた子クラスのメソッドを実行します。

また、下のように、constructorも変更する場合はsuper(親クラスの引数);を記述する必要があります。

試しに親クラスの引数もsuperも書かずに実行しましたが、super書けやハゲって怒られました。

class Rei extends Sample{
  constructor(name,price){
    super(name);
    this.price=price;
    console.log(`値段は${this.price}円です`);
  }
}

親の引数とsuperさえ書いておけばあとは追記するだけです。ちゃんと親のconstructorも実行されます。

これでJavaScript　IVは終わりです。ではでは

2019/12/20追記:せっかくインプットした内容を試したのに載せてませんでした。

class Sample{
 constructor(name){
   this.name=name;
   console.log(`${this.name}が生成されました`)
 }
  greet(){
    console.log(`どうも、${this.name}です`);
  }
  func1(){
    this.greet();
  }
}
const sample= new Sample("tikuwa");
sample.greet();
const sample2=new Sample("karaage");
sample2.func1();

class Rei extends Sample{
  constructor(name,price){
    super(name);
    this.price=price;
    console.log(`値段は${this.price}円です`);
  }
  
}
const rei=new Rei("wasabi",999);
    
    
実行結果
----------
tikuwaが生成されました
どうも、tikuwaです
karaageが生成されました
どうも、karaageです
wasabiが生成されました
値段は999円です
----------

Webエンジニア目指して#17

どうも鬼滅の刃ドハマリマンです

めっちゃ面白いですね。二期はよ

今回はProgateのJavaScript IVです。プログラミングらしい内容になってきました。

関数inオブジェクト

下記のようにオブジェクトに関数を仕込む事もできる

const 定数名={

  プロパティ名1:()=>{ 処理1 };

  プロパティ名2:()=>{ 処理2 };

  プロパティ名3:"データ名";

};

定数名.プロパティ名1();

クラス、コンストラクタ、インスタンス

似たようなオブジェクトを複数生成するとき、いちいち設定はしていられないということで、クラスでテンプレのガワ？を作って、その中でコンストラクタを記述しテンプレの中身を作る。

コンストラクタの中でthis.プロパティ名に代入すると、新規定数にクラスを代入したときにクラス名.プロパティ名のオブジェクトになる。

引数を合わせると使い方が結構見えてきますね

class Sample{

  constructor(name,price){

    console.log("新しいサンプルを生成しました");

    this.name=name;

    this.price=price;

  }

}

const sample= new Sample("haniwa",99999);

console.log("sample.name");

console.log("sample.price");

↓出力結果

name:haniwa

price:99999

このように定数にnew クラス名()として代入したときに生成される結果をインスタンスと言います。

IV終わってませんが多分キリが良いのでこのへんで。寝なきゃ...

ではでは。

Webエンジニア目指して#16

どうも勤務先の改善案件でWebの知識を活かしたらウケたマンです。

既存のWebツールをインラインフレームに入れてカテゴリ分けの見出しをつけたくらいですが...

ボタンを押したら10秒間隔でページ更新するようなJSを組みましたが、これが結構勉強になりましたね。

さてやっていきましょう。ProgateのJavaScript IIです。期間が空いてるって？鬼滅の刃見てました...

例の如くC言語で基礎っぽいのはやってるんで学んだとこだけ書きます

配列のlength

配列名.length　で配列に格納された数を扱う。

オブジェクト

sample={name:AAA,rank:1} でオブジェクトを定義し、

sample.nameやsample.rankで要素を扱える。

要素は「name:AAA」の部分。

「name」をプロパティ、

「AAA」を値という。

配列と複合した使い方は下のような感じ。

sample=[

  {name:AAA,rank:1},

  {name.AA,rank:2}

];

console.log(sample[1].name);

関数

const sample=function(){

  console.log("aiueo");

  console.log("12345");

}

で定義し、

sample();

で呼び出す。

アロー関数

const sample = ()=>{ };

で関数を定義できる。便利。

何がアローって　=>　この部分ね。イカ速

引数

ひきすう　です。

ここでは関数の()の中身のことです。

下のような感じで、データの引き渡しをします。

const sample=(name)=>{

console.log(`私は${name}です`);

};

sample("L");

このように定義でリンクさせて、実行文で引き渡します。

アローだとより一層データ渡してる感じが出ますね

下記のように、()の中をカンマで区切ることで複数の引数を使えます。

const sample=(day,time,action)=>{

console.log(`${day}は${time}に${action}をしました。`);

};

sample("2019/12/25","PM8:00","一人でスマブラ");

戻り値

例がないと話が進まないので先に構文書きます

const sample=(num1,num2)=>{

return num1+num2;

};

const sum = sample(3,7);

上の文の場合、実行結果3+7より、10が戻り値です。

その戻り値は定数sampleへ代入され、実行結果を値として扱えるようになります。

つまり上記の定数sumは戻り値である10が代入されます。

急に理系っぽいのきましたね。ちなみにreturnのあとは()で括らなくていいです。計算に応じて四則演算などで使う感じですかね？

比較演算子をreturnすると戻り値はtrue/falseになるみたいです。

また、returnを使うと処理終了となり以降に記述された文は実行されないとか。

スコープ

Sassでやりましたねこれ

関数内で宣言した定数や変数はその関数の中でしか使えないやつです。

と思いきや、if文などの{}で括られるものはスコープを作るみたいです。

デフォルト値とかに利用できそうですね

こんなもんです。戻り値がネックですね

ではでは。

Webエンジニア目指して#14

どうもLady Borden初購入マンです。食べたことなかったけど結構美味しいですね
しかしでかい、でかすぎる。カップル専用ですか？？？？

今回はHTML&CSSで新しくFlexboxなるレッスンが増えてたのでそれをやります
どうやらFloatを使って横にBoxを並べてたのが手軽になるみたい？

CSS

display:flex;

並べたい複数要素を包括する親セレクタに

これを指定すると横並びになる。 

flex:auto;

並べた要素にこれを指定すると、自動で親要素に合わせて幅を伸縮する。

flex-wrap:wrap;

並べる要素の親セレクタにこれを設定すると、並べる要素のセレクタにwidthを指定できるようになる。
レスポンシブデザインでよくやる要素を折り返して並べるやつですね。

親のwrapを指定しないとwidth指定できませんでした。

flex-direction:column;

並べる要素の親セレクタに指定して要素を並べる方向を変えます。columnがあるんでrowもありますと。
column-reverseのように逆から並べることも可。
まどろっこしくwidth:100%;とするよりかは、縦に並べるからflex-direction！とした方がわかりやすいかも知れませんね。並べる方向も指定できますし。

なお、これを指定するだけだと左端に要素が並んじゃうのでmargin:auto;が必要です。

こんなもんでした。Floatだと気を使うところが割とあるんで便利なスタイルですね

次こそjs！ではでは。