« スーパーコンピュータ報道の愚 々 々 | トップページ | ハイテクカンニングと旧教育試験体制の化石的恐竜化 »

2012年6月20日 (水)

Codecademyの日本語化

たいへんすばらしいことに、本ブログの常連コメンターであるalarky氏の無償の自発的努力により、プログラミング自学自習サイトCodecademyの日本語化が進んでいる。

今後、Codecademyのサイト本体上で、日本語コンテンツの磨き上げが進むと思われるが、このブログでも、このスレッドを議論の場としていきたい。

まず最初に私が気になったのは、動詞codeは「コードを書く」こと==「プログラミングをする」ことである。カタカナ語の「コード」を使うと、多くの日本人にとって違和感があるのではないか。コードといえば、一般的には、日本語では名詞であり、書かれたプログラムの文そのものを指す。動詞codeの現在分詞/動名詞codingも、「コーディング」よりは「プログラミング」のほうが一般的で分かりやすい訳だ。

以上、本日はたった一つでしたが、気になったことを書かせていただきました。

追記: learnは「習う」より「学ぶ」が、日本人の語感として、適訳ではないか? それとも私の思い過ごしかな?

|

« スーパーコンピュータ報道の愚 々 々 | トップページ | ハイテクカンニングと旧教育試験体制の化石的恐竜化 »

コメント

素晴らしいことです

alarky さん、ありがとう
と、心底から言えるように、参加できるようにならなければ。

やっとのことで、パソコンに戻れそうなので
自分に叱咤する意味でも書いておこう

みんなで、プログラマーに、メイカーに、ギークに
ファブラボ利用者になろう、よ

一寸はしゃぎすぎたかな?
にしても、凄いことだ

simomitu

投稿: 下光博之 | 2012年6月20日 (水) 19時44分

岩谷さん、下光さん へ
喜んでいただけて何よりうれしいです。
ただ、本文は、約98%(大体の感覚ですが)は、自分がやっているのですが、
トップページに関しては、プログラム実行部分以外は、関わっていません。
「コードの仕方を習う」以外は、自分のよりいいと思いますが、
その、「コードの仕方を習う」に関しては、Codecademy の方に、「コードの書き方を覚えよう!」の方が、いいんじゃないでしょうか、と提案はしました。

コーディングってのは、やっぱりプログラミングの方がいいんでしょうね。
まあでも、自分の好みだと、「コードを書く」ってのが、一番好きなんですけど、どう思われますか?
だけど確かに「コーディング」はやめた方がよかったと思います。

ただ直したくても、最初は、そのテンプレートの、すべてを、正解判別システムまで、触れるんですが、一回「end」してしまうと、もう触れません。
ので、この場を借りて、岩谷さんをはじめ皆さんに、あ~だ、こ~だ、言っていただけると、ありがたいです。

次回についてですが、あの、今回もそうでしたが、はじめてやるところなので、少し時間がかかるかもしれません。
とにかくがんばります。
岩谷さん、いつも応援ありがとうございます!

投稿: alarky | 2012年6月20日 (水) 21時56分

「ところで、何でも正確に素早く処理するコンピュータには、想像力が乏しく融通が利かないという側面があります。」こんなに早く、こんなに的を得た文章に変わっているのは、岩谷さんですか。ありがとうございます。
もうこのコースは終了しましたが、もう一度やってみたくなりました!

投稿: alarky | 2012年6月21日 (木) 20時58分

Codecademyの方も、文章の磨き上げをしてくださっているようで、特にイントロ部分は、ずっとよくなったようです。
ただ、一部、文章の雰囲気が、あとから変えた部分で、ちょっと不自然なところがあるのが気になるけど、どうなんでしょう???

投稿: alarky | 2012年6月22日 (金) 19時43分

@alarky
ぼくはCodecademyの日本語化にはまったくノータッチです。現地で日本語化に関わっている人(たぶん日本人)は、コンピュータやプログラミングに関しては知識も経験もなさそうなので、訳がときどきおかしくなってます。alarkyさんがCodecademyと頻繁にフレンドリーなコミュニケーションをして、より良いものになっていくことを、期待します。

投稿: iwatani | 2012年6月22日 (金) 20時56分

岩谷さんへ
いつもお世話かけてます。
はい、ゆとりが出来たらそうしようと思います。

投稿: alarky | 2012年6月23日 (土) 15時27分

今、多分、次のコースの分を編集していますが、前回登場していない「三項演算子」と「switch文」のことに触れられています。それで、悪戦苦闘してこの部分の問題を作りました。しかし、こんなペースでやっていたらいつ終わるかわかりません。次回の部分に関しては、最初から日本語が提供されており、プログラム的にではなく、日本語的には、ほぼ完璧だと思われますので、もう英語のチェックはやめようと思っています。そこにこだわる必要もないと思われますので。
今週中は無理かもしれませんが、全力を尽くしますのでお待ちください。

投稿: alarky | 2012年6月24日 (日) 03時34分

問題を編集していて思ったことは、次々と今まで習ったことのない (初めて日本語版をやる人にとって) ことが出てくるようです。
僕以外にも誰か関わっていてそちらのバージョンが先に日本語化されるのかも知れませんが、そうでなかったら、次のリンク「トライ!コードカデミー日本語版」で予習などされることをお勧めします。必ずしもここでなくてもいいと思いますが。

投稿: alarky | 2012年6月24日 (日) 19時24分

久しぶりに、日本語版の中身を見たけど、最初よくなったと思ったら、だんだんひどくなってきてるようです。もちろんこれは僕の独断ではありますが、課題が全部終わったら何十箇所すべて、訂正を頼むつもりです。
また、余計に分かりづらくなっている日本語もありますので、ここに僕が提出した原文を載せたいと思います。
こちらの方が分かりやすいかもしれませんので、参考にして下さい。
・・・・・・・・・・


□ Getting Started with Programming
 by Leng Lee
プログラミングを始めましょう!
 作者: Leng Lee
Time to become a coding ninja.
 コーディング忍者になる時

1. Getting to Know You
あなたを紹介してください
 See what you can do with programming!
初めてのプログラミング
2. Why learn programming?
プログラミングは楽しい !
 Let's get some background to programming and JavaScript.
JavaScriptで出来ること?
3. Make the computer think!
コンピュータになって考えてみよう !
 Use if / else statements to generate different output for different situations.
必要に応じたプログラムを実現するための if/else
4. Playing with strings and numbers
ちょっと気楽に復習レッスンをします
 Let's learn how to change strings and numbers.
文字列や数値にハサミを入れてみよう
5. Variables
変数
 Let's learn how to store numbers, strings and booleans for later use!
なんでもセーブしよう!




■ Getting to Know You (Section 1 of 5)
5-1. あなたを紹介してください


<1. What's your Name?>
まず、あなたの名前を教えてください!

やあ、まず、お互いを、紹介しましょう!
あなたのお名前は?


"Q" "Ryan" のように、名前の両側に引用符「" ~ " 」を付けて、キーボードの「Enterキー」を押してください。



<2. Finding the length>
あなたの名前は何文字ですか?

上出来! では、あなたの名前の文字数は? 引用符「" ~ " 」をつけたあなたの名前の最後に、「.length 」と、タイプして、「Enterキー」です (これからもこんな感じで、Enterキー を、叩いて下さい)。


"Q" 私の場合は、"Ryan".length です。真似てタイプしてみてください。



<3. Basic math>
数学、はじめの一歩

いい感じです! 今度はいくつか算数を。もちろん、プログラミングで、計算が出来ます。


"Q" 132 + 322 をやってみましょう。
  132 + 322
とタイプすればOKです。




<4. Numbers and More>
掛け算だって、割り算だって、まかせてください!

見ましたね! こんな感じで、右コンソール画面から、四則演算が出来ます。
この辺りのことを、もう少しやってみましょう。


"Q" お望みなら、「* 」で掛け算、「/ 」で割り算が出来ます。さあ、やってみましょう。



<5. Error: does not compute!>
引用符を付け忘れると?

ただし、右のコンソール画面では、守るべきことがあります。
コンピュータと会話をするには、特定の/特別の 言語を使わないといけません。あなたが今、使っていた JavaScript のような。

ここで、JavaScript の文法から外れた言葉の使い方をすると、コンピュータの頭は「??? /なんだこりゃ?」となってしまいます。そして、文句を言います/エラーを出します。


