SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

「ペライチ」からはじめよう
~C++/CX Windows 8.1ストアアプリことはじめ

  • X ポスト
  • このエントリーをはてなブックマークに追加

 ようやっと重い腰を上げWindows 8ストアアプリで遊んでみようと思い立ったのが今年の春、ビギナ向けに記事も書きました(#7092、#7130、#7273)。以来まだ半年かそこらのうちにWindows 8.1とVisual Studio 2013のリリースですよ...まぁそれでもこれまでに書いた紹介記事はそのまま通用するよね...と思ってたら違ってました。

  • X ポスト
  • このエントリーをはてなブックマークに追加

 IDEが吐いてくれるアプリケーションのひな型がVisual Studio 2012と2013ではかなり異なるみたいです。これまでの記事と少なからず重複しててゴメンナサイと謝りつつ、『C++/CX: Windows 8.1ストアアプリことはじめ』です。

step0:ペライチからはじめよう

 Windows FormsやWPFを使ったデスクトップアプリにせよ、今回のストアアプリにせよ、はじめの一歩はまっさらのForm/Window/PageにTextBoxやらButtonやらを貼り付け、Button押したらTextBoxに「Hello,world」を表示する、みたいなオアソビから始めることと思います。

 ユーザ入力→ロジック(処理)→画面に反映という一連の流れをXAMLの裏に貼りついたコードビハインドに埋め込みますわね。画面一枚/コード一本にすべてを詰め込んだ一枚ペラのアプリケーション:「ペライチ」ですな。実用アプリにはほど遠いけれど、僕はこのステップはとても大事だと思っています。基本的な材料と道具の扱いを身に着け、犬小屋程度のアプリケーションが作れるようになるための基礎訓練ですからね。

 整数を1つ用意し、ボタンのクリックで+1/-1するペライチカウンタを作ってみました。

MainPage.xaml.h
//
// MainPage.xaml.h
// MainPage クラスの宣言。
//

#pragma once

#include "MainPage.g.h"

namespace CounterApp
{
        /// <summary>
        /// Frame 内へナビゲートするために利用する空欄ページ。
        /// </summary>
        public ref class MainPage sealed
        {
        public:
                MainPage();

    private:
        void btnInc_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
        void btnDec_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

        int count_; // 追加
    };
}
MainPage.xaml.cpp
//
// MainPage.xaml.cpp
// MainPage クラスの実装。
//

#include "pch.h"
#include "MainPage.xaml.h"

using namespace CounterApp;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

MainPage::MainPage()
{
    InitializeComponent();
    count_ = 0; // 追加
}

// 「ふやす」ボタンがクリックされたら..
void CounterApp::MainPage::btnInc_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    txtCount->Text = (++count_).ToString();
}

// 「へらす」ボタンがクリックされたら..
void CounterApp::MainPage::btnDec_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    txtCount->Text = (--count_).ToString();
}

step1:ちょっとイケてるペライチ

 XAMLによるPageと、Pageの裏に作られるコードビハインドのなかにすべてを詰め込むこのやりかたで、およそありとあらゆるアプリが作れます。が、これだと機能が増えてくるに従ってコードビハインドが大きくかつ複雑になってきます。犬小屋の作り方は一戸建ての二階屋に適用するのには無理があるし、できたところで巨大な犬小屋。間仕切りもなく配線/配管むき出しで住み心地最悪だし、増改築に苦労します。

 同じペライチでも筋のいいペライチ:機能の増大に伴う複雑さの増大を極力抑える工夫を盛り込んだ構造が望まれます。はじめの一歩は犬小屋でいいとしても、つぎの一歩は「より大きな犬小屋」じゃなく「ミニチュア一戸建て」を目指してほしい。

 そんなわけで「ミニチュア一戸建て」のためのstep1ですが、これは以前にまとめたアーティクル『C++/CX: Windows 8ストアアプリことはじめ』がWindows 8.1/Visual Studio 2013でもそのまま通用します。ざっくり読んで/試して、またココに戻ってきてくださいな。

 ...おかえりなさい。XAMLによるUI(View)とカウンタ本体(Model)とを分離し、少しだけ見通しの良くなったコードになりました。

 現時点では「ふやす/へらすボタンが押された」に反応する処理がコードビハインドに書かれています。もちろんちゃんと動いてくれます。が、ホントにこれでよいのでしょうか。アプリが本来やりたいことはユーザが「カウンタを+1/-1しろと命じた」に反応するのが筋ってもんじゃないかしら。「ふやすボタンが押されたら...」はたまたま現UIでそうなってるだけですよね。カウント値の表示も同様です。たまたま現UIでTextBlockを使ってるけど、他の表現例えばスピードメータの針や背景色の変化であってもいい。カウンタ値とその表現とは別モノとして扱う方がツブシが効くはずです。

次のページ
step2:ViewとModelの仲介役

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

επιστημη(エピステーメー)

C++に首まで浸かったプログラマ。Microsoft MVP, Visual C++ (2004.01~2018.06) "だった"りわんくま同盟でたまにセッションスピーカやったり中国茶淹れてにわか茶...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7506 2013/12/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング