プログラムはなぜ動くのか ― 知っておきたいプログラミングの基礎知識をやっと読んだ
プログラムはなぜ動くのか ― 知っておきたいプログラミングの基礎知識
- 作者: 矢沢久雄,日経ソフトウエア
- 出版社/メーカー: 日経BP出版センター
- 発売日: 2001/09/27
- メディア: 単行本
- 購入: 21人 クリック: 513回
- この商品を含むブログ (81件) を見る
数年前に買ってちらっと見て本棚の片隅に置いてあったのをやっと読んだ。
まだまだ理解できない部分もあったが、今までこんなことも知らずにプログラマとして働いていた自分恐ろしい((((;゚Д゚))))
読んでよかった。第2版を電子書籍で買ってた事を思い出したよ・・・
第1章 プログラマにとってCPUとはなにか
- プログラム→コンピュータに実行させる処理の順番を示すもの→命令とデータ
- プログラムはメイン・メモリに
- 命令やデータはメモリのアドレスに格納される
- CPUがプログラムを実行
- CPU→制御装置+演算装置+クロック信号+レジスタ
- レジスタ→アキュムレータ・インデックスレジスタ・フラグレジスタ・プログラムカウンタ・汎用レジスタ
- アセンブリ!!!
第2章 データを2進数でイメージしよう
- ICのピンは1本で2つの状態を表す
- 32ビット・マイクロプロセッサは情報を入出力するためのピンを32本持っている!(衝撃
- 一度に32桁(32ビット=4バイト)の2進数の情報を処理できる!(衝撃
- シフト演算
- 補数(よくわかってない
- 論理右シフト、算術右シフト
- 論理演算
第3章 コンピュータが少数計算を間違える理由
この章は全然わからなかった・・
第4章 四角いメモリーを丸く使う
- メモリーの実態はICと呼ばれる電子部品
- アドレスを指定してデータを読み書き
- アドレスはデータを格納する場所を示すもの
- メモリーの論理的なイメージはビルディング
- ポインタ→データの値そのものではなく、データが格納されているメモリーのアドレスを持つ変数のこと。
- 配列
- スタック→LIFO(Last In First Out)
- Push, Pop
- キュー→FIFO(First In First Out)
- Put, Get
- リングバッファ
- リスト要素
- 2分探索木(聞いたことある
第5章 メモリーとディスクの親密な関係
- プログラムは記憶装置に格納されていて順次読み出されて実行される
- フォン・ノイマン
- パソコンにおける記憶装置→メモリー、ディスク
- ディスクに記憶されたプログラムがメモリーにロードされてから実行される
- ディスクアクセスを高速化→ディスクキャッシュ(メイン・メモリー内の領域)
- ディスクをメモリの一部として使う仮想記憶→ページング方式、セグメント方式
- ディスクの物理構造
- 一般的なパソコンではセクター方式
うーん。
第6章 自分でデータを圧縮してみよう
- ファイルにはバイト単位で記録
- ランレングス法(?
- ハフマン法(???
ここもよく理解できず
第7章 プログラムはどんな環境で動くのか
- 動作環境 = OS + ハードウエア
- AT互換機とかx86とか
うーん?
第8章 ソース・ファイルから実行可能ファイルができるまで
- コンピュータはネイティブ・コードしか実行できない
- ソースコードを翻訳するのがコンパイラ
- コンパイルだけでは実行可能ファイルが得られない(!
- コンパイルに続けて「リンク」という処理が必要になる(!!
- コンパイラは実行前にソースコードをネイティブコードに一括して翻訳。インタプリタは、実行時にソースコードの内容を1行ずつネイティブコードに逐次変換
10年前の新人研修でC言語の上っ面をかすっただけなので全く理解できず。。。
インタプリタの実行イメージがわからん。
実行時にネイティブコードに逐次変換したネイティブコードがメモリにロードされてから実行されるのかな??
第9章 OSとアプリケーションの関係
- システムコール
- OSと高水準言語がハードウエアを抽象化
流し読み
第10章 アセンブリ言語からプログラムの本当の姿を知る
- アセンブリ言語はネイティブコードと一対一に対応(!!!
- ネイティブコードへの変換プログラムが「アセンブラ」
- アセンブリ言語や、アセンブリ言語で書かれたプログラムのことをアセンブラと呼ぶ場合もある
- コンパイラでアセンブリ言語のソースコードを生成(!!! gccでやったら本と違うの出てきた!今度見る
- ネイティブコードに変換されない擬似命令
- アセンブリ言語の構文は「オペコード+オペランド」
- CALSにトライ!
アセンブリ言語面白かったから、もう少し勉強する(予定
第11章 ハードウエアを制御する方法
- ハードウエアとの入出力を支えるのはIN命令とOUT命令
- 周辺装置の割り込み
- DMA
流し読み
第12章 コンピュータに「考え」させるためには
- 人間の考え方をプログラムで表す(YES!
- 人間の癖をプログラムで表す(ほぅ
- 記憶を生かすことで、より人間らしい判断を行う(なるほど
第2版買っていたのでそっちも読みます。
コンピュータともう少し仲良くなったら今からでも成長できるかな!!!
jQueryのeachを読む
コードリーディングの第一歩として自分が読みやすいJavaScriptを読むことに。
jQueryのソースコードを読むための参考サイト20選 - DQNEO起業日記
を参考にして、よく使うeach
メソッドを読んでみる。
ソースコードビューアあったから、古いバージョンとメソッドの内容を比較するのにいいかもしれない。
よく使う方法
このようなhtmlがある時に、li
を1つずつ取り出す。
<ul> <li>(・∀・)</li> <li>(*´Д`)</li> <li>(・∀・)</li> <li>(*´Д`)</li> <li>(・∀・)</li> </ul>
$('li').each(function(i, elm) { // elm == this console.log(i + $(elm).text()); // 0(・∀・) のように表示される });
eachメソッド
// args is for internal usage only each: function( obj, callback, args ) { var value, i = 0, length = obj.length, isArray = isArraylike( obj ); if ( args ) { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.apply( obj[ i ], args ); if ( value === false ) { break; } } } else { for ( i in obj ) { value = callback.apply( obj[ i ], args ); if ( value === false ) { break; } } } // A special, fast, case for the most common use of each } else { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } else { for ( i in obj ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } } return obj; }
eachメソッドについての疑問
- eachの第3引数
args
は何か?使うの?
第3引数args
がある場合はapply
、ない場合はcall
を使っている。apply
とcall
って何だっけ? $.each($('li'))
と$('li).each
両方使えるよね?
1. eachの第3引数args
は何か?使うの?
applyとcall
全く読んでいなかったサイ本の出番!第5版しかもってないからそれを引っ張り出して読む。サイ本、いい本ですよね。
- 作者: David Flanagan,村上列
- 出版社/メーカー: オライリージャパン
- 発売日: 2012/08/10
- メディア: 大型本
- 購入: 12人 クリック: 252回
- この商品を含むブログ (18件) を見る
P.138 8.6.4 apply()メソッドとcall()メソッド
の部分より引用
2つのメソッドを利用すると、あるオブジェクトのメソッドであるかのように関数を呼び出すことができます。call()メソッドとapply()メソッドの最初の引数は、これから呼び出す関数の対象となるオブジェクトで、関数の本体のthisキーワードの値になります。call()メソッドの2番目以降の引数は、これから呼び出す関数に引数として渡されます。
apply()メソッドとcall()メソッドの違いについては、
apply()メソッドもcall()メソッドと同じような働きをします。ただ、関数に渡す引数を配列形式で指定する点が異なります。
なるほど。第3引数のargs
は配列形式で渡してあげると。
第3引数args
を試す
試しに第3引数を渡してeach
を実行してみる。
// callback関数の引数に第3引数で渡した配列の値が入る。 $.each(['a', 'b', 'c'], function(a, b) { console.log(this); // String {0: "a", length: 1} console.log(a); // 1 console.log(b); // 2 }, [1, 2]); $('li').each(function(a, b) { // elm == this console.log($(this).text() + ':' + a + ' :' + b); // (・∀・):3 :5 }, [3, 5]); // 第3引数は配列形式じゃないといけないので、以下はエラーになる $('li').each(function() { console.log(this); }, 'test');
ここまで見て思ったのは、each
に第3引数を渡して使ったことないこと。
使い方としては以下のような感じ?うーん・・・
// こういう使い方は出来るのか? $.each([1, 2, 3], function(x, y) { console.log(this + ':' + x + ':' + y); // 1:5:10 console.log((this + x) * y); // 60 }, [5, 10]); // わざわざ引数で渡すならこうするかな? $.each([1, 2, 3], function() { var x = 5, y = 10; console.log(this + ':' + x + ':' + y); // 1:5:10 console.log((this + x) * y); // 60 });
まて。each
メソッドにコメント書いてあった。
// args is for internal usage only
argsは内部利用のためにのみ使う??よくわからなかった。。
第3引数なしの場合はcallback.call()
が実行される
args
がない場合のコメント
// A special, fast, case for the most common use of each
eachの一般的な使い方ってことかな??
配列じゃなくてオブジェクトもOK
// オブジェクトもいける // callback関数の引数には`key`と`value`が入ってくる $.each({'test': 123, 'test2': 'あいうえお'}, function(key, value) { console.log(key, value); // test 123, test2 あいうえお console.log(this); // Number {}, String {0: "あ", 1: "い", 2: "う", 3: "え", 4: "お", length: 5} }); // `i`にはindex, `v`には値が入ってくる // この場合は this == v var obj = $.each([1, 2, 3, 4, 5], function(i, v) { console.log(i + ':' + this); // 0:1, 1:2, 2:3, 3:4, 4:5 console.log(i + ':' + v); // 0:1, 1:2, 2:3, 3:4, 4:5 }); // each関数はobjをreturnするのでこうなる console.log(obj); // [1, 2, 3, 4, 5]
2. $.each($('li'))
と $('li').each
両方使えるよね?
$('li').each(function(i, elm) {});
の場合は以下が呼ばれる。
// Execute a callback for every element in the matched set. // (You can seed the arguments with an array of args, but this is // only used internally.) each: function( callback, args ) { // callbackにfunction(i, elm) {} が入る return jQuery.each( this, callback, args ); // eachメソッドを呼ぶ。thisは$('li') },
jQuery.each
を呼んでいるので、 $.each($('li'), function(i, elm) {});
となる!
DayOneに投稿するブックマークレット
DayOneの使い方を見直そうと思い検索していて見つけた記事
DayOneをWebクリップに変えるブックマークレット DayOneClip - W&R : Jazzと読書の日々
素晴らしい!
普段はChromeを使っているので、Chromeにブックマークレットを登録して実行!
便利だわー。
DayOneのURL schemeはこちらに
DayOneはYouTubeの動画も再生出来るらしい。
DayOneにYouTubeの動画もクリップできるようにしました DayOneClip - W&R : Jazzと読書の日々
YouTube動画貼り付け版を試してみたが、画像が表示されるだけで再生出来ず><
ブックマークレットのコードを見てみると、
if(/m\.youtube\.com/.test(url))
youtubeのurl判断が m.youtube.com
になっていたので、この部分を変更することに。
元のブックマークレットはモバイル版のリンクを使っている模様。
自分の使い方だと、
がいいので、以下のようにブックマークレットを変更させてもらった。
javascript:title=document.title;url=location.href;clip=title+"\n";if(/.+\.youtube\.com/.test(url)){id=url.split("v=")[1];clip+=url+"\nhttp://youtube.com/watch?v="+id}else{text="";p=document.getElementsByTagName("p");for(k in p) text+=p[k].innerText;text=text.replace(/\n/g,"").replace(/undefined/g,"").substr(0,100);clip+=url+"\n<img src=http://capture.heartrails.com/300x200/?"+url+" style=\"border-radius:10px;margin:1px 15px 1px 1px;box-shadow:1px 2px 3px gray;\">\n"+text+"...\n"}location="dayone://post?entry="+encodeURIComponent(clip);
このブックマークレットを登録して実行するとDayOneにリンク情報が転送されて。。。
Done
をクリックすると http://youtube.com/watch?v=xxxxxx
のurlの動画が表示されて再生出来る!
出来ました!
winerosesさんありがとうございます!!
Webサービスのつくり方ー「新しい」を生み出すための33のエッセイを読んだ
Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)
- 作者: 和田裕介
- 出版社/メーカー: 技術評論社
- 発売日: 2012/11/20
- メディア: 単行本(ソフトカバー)
- 購入: 29人 クリック: 685回
- この商品を含むブログ (27件) を見る
Webサービスの過程を考慮してエッセイ風に語っている本。
各章を読んで印象に残った事と感想をメモ。
取り敢えず何かつくろう
第1章 心構えと下準備
- ぐだぐだ言ってないでコードを書けよ、ハゲ
- 実現していない、カタチになっていないことにはあまり価値がない
- 唯一重要なものはコードなんだ。
- Mac一つあれば開発出来る!
- なければつくる
- ブログは自分自身を成長さえるよい鍛錬の場
- 勉強会は面白くて、いい仲間ができる場所
- 3回繰り返すことがあれば共通化を考える
コード書く前に色々調べて時間だけが過ぎて結局何もできてない。。って事ばかりなのではっとさせられた。
第2章 企画
- 次の7つの項目を決めること
- 哲学
- アイデア
- テーマ
- コンセプト
- 名前
- デザイン
- 内部設計
- 哲学
- 個々人が持っている、特定の興味に関する揺るがない気持ちのこと
- アイデア
- 哲学を叶えるための個別の具体的なアイデア
- テーマ
- 哲学をより具体的にした、勝負する領域のこと
- コンセプト
- テーマに沿った、アイデアを形成するための骨格
- デザイン
- コンセプトやアイデアを洗練させていくと無駄なものが削ぎ落され、サービスやアプリに対する最低限の機能が抽出されます
- 紙にUIのイラストを書くような作業を、何度も繰り返すとよい
- 内部設計
- ユーザーから見たシステムの振る舞いを書いてから作業に移るとよい
- アイデアは新しい組み合わせ
哲学!!!
アイデアは組み合わせ!これは自分も思っていたこと。
第3章 設計
今までユースケースって書いたことがなかったが、これから書いてみよう。
抜けがなくなって手戻りしなくなりそうだし、実装方針を固めるのに役に立ちそう。
第4章 開発
ここあまりついていけなかった。。実際にコードを書きながらもう一回読んでみよう。
perlやってみようかな。。
第5章 プロモーションと運用
- そのサービスが何を目標としていて何ができるのかだけでも最低限文章として書けるようにしておく
- プレストか拡散とか
- システム運用とコンテンツ運用
- サーバ構成
- キャッシュ
- スケールアップとスケールアウト
- やり方は一つじゃない
ここもついていけていない・・><
サーバ構成とか超苦手部分だ。
運用していてもサーバ構成や負荷について全く気にしたことなかったからなー。
一人で運用までやってみると、こういう事も経験するからやるしかないと思った。
Chrome Extensionが作れた!
はじまり
仕事ではJavaScriptを殆ど書かなくなってしまったけど、毎日のはてブ巡回ではJavaScriptの情報を追っていた。
そこでたまたま tacamy さんのスライド
はじめてのJavaScript / JS Girls Tokyo #1 // Speaker Deck
を見て、Chrome Extensionすげー!って思った。JS Girlsというのもあるのね。
仕事中もずーっとChrome Extensionの事を考えていて、もしかしたら今の業務で面倒だと思っている作業が簡単に出来るかもしれない、と閃いた。
作業短縮、ミスも減る!! メリットしかない!という事で作り方の勉強から。
勉強方法
まずはドットインストールで概要を勉強。他の人との共有の仕方まで理解出来た。
右クリックのTwitter検索便利。
次に、 JS Girlsのハンズオン資料と本家のサンプルで勉強。
とてもわかりやすくて理解が深まった気がする。画像を取得して表示するのいいなー。
作り始める
やりたいこと
- HTMLを表示
- 表示しているHTMLをスクレイピングして必要な要素を抽出
- 抽出した要素からjsonを作成
- 作成したjsonをクリップボードにコピー出来る
- Chrome Extensionのアイコンは、必要なページにのみ表示
やりたいことは決まっていたのだが、今まで勉強した内容ではどうやったらいいかわからなかった。。。
サンプルにヒントがないか見ていたら、ぴったりのサンプルが見つかった!
のMappy
pageAction.show
やextension.onRequest
で検索していたら出てきたサンプル
上記のやりたいことを実現するための要素が全部入っていたと思う。
素敵な写真を一括で取得したい☆彡
某最新音楽ニュースサイトの写真は素敵なものばかりで、いつも保存させてもらっていた。
一つ一つポチポチと保存していたのだが、全部保存したいし保存してない写真があるかもしれない、と常々思っていた。
ちょっと。。。何これ。。。何枚あるのよ面倒くさい!自動化出来ないかなーと思っていて調べたら、curlという素敵コマンドがあるらしいので色々試してみた。
取り敢えず -O
オプション
-O
と [0000-1000]
のようにして連番を生成すればコマンド一つで大量のファイルを取得出来る!すごい。
早速やってみる。(※urlは仮)
curl -O http://example.com/image/DSC_[0000-1000].jpg [1/1001]: http://example.com/image/DSC_0000.jpg --> news_large_DSC_0000.jpg --_curl_--http://example.com/image/DSC_0000.jpg % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 9630 0 9630 0 0 14750 0 --:--:-- --:--:-- --:--:-- 14747
ダウンロードを開始している表示が延々と流れる。成功か?
数分待って1000までの画像ダウンロード終了。
中身を確認してみると。。
10KBの画像ファイルが大量にできている。404だったものが10KBのファイルとして残っているようだ。
404のファイルは保存したくない。。オプションで指定できない??
不要なので一括削除!
$ find . -size -10k | xargs rm
curlのオプションを調べたが、存在しないファイルを保存しないオプションはないみたい。
HTTPヘッダの取得
シェルスクリプトを書けば、HTTPヘッダを取得して処理を分けたり出来るらしい。
Helix Melody:Livedoorクリップのリンク切れを一括チェックする方法 - livedoor Blog(ブログ)
を参考にさせていただき、HTTPヘッダの取得からやってみる。
$ curl -I http://example.com/image/DSC_0000.jpg HTTP/1.1 404 Not Found
きた!HTTPステータスコードを見て、404だった場合にファイルを保存しないように出来そう。
複数ファイルの場合は?
$ curl -I http://example.com/image/DSC_[0-10].jpg [1/11]: http://example.com/image/DSC_0.jpg --> <stdout> --_curl_--http://example.com/image/DSC_0.jpg HTTP/1.1 404 Not Found
できてる!けど、一回一回判断出来るのか?シェルスクリプトの中で繰り返しをするか?
ステータスコードの抜き出し
404
だけ取る場合
$ curl -s -I http://example.com/image/DSC_0000.jpg | grep HTTP/ | cut -d' ' -f2 > test.txt
HTTP/1.1 404 Not Found
だけ取る場合
$ curl -s -I http://example.com/image/DSC_0000.jpg | grep HTTP/
grep
コマンドは最近勉強したから理解出来るが、cut -d' ' -f2
がわからない。
MacBook Pro Retina 15インチ買ったからさ
IT業界で働き出して約10年。全く(ではないが)成長出来てない自分に苛立ちを感じる今日この頃。
昨日も自分がダメなことを棚にあげて愚痴りまくっていたわけで。
せっかく新しいパソコン買ったので、気合を入れて勉強をしようと。今度こそ本気!
まずは開発環境の構築だ。
以前はMacに色々入れて開発環境を構築していたのだけれど、ごちゃごちゃしてしまい大変なことになっていた。
仮想マシンにLinuxを入れて云々。。。という話をよく目にしていたので、自分もやってみることに。
困ったときのドットインストール。しばらくやってなかったし、勉強した内容もすっかり忘れているドットインストール/(^o^)\。
レッスン一覧を見てみると、ローカル開発環境の構築というのがある。
ぴったりではないか!!遥か昔にもやった記憶があるけど、レッスン新しくなってるし!
さっそくやってみると、はてなブックマーク等でよく見かけていた文字が。。こいつは何だ。
Vagrantなんて読むのよこれ。ヴァグラント?いいえ。ベイグラント
こいつを使うと、いい感じに仮想マシンを立ち上げたりできるのねー。なるほど。というのは理解。
再びレッスン一覧を見てみると、Vagrant入門を発見!
2つのレッスンを合わせてやることに。合わせてやることで理解が深まった(気がした)。
ローカル開発環境の構築はうまくいったかなー。