2018-06-01から1ヶ月間の記事一覧
div要素をいくつか作ってそれぞれに連番クラスを付けたいとき <div v-for="(item, index) in items" v-bind:class="'item-'+index">{{item.text}}</div> バニラのjavascriptだと createElementで作って、textContentで中身入れて、appendChildで追加する ってやってたのがvueだと簡単にできる
domがほしい要素にref属性をつける。受け取り方 this.$refs.element
JavaScript の制限のため、Vue は配列で以下の変更を検出することはできません: 1, インデックスでアイテムを直接設定するとき。例: vm.items[indexOfItem] = newValue 2, 配列の長さを変更するとき。例: vm.items.length = newLengthリストレンダリング — V…
vue-cliをインストールして使ってみる。 テンプレートはwebpack-simpleを指定。 ページ遷移がないものをコンポーネントに分けて作ってみる。templateを理解するのに手間取った。 new Vue({ el: '#app', //<div id='app' />を指定 components: { App }, //Appタグを使えるよう</div>…
古いやり方 XMLHttpRequestを使う const url = 'urlを指定'; const request = new XMLHttpRequest(); request.open("GET", url); request.addEventListener("load", (event) => { 処理 }); request.send(); 新しいやり方 fetchを使う const url = 'urlを指定…
1つ目を終えた。 わかりやすくて良い本だと思う。 ただ、モダンと書いてあるけどflexbox, grid layoutは使われていない。 勉強も兼ねてflexboxとgrid layout使ってみたらすごくcssがシンプルになった。 横に並べたいときはとりあえず display:flex を使って…
floatでごちゃごちゃしてたらgrid layoutやflexboxってのがあることを知った。 grid layoutはここがとてもわかり易かった CSS Grid Layout を極める！（基礎編）
vscodeの拡張でscssで保存すると自動でコンパイルしてくれるのがあった。 taskに書かなくてもコンパイルしてくれてとっても便利。
前回のやつに用語だけ追加 インターネット層が理解できてばだいたい大丈夫な気がする・アプリケーション層(HTTP, SMTP) ユーザがコンピュータ上で動かすアプリのこと HTTP、ステートレス SMTP、POP、IMAP、ステートフル SSH・トランスポート層(TCP/UDP) アプ…
ネットワークの勉強をしていてifconfigコマンドを打っても コマンドが見つからなかったからその対処法 osはmac sierra、シェルはzsh1, ❯ whereis ifconfig でifconfigがどこにあるか確認 2, ❯ echo $PATH | tr ':' '\n' でパスを確認 3, pathが通ってなけれ…
アロー関数では、引数がないときも丸括弧を書かなければいけない。 ただし、引数が1つなら括弧が省略できる。そこで、使わないけど引数としてアンダーバーを使う。 そうすると括弧が減って若干読みやすい。 //before setTimeout(() => { 処理 }, 1000); //af…
setTimeoutの処理の結果が欲しい時 setTimeoutの内側でreturnすればいいと思ったけどそれじゃできない function wait1sec(num) { setTimeout(() => { console.log('計算終了'); // #1 return num * 2; }, 10); console.log('setTimeoutの次'); // #2 } funct…
まずevent.targetとevent.currentTargetの違い currentTargetはイベントリスナーを登録した要素（固定） targetは実際にイベントが起きた要素（可変） <body> <p></p> <div></div> </body> document.body.addEventListener('click', listener); pがクリックされる target = p currentTarget …
class クラス名 { constructor() { DOMを取得; this.handleEvents(); } handleEvents() { イベントリスナーの登録; } メソッド() { イベントリスナーで呼ばれるメソッド; } } こんな感じの枠組みで書くと読みやすい
読み始めた。 初めの章のvalidateのやつを自分なりにリファクタリング。 class AppModel { constructor() { this.val = ""; this.validateList = { required: true, maxlength: 8, minlength: 4 }; } validate(input) { if (this.val === input) return; thi…
thisの４種類のパターン １：メソッド呼び出しパターン ２：関数呼び出しパターン ３：コンストラクタ呼び出しパターン ４：apply,call呼び出しパターン JavaScriptの「this」は「4種類」？？アロー関数使っておけば、thisはだいたいはそのオブジェクトを指…
細かいところは読み飛ばしながらも読了。 TCP/IPについてのイメージをなんとなくつかめた気がする。2週目読もう
TCP/IP インターネット通信で利用されている通信プロトコル 大きく分けて以下の4つの機能に分類できる・アプリケーション層(HTTP, SMTP) ユーザがコンピュータ上で動かすアプリのこと・トランスポート層(TCP/UDP) アプリ間で通信できるようにする役割 データ…
TCP/UDP パソコンに着いたデータをアプリまで届ける役割 各自のパソコン内で処理する。UDP IPに次の2つの機能が追加されただけ ・データが壊れてないことを保証する（チェックサム） ・アプリ間通信を実現する（ポート番号でアプリを識別）TCP ・コネクショ…
データという荷物があったとして、 それを郵便で送るとすると ペイロード 荷物本体 Ethernet トラック IPアドレス 宛先 MACアドレス 次の取扱局 ARP 宛先をもとに次の取扱局を決める IPアドレスで宛先を決めると ARPが次に送るべき場所をMACアドレスとして教…
ネットワークの基本は機器を1対1で接続すること（ポイントツーポイントと呼ぶ） 3つ以上機器を接続するにはハブを使う（マルチポイントと呼ぶ）違うネットワークとつなぐにはハブとハブをルータでつなぐ 3つ以上のルータを繋ぐ際のハブをプロバイダと呼ぶ違…
ハードウェアの抽象化について学んでたら、ふとダックタイピングを思い出した。CDやUSB、ハードディスクは構造がぜんぜん違うけど 同じようにファイルの読み書きができるから外付けメモリって読んでいいよね。って考えたらダックタイピングの理解がだいぶ深…
読んでる途中。 著者の考えには共感できるし、文体は読みやすいのだけど ネットワークの知識ゼロの僕にとっては難しい。 もう1段階レベルが低いものを読もう。前半のパソコンの仕組みのところは 今の僕でも読めるし、とても参考になるからそこはしっかり読む…
ドットインストールでやったストップウォッチを改良。 ストップを押したときしか時間が表示されないのを リアルタイムで表示されるようにした。正しいjsの書き方がよくわからない。 関数式にすると巻き上げが起こらないからaddEventListnerを下の方に書かな…
DOMの仕様、ajax、apiの使い方などためになることは多かった。 ただ、読者の対象レベルがあいまい。 そのせいで、冗長な説明が多く、ページ数もムダに多い。中級者向けに絞っていたらとても良い本だったと思う。
javascriptのクロージャを学ぶ。 大雑把にクロージャとはシンプルなクラスのことだと理解した。 クラス クロージャ コンストラクタ クロージャの親の変数 プロパティ クロージャ内の変数 メソッド クロージャ自身 クロージャをクラス(インスタンス)だと思え…
ES6の書き方で説明されててよかった。 内容や難易度はrubyでのプロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)と同じぐらい。 文法を覚え、取りあえず動くものを作ったことがある人により詳し…
読んでる最中
僕はプログラマになるのだろうか。何かを作りたいという感情が薄い。作りたいものがありすぎてウズウズしている人と同じとこで戦う必要はないのでは。じゃあ何になるんだろう
//基本 配列っぽく一括で代入 const [a, b, c] = [1, 2, 3]; //a=1,b=2,c=3 // 配列を利用 const ary = [1, 2, 3]; const [a, b, c] = ary; //a=1,b=2,c=3 //値の入れ替え let [a, b] = [1, 20]; [a, b] = [b, a]; //a=20,b=1 //複数の戻り値の受け取り func…
