【Udacity Week 10 Progress】JavaScript で Pixel Art Maker 作りに挑戦

JavaScript のレッスンを完了したので、Pixel Art Maker プロジェクトに取り掛かりました。週末にプロジェクトの概要を読み、昨日と今日でなんとか形になりました。
プロジェクトは一旦提出してみたので明日までにはレビューがかえってくると思われます。

今日はそんな Pixel Art Maker 作りの軌跡をつづっておきます。

不安だけしかない Day 0
下図のように予め形成された html ファイル、CSS のスタイルシート、と空っぽの JS ファイルをダウンロードします。
プロジェクトのスペックを確認します。

・ユーザーが入力した Height と Width に併せてグリッドを作成する
・ユーザーがクリックすると□に色がつく
・色を変更できるようにする

少しだけ形になってきた Day 1
Submit ボタンを押すと入力されたHeight と Width の値でテーブルを作ろうとするところまでできました。
Submit ボタンを押すとページがリロードするという動作になったので、preventDefault を入れたりしました。
あと、別の数字を入力して Submit ボタンを押すと、前回のテーブルが残ったままの状態で新しいテーブルが追加されていました。

テーブル内の□をクリックすると、色がつくようになったのですが、複数セレクトされたり、テーブル全体がクリックされると下図のように全部選択された色で塗り替えられるという動きになってしまいました。

できたかも？の Day 2 

・テーブルがうまくつくれない問題
Height と Width の数値からどうやってテーブルをつくるかを子育ての合間に考えたところ、Row と Column に分けてループすればできるんじゃないかと思い、試してみました。

・テーブルがクリアされない問題
ページをリロードしないとテーブルがクリアされない状態だったので、Submit ボタンを押すとテーブルがクリアされるような動作を追加しました。

・全部の□の背景色が塗りつぶされる問題
□単体がクリックされたときだけ塗りつぶすように条件式をいれてみると、うまくいきました。

形にはなったものの、正直ちゃんとスペックに沿ってできているのか不安だったので、一旦提出してみることにしました。

プロジェクトに取り掛かったときは、自分の力だけでできるとは思えませんでしたが、
『あ、これあそこで習ったやつを使ったらできるかな』とか
『どっかで聞いた気がするな』とか
そういった記憶を手繰り寄せて参考資料をみたりしてなんとかつくることができました。

後で戻ってくるだろうから、よくみた資料を記録しておこ。

 <参考にした資料>

addEventListener()
createElement()
appendChild()
イベントの種類
preventDefault()
removeEventListener()
removeChild()

【Udacity Week 9 Progress】Javascript に突入してます

年末年始、家が騒がしくプログラミング学習の進捗報告ができていませんでしたが、
時間をみつけてコツコツと勉強しています。

Python のジャンケンポン プロジェクトもパスすることができました。
ここでも、どんなコードを追加するとより良いかのフィードバックをくれるのでためになりました。

はてさて、Python は完了し、年末くらいから JavaScript の学習を始めています。
Python の応用という形で、レッスン数は同程度あるものの、各レッスンに対する所要時間が短く感じます。

サクサク終わるのですが、昨日完了したレッスンの内容でも結構忘れがちになったりと
若干不安になります。

JavaScript は二部構成になっていて、一部では JavaScript の構文を演習する感じ。

現在受講中の二部では、ブラウザの開発ツールのコンソールを使って JavaScript をどう Web に盛り込むかを勉強する感じです。

JavaScript 第二部が今回受講している Intro to Programming コースの最終レッスンになるのですが、当初のレッスンの構成よりも、自分で学ばせる（ななめ読みだけでは理解できない）構成になっており、 MDN のサイト で API の詳細見てねみたいな作りになっています。

この最終レッスンが終わると、最後のプロジェクトに取り掛かることになります。

ふ。。。不安しかない。

ちゃんとできるのか不安です。

メンターの方には前回質問して、親切にみてもらった印象をうけるので、はやめに取り掛かって巻き込ませてもらおうと思ってます。