"Q" ちょっと、コンピュータ(正確には,JavaScriptコードを解釈しているインタープリタ)を混乱させてやりましょう。例えば、
  eggplant
のように、引用符を付けずにタイプしてください。
インタープリタは、参照エラー/ReferenceError だと、文句を言います。


"ヒント"
eggplant/茄子(なす): ナス科の仲間は、そのまんま食べると、毒性のあるものがあります。そんな感じで?!、JavaScript では、「文字列そのまんま」でなく、「引用符 / " ~ " 」を付けてあげましょう。

コンソール画面:
ReferenceError: eggplant is not defined
Well done. You have confused the computer!
Good work completing this section! Start the next section.
 // 参照エラー: eggplant ってのは,定義されていません.
 // OK!,うまくコンピュータを混乱させました.
 // このセクションはバッチリです.次へ進みましょう.




■ Why learn programming? (Section 2 of 5)
5-2. プログラミングは楽しい !


<1. Editor and comments>
今までのところ、あなたが書いたプログラムは、コンソール画面での「1行コード」ばかりでしたね。でも、味(あじ)のあるプログラムを書くために、もっと行数を増やしましょう。

新しい ツール/プログラミングのための道具 を紹介しましょう。
editor/エディタ:
これは、「Codecademy作成特別テキストエディタ」です。普通の エディタ のように、コードを何行でも書くことが出来ます。
さらに、下の [Run] ボタンをクリックすると、コードが実行され、その下の「Codecademy特製のコンソール画面/結果表示ボックス」に、プリント/出力 させるという仕組みになっています。

あなたもお気づきのように、右エディタにはすでに、何かが書き込まれていますね。
  // This is a comment that the computer will ignore.
    (これはコメントです.コンピュータは無視します.)
  // It is for your eyes only!
    (あなたにしか分かりません/コンピュータには秘密です!)
そしてそれぞれの行は、
  //
で始まっています。
そして 「 // 」 の後に書かれているのは、「コメント」と呼ばれるもので、コンピュータはこれを「無視して」プログラムを読みます。

「コメント」は、複雑な 流れ/アルゴリズム のあるコードに 要点/説明 を書いておきたいときや、何をしているコードなのかを後からすぐ思い出せるようにするために使うことは、とても有効です。
また、「コメントアウト」と言って、「 // 」を、コンピュータにプログラムとして読ませたくないコードの前に付けることで、そのコードを一時的に「実行されない」ようにすることも出来ます。


"Q" line 1-2 (1,2行目) は、コメントアウト されているので、実行されません。

line 4 に、"cake" という 文字列 の 長さ/文字数 を調べて、その 数 を、9 で割るコードを書いて下さい。


"ヒント"
文字数を調べるために、"cake" の後に、「.length」を付けます。そして「* 」を使って、9 を掛けましょう。

今あなたの書いたコードに、「 // 」を使って コメントアウト すると、そのコードは実行されなくなります。
「// 」を付けて、実行されなくなるのを確かめてみましょう。



<2. What am I learning?>
今覚えているのは何語ですか?

JavaScript語です。つまりコンピュータプログラミングのための JavaScript/JS です。
たくさんのプログラミング言語がありますが、JavaScript は、人気者で、また、覚えやすい言葉でもあります。

★ JavaScript で出来ること
 ・アクションのある/動きのある Webサイトが作れます。
 ・Webページに、アプリやゲームを、埋め込めます。
   例えば、ブラックジャックのゲームとか
 ・インターネット上で、情報をゲット出来ます。
   例: twitter で、あなたの関心に応じてトレンドなキーワードを見つけられます。
 ・データ/情報 を、まとめたり、プレゼンテーションできます。
   例: 自動表計算ソフト(エクセルのような)を使う。データをグラフなどを使って分かりやすくする。


"Q" [Run]ボタンをクリックして、JavaScript が私たちに、どうやって「話しかけてくるか」を見てみましょう。


"ヒント"
やあ、ヒントを見つけられておめでとう。
グリーンの[Run]ボタンをクリックすれば、OKだ!

エディタのコメント:
//If you get stuck, click on 'Show Hint' on the left.
  /// 答えを思いつかないときには,"ヒント"をクリックしてみましょう.

表示ウィンドウ:
This is an example of using JS to create some interaction on a website. Click OK to continue!
  // これは,JavaScriptを使って,Webページとの「会話」を実現する例です。
  // OK を,クリックしてレッスンを続けましょう.



<3. Interactive JavaScript>
インタラクティブなJavaScript

今私たちは、JavaScript を使ったら、どのように インタラクティブ (私たちとコミュニケーションをとれる) になるのかを遊んでみました。今度はあなたがやってみて!

例えばこんな感じです。
  confirm("えっ,こんなに簡単なのですか ? びっくり !");
  confirm("JavaScript をマスターするぞ !");

このウィンドウは、ユーザに何かを確認するために使われます。きっと今までにあなたはこんなポップアップウィンドウを見たことがあると思います。例えば、何か「大事らしきもの」を削除しようとした時、変更したことを セーブ/保存 せずに、Webページを去ろうとした時。


"Q" あなたの Webページ を見ているユーザがいるとして、確認したいメッセージを表示するコードを書いて見ましょう。


"ヒント"
エディタのコメント:
// Also try the Q&A forum to get help
  /// 分からないことがあったら,Q&Aフォーラムを使ってみましょう.
// The link is up at the top!
  /// そのリンクは,右上にありますよ.



<4. What is programming?>
プログラミングをするって,何をするの?

プログラミングをするということは、コンピュータにやってほしいことを、順番に書いたリストを作るようなものです。あなたの書いたそのリストに従って、クールにアクションできます。

今のところ/現状では、プログラミングであなたの寝床を作ることは出来ませんが!、計算/数学 や、あなたの預金残高の追跡、また、あなたの友達にメールを送ったり出来ます。

こういったことをやるには、「input/入力」することが必要です。prompt()メソッド を使って、入力すべき情報を尋(たず)ねることが出来ます。

例えば:
 1. prompt("あなたの名前は?");
 2. prompt("Ubuntu(リナックスOS)って?");


"Q" prompt()メソッド を使って、ユーザに、出身地を尋ねてください。


