1.hello,world
今回の目的
習うより慣れろということで、とりあえずやってみます。
学習用につくったサンドボックスの使い方の説明のために、そして昔のえらいひとが最初にプログラミングするときはhello,worldと表示するもんだとしたことにならって画面にhello,worldと表示するプログラムを作ります。
とりあえず最初から作れというのは無理なので、今回はコピペのみで終わりです。
さっそく作ってみる
- ソースのところに「ソースコード」を書く
- 実行ボタンを押す
textarea1.value = 'hello,world';
hello,worldと下のテキストボックスに表示されるプログラムです。
一行だけですが、覚えてほしいことが多いです。
- Javascriptでは;(セミコロン)までが一つの「行」です。
- 「引数」に指定したメッセージを表示します。
- '(シングルクォーテーション)で囲んだ文字は文字列です。
- ”textarea1.value = 文字列”で下のテキストボックスに表示されるのは、今のところはそういうものだと思ってください。かなり後のほうで説明します。
TMTOWTDI
今回の目的は最初に行ったとおり、”画面にhello,worldと表示する”ことです。それが作成するプログラムの「仕様」です。上記のプログラムも答えの一つです。ですが、同じ動きをするプログラムでも、いろんな書き方があります。スマートではない書き方ですが、いくつか例をあげます。
※//から始まる行は「コメント」です。
// 変数を使用する var displayText = 'hello,world'; textarea1.value = displayText;
// 文字列結合する textarea1.value = 'h'; textarea1.value += 'e'; textarea1.value += 'l'; textarea1.value += 'l'; textarea1.value += 'o'; textarea1.value += ','; textarea1.value += 'w'; textarea1.value += 'o'; textarea1.value += 'r'; textarea1.value += 'l'; textarea1.value += 'd';
// 置換する textarea1.value = 'hello,1'.replace('1','world');
結果があっていれば全てよしとする考え方と、最もスマートな書き方をするべきだという２つの考え方があり、どちらが正しいかは微妙なところです。
0.まえがき
プログラミングの入門書ってなんかわかりづらい、と思っていました。だから、はじめてプログラミングする人向けに、たらたらと記事を書いていきます。
「プログラミングができる」とはなんだろうか
入門書がわかりづらい理由を考えてみるといろいろありますが、大きなところでは「ゴールがわかりづらいから」ではないかと思っています。
といってもざっくり言うならゴールは簡単で、プログラミングができるようになることです。
ただ、プログラミングができると言っても、国家試験の情報処理技術者試験の基本情報処理技術者の午後問題が解ける程度を指すのか、思い描いた「アプリケーション」を作ってしまえることなのか、ソフトウェアハウスで働ける職業プログラマとしてやっていける程度なのか、学問としての情報処理を行えることなのか、様々なレベルがあります。
どのレベルだとしても「プログラミングができる」ということの僕なりの定義は、「自分で調べて解決できる」ということです。
ゴール
ネットで検索すれば、いくらでも調べられる便利な世の中です。「自分で調べて解決できる」ようになるためには、「調べたいことがわかる」「調べ方がわかる」ようになる必要があります。
そうなれるように、スタート地点からしばらくの道しるべになれるような記事を書いていきたいと思います。
方針
自分で調べられるようになることが目的なので、ある程度は説明しますが、細かいところは各自調べるように投げっぱなしな書き方をします。ただし、特に調べてみて欲しいキーワードはかぎ括弧で囲むことにします。
この方針の側面として、以下の目的があります。
- 自分で調べられるようになる訓練として
- 「車輪の再発明」にならないようにするため
プログラミングの基礎の説明は、すでにたくさんの人が書いています。それを再度書きなおすのは車輪の再発明以外のなにものでもないです。めんどくさいことはやらない、あるものを利用するのはプログラマの大切な考え方です。単にめんどくさいからじゃありません。
- 説明の仕方は人によって向き不向きがある
同じ事を説明するにあたっても、いろいろな書き方があります。
例えばプログラミングの基礎的なもので「変数」というものがあります。入門書の多くは箱のようなものとたとえ話で説明しますし、Wikipediaの記事では淡々とした説明になっています。人によってどちらがわかりやすいかは差があるので、わかりづらい記事をずっと眺めるより、自分がわかりやすい記事を探した方が効率的です。
Javascriptを試せるサンドボックス作ったよ
ここ。
プログラミング初学者向けのエントリかHPかをずっと作りたかったんだけど、しょっぱなの初学者の敷居の高さ問題が難しすぎて手をつけられなかった。
まず、プログラミングは敷居が低いこと。始めるのと使えるようになるのが別だとすれば、始めるだけならすんごく簡単なはず。初心者向けのプログラミングの本を買うだけだったり。でも実際に動かしてみるとなると、別の問題が発生する。OSのオペレーションスキルをそれなりに要求される。環境変数ってなんぞやとか。要求される割に、プログラミングスキルとOSのオペレーションスキルに大した関係はない。今プログラミングができる人たちは、OSのオペレーションなんてできて当たり前な感覚を持ってると思うけど、そうでもないらしい。
マウスって何なのか説明できるのがせいぜいな人たちにも、プログラミングに触れてみてほしいと思ってたから、解決策でブラウザだけでそれなりのCUIっぽいスクリプトを流せるようにしてみた。テキストボックスの中をそのまま実行するだけだけど。
メリット
- ブラウザだけでいい
ここが見れてれば大抵動く。HTMLについても、とりあえず知らなくてもいい。
- ひと通りのことをはできる
ループとか分岐とかの制御構造とか、配列とか、オブジェクトについてとか、プログラミングの基礎については全部試せる。（試せないことはMS謹製フレームワークとかくらい）
- ターンアラウンドタイムが短い
ビルドいらない、ファイルを保存する必要もない。初学者に必要なことはトライアンドエラーで、ターンアラウンドタイムが短ければそれだけ覚えられる。
- Javascriptが覚えられる
個人的に日曜プログラマにおすすめしたい言語No.1。Web全盛の今なら使い所に困らない。
プログラマがすぐに解けない問題をプログラマ的に解いてみた
まつひろのガレージライフ: 幼児が数分で解けるのに大人が解けない算数（？）の問題
8809 == 6:false
↓
何らかのロジック走ってる
int unknown(int arg)
unknown(8809) == 6:true
unknown(7111) == 0:true
・
・
・
関数unknownの仕様思いつかない
↓
型間違えてるんじゃね？
int unknown(char[] arg)
unknown("8809") == 6:true
unknown("7111") == 0:true
ここまで来ちゃえば好きなやり方でロジカルに解けるんじゃないかな。
文字か数字か定義するのと、デバッグ時に中途半端な挙動してたら疑うのはプログラマの基本でしょう。
docomo 定額データプラン１２８Ｋをおすすめする５つの理由
定額データプラン１２８Ｋに切り替えて1ヶ月経った。けっこう良い。使用端末はXperia ray。SPモード。
1.意外と遅くない
思ってたより遅くて困ることがない。128Kでできない事って言うと、画像をたっぷり使ったリッチなサイトが遅い、youtubeなんかの動画ストリーミングが絶望的なくらい。
実測値で128K近く出てる。
google mapはあんまりストレスない。
WEBは標準のブラウザで画像表示するともたつく。だからOpera miniがおすすめ。画質はかなり落ちるけど、設定で画像のサイズ減らすプロキシか何か通してくれて、それなりの速度でそれなりの見た目になる。
2.MVNOじゃなくてMNO
これがわかりづらいけど、一番大きい。
MVNOはMNO（今のMVNO事業者はたいていdocomo）から回線を間借りしてるんだけど、その契約の仕方が「利用者全体で最大**bpsまで」みたいな感じ。つまり、利用者が一斉に使うと遅くなる。
http://wnyan.jp/1262
docomoはMNOだから、そのへんの縛りがない。
3.docomo Wi-Fiがついてくる
道→128K縛り。駅など→WiFiで快適。これからどんどんエリア拡大するだろうから、実質がっつり3G通信することはなくなるんじゃないかと思う。WiFiエリア外で使うことなんて、地図調べたり、店調べたりすることぐらいだから、前述のとおり問題ない。
キャンペーンで2013-03-31まで無料。客引きというより、トラフィックの分散が目的だろうから、ずっと無料にするんじゃないかと思ってる、根拠はないけど。
4.docomoのメールアドレスが150円で使える
スマホで利用するなら、プロバイダをspモードかmopera Uかを選べる。SPモードは315円、8月から開始のmopera Uスーパーライトプランなら157円、SPモードのほうが150円高い。
けど、docomoのメールアドレスがついてくるから、携帯専用サービスが使えることが多い。定額内で全部済ませたいなら、どこかのキャリアのメールが受信できるたほうがいい。
SPモードだとdocomoのスマホ、タブレット以外じゃ使えないけど（IMEIで縛ってる）、テザリングできるし困らない。
5.SMSが使える
docomo風に言うとショートメール。
ソフトウェアテストのエビデンスってなんぞや
SI屋さんをやってるんだけども。要件定義→概要設計→詳細設計→製造→単体テスト→結合テスト→総合テストっていう昔ながらのウォーターフォールモデルで、昔ながらに手動でテストを行ってる。
詳細設計の意味も理解出来ないんだけど、そっちはもっともらしい理由が付けられそうだから置いておいて。
テストを行うときは、なぜかスクリーンショットを一枚ずつ貼ってる。もしくはデータをSELECTした結果を貼る。Excelに。そこに、どこに何を確認したかメモったものをエビデンスというらしい。これが何のために作成しているものかよくわからない。
エビデンスとは - IT用語辞典
動作していることを示す証拠（直訳でもかわらん）らしい。数百、数千ページの糞重たいEXCELブックのなかから目当ての動作をしているページを探しだして確認するのと、実際に動かしてみるのってどっちが早いのだろう。エビデンスを求める人はユーザか元請けか、もしくはリーダか発注している人だろう。そいつらは操作方法がわからない、期待結果がわからないなんてことはない。動かしてみればすぐわかる。対して、ユーザであればテスト仕様書の見方が100%わかるとは限らなくて探せるか微妙だし、そもそもそんなテストのエビデンスが残ってるかどうかわからない。やってないですよね？って悪魔の証明もどきを求めることになる。
そんな役立たずなベタ貼りエビデンスだけど、工数だけはやたらかかる。ベタ貼りやめるだけでテスト工数は半分以下にできる自信がある。
つまり、ベタ貼りエビデンスを作成するよりはその工数でテスト結果の確認を求められたら、テストの再現を行える環境を提示するのが本来のエビデンスではなかろうか。Excelで渡すのではなく、そのテストの実施時点の実行ファイル、DBダンプを渡す。これほんとに？と言われたら、それをセットアップして、できてますよね？と。
それにベタ貼りは改ざんが可能。データダンプなんて数字いくらでも変えられるし、スクリーンショットなんて切り貼りらくらくだし。そんなことしないよ！って言われるかもしれないけど、それが通るほど信用あるなら、そもそもエビデンス自体が不要。信用があればテスト報告書に◯×書いときゃ十分。実行環境そのものなら、改ざんした時点でバグフィクスされてることになって、誰も困らん。と思ったけど困る人はいた、バグ検出数がどうのこうのとか数字をいじくって喜んでる人くらい。
それでも要らない！って大手が叫ばないのは、誰かが工数削減しちゃったら全体の金の流れが減るからとしか思えない。
CSS3のAnimationsで遊んでみた
CSS3 Animations；アニメーション - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋
これを見てたら面白そうだったから使ってみようと思ったけど、あんまり使い道が思い浮かばない。
とりあえずはてなキーワードのhoverをホバーさせてみた。FirefoxとかWebkitで、そのへんのキーワードにカーソル当てるとなめらかに動くはず。カクッと動いちゃったら非対応。
a.keyword:hover {
-moz-animation-duration: .2s;
-moz-animation-name: test1;
-moz-animation-iteration-count: 1;-ms-animation-duration: .2s;
-ms-animation-name: test1;
-ms-animation-iteration-count: 1;-o-animation-duration: .2s; /* reserved Opera */
-o-animation-name: test1;
-o-animation-iteration-count: 1;-webkit-animation-duration: .2s;
-webkit-animation-name: test1;
-webkit-animation-iteration-count: 1;text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
position:relative;
}@-moz-keyframes test1 {
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}@-ms-keyframes test1 {
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}@-o-keyframes test1 { /* reserved Opera */
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}@-webkit-keyframes test1 {
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}
検証環境はChromeだけ、他は知らない。
リンク元のは無限ループにしてるけど、正直うざいから1回限りに。デフォルト1回だからanimation-iteration-countはいらなかったかも。
アニメーションが終了すると、toとか100%の形で止まるんじゃなくて、アニメーションじゃないCSSで終わるみたい。だからtoと従来のやつにCSSが合ってないと気持ち悪い。
なんだか一時期流行ったウザいJavascriptの臭いがする。カーソルオーバーとか、ちょこっとしたところに仕込むときれいかも。
20111108追記
もんどさんから
その用途なら、transitionsを使ったほうが幸せかも。
http://twitter.com/#!/momdo_/status/133907941198807041
とのことだったからテスト。←の「テスト」だけ↓のスタイルシート。
transitionsだと戻るときもアニメ、アニメ中にカーソルオーバー切り替えてもそこから追随してくれる。表記が冗長にならない。アニメーションについての記述がアニメする状態じゃなくて、変化前、変化後に分けて記述する必要がある。
はてなキーワードのhoverをホバーさせてみるので言うと、マウスアウトで影なし、マウスオーバー直後で文字と影が一致、アニメ終了時に影がボケっていう3段階にこだわらなければtransitionsがばっちり。
transitionsのほうが適当に使うとそれっぽくなりそう。animationのほうがこだわれそう。
a.keyword {
position:relative;
text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
-moz-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
-ms-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
-o-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
-webkit-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
}
a.keyword:hover {
text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