というか、JavaScript まできたはいいですが、Python の記憶が薄れていってます。
これが普通なのだろうか。３０代の限界なのだろうか。
やはり、特定の言語でバシッと決めるのが望ましいのだろうな。

【Udacity Week 7 Progress】Python で Rock, Paper, Scissors ゲームを作った

今日は７時に起きました。。おい。

Sleep Cycle で快適に目を開けることはできましたが、
そのあと自分に勝てるかどうかが勝負ですね。

昨晩は Python の課題作りにはまって一人ポチポチしていたら０時をまわってました。
という言い訳を自分にしつつ。。

Udacity の Intro to Programming、いよいよ Python の授業は終了です。
これまで習ったことの集大成としてじゃんけんゲームを作っています！

 starter_code.py としてゲームの大枠はすでに用意されており、そこに少しずつプロジェクトの仕様を加えていきます。

・コンピュータープレーヤーの戦術
・タイプミス時の動作
・ゲーム終了の条件
・ゲームのスコア発表 ...など

課題の仕様にのっとっていれば各自好きにアレンジすることができます。
私はゲームのはじめにプレイモードの選択をしたかったので自分なりに function を追加しました。

Rock, Paper, Scissors!

一応想定通りに動くようになったものの、メンターにアドバイスをもらっている段階です。ﾄﾞｷﾄﾞｷ

◆一番難しかったこと

1. ユーザーのタイプミスがあったら再入力させる while ループの作成
2. ユーザーが "quit" と入力したらゲームを強制する方法作成

1. ユーザーのタイプミスがあったら再入力させるループの作成
始めは、ユーザーのインプットが特定の文字列でない場合はプロンプトを繰り返し表示する条件を下記のようにしていました。(move にインプットを入れる)
while (move != 'rock') or (move != "paper") or (move != "scissors") 
が、これでは一向にループから抜け出せず。。。
or を使用した場合、ユーザーの正しいインプット（例. rock）で一つの条件が FALSE となるけれども、その他の条件は TRUEであるため、 結果 while True となるので抜け出せなかったと理解しました。

なので、
while (move != 'rock') and (move != "paper") and (move != "scissors") 
に変更してループから抜け出すことができました。 

2. ユーザーが "quit" と入力したらゲームを強制する方法の作成
これは、オプショナルの課題でしたがやってみたかったので挑戦しました。
１の条件に break を入れてみることにしました。
if 'quit' in move:
   break
これで while ループからは抜け出せます。
ただし、呼び出し元のコードは実行され続けるので強制終了できない状態になりました。
全体終了なるものはないんでしょうか。。メンターに聞いてみよ。
とりあえず、ここでは返り値が None の場合にはゲームを終了するように呼び出し元を変更しました。

動画、クイズ、演習で小さなステップアップしてきましたが、
やはり動くものを一から作るのは難しいです。
まだまだ身についてはいないし、荒削りではありますが、着実に一歩前進しているといえます。

プログラミング初めてよかったな。

ちびたんとおまめにゲーム作ってあげたい。 

Udacity Week 6 Progress ~Python~

Python のレッスンも Part 3 (最後) の Lesson 2 までやってきました。

Lesson 2 では API (Application Programming Interface) についてを学びました。

API というと言葉はわかるんだけどうまく説明ができない、という印象でしたが

こちらの説明が今までで一番しっくりきました。

An API is an interface. It's something that has been created to help two different applications interact with one another. 

 このレッスンでは

オンラインサービス "MetaWeather" の用意している API を使ってユーザーが入力した地域の一週間分の天気を表示するコードを Python で作成するまでの方法を勉強します。

主に以下のポイントを習って実践しました。

• sending request to the server (requests module)
• hundling errors and exceptions
• using Dictionaries
• dealing with the info the server sent back (JSON data structure) 

Dictionary の演習後に改めて JSON から必要情報を採取を試したので、スムーズに理解できました。

ここまできて、粗削りですが一人で天気予報を表示させる課題も作ることができるようになりました。

少しずつでもできるようになってきているのがとても嬉しい。

Udacity Week 5 Progress ~Python~

引き続き Python のレッスンを受講しています。

