2014-07-02

プログラミング初学者がつまづく部分の攻略方法

プログラミング初学者がつまづくポイントとして、

・代入とシーケンス実行

が理解出来ない、という。
もっと端的にいうと、以下のものが理解出来ない。

a = a + 1

プログラミングを生業とするものからすると、まさに"理解出来ない事"が理解出来ない、訳だが、実は思い起こせば僕もこの概念にしっくりくるのに時間がかかった。

そこで、この概念をどのように落とし込めばよいか記述しておこうと思う。

この概念を確実に理解するには、コンピューターの処理の流れを理解しなければならない。

最も分かりやすく端的に言うと

"計算"　と　”評価”

である。

たとえば、

というプログラミングを書いたとする。
ここでは、何も実行していないように見える。
が、コンピューターはここで、"評価"という処理をしている。

すなわち

"１という数値がそこに存在する、という評価"をコンピューターは下している。

これに何の意味があるのか分からないかもしれない。
しかし、これはとても重要な意味がある。

そこに山があると認識しなければ上ることが出来ないのと同じで、
そこに何かがあると認識(＝評価)しなければ、これを計算することは出来ない。

そして、コンピューターは何かをやる時、必ずこの「評価」を繰り返し何度も、計算の合間に行う。

また、この"評価"がいくつも重なった場合、プログラミングでは明確に「評価順序」が決定されている。
前から順番に実行するわけではないのである。

これが、先のプログラムを理解するために必須な概念だ。

1:a = 2
2:a = a + 1

このプログラムを見てみよう。
まず、 1行目の　「　=　」の左と右にそれぞれ「 a 」と「2」がある。
「　=　」は代入である。処理の流れは以下になる。

「　=　」は右側から処理するため、
・まず、「　2　」という数値があることが、評価される。
・次に、「　a　」という数値が左側にあることが評価される。
・a に 2 を代入する
・a が 2 であることを評価する

このように、あくまで処理の流れは一本である。

このように考えると、次の2行目の式も以下のように容易に理解出来るはずだ。

2行目の処理の流れ

「　=　」は右側から処理するため、
[右側]
・まず、「　a　」という数値があることが、評価される。
・さらに、前の式の結果から、この「　a　」は2であることが評価される。
・次に、「　1　」という数値があることが、評価される。
・「a + 1」が計算される。

[左側]
・次に、「　a　」という数値があることが評価される。
・さらに、この「　a　」は前の式の結果から、「　2　」であることが評価される

[ = を計算]
・a に右側の計算の結果である「　3　」を代入する
・a は上書きされ、「　3　」であることが評価される。

2012-07-08

riseTemplateエンジンにコア機能を実装した

先日作ったriseTemplateにコアな機能をさらに追加しました。
コアな機能とは

・merge

あるテンプレートの中に他のテンプレートを埋め込みたい。
よくある話です。
これを実現します。

・set

ようするにこれはdefineで、テンプレート内で同じ単語がいやってほど出現するときに、
それを定数化する機能です。
定数にしてしまえば、書かなければならない文字数を大幅に削減出来ます。
もう行が長すぎたりしません！

・extend

あるテンプレートの一部だけ書き換えたい。
Twigなどにある機能ですが、それを実現します。

・escape

実体参照に変換することにより、悪意のあるコードの埋め込みを防ぎます。

これでおそらく使いたい機能はだいたい揃いました。

次はまた新しくフレームワークに組み込みます。

2012-07-07

riseTemplateエンジンにコア機能を実装した

テンプレートエンジン riseTemplate PHP

先日作ったriseTemplateにコアな機能をさらに追加しました。
コアな機能とは

・merge

あるテンプレートの中に他のテンプレートを埋め込みたい。
よくある話です。
これを実現します。

・set

・extend

あるテンプレートの一部だけ書き換えたい。
Twigなどにある機能ですが、それを実現します。

これでおそらく使いたい機能はだいたい揃いました。

次はまた新しくフレームワークに組み込みます。

2012-07-05

ＰＨＰでテンプレートエンジンをまた自作してしまった。

php tempalte engine php template

前回forkTemplateを作って、しばらくその自作を使っていたんですが、

もやもやがどうしても消えなくて、
ドヤ顔で作ったはずの前回のやりかたをさっくりと捨て、
とうとうまたテンプレートエンジンを作ってしまいました。

「完全に自分が欲しいものを作る程度の能力」
くらいは欲しいのに、全く手に入りません。

!html{ null ,;
    !head{null,;
        !metaCharset{UTF-8}
        !metaIphone{}
        !loadCss{reset.css}
        !loadJs{test.js}
    }
    !h1{,;riseTemplate is Tempalte Engine For PHP }
    !hr{}
    !h4{style="margin-left:20px;",;very simple}
    !h4{style="margin-left:20px;",;very extandable}
    !h4{style="margin-left:20px;",;very easy to read and write}
    <?php
    for( $i = 0 ; $i < 10 ; ++$i ){
        printf("!div{null,;%s}",$i);
    }
    ?>
}

こういう感じの疑似コードをＨＴＭＬとして出力するテンプレートエンジンです。

これらはまずＰＨＰ部分が解釈され、その後、それぞれのタグを関数化して読み込んでいきます。

コンセプト

テンプレートエンジンを作るときに考えていたことは３つあります。

1: 「テンプレートエンジン用のemacsのモードを作るのがめんどい」

emacsには様々なモードがあり、テンプレートエンジンといえども、それ専用のテンプレートを気持ちよく記述するには、やはりモードが必要です。
色がついていないソースを読んで楽しいプログラマなどただのドＭです。

新しい、素晴らしいテンプレートエンジンは数あれど、複雑なＨＴＭＬを色付きなしで眺めるなんて苦行でしかないんです。

