何某日和

「カメラ」のち「ハンダゴテ」ところにより「プログラミング」 ── そんな私“かめきち”のウェブサイト

ソースコード成長の可視化「CodeTransitionViewer」【JavaScript】

例題の紹介

Hello World 


      
      

        C言語でHello World（コードアニメーション）
      

      

        
        
        
        
        
      

      

      
      

        パスタの画像（スライドショー）
      

      

        
        
        
        
        
      

      

    

  

  

  
  
  

    

      
        

          

        

      		
      
        

          
概要

        

      		
    

    

      

        教科書では伝わらない「成長過程」を可視化する
      

      

        　プログラミングの解説書を開いてみると、その多くは、完成版のソースコードを示して各部位の説明を施す程度。
        紙面の都合もありますから致し方の無いことだろうと思います。
        しかし、プログラミングの初学者は、どうしてその完成系に至ったのかを理解できず、
        オリジナルのプログラムを作成する段になって「何からどのように作ってゆけば良いのか...」と戸惑い、手が止まってしまうものです。
      

      

        　ご紹介する「CodeTransitionViewer」は、「プログラムの成長過程」をコマ送りによって可視化するJavaScript製アプリケーションです。
        紙面上では実現し得ないコマ送り表現により、学習者の視点移動の負担を軽減することができますので、学習内容の理解に集中することができましょう。
      

      
      

        利用例
      

      

        　冒頭に掲載したサンプル以外にも、当サイトの
        「ペアプログラミング（2012年度）─ 2013.01.16：データセット」
        にてプログラムの解説に使用しており、実際の後輩指導で活用しています。
      

    

  

  

  
  
  

    

      
        

          

        

      		
      
        

          
技術的なこと

        

      		
    

    

      

        仕様
      

      

        　JavaScriptにより動作しています。
      

      

        リソース
      

      

        　ソースコードをここに公開します。
        公開しているCodeTransitionViewer.jsをscriptタグで読み込み、このウェブページのHTMLソースのように記述すれば用いることができます。
        技術的な問題を発見された場合にご連絡を頂戴できると、大変助かります。