Part 3 まであるなか、Part 2 と Part 3 の Lesson 1 までを完了しました。

今週はこんなことを勉強してきました。

Python Part 2

Lesson 2 

• Length and Indexing (counting length, understand how slicing works ... etc)
• String concatenation, other method
• Operations / methods on lists 
• While loops 
• Finding Substrings
• Joining 
• Find and Replace  ...

Python には build in function として count とか find があるようですが、このレッスンでは自分で function を作成して String や List を操る方法を学びました。

for loop や while loop など今まではなんとなく理解していたもの（読めるけど書けないみたいな）が身についてきたと実感できるようになりました。

ただ演習量は多くはないので、少し時間があくと忘れてしまうことをが多いのも事実。

こういうところは 演習ツールを使ってもっと書いていかなければ。

Lesson 3 

• Files with Python 
• os module (chdir, mkdir, rename, path.join)
• Opening and reading a file
• Closing a file ...

こちらのレッスンでは、フォルダ配下にある写真ファイルを撮影場所ごとにフォルダ分けをしてファイルを整理しようという例を用いてレッスンが進みます。

ファイル名には場所名が入っているからパターン化して文字列を取得したりします。

これまでに習った Loop だったり Comparison を利用して function を py ファイルにまとめてと、それっぽくなってきました。

演習等は含まれていますが、以前に比べると一つのメソッド等に対する反復練習が減ってきた気がします。

◆その他

レッスン等にも慣れ、終わりも見え始めたので次の目標を設定するために他にも無料レッスンを受講してみることにしました。

色々試してみて一番気になることを今後学んでいく予定です。

CS 習ってなくて興味があったのでこれ

www.udacity.com

マーケティング関連のコースも気になっていたのでこれ

www.udacity.com

【雑記】Git Bash で Python の interactive mode が使えない

こんな感じで本当にいいのかはさておき、もしかしたらまた同じことを探すことになるかもしれないので
念の為書いておく。

Git Bash for Windows で python と入力しても interactive mode にならない。
Git Bash を再起動して以下を入力して一旦回避。

alias python='winpty python'

再起動するとまた戻ってしまう。
Permanent の設定にしたいのでウェブで調べてみたら
~/.bashrc ファイルに同じように↑書いて source ~/.bashrc しろとあるので試す。
なんやかんやあったけれど、再起動しても interactive mode できるようになった。

～なんやかんやの部分～
・home directory 配下に .bashrc ファイルがない。
・vi .bashrc にて新規作成して alias を追加してみる。
・source ~ ./bashrc をすると Python コマンドで interactive mode に切り替わるようになる。
・ Git Bash を再起動（新しいターミナルを開く）すると .bash_history .bash_profile とかがないよと怒られる。
　⇒でもないから作っておくね、とのメッセージ
・Python コマンドも使用できるし、上記のファイルが追加され次回以降からは問題なくターミナルを開けるようになる。

Udacity Week 4 Progress ~Python~

先週に引き続き Python のレッスンを受講しています。
Part 1 は完了して Part 2 をスタート。

Python Part 1
Lesson 3
- Returning value
- Passing Arguments in loops
- Random module
- Comparison
- True/False
- if / elif

Lesson 3 では条件文などが入ってきました。if/elif/else の使い分けなどは知りませんでした。
Lesson 3 の締めくくりでは Turtle モジュールを特定の範囲内のみで動かすコードを作成しました。

Part 2
Lesson 1

• 環境用意
• Python in the terminal
• Interactive mode
• Functions like input, print
• Using Functions in interactive mode
• Python errors
• Import

これまで WEB のワークスペース上で動かしていた Python を PC に実際にインストールして使用することから始まります。
Git for Windows をインストールして Shell の使い方やターミナル上での Python の使い方の基礎から勉強です。
以前は UNIX で Shell を使って製品動かしていたので非常に懐かしくもあり
先輩がスクリプトとかを作ってくれたりしていたことを思い出し
当時こっちの勉強もしておけばよかったと少し反省してます。

Lesson 2 ではよりプログラミング基礎的な勉強となるようなので、しっかり理解して先に進もうと思います。