"ヒント"
小さな間違いやタイプミスでさえ、プログラミングでは、エラーになってしまいます。「ドット/ . 」や「セミコロン/ ; 」を付け忘れていませんか、「( 」や「{ 」は、ちゃんと閉じられていますか? チェックして下さい。



<5. Data Types I & II: Numbers & Strings>
データ型 I & II: 数値 と 文字列

データの 型/タイプ は、いくつかあります。あなたはすでに2つのタイプを使っていますよ。

numbers/数値: つまり、「量/多い少ない」を意味します。少ない... 多い... おなじみですね/身にしみますね。とにかく 数学/計算 には欠かせません。

strings/文字列: 文字の連なり です。その文字一つ一つは、「a ~ Z 」 「空白文字/スペース」 さらには 文字 としての「数字」などがあります。
以下の例はすべて「文字列」です:
  Ryan、4、What is your name?
「文字列」は、「識別/分類 ラベル」や「名前」で使ったり、「あなたのプログラムの内容についての説明」などで、とても役に立ってくれます。

「数値」をコードの中で 表現する/書く/タイプする には、「引用符/ " 」で囲まず、そのまま書いてください。これは、「文字列 としての 数字」ではなく、「数値 としての 数字」を、表現します。
また、私たち日本人は特に、「半角文字」を使うことを忘れないで下さい。「全角文字」は、「文字列」としてしか使えません。
例えば:
  42、190.12334
などですね。

「文字列」の場合は、「引用符/ " / ' 」で、囲んでください。例えば、
  "あなたのお名前は?"
などですね。


"Q" 少なくとも3文字以上で文字列を作って、その 長さ/文字数 を求めるコードを書いてください。「文字数/length」には、「文字列」に含まれる「どんな文字も」含まれます。「スペース/空白文字」も、もちろんです。


"ヒント"
何かの文字列の長さを求めるには、
  "string/文字列".length
のように、タイプします。
「文字列」と言うのは必ずしも「ことば」とはかぎりません。「文字列」を作るのに、どんな文字も、例えば「空白文字」も、「引用符/ " 」の間に含めることが出来ます。



<6. Data Type III: Booleans>
データ型 III: ブーリアン タイプ

3つ目のデータ型は、
  boolean/ブーリアン
です。
George Boole/ジョージ・ブール の名にちなんで付けられた名前です。
boolean には、2つの 値 しかありません。
  true と false
です。

boolean は、ある式 が、「true/真/正しい」または「false/偽/いつわり」を、評価する/示している 時に、コードの中で使えます。

例えば:
 1. 「10 > 3 」は、true/正しい ですね。
 2.「5 < 4 」は、、そんなバカな、、もちろん false/いつわり です。

boolean ってのは、実は、とっても使えるデータ型です。例えば true を評価した時だけ、ある部分のコードを実行するようにすることが出来るからです。
例えば、「あなたの預金口座の残金が 0 より大きいときという条件」が、、true なら、その時だけ、ATMプログラム は、あなたに現金を引き出させてくれるコードを実行します。


"Q" もし、"I'm coding like a champ!" って 文字列 が、10文字以上なら、true を返すコードを書いてください。


"ヒント"
あなたの書いた文字列の数を求めるコードは、
  "文字列".length
です。

I'm coding like a champ!
 // 僕/私 って、コーディングの天才かも!




■ Make the computer think! (Section 3 of 5)
5-3. コンピュータになって考えてみよう !


<Using console.log>
console.log()メソッド を使おう

あなたはすでにお気づきかもしれませんが、
  interpreter/インタープリタ/JavaScriptコード解釈プログラム
は、JavaScript のコードを、1行ずつ/逐一、出力(プリント)しているわけではありません。
もし、インタープリタ の 考えていること/解釈していること を知りたかったら、たまには、私たちに話しかけてくれるように、「お願い」しなければいけないでしょう。

どうしたら、私たちに話しかけてくれるでしょう。
  consolo.log()メソッド
は、「( ) 」の中に書かれていることは何であれ、「解釈/コードの意味」を出力すべきことだとして受け取り、その log/ログ/解釈の記録 を、右エディタ下の、「コンソール画面」にプリントします。
だから、
  console.log()
    // コンソールが . logを出力する関数(コード)を呼び出す
って言うのです。

このコンソール画面出力を、普通に「プリントアウトする」って、言っていますが、そのためのプリンターは要りません、、ちょっとややこしい話ですね。


"Q" ↓に書かれてあるコードを実行してみましょう。このエクササイズをクリアするためのコードですよ。

  console.log(2 * 5)
  console.log("Hello")


"ヒント"
チェックポイントは、「文字列には引用符で囲み」、「数値には引用符を付けないこと」です。そして、「( 」が、「 ) 」で閉じられていることを確認してください。



<2. Comparisons>
比べてみよう!

今までに私たちは、3つのデータ 型/タイプ を覚えましたね。
  数値(numbers)、文字列(strings)、ブーリアン(booleans)
です。
ここでは、比較演算子/comparison operators について学びましょう。

比較演算子 のリスト:
  // * と ** は,何かの データ値 です.
 * > **  ・・・  (*が) ** より大きい
 * < **  ・・・  ** より小さい
 * <= **  ・・・  ** より小さいか、同じ
 * >= **  ・・・  ** より大きいか、同じ
 * === **  ・・・  ** と同じ


"Q" 上で取りあげた 比較演算子 を使ってみましょう。

 1. エディタにある4つの 文/コード が、true をコンソール画面にプリントするように、正しい 比較演算子 を選んで、タイプして下さい。

 2. 今度は、false をプリントするように、もう2つのコードを、console.log()メソッド を使って書いて下さい。


"ヒント"
「.length 」が返す 値 は、数値 です。
なので、
  "Jenny".length === 5
において、
コンピュータは、Jenny の文字数(数値)と、5(数値) が、同じかどうかを調べます。

エディタのコメント:
//After you run the code, you should see true 4 times, and false 2 times.
//By using `console.log` at the start of each line,
//we are able to print 6 lines of output.
  /// true を4回 出力/プリント させた後,false を2回出力しましょう.
  /// それぞれの 文/コード は,console.log()を使います.
  /// 6行にわたって,プリントしましょう



<3. Decisions, decisions>
比べた結果次第です

比較演算子 はもうバッチリですね。今度はその 比較演算子を、使いこなしてみます。

比較演算子 と、その結果である ブーリアン値 を使って、「あるコードのかたまり」を、実行するかどうかを決定しましょう。その処理をするコードのことを、
  if文/if statement または 条件文/conditional statement
と言います。
そしてこれは、自分の行動を決定できるロボットによるチームを作り上げるための、第1歩となるでしょう。

では、右のエディタを見てみましょう。最初に、コンピュータは、line 1 を、見ます。そして、if文 が、true なら、「{ } 」の中のコードを実行します(この場合,「100<2」が正しければ)。

そして、false なら (正しくなければ) 、「{ } 」の中のコードは、完全に無視されます。そして、line 6 を、見ることになります。


"Q" line 1 に、変更を加えて、2つの console.log()メソッド が実行されるようにして下さい。


"ヒント"
line 1 の、条件/( )の中 が、true になれば、 次に来る / line 2 からの 「{ } 」の中のコードが実行されます。

エディタのコメント:
You are good at math!
 // (trueに出来たあなたは)数学が得意ですね!?
Just letting you know: your program got to line 6
 // あなたにお知らせします:
 // あなたのコードは今6行目(line 6)です.



<4. Computers are smart>
コンピュータはお利口

if文 も、バッチリ!です。さて今度は、あなたのロボットに、2つの選択肢を、判断させて見ましょう。

あなたのロボットは、今2つの分かれ道の前に立っています。そして彼は、どちらに行くべきかを決定するための、あなたが書いたコードを、調べはじめます。

このコードはこんな感じです:

if/もし (ここが,true になれば)
{
  // この部分が実行されます.
}
else/そうでなかったら
{
  // 代わりにここのコードが実行されます.
}

あなたのロボットは、line 1 からスタートです。もし、「( ) 内 の ブーリアン値」が、true になれば、最初の 「{ } 内のコード」を実行します、、最後の行のコードであるかのように! つまり、else の後にある「{ } 内のコード」は、無視されるのです。

しかしながら、「( ) 内 の ブーリアン値」が、false なら、あなたのロボットは、最初の「{ } 内のコード」を無視して、else の後の「{ } 内のコード」を実行します。

つまり、どちらのコードを実行するかは、line 1 の、「( ) 内のコード」が、true を返すか false を返すかにかかっているのです。

あなたは、彼に自分で判断できるように教えているところです。そして彼の進歩は目覚しいと言えるでしょう。彼がまだ、紙オムツしていたのは、まるで昨日みたいな勢いです。


"Q1" line 1 の 「( ) 内のコード」が返す ブーリアン値 が、false になるように、その「( ) 内」に、コード/値 を書きましょう。さてあなたのロボットの行動は?

"Q2" line 1 の「( ) 内のコード」の 値 が、false の時、実行するコードを、console.log()メソッド を使って書いて下さい。


"ヒント"
不等式 (不等号/>/< を使った式) を使って、ブーリアン値 を、決めましょう。例えば、「10 > 5 」のように。

エディタ内のコードなど:
alert( "..." );
 alert()メソッド です。
Let's go down the first road!
 // 今の道をそのまま行きましょう!
what should we do if the condition is wrong? fill in here:
 // if文 の条件が false だったらどうすべきか,ここに書く:



<5. More practice with conditionals>
条件文 をさらに練習します

正しい構文で、書くことはとても大切です。ここでは、あなた自身について尋ねる問題を使って、あなたが、if/else文 の構文をマスターできたかチェックしましょう。出来るだけ、あなた自身の力でこの問題を解いてほしいと思います。でも、思い出すために何か必要なら、下にある「ヒント」を見て下さい。


"Q" if/else文 を正しく書いて下さい。今やったばかりのエクササイズを思い出して。
「( ) 」の 条件式 の 値 が、true なら、「I am right.(正解だ) 」と、プリントします。そして、false の時は、「I am wrong.(間違えた) 」とプリントします。


今は、条件式 に、2つの 数値 を使っているだけなので、とっても退屈かもしれませんね。でも、すぐにもっとクールな条件を使えるようになります。例えば、「あなたの預金口座の残高」や「フェイスブックの友達の人数」、あるいは、「あなたの猫ちゃんの名前」とかを使ってです。
そして、そんな 値 の変化にも対応しながら、条件式 を、利用できるようになります。


"ヒント"
if("Leng".length === 4) {
  // ここのコードを実行
} else { // さもなければ
  // 代りに,ここのコードが実行される
}

エディタ内のコメント:
// Remember, the order and punctuation matter.
// If you get an error, check carefully, line by line
// If you're really stuck, see the hint!
  /// コードを書く順序,
  /// 記号のような文字の正しい使い方は,
  /// とても重要です.
  /// もし,エラーが起きたら,
  /// 1行1行注意深く調べてください.
  /// どうしても分からない時には,
  /// ヒントを見て下さいね.



<6. Computers aren't that smart>
本当はね,コンピュータはそんなに利口じゃないんだ

やったね、上出来です! さて、コンピュータってのは、想像力が乏しく、融通が利かないものなんだよね、本当は。構文は、きっちり正確じゃないと、そのコードを理解できないんだ。

あなたは、プログラミングを始めました、そしてゆくゆく、私たちはたくさんの構文ルールを教えていくつもりです。これはプログラミング言語における、文法だと言えますね。
文法が完璧なら、ビューティフルなコードが書けます!


"Q" さて、エディタのコードは間違いだらけです。それらのすべての間違いを見つけ、しかるべき場所にくるように、直して下さい。足りないものは、付け足してください。

あなたがこれからすることは、よく言われるところの、「デバッグ/debugging 」にあたります。この、デバッグ/虫を取り除く の、いわれのはじめは、グレース・ホッパー/Grace Hopper が、文字通り 蛾が原因で動かなくなった彼女のコンピュータから、その蛾を取り除いたことからだそうです。

エディタ内のコメント:
// The computer doesn't worry about extra spaces between words or brackets
// It just cares about the order of where things are placed
// and that you have used the right characters (){}[]"";
  /// コンピュータは,括弧やことばの間にある
  /// 余分な「半角スペース」は,気にしません。
  /// 気にするのは,置かれるべき順番です.
  /// そして正しく「(){}[]""; 」を,使い分けなければなりません.
// For extra help, a program called a 'linter' is checking your code
// and will put a red 'x' next to the first line that contains errors
  /// そのほかにあなたのコーディングを助けれくれるものは,
  /// 「linter 」と呼ばれるプログラムで,
  /// あなたのコードをチェックします。
  /// そして,エラーを含む最初の行の頭に,
  /// 「赤の x マーク」を,置きます.
    // 実際に,Codecademy製テキストエディタには,
    // 適用されているようだ.




■ Playing with strings and numbers (Section 4 of 5)
5-4. ちょっと気楽に復習レッスンをします


<1. Mid-lesson breather>
息抜きをかねて復習レッスンです

ここまでで、ずいぶん JavaScript の土台を作りあげました。いろんな約束事、用語、構文などなど。ここでは、ちょっとだけ気楽なレッスンで新しいことを覚える前に復習して、土台を固めておきましょう。
私たちが学んだことは:

1. confirm()メソッド、prompt()メソッド
  // ちょっと知っている人のためのヒント:
  // window.confirm() そして window.prompt() です.
つまり、ポップアップ/pop-up boxes の出し方についてです。例えば:
  confirm("I am ok"); や prompt("Are you ok?");
です。

2. データ型
 a. 数値/numbers
    例: 4.3 、 134
 b. 文字列/strings
    例: dogs go woof! 、 JavaScript名人
 c. ブーリアン/booleans
    例: false 、 5 > 4

3. if/else文
 ・ストーリー①
if (正しい/true) {
  ここのコードが実行させる
} else {
  ここのコードは実行されない
}

 ・ストーリー②
if (いつわり/false) {
  ここのコードは実行されない
} else {
  ここのコードが実行される
}


"Q" では、エディタにあるコードのストーリーを考えてみてください。結果を [Run]ボタンをクリックして確認してください。



<2. Math>
計算してみよう

前回、数学の基本をやりましたね。学校で習った算数の記号は、JavaScript でも活用できます (ちょっとした違いは確認して下さい)。さらに、計算する順序に関するルールも、、つまり「( ) 」を使うことですが、、あなたが学校で習ったやり方と同じです。

Code/コード
1. ( )  ・・・  この中の計算を先に済ませます。
2. *  ・・・  掛け算をします。
3. /  ・・・  割り算をします。
4. -  ・・・  引き算をします。
5. +  ・・・  足し算をします。

例:
1. 100/10 は、10 です。
2. "Jane".length + 5 は、9 です。
3. 5 * (3+1) は、20 です。


"Q1" if/else文 を完成させるために、欠けている部分を、補ってください。そして、この if文 では、( ) 内が、true に評価されるようにして下さい。

"Q2" else文 が実行された場合は、"ErrorErrorError" とコンソール画面にプリントされるようにして下さい。
  // ErrorErrorError
    /// エラー! if文が false です.
    /// true になるようにして下さい.


"ヒント"
if/else文 の構文に足りない部分がたくさんあります。if キーワード、 else の後の { }。



<3. Math and the modulo>
余りはいくつ? ― 剰余算

ここではちょっと面白い「演算子」を紹介しましょう。「% 」です。これは、2つの 数値 の間に置かれます。
まず、コンピュータは、最初の 数値 を、後ろの 数値 で割ります。そして、割り算をした時の「余り」を、返すのです。

例えば、
  23 % 10
では、23 を 10 で割ると、2 余り 3 となります。つまり、答えは、3 です。

もっと実例を:
 17 % 5 は、2 になります/を返します。
 13 % 7 は、6 を返します。


"Q" console.log()メソッド と、「剰余演算子/モジュロ演算子 % 」を使って、下記の a b c の、余りが、コンソール画面 にプリントされるようにして下さい。
 a. 14 / 3
 b. 99 / 8
 c. 11 / 3


"ヒント"
console.log()メソッド を 3行にわたって書いて下さい。そして、それぞれの ( ) の中に、余りを返す式を書いて下さい。「余り」を、返すようにするには、「/ 」ではなく「% 」を使うことをお忘れなく!

エディタ画面のコメント:
// Below is an example of printing the remainder of 18/4 using modulo
// console.log(18 % 4);
  /// 下記は,18/4 の余りをモジュロ演算子を使って求め,
  /// コンソール画面に出力するやり方の例です.
  /// console.log(18 % 4);



<4. Modulo and if / else>
% を if/else で使う

モジュロ演算子はどのように使うのですか?
そのひとつの使い道は、割り切れるかどうかを、テストすることです。「30 % 10 」が何を返すか考えてみてください。何にも余らずきれいに割り切れますね。なので、0 が返されます。

では、「9 % 3 」は?、これも 0 です。

「200 % 100 」は?、えっ、2 ですか!、冗談ばっかり、よく考えたらこれも 0 ですね。

そして、%/モジュロ演算子 は、if文 や if/else文 で使うと、クールな使い方が出来ます。


"Q" line 3 を編集して、コンソール画面が、正しい発言をするようにして下さい。

エディタ画面のヒント:
//An example of an if/else statement with % in the condition
 /// if/else文の条件に%演算子を使った例
The first number is even!
 // 最初の数(左側の数値)は,偶数です!
The first number is odd!
 // 最初の数は,奇数です!


"ヒント"
偶数とは、2 で割り切れる数だと言えます。



<5. Substrings>
部分文字列

私たちは、数値 を操作するやり方をちょっとだけ覚えました。では、文字列を操作するって?、どういうことだと思います?

もし、ある文字列を切り刻んだら、あなたはたくさんの 部分文字列 を、ゲット出来ますね。それは、ミミズを切り分けて、小さなミミズをたくさん作る感じですね。

コード:
"ある文字列".substring(x, y)
x : あなたが最初に切り出す位置です。
y : あなたが切り終わる位置です。

位置を表す数字は、ちょっと分かりづらいかもしれません。例えば、"hello" から "he" を切り出すには、こう書いて下さい。
  "hello".substring(0, 2);

ちょっと想像してみてください,
文字列のそれぞれの文字の左側に「マーカー/目印」があると思ってみて下さい。こんな風に:
  0-h-1-e-2-l-3-l-4-o-5

そしてもう一度、この図を見ながら考えてみましょう。「0 と 2 に,囲まれている部分」が切り出されているのです。切り出されたのは「he 」ですね。

もっと実例を:
1. "Batman" の最初の3文字を切り出す:
  "Batman".substring(0, 3);
2. "laptop" の4文字目から6文字目までを切り出す:
  "laptop".substring(3, 6);


"Q" "wonderful day" の、4文字目から7文字目までを切り出して下さい。

エディタにあるコメント:
// Be careful with the substring's letter positions
  /// 部分文字列の,
  /// 位置/ポジションナンバー に気をつけましょう.
    // よ~く観察してみると,
    // 切り終わる位置ナンバーはそのままですね.
    // 問題は切り出す位置です.
    // でも、1 引けばいいですよね !


"ヒント"
切り出す位置ナンバーは,0 から始まることに気をつけましょう。



<6. More sub-string practice>
もっと,substring()メソッドを使ってみましょう

部分文字列の、位置ナンバー を決めるのは、ちょっとややこしいですね! 本当に身についているかどうか確認してみましょう。


"Q" 次の a. b. c. の指示に従って、3行にわたり、コンソール画面にプリントしてみましょう。console.log()メソッド を使います。

a. "January" から "Jan" を取り出す
b. "Melbourne is great" から "Melbourne is" を取り出す。
  ! 空白文字/スペース に注意してください。
c. "Hamburgers" から "burgers" を取り出す。

エディタのコメント:
// Use console.log( ) to print out the substrings.
// Here is an example of the 1st to 4th letter of "JavaScript"
// console.log("Javascript".substring(0,4));
  /// 部分文字列を取り出すために,
  /// substring()メソッドを使って下さい.
  /// ここに"Javascript"の
  /// 1文字目から4文字目までを取り出す,
  /// 例を用意しました.
  /// console.log("Javascript".substring(0,4));




■ Variables (Section 5 of 5)
5-5. 変数


<1. Variables>
変数

ここまでで、文字列の作り方、文字列の長さの求め方、部分文字列の切り取り方、基本的な計算のやり方 などを覚えました。一日の仕事としては悪くないよね。

でもさらに複雑な コードを書く/コーディングをする には、コードの中にある「値」を セーブ/保存 することを覚えないとね。セーブするには「変数」を定義し、その 変数 に具体的な名前を付けるわけです。ただし、大文字と小文字には敏感だってことを覚えておいてください。あなたが付けた特別な名前を持つ 変数 は、一回、作ったら/宣言したら、その 「変数というカプセル(入れ物)」に入っている「値」を、その 変数 の名前を タイプする/使う ことで、再び取り出すことができるようになるわけなのです。

コード:
var 変数の名前 = さまざまなデータ型;

例:
① var myName = "Leng";
② var myAge = 30;
③ var isOdd = true;
    // isOdd(奇数ですか?)


"Q" myAge という 変数 を作って、あなたの年齢をその 変数 に、セーブ して下さい。

エディタのコメント
// To create a variable, we use only one equals sign
// But to check if two values are equal, we use 3 equal signs.
  /// 変数に値をセットするには, ただひとつの = を使います.
  /// 左右の値が等しいか調べるのは, === です.
// declare your variable here:
  // ここに変数を宣言してください.


"ヒント"
「引用符/ " 」は使わないで下さい。引用符で囲んでしまうと「数値」ではなく「文字列」に変わってしまいます。



<2. More Variable Practice>
もうちょっと変数を使ってみましょう

前のエクササイズでは、変数 を作りました。でもどのように使うんでしょうか? こんな風に考えてみてください。まず私たちが、変数 の名前をタイプすると「メインメモリ」に存在した 「変数の名前のための割り当て」は、補助記憶装置 に移し、変数 というカプセルに入っていた 値 を今度は、メインメモリ に持ってきて、それによってプログラミングをするという風に。


● 例:
var myName = "Steve Jobs";
myName.substring(0, 5);

上の 例 の、2行目 を、見て下さい。こんな風に考えましょう。
あなたはコンピュータに、myName を、スワップアウト して、代わりに、"Steve Jobs" を、スワップイン して下さい、、と言っていると。

なので、
 myName.substring(0, 5)
は、下記のことが行われていることになるのです。
 "Steve Jobs".substring(0, 5)
そして、"Steve" を返します。


● 他の例:
var myAge = 120;

では、
 myAge % 12
はどうなりますか?
ヒント を見て確かめてください。

つまり、「変数」というのは、「値」を、「しまっておく/収納しておく」ものなのです。収納されるのは、数値 でも 文字列 でもかまいません。あなたにはすぐにその便利さが分かってくると思います、、これは長いプログラムコードを書くとき、とても楽に書けるようにしてくれるものなのです。


"Q" エディタのコメントに従って、コードを書いて下さい。

コメント:
// Declare a variable on line 2 called myCountry and give it a string value.
 /// line 2 に,変数myCountry(私の国)を宣言し,
 /// 値 を,文字列で、セーブ/収納 してください.
// Use console.log to print out the length of the variable myCountry
 /// 変数myCountryの長さ(文字列の長さ)を,
 /// console.log()メソッドを使って,プリントしてください.
// Use console.log to print out the first three letters of myCountry
 /// 変数myCountryの最初の3文字を,
 /// console.log()メソッドを使って,プリントしてください.


"ヒント"
"New York" と "new york" は、コンピュータ君には、違った 文字列 に見えています (つまり、"New York" と "new york" は、「違う文字列」ということ)。

本文の問題にあった
 myAge % 12
は、0 を返します。

<<コンピュータの物理的側面を理解するためのヘルプ>>
● main memory/メインメモリ(主記憶):
コンピュータ内でデータやプログラムを記憶する装置。電源を切ると内容が失われてしまう。このため、コンピュータにはメインメモリのほかに、
  補助記憶装置
が装備されており、データの加工を行う際には必要なものだけメインメモリに呼び出して使う。
● swap-out/スワップアウト:
低優先度の或いは待ち状態のプログラムやデータなどを主記憶から補助記憶装置に一時的に移して,他のジョブのために主記憶を開放する動作を言う.
● swap-in/スワップイン:
スワップアウトされていたプログラムやデータなどを主記憶に戻す動作.



<3. Change variable values>
変数の値を変更するには?

ここまでで、変数 についてみてきたことは、
 a. 変数 の作り方(宣言)。
 b. 変数 の使い方。
です。

今度は、変数の 値 を変えてみましょう。変数 の 値 は簡単に変えられます。それには、すでに作った 変数 と「まったく同じ名前」を使って、あたかも、新しい 変数 に、値 を 代入/セーブ/収納 するようなフリをすればよいのです。

実際に見てみましょう。
 var myAge = 30;
そこで、
誕生日を迎えたので、アップデートしたいなって言ってみます。
 var myAge = 31;
ほら、変わりましたね!


"Q" コメントの指示に従って、
  line 1, line 3, line 5, line 8
コードを書いて下さい。
このやり方を通して、この順番でコードを書くことが、とても大切なポイントであることを、分かってほしいと思います。

コメント:
//On line 2, declare a variable myName and give it your name.
  /// 2行目で,変数 myName を宣言して,
  /// あなたの名前 を 値 としてください.
//On line 4, use console.log to print out the myName variable.
  /// 4行目で,console.log()メソッドを使って,
  /// myName の値を,プリントしてください.
//On line 7, change the value of myName to be just the first 2
//letters of your name.
  /// 7行目で,myName の 値 を変えましょう.
  /// あなたの名前の「最初の2文字」だけにして下さい.
//On line 9, use console.log to print out the myName variable.
  /// 9行目で,console.log()メソッドを使って,
  /// 新しいmyName(の値)をプリントしてください.


"ヒント"
変数myName の値をコンソール画面に出力するには、console.log の後の ( ) の中に,myName を、置いてください。



<4. Conclusion: Part 1>
ポイントの整理 パート1

では、これまでやったことを素早く見てみましょう!

データ型
① 数値(numbers)
 普通の数字のように使えばOKです。
② 文字列(strings)
 なんでも(たとえ数字でも)「" " 」で囲んであったら、文字列 です。「ことば」は、文字列にする必要があります(生では,コンピュータが文句を言います)。
③ ブーリアン(booleans)
 true、false だけです。

変数(variables)
 データを 変数 に セーブ 出来ます。そして、変数 の名前をタイプすることで、値 を取り出せます。

数値 と 文字列 の操作
 数値:
  比較演算子, モジュロ演算子 は、大丈夫ですか?
 文字列:
  length、substring 思い出せますか?

console.log()メソッド
 あなたが、( ) の中に置いたものは何でも、コンソール画面にプリントします。


"Q1" line 1 のコメントを読んでください。
 //On line 2, write your first comment! It can be anything!
  /// 2行目に,あなたの最初のコメントを書いて下さい.
  /// なんでもOK!

"Q2" line 3 に、変数 myJob を作って、値 を セーブ してください。

"Q3" line 4 に、myJob の値 の長さを、コンソール画面に、プリントしてください。



<Conclusion: Part 2>
ポイントの整理 パート2

ついにここまで来ましたね、おめでとう! あなたはたくさんのことを覚えました! ここでは、その達成感に浸る前に、あと、1問だけやってみましょう。

ちょっとクールな構文を思い出してください、if/else文 です。

if/else文 とは、言い換えれば、条件文 ですね。どんな条件かによって、コンピュータは、違ったアクションで答えます。


"Q" あなたが、if/else文 を作って下さい。
この問題の唯一の約束事は、コンソール画面に、
  I finished my first course!
と、プリント/出力 することだけです。

エディタのコメント:
//See the hint on how to think through making an if / else statement
 /// if/else文 の作り方をヒントを見て、
 /// じっくりと、考えて下さい。


"ヒント"
次の3つのステップで、if/else文 を作りましょう。
1. 何に対して、正しいか、間違っているかを、求めますか?
  // 例えば「JavaScriptを覚えたいか?」
    // "覚えたい".length === 4 (true)
    // "覚えたくない".length === 4 (false)
2. 条件が正しければ、その時のアクションをコードに書いて下さい。
  // 例えば,"I finished my first course!"
    /// "私は最初のJavaScriptコースを終えました。"
3. もし条件が間違っていれば、その時のアクションを書きます。
  // 例えば,"僕にはプログラミングはあんまりね。"
・・・・・・・・・・

投稿: alarky | 2012年6月26日 (火) 20時02分

> こちらの方が分かりやすいかもしれませんので、

現状は、何がこちらで、何があちらか、よく分かりません。

原文: ....
訳1(codecademy): ....
訳2(alarky): ....

というように、並記してください。

もっと重要なことは、
ブログのコメントで長文を連載するのは、する方も読む方も厳しいので、どこかのサイト(無料サイトでよい)にアップロードして、そのリンク(正しいタイトル入り)だけを、ここのコメントで(短い説明付きで)提供してください。.txtよりは.htmlがいいですね、できれば。

ブログのコメントで多量の長文を見るのは、苦痛です!!

投稿: iwatani | 2012年6月26日 (火) 20時51分

岩谷さんへ、
そう言われれば、確かにそのとおりですね。
まあ、考えてみれば、日本語版を引き受けるには力不足だと思います。英語を読みこなすスピード、コンピュータの知識とも。
それと間違って訳された時、その本人の気持ちも分かりました。
まあ、課題が済んだら、その時また考えようと思います。

投稿: alarky | 2012年6月26日 (火) 22時28分

@alarky
でも、コンピュータ〜プログラミングの経験や知識は、今Codecademyが使っている日本人(?)よりはalarky氏のほうがまともだと思いますから、今後も積極的に彼らに対し、助言介入等していったほうが良いですね。今のところ、それができるのは、alarky氏しかいないでしょう。

投稿: | 2012年6月27日 (水) 07時27分

@
Codecademyの方も、先日も何か言いたいことがあったら、いつでも言うようにって言ってくださいましたが、話が複雑でちょっとめいってしまいます。
それよりも、課題が終わったら少しずつでも自分でそのテンプレートを使って、問題を作っていこうかなと思います。それが公式として認められるかは別の話として。アドバイスありがとうございました。

投稿: alarky | 2012年6月27日 (水) 20時17分

今日は、編集中とてもネットのつながりが悪かったので、余り進められませんでした。それで、僕には問題編集に加えて新しく問題を付け加える権利も与えられているので、それで先日作った問題で、前回の日本語版で習っていない部分をリメイクしました。今は問題作成したら、コードカデミーのスタッフの方が先に目を通されるようなので、即発表は出来ませんが、許可を得次第ここにリンクを発表します。今回作成したのは「三項演算子」と「switch文」に関してです。ひょっとして審査を通らなかったら発表できませんが、、多分大丈夫でしょう!

投稿: alarky | 2012年6月30日 (土) 22時30分

昨日提出した「三項演算子」と「switch文」のコースは今テスト中だそうです。そして改善すべきがあったら知らせてくれるそうです。多分もうすぐリンクをお知らせできると思います。

投稿: alarky | 2012年7月 1日 (日) 19時02分

「三項演算子」と「switch文」のコースについては、いつ発表できるか分かりません。ハッキリしない情報をほのめかして申し訳ありませんでした。ただ、日本語版で将来取りあげる見込みです。ただ、これも予定なのでその点ご了承ください。
何しろ僕が「確実に」言える事はとても少ないので今後は気をつけるつもりです。
日本語版の進み具合に関しては、僕なりに「本業ではないことを考えると」かなりそのために時間を費やしているつもりです。改善すべきであれば、Codecademy や 日本の方の積極的なアプローチが必要だと思われます。
もちろん僕は好きでやっていることなので、不満は無いのですが。

投稿: alarky | 2012年7月 7日 (土) 07時43分

やっぱりプログラミングは「体で覚える」あるいは「手で覚える」部分が大きい気がします。Codecademy日本語版の今のペースではプログラミングが好きで仕方がない方には物足りないでしょう!
「CodeStudy」を、検索してみて下さい!

投稿: alarky | 2012年7月 8日 (日) 20時48分

今日ちょっと気づいたことを一言、「Codecademyのエディタ」は、日本語入力はどうも普通のエディタに比べるとタイプしづらいと思っていたのですが「Fireforx」 に比べて「グーグルクロム(Google Chrome)」の方は、かなりいいようです。問題編集の時も余り日本語は使いたくなかったのですが、これならほぼOKかなと思いました。「Firefox」でやられている方は、マウスを使って俗に言うらしい「コピペ」するのがいいと思います。

投稿: alarky | 2012年7月16日 (月) 14時04分

codecademy、先ほどjavascriptのやつをやらせていただきました。さくさくすすめて、プログラミングにまったく縁の無い人でも、非常に学びやすいのではないかと感じました。翻訳、ありがとうございます!
alarkyさんのおっしゃるとおり、私のブラウザでも日本語ではやや字送り、行送りにズレが生じているようです。私のようにMac版Operaをお使いの方はあんまいらっしゃらないとは思いますが。

投稿: 長谷川 | 2012年8月 1日 (水) 10時46分

長谷川さんへ、
そうですか、さくさく進んでらっしゃって何よりです。ちょっとほっとしました。
日本語入力に関してですが「Firefox」と「GoogleChrome」に関しては、長い文章でない限り、まったく問題ないといえるほどについ最近改善されたようです。やっぱ、Codecademyのプログラマは技術力が違いますね~! 今も少しずつですが、自分に与えられた課題をこなしていますが、スケジュールのことは知らされていないし、自分よりも適任者が現れたら、席を譲るつもりですので、あまり積極的に聞こうという気にもなりませんので、あしからず。
いや僕はもっとCodecademyのjQueryとかやりたいと言うのが本音でありまして。「CodeStudy」にもありますが、量がぜんぜん少なくて、具体的なアイデアとかが思いつくには至らないくらい少ないですね。でも、日本語のページなので、僕もまったく知らなかったのですが「CSS」や「jQuery」「正規表現」がどんなものか、いろいろググってがんばれば分かるのではないでしょうか?あなたの今までの経験も必要かもしれませんが?僕もCodecademy日本語版がよりよくより続くことを期待しています。
では、よきプログラミングを!

投稿: alarky | 2012年8月 1日 (水) 23時55分

>alarkyさん
すいません、Mac版FIrefox、Safariでは、日本語表示はとてもきれいでした! Operaでも、色々いじっちゃっているので個人的な問題かもしれません。
Codecademyは対話式なのがいいなあと思いました。

投稿: 長谷川 | 2012年8月 2日 (木) 10時37分

昨日、僕の担当をしてくださっている方に、今後についてちょっと提案をした際、僕の一番やりたいことは、コードキャデミー/Codecademy のコースをやりたいのです!ということを言ったら、近い将来には、日本語版は発表しないということを聞きました。それであなたのペースでとりあえず進めてほしいということを聞きました。
まあ、僕はちょっとほっとしたので、今後は、コードキャデミーのコースクリアに励もうと思っています。なかなか日本語版が発表されなく&&僕の技術もそれなりになっていれば、ささやかながら自分のWebページを作って基本のプログラミングについて解説できればとも思っています。あくまで「予定」ですが、ご報告まで。
ではみなさま、よきプログラミングを!

投稿: alarky | 2012年9月 3日 (月) 21時14分

久しぶりに投稿いたしました。
今日、いきなり、やりたいことができたのです。
この気持ちを忘れないために、公の場で発表させていただきたく。
それは、
  Dart in Action (Dartのハウツー本です)
を翻訳して、
出版してくださるように売り込んでみる!

Dart真好。(ダートは、ほんとに好い!)
Dartが、普及してほしい!
  / だけど、僕の場合、半年後には、考えが変わっている可能性ありですが...

Dartに関する記事や、コードをみると、構文/キーワード/みかけ が、なじみやすく、
シンプルにも書け、また、大きな構造のアプリをつくるとしても、対応できるとか、
いいことばっかり、書いてあるので、覚えたくてしょうがないです。
それと、バックアップは、あの Google なので、開発費もたっぷりかもしれません。
ただ、人気は今ひとつで、
少しでも、Dart人気の後押しができたらと思って、思いつきました。
ぽしゃる可能性だってあるわけです、どんな、いい アイデア/構想 も!
やっぱり、人気を得ることは、Dartが生き延びるための、必須条件なのです。

そのために、僕の計画では、まずは、Toeic900点ぐらいは、最低の英語力としてほしい!
また、Codecademyで、HTML、Javascript、CSS、PHP などを学習して、
コンピュータや、Web周辺の 用語や、理解 をしなければならない。
それからです、やっと、目標に向かえるのは、、、10年後だったら、もうやる必要はないかもしれませんが。

あのですね、、たとえば、いくら、JavaやRubyが、クールったって、
誰にでもわかるような、解説本が、少ないですし、
いまなら、結構あるかもしれませんが、、
今や、、、Javascriptと、「その周辺言語」でしょう。
なにしろ、日本にいて、プログラミングやコンピュータを学ぶには、
!!!ドキュメントの数が圧倒的に多いこと!!!
  / (分かりやすい本から、詳細なことまで書かれた本を含めて。)
ということで、いきなり、Dart/ダート をやってもマスターできるとは思われません。
JavascriptやPHPなどかなり分かっていれば、
他の言語に変えることは、そんなに困難ではないでしょう。
だって、プログラミングの作法や、Webの知識があるから。
たとえて言えば、東京の人が、大阪弁でしゃべるような感じだと僕は思います。
ものすごく大雑把ですが。

話は変わりますが、
個人的に、中国語と、英語の勉強のために、ちょっとアプリをつくってみました。
このアプリも少しは貢献して、HSKで、一番やさしい、1級ですが、200点満点で、合格できました。
Toeicのスコアは、人には言えない!
ただ、アップする自信だけはあるので、頑張るつもりですが。

このアプリは、
Codecademyで習った知識と、ググって、調べたことをプラスしてつくりました。
かなり、原始的なアプリですが、役に立つ方もいると思うので紹介します。
このアプリは、字が小さく、僕のように余り視力がよくない人には、疲れるかもしれません。
対策としては、画面の解像度を、600x800にする。
または、2台目のモニターを使って、近めの場所に置く。
などが、考えられます。
よっぽどこのアプリが気に入られた方は、格安中古パソコンを専用機にする。
など、、、しかし、そんな人はいないでしょう。
また、プロフェッショナルの人などは、スマートフォン向けに、改造するのもいいかもです。
もっとも、大きめの文字にできるようにすれば、いいのですが、、、失敗le。
まだまだ、僕には無理です。
ここで使っている、prompt() は、とても、気が利いていて、
発動させると、いきなり、入力エリアに、カーソルが、フォーカスされ、
とても使いやすい、Javascriptの、windowオブジェクトのメソッドですが、
この、prompt() は、extends/改造/拡張 できません!ほんとに残念。。。
  / このextendsは、Java語でJavascriptでは、
  / prototype が、確かキーワードだったような、使ったことないですが。
最後に、恒例というか定例なんですが、付け加えさせていただきます。

*このアプリを使って、万一、トラブルなど発生しても、
わたくしは、全く責任を負うことができませんので、
悪しからず!

おっと、最後のつもりでしたが、まだ言いたいことが、ありましたです。
あと、このアプリを動かすには、Opera、あるいは、Firefox を使ってください。
ショックだったのは、Chromeでは、Enterキーを連打すると、バグってしまいます。
Operaが、一番見やすく、今のところ、バグもありません。
なお、コメントは、何回も書き換えているので、おかしなコメントなどがあったりするので、
このテンプレートを書き換えるためのコメント以外は、すべて消しました。
アルゴリズムを思い出すだけで、半日から、一日かかりそうなので、ご勘弁を!

それから、このテンプレートを使うに当たって、
僕は、vi/vimもどき(EmEditorの、プラグイン)を使っているので、
また、vi/vimが覚えやすい、、、機能に対応するキーボードの図など、、、英語キーボードを使っているので(キーの数が少なくて使いやすいです)、
それほど、苦痛でもないですが、
結構、入力が、面倒かもしれませんが、僕にはどうしようもないです。
一応、promptウィンドウもどき、等を使って、問題作成アプリを、
作りたいのですが、またまた、これも、敷居が高そうですし、
やっぱり、できないことにこだわるより、できることを増やすことの方が大事でしょう。
いつか、できるようには、したいと思っていますが。
それと、このコードは、文字コードが、UTF-8(BOM無し) です。
英語の勉強だけなら、(冴えない)Shift_JIS に変えても、OKでしょう!
  // 冴えないと言えるほど、僕も知識はないんですが、
  // 一度、UTF-8に慣れてしまうと、Shift_JISは、嫌いになると思われます。
  // しかし、Windows環境では、Shift_JISの方が、便利そうなので、
  // エンコードした方がいいでしょう。
  // 何もかも説明していると、いくら時間があっても、足りませんので、
  // ここらで、勘弁していただきます。
  // フリーで、評判のいい、TeraPad などで、エンコードして、
  // <meta charset="UTF-8"> をコメントアウト、または、削除し、
  // <meta charset="Shift_JIS> を、上書き、してください。


これが、このアプリのリンクです。
luvdart.com

ダウンロードの方法は、
Operaの場合:
  リンクのクリックの後、Ctrlキーを押しながら、Uキーを押すと、
  ページのソースが出てきます。
  そして、左上にある「保存」を、クリックしてください。

Firefoxの場合:
  Operaとほぼ同じですが、
  ページのソースが出てきたら、
  Ctrlキーを押しながら、Sキーを押してください。

文字化けの対処:
  何しろ、Shift_JIS か、UTF-8 のどちらかにします。
  ともに、4行目に、
    <meta charset=utf-8>
  ってのがありますが、
  Shift_JISにしたい場合は、
    <meta charset="Shift_JIS">
  に、上書きすれば、OKです。

では、みなさま、良きプログラミングを!

投稿: huang1mu4 / alarky | 2013年12月23日 (月) 23時24分

@alarky
Dartは私も関心を持っています。ただ、十分経験しているだけのひまがない…。というか最近は連日、翻訳の仕事量が多すぎて、プログラミングを楽しむ時間がないのです。私は言語としてJavaScriptは昔から嫌いなので、Dartのような仕様のきれいな言語が支配権を握ってほしいと、願っています。なおDartは最近、SDKとコードエディタがアップデートされたようです。

投稿: iwatani | 2013年12月27日 (金) 10時12分

岩谷さんへ、
はい、その記事は読ませていただきました、、と言うか、その記事が出た時期に、もう読んでいます。
最初読んだ時は、
まあ、自分には、関係ないな、
ぐらいにしか思っていなかったけど、
Javascript言語自体が持つ、、
大きな構造のプログラムでは、
見晴らしのいいコードを書くのが
難しいというような、、欠点、、、
それで、ハイリスクではあるが、ハイリターンなDartに、Googleは賭けている。
Javascriptの改良は、ローリスクでは、あるが、リーターンも低いようだ。
こんな記事を読んで、
岩谷さんの書いた記事を見た記憶から、
その記事を読み直したり、チュートリアルビデオを見るうちに、
  これっきゃない!
と思いました。
この記事を訳していただいて、感謝しております。

P.S.
クールなDartEditorを提供している
Googleさんは、Dartに関して、
サービス精神もたっぷりのようです。
そこもまた僕が、
Dartが好きな理由の一つです。

投稿: huang1mu4 / alarky | 2013年12月28日 (土) 19時28分

DartEditorのインストールについて:
詳細は、ググってください。
ただ、注意点を一つ。
あまり深い層に、
ダウンロードしたフォルダを置くと、
  // C:\abc\def\hij\dart など
    // \は、¥。
Javaがインストールされていても、
実行できないことがありました。
ので、
  C:\dart
のように、浅い層に置けば、
実行できると思います。

これは僕の場合だけかもしれませんが、もし、うまく実行できないときは、試してみてください。

えっ、使い方?
それは...分かりません、悪しからず。
ただ、それだけで、
実行環境をゲットできます!

投稿: huang1mu4 / alarky | 2013年12月28日 (土) 22時28分

もう一年以上前の話ですが、
Codecademyで、三項演算子 と スイッチ文について、問題をつくったが、まだ、問題が認められていない、、ので、公開しません。
というようなことを、書きましたが、
今日読み直したところ、

Thanks for submitting your course! The Codecademy staff will review it soon.

In the meantime, share your course with friends and colleagues:

となっており、
よく考えたら、これは、公式ではなくても、発表していいということなのだ、、と、気づきました。

いまさらですが、
三項演算子 と switch文 について知りたい方は、参考にしてください。

リンクは、
三項演算子・スイッチ文を覚えよう!
です。

今、Codecademy研究所 というページをつくっています。
最初の HTMLの学習ページ が、完成したら、発表するつもりです。

では、みなさま、良きプログラミングを!

投稿: huang1mu4 / alarky | 2013年12月30日 (月) 21時14分

今日岩谷さんが、ここのブログの
  インターネットプログラミングの近未来
で、書かれていた、
  一人ひとりのコンピュータが、
  サーバー兼クライアントになること
これこそ理想のインターネットだ、、
とおっしゃてた意味が、
やっと少し実感を持ってわかりました。

インターネット2010っていう、
ページを見つけ、動画を
iTunes経由でダウンロードして見たからですが、
このことを簡単に説明したいです。
(重いiTunesで見るより、
 Gom Player 等で見た方がいいと思いますが。)

まず、この動画では、
  インターネット と 電話のネット との違い
の話から始まって、その違いとは、

電話の場合:
  超ローカル ⇒ ローカル ⇒ 中央 ⇒ ローカル ⇒ 超ローカル
のような、流れでつながるの対して、

インターネットの場合:
  ある超ローカルA ⇒ ローカル ⇒ ある超ローカルB
      上と同じ仕組みが多数ある

なので、電話の場合、中央 の 機械 が壊れたら、
電話回線のかなりの部分が止まってしまう。

それに対して、インターネットの被害は、
電話よりかなり少ない。

まず、それが、第一点。

そして、第2点が、
電話 と、コンピュータ の違い

電話: かなり単純な機械
コンピュータ: まさに、コンピュータだ。

あと、IPアドレスの仕組みの話を聞いているうちに、

あっ、そうか、
つまり、
  一人ひとりの、コンピュータが、
  サーバー兼クライアントになれば、
理想のインターネットが、実現する
ってことが、やや実感を持って、
分かりました。

IPアドレス の仕組みなどは、
多分本やWebページに書いてある説明と同じだと思いますが、
このビデオは、余分な話が、ある分
逆に分かりやすかったです。
というか、忘れにくいというか。

TCPプロトコル の話も分かりやすいのを期待しています。

話は変わって、
Codecademy研究所 ⇒ 0 からの Dart!
は、HTML,CSS,PHP
のところがすんだら、
やれそうなのか、一回検討するつもりです。

では、皆さま、良きプログラミングを!

投稿: huang1mu4 / alarky | 2014年1月 3日 (金) 22時04分

IPアドレス の仕組みについての補足:
・昨日、「IPアドレス」の仕組みなんて簡単だ
と言いましたが、
僕はたまたま16進数とかの話しを知っていて、
そう言ったのかもしれません。

でも、知っておくべきポイントは、少ないと思います。

1. すべての、コンピュータには、世界に一つしかない、
住所(実は、IDのような 番号)がある。

2. ついでに、「ドメイン名」とは、
IPアドレスが、番号なので、覚えられないので、
その番号に対しての、ニックネームを決めること、、
みたいな感じで割り当てられた名前のことです。

補足: IPアドレスは、変わる場合があるそうですが、
しかし、どの道、IPアドレス番号を知っている人など、
いないでしょうし、
コンピュータにとって、その番号と、ニックネームの、
結びつきを、振り替え直すぐらいのことは、
たやすいことでしょう。

それ以上のことは、必要に応じて覚えれば、
十分ではないでしょうか?

投稿: huang1mu4 / alarky | 2014年1月 4日 (土) 16時08分

今日は、実は、Codecademyの、HTMLの、細かい一区切りが終わったので、
Codecademy研究所を、新たなページに、リンクさせようかなと思っていましたが、
この前ちょっと触れましたが、Codecademyで自分で作った、
三項演算子とswitch文を覚えよう
で、最後のページで、バグを発見してしまいました。
switch文と三項演算子を、理解して、ふつうに解いていけば、バグらないんですが、
正解でなくとも、クリアできる方法を見つけてしまったのです。
それで、もうほとんど書き方を忘れかけた、正解判別コードとにらめっこして、直そうと思ったのですが、、、
ちょっと問題を変えれば、バグり確率が、1/6 までは、減らせる方法は何とか思いついたのですが、結局あきらめて、問題をちょっと書き換えました。
今日、昼からず~っとやっていて、ちょっと前に終わったところです。

さて、来週の休日ぐらいに、Codecademy研究所のページを作ろうかと思っています。
いい問題ができるかはともかく、JS問題集も使う予定です。
正解は、やはり、自分で答えを探さないとつまらないでしょう。
それに、Codecademyの方たちの方針にもそむくことになると思うので、やはり、答えはつけるべきではないでしょう!

Codecademy研究所ができたら、Codecademyの方にも、報告するつもりです。そして、出来れば、
  Dart も教えていただけませんか!!
と、頼んでみようかなと思っています。

来週Codecademy研究所のページができたら報告するつもりです。

では、皆さま、良きプログラミングを!

投稿: huang1mu4 / alarky | 2014年1月 5日 (日) 23時22分

@alarky
Codecademy研究所、いいですね。今では個人のブログやフォーラムを既存サービスを利用して簡単に開設できますから、ぜひお願いします。

このブログ記事のコメントは、すでに、あまりにも長すぎて、これ以上読者にフォローさせるのは酷です。ここらで打ち切りにしましょう。店舗移転、「Codecademy研究所」へ!

投稿: iwatani | 2014年1月 6日 (月) 08時33分

たしかに、このページ甘えていたのかもしれません。
自分のページにも、おいおい、アンケート、リクエスト、感想 等を聞いたり、自分の言いたいことを言えるページもできるといいです。
ただ、今は、Dart を広めたい気持ちでいっぱいですので、もし、それが出来たら考えたいです。いつもありがとうございます。

投稿: huang1mu4 / alarky | 2014年1月 6日 (月) 21時47分

Codecademy研究所オープンしました。
岩谷さん、今まで、ここを使わせていただいて、本当にありがとうございました。
今まで、ずいぶん楽をさせていただきました。

自分のブログが、ドキュメントの少なすぎるコンピュータの世界に少しでも貢献出来るようになればと思っています。

まだまだ試行錯誤が続きますが、是非、岩谷さんをはじめ、皆様応援よろしくお願いします。

では、皆様、良きプログラミングを!

投稿: huang1mu4 / alarky | 2014年1月13日 (月) 22時00分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/140652/55009055

この記事へのトラックバック一覧です: Codecademyの日本語化:

« スーパーコンピュータ報道の愚 々 々 | トップページ | ハイテクカンニングと旧教育試験体制の化石的恐竜化 »