たとえばTwig、たとえばSmarty。
これらは素晴らしいテンプレートエンジンですが、本当にHTMLモードでは苦行でしかない。

かといって、これらの専用モードではＨＴＭＬがおそろかになったりするのです。
もう耐えられません。

さらにインデントにいたってはもっと破壊的です。
中にPHPのインデントを入れようと思っても、いくつかのモードの混在は本当に面倒だからです。

しかしもう解決です。
なぜならこのテンプレートはすべて「php-mode］で記述できます。
ちなみにインデントも完璧です。

もしjavascriptを記述しようと思っても、php-modeでscriptタグにjavascriptを記述することは難しくありません。

本物のjavascriptはjsファイルに書くべきですから、ちょこっとしたjavascriptならば、インデントすればだいたい十分です。

このコンセプトはこのテンプレートエンジン的にはかなり重要視されており、
それ故、ちょっと奇怪な記述があります。

2: もうタグを書きたくない

正確には、「<」と「>」をもう書きたくないのです。
あと、タグでくくるのに、同じ単語を書くなんてもううんざりです。

そしてそれで行が長くなり、何十にも折りたたまれたソースを読むのは心身に健康ではありません。

3: スニペットは必要。もっと気軽に使いたい。

上記の１を満たすだけならば、ふつうにPHPをHTMLにかきゃいいんですが、
それだけではいやで、やはり独自タグ（要はスニペット）が欲しいです。

なので、もっとも単純にスニペットを呼び出す形式にしました。
{}の中に「,;」の区切りで並んでいるパラメータが、そのまま定義された
タグのスニペットの引数となります。

なんでもＯＫ感バリバリです。

実装予定機能

まだコアしかできていない状態なので、これから追加したい機能が山とあります。

set aa bb

defineのようにaaという変数にbbという値を突っ込み、内部一斉置換させる。

merge aa

別のファイル内ソースをその部分にマージする

escape

テンプレートエンジンの必須項目である、HTMLのescapeがなんと入ってないので、それを追加する

配列で値を渡す

extends

blockを使用することで、あるテンプレートを継承して、そのテンプレートの一部だけ書き換える機能。

コアのソースは以下で公開中。

https://github.com/isdriven/riseTemplate

2012-07-03

code.nineleapがリリース

wise9 › ゲームプログラミングがザクザク学べる統合学習環境(ILE)、code.9leap.netがβサービス開始!

enchant.js用の統合学習環境(ILE)というものがオープンしたらしい。

さくっとさわってみて、「ここまでやるか」の完成度。
もうここで開発すればいいじゃないかい、といった感じ。

プログラミングを昨今はじめたよ！
という人や、
解説を読みながら！
という人には
断然おすすめになっている。

エディタも、対応する括弧が強調表示されるというやりすぎ感満載な機能がある。

まだまだ、たとえばemacsやvimのキーバインドに対応してなかったり、
オートインデントするものの、位置が明らかにおかしかったりで、
ちょっと玄人向きではないけども。

(特にオートインデントに関しては初心者も非常に困惑すると思うので、
正直こういう一般向けなサイトはオートインデントしなくてもいいのでは？）

javascriptでなんでも可能になってきたので、どんどんにぎわってほしいと思う今日このごろ！

2012-05-21

sol.jsをリニューアルした。

sol.js javascript

拙作であるsol.jsをリニューアルしましたので、その備忘録

まだまだ制作は続けています＾−＾ｖ

○修正点の備忘録

hackFrameの挙動修正：

hackFrameの挙動を修正しました。
hackFrameとは、通常のオブジェクトの動作を完全に途中で乗っ取って、別の動作をさせるためにメソッドです。sol.jsの特徴ともいえるこのメソッドにテコを入れました。

このメソッドに渡す引数を修正し、また、スタック式にしました。
すなわち、連続してこのメソッドを呼ぶだけで、順次動作を簡単に設計することができ、ある動作の終了を待って、次の動作を呼ぶことが簡単になりました。

グローバルメソッドの修正：

　sol.{method}で呼び出せる、sol配下に直接あるメソッドの呼び出しかたを修正しました。
　sol.setPropertyなどを sol.set.propertyに変更しました。

ログメソッドの修正：

console.log()を使用せずとも、
console.___( name , value )
　で値をダンプしておき、sol.dumpsで値を見れるようになりました。

2012-05-09

windowsのemacsでputtyを使って秘密鍵を指定して接続する

windows emacs

これがmacとかだと、簡単だが、windowsだと途端にややこしくなり、そしていろいろ調べてみても大変な解決方法しか出てこない。

cygwinを入れる、とかだ。

頑張って入れようとしたが、本当にこんなに大変なのかと探ってみた結果、
事実は非常に簡単だったので、備忘録。

まず、windowsのemacsで外部接続する場合には、plinkを仕様する。
これはputtyのセットに入っている。

これを、emacsから見れる位置におき、パスをとおしておく。

パスの通し方(.emacs内)

(setenv "PATH"
		(concat
		 "C:\\putty" ";"
		 (getenv "PATH")))

(setq tramp-default-method "plink")
(setq tramp-shell-prompt-pattern "^[ $]+")

必ず、plink.exeがある場所を参照すること。

そして公開鍵と秘密鍵を作り、公開鍵を接続先サーバーにセット。
ここは省略。

次に、puttyで秘密鍵を用いて、このサーバーに一度接続してみる。
この設定をセッションと共有に保存する。

これで準備完了。

puttyとplinkはこのセッション情報を共有するらしく、一度保存されていると、
emacs内では普通に

C-x d /plink:username@hostname#port:

で接続可能だ。