なにもわからない

わかるようにしたいブログ

処理のパターン

開発
1. テーブル生成

①表示するためのデータの入った配列の生成（データの読み込み）
②createElement等を使ってテーブルの生成
③テーブルの中身を入れるための変数の定義
④ループを用いて③にデータとタグを追加
※タグのはじめ、なか、おわりで分けるようにする
⑤③を②にinnerHTMLで表示させる

ソースコードの読み方

開発

改修のために長いソースコードを読む際に疲れ果てる事が多いので対処法を調べた。

（手順）

1.ソースを読む目的を明確にする
仕様書を読んでどの機能を実装する必要があるのかを知る。
他に確認しておいたほうが良い項目
・ディレクトリ / ファイル構成
・データ構造

2.動的に解析する
実際の動作を確認する。その際デバッガを用いて引数などにも着目する。

3.静的に解析する
目的に沿って必要な部分のコードだけを読む。余計なところを読まない。
上から順に読んだり、全てを理解する必要はない。
コツ
・いきなり関数の中身を読むのではなく、まず関数同士の呼び出し関係（コールグラフ）を把握する。
・関数を読む際に後で分からなくなりそうなら平易な表現に置き換えておく（元のコードはバックアップしておく）
・元の設計書とは別に絵、図、表などを用いて分かりやすく自分用にメモを作るのも良い
・（機能の）全体→細部と見ていく


なお、基本的な文法を知らないと分からない事が出てくるたびに調べることになって効率が悪いので、言語の仕様は一通り把握しておく。

コードが読めない際は要件を把握できていないのか、文法を知らず何をしているのか分からないのか、という風に問題を分割して考える。

参考
i.loveruby.net

インスタンスの生成

JavaScript
  • 関数……繰り返し利用する処理をまとめたもの
  • コンストラクタ……インスタンスを作成するための関数
  • メソッド……コンストラクタ内の関数
const greetMorning = () => {
  this.x = 'GoodMorning!';
} 

let greet_ins = new greetMorning();
console.log(greet_ins.x);

まずこれでやろうとしたらgreetMorningはコンストラクタではないと怒られてしまった。（コンストラクタはアロー関数では定義できない）

//ES6以前の書き方

const Person = function(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.setName = function(name) {
  this.name = name;
}

メソッドはprototypeを用いる

//ES6以降の書き方

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello,Iam${this.name}`);
  }
}

メソッドにprototypeを用いる必要はない

・クラスは同じ構造のオブジェクトを使い回したいときに使う
参考
cocodrips.hateblo.jp

用語集

基礎知識
ビジネス系
  • レジュメ→講演など、一方的に話すような会の要点をまとめたもの
  • アジェンダ→会議など、双方向で話し合いを行う会の要点や議題をまとめたもの
  • ドキュメント→仕様書等の資料のこと
プログラミング系
  • マージ→結合
  • オーバーヘッド→システムへの負荷、処理時間
  • アルゴリズム→特定の問題を解決するための手順
  • スナップショット→ある時点の状態を丸ごと保存したもの
  • カプセル化→

オブジェクト指向において、データとデータに対する操作をオブジェクトとしてまとめ、外部が利用する必要のない変数などは秘匿すること。

※直接変数を書き換えたりはできないが、その変数を書き換えるためのメソッドは外部に提供する。

(外部から書き換えられたり、内部の変更が外部へ影響を及ぼす心配をする必要がなくなる、疎結合)

  • ノード(DOM)→文章(Document)を構成するもの。HTML要素であればHTMLElements、テキストならテキストノード
  • 辞書→key-valueのペアになっていて、keyで検索可能なデータ構造のこと
  • オリジン→スキーム(プロトコル)、ホスト(ドメイン)、ポート番号によって定義される。全て一致した場合のみ同一オリジンとして扱われる。

ex: http://(スキーム)www.hogehoge.co.jp(ホスト):80(ポート)

  • CRUDアプリケーション→データを永続的に扱うための基本機能であるCreate、Read、Updata、Deleteをもつアプリケーションのこと
  • RESTful API→RESTの原則に則って構築されたAPIのこと
  • REST→https://blog.api.rakuten.net/ja/jp-restful-api/


（分からない単語・概念）

存在しないプロパティへのアクセス

JavaScript 本日の気付き 
let array = {"c": {}};
let val1 = array[a][b]; // reference to undefined propertyエラーになる
let val2 = array[c][d]; // undefが返る

違いは取り出したいプロパティの直前のオブジェクトが存在するかしないか。
val1はaが存在しないのでエラーになるが、val2はcが存在するのでエラーにはならない。