青色プログラム。

0からプログラミングを学んでいる道のりブログ

【C#】VisualStudioで簡単計算プログラムを作ってみる

 ここ最近ずっとJavaの勉強していますが、
自分がプログラミングを始めたきっかけの人が使っている言語「C#」も触り初めました。

今回はいきなり触ってみる感じですが、C#って何?って方は簡単に言うと「C言語」「C++」の後継言語であり「C++++」の+を合体させて「C#

C++Javaをベースに作られていてJavaをやってる人はC#に入りやすいと言われ、とても似ています!ですが基本はWindows環境です。

 

至らない点もあると思いますがアウトプットが大事なので、まとめてみます。

最初は参考書を参考に「簡単計算プログラム」を作成してみます。
作ってみるって人がいるかは分かりませんが、書いてるとうりにすれば出来るはず。
(上手くいかない&間違えてるなどあればコメントください)

前提:VisualStudio2017(C#,.NET Framework)をインストール

 

1、Visual Studio Community 2017を起動

2、[新規作成] → [プロジェクト]

3、新しいプロジェクトの[テンプレート] → [Visual C#] → [Windows フォームアプリケーション(.NET Framework)] をクリック

4、名前欄に「SimpleCalc」でOKボタン
  From1の何もないアプリ画面が出来ました。

6、画面に[ツールボックス]タブから"TextBox"を探してドラック&ドロップ

7、画面にテキストボックスが作成されました。
  左上に配置する(ガイドラインが出るのでバランスの良い位置に)

8、作成されたテキストボックスをクリックし、
  [プロパティ]タブの(Name)欄を「Input1TextBox」と入力

9、[ツールボックス]から"Label"を探しテキストボックスの右にドラック&ドロップ
  テキストボックスの右に配置します。

10、作成されたラベルをクリックし[プロパティ]タブの(Name)欄に「PlusLabel」と入力
  +と表示させたいので[プロパティ]タブのText欄に「+」と入力

※現在のイメージ:[               ] +

11、+ の右側にツールボックスから"TextBox"をドラック&ドロップ

12、[プロパティ]タブの(Name)に「Input2TextBox」と入力

※現在のイメージ:[    ] + [    ]

13、イメージの右にさらに"Label"を配置

14、[プロパティ]タブの(Name)欄に「EqualLabel」と入力

15、[プロパティ]タブのText欄に「=」と入力

※現在のイメージ:[    ] + [    ] =

16、Form1のサイズがバランスよくないので、Form1をクリック
(作成しているアプリの画面全体を選択してる感じになったら)

17、プロパティのSize欄の数値を「400, 110」に変更

18、= の右に"TextBox"をドラック&ドロップ

19、[プロパティ]の(Name)欄に「AnswerTextBox」と入力

※現在のイメージ:[    ] + [    ] = [    ]

20、イメージに下にツールボックスから"Button"をドラック&ドロップ

21、画面に貼り付けたボタンをつまんで右に伸ばします

※現在のイメージ
[    ] + [    ] = [    ]
[                      button1      ]

22、作成したボタンをクリックし、
[プロパティ]タブの(Name)欄に「CalcButton」と入力
[プロパティ]タブのText欄に「計算する」と入力

23、Form1の[プロパティ]を表示(全体選択)
  プロパティのText欄に「簡単計算プログラム」と入力(タイトルが変わる)

23、見た目が完成しました!VisualStudioの上あたりにある[開始]をクリック

f:id:aocattleya:20180708174359j:plain

こんな感じのアプリの外観が完成!
しかし、数字を書いて計算ボタンを押しても今のままでは画像みたいに結果は出ません

ここからプログラミングコードを書いていきます。

24、さっきの画面に戻り画面の[   計算する   ]ボタンをダブルクリック

25、コード画面に切り替わります。

26、今、点滅している所に下記のコードを書いていきます。

f:id:aocattleya:20180708174758j:plain

27、左上の[ファイル]から[すべて保存]をクリック

28、完成!開始をクリックしたら最初の画像みたいに計算ができるようになりました。

 

しかし、このままでは数字以外や何も書かなかった場合に上手く動作しないので、
コードを変更する必要があります。

29、下記のコードを追加します。

f:id:aocattleya:20180709022322j:plain

 これで完成!

アプリの使用

保存したファイルの場所を開き [SimpleCalc] → [SimpleCalc] → [bin] → [Debug] → [SimpleCals.exe]

 

他にもタイマー、付箋メモなどいくつか作ってみたので興味があったらGitHubにまとめているので見てみてください。

【本】アイデアの生み出し方・アイデアとは何か

 

f:id:aocattleya:20180606202807j:plain

部屋整理していたら1年ほど前に読んだ良い本があったので紹介です!

イデアのヒントという本です。

この本はジャック・フォスターさんが書いた本を日本人の方が翻訳した本になります。

1章目から1940年に初版されたジェームズ・ウェブ・ヤング『イデアのつくり方というアメリカで知的発想法のロングセラー本を分かりやすく取り上げ、普段気にしないアイデアというものについて語られています。

まずアイデアとは何か
イデアとは既存の要素の組み合わせ以外の何ものでもない。

このジェームズ・ウェブ・ヤングの言葉がこの本のメイン。

料理のレシピだと、すでに知っている材料をこれまでと違った方法で組み合わせるだけ
これは天才でなくてもロケットを作る科学者、ノーベル賞受賞者である必要もない

創造的な行為とは、すでに存在する事実、考え、技能を新たに発見し、選び、並べ直し、組み合わせ、統合することである。(イギリスの作家 アーサー・ケストラー

 

そしてアイデアがどう生まれていくのかも書かれている

二つの既存の要素の予期せぬ結合によってまったく新しい心理が生まれる「異なる二つの思想」での出会い

・ダリは夢と芸術を結合させてシュールレアスムを生み
ニュートンは潮の満ち引きとリンゴが落ちる現象から重力を発見した。
・ハッチンズはアラームと時計を結合させて目覚まし時計を作り
・リップマンは鉛筆と消しゴムを一緒にして消しゴム付き鉛筆を考案した。

 

イデアの生産は5つの段階を経由して行われる
 1、データ集め
 2、データの租借(物事や文章の意味を十分に理解し味わう事)
 3、データの組み合わせ
 4、Eurekaの瞬間(ユーレカ:何かを発見・発明した事を喜ぶ事)
 5、アイデアのチェック

 

そして、
昔から自分が一番思いプログラミングの道へ進んだ理由でもある『楽しむ』こと。

まゆ根にしわを寄せていたチームはいいアイデアを出した試しがない、逆に笑いが絶えなかったチームはたいてい素晴らしい提案をしてくる、彼らはいいアイデアを思い付いたから楽しそうだったのか?それとも楽しんでいたからいいアイデアを思い付いたのか。

楽しんでやった人ほどよい成果をあげる」というのは何にたいしても通用する心理である

 

他にも考え方や詰まってしまった場合など色々語られています。
この本の内容はエンジニア、絵、料理など、すべての人にアイデアという基礎の原理を教えてくれる、ぜひ読んでみてほしいオススメの本です。

 

プロフィール絵『青カトレア』差分var.描いてみた。

 

以前サムネに困って描いてみたオリジナルキャラクターを『リボン(黄色)』から

HNとブログIDのaocattleya『青カトレア』で差分を描いてみました。

 

使った物:フリーペイントツール『FireAlpaca』と2000円のペンタブ『FAVO F-430

f:id:aocattleya:20180604001444j:plain

 

以前のリボンver.はこちら

f:id:aocattleya:20180415003107j:plain

キャラコンセプト的には『青カトレア』ですが『黄リボン』の方がシンプルで落ち着きがある気もする

 

前回で記事 → プロフィール絵を描いてみた

にて作業風景とか載せてるので興味あれば見てね!
企業などがキャラクターを作る理由とかについても書いてるよ

 

jQueryをちょこっと

jQuery

JavaScriptのコードを使いやすく簡単にまとめたコード集(ライブラリ)

・クリックすると画像を大きく表示される
・文字にマウスを乗せると色が変わる
・スライドショーを作ることができる
他にもWebページに様々な動きをつけることができる。


jQueryを使うには2つの方法がある(今回は1)
1、ネット上のjQueryファイルを読み込んで使用
2、jQueryファイルをダウンロードして使用


使う準備
HTML、CSSJavaScriptファイルを作成
HTMLファイルにjQueryを読み込ませる
JavaScriptファイルにjQueryコードを記載


基本的な記述方法

$function(){
 $( "セレクタ" ).メソッド(引数);
});


イベント
イベントとは、○○をクリックした時
マイスのカーソルを載せたと時など

基本的な記述方法

$(function(){
   $(“セレクタ1”).イベント(function{
       $(“セレクタ2”).メソッド(引数);
    });
});




hoverイベント
mouseoverとmouseoutの2つを組み合わせたような処理ができるイベント

基本的な記述方法

$(function () {
  $(“セレクタ”).hover(function () {}, function () {});
});

1つめのfunctionにマウスを載せたときの処理
2つめにマウスを外した時の処理



Thisとは、イベント発生時(クリックした時など)にそのセレクタ(クリックされたセレクタ)のみに処理を適用するもの

$(function () {
  $(“h2 ").click(function{
    $(this).css("color", "red");
  });
});

くりっくした時、赤に変わる
This部分をpにすればp要素全てが赤に変わる




スライドショー
プラグインを使う、無料のツールを使用するのが一般的でスライドショー用のプラグインは複数ある
bxSliderなど



bxSliderのコードをHTMLに貼り付ける
HTMLにHTMLコードを書く
HTML上にJavaScriptを書く

Googleで調べ公式ページからインストールでコードをHTMLファイルのヘッダー要素とボディ要素にコピー
値を変更し完成する



パパッと1つ実践してみた感じは知ってると便利そう、
シンプルなので実際に使う場合や関わってきそうになったり興味が出た場合に、
再度戻って学習する感じがいいかなと思ったので軽くにどんなのか記事で残しておく。

【Java】基礎出力をやってみる

  

 

プログラミング言語の一つ、業務システム、WebサービスAndroidアプリ、家電製品など汎用的でOSに依存せず人気で多くの現場で使われいる。

- 有名なものだと マインクラフト、Twitter楽天OpenOffice、etc.

難易度は難しいみたいですがそこはあまり気にしていません。同じ人間、出来る人がいるのならその人以上にやれば絶対出来る、仕事にしたいならなおさらね。

 

とりあえず基礎からスタート

class Main {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}

これでコンソールにHello Worldと表示された、この文字は文字列と呼ばれダブルクォーテーション" "で囲む必要がある、数字は囲まない

 

System.out.println()

()の中身を出力せよという命令。
printlnの読みはプリントライン

 

コメント //

行末までのコメントは無視されるのでメモ用などに

 

・計算

" "で囲まず 数字+数字 だと足された数値が表示される
" "で囲むと計算せず文字列となる

「*」掛け算、「/」割り算、「%」割り算の余りを計算(8%5)→3

 

・文字列の連結

System.out.println("ABC" + "DEF");

文字列を連結する事ができる




ここまでの文字列や数値はデータ型と呼ばれます。

String ・・・文字の並び
int ・・・整数 

 

 変数

 データを格納しておく領域のこと。
それぞれ区別するために変数名を付けて宣言します。

※箱みたいなイメージ

 

- 変数を宣言

プログラムの中で、変数を使うには変数の名前が付けられいなければならない。

データ型 変数名;

 
- 変数の代入

変数を定義したら値をいれる、これを代入と呼ぶ。

変数名 = 値;

 
- 出力例

5

int numbr;
number = 5;
System.out.println(number);

ao

String name;
name = ao;
System.out.println(name);

 

・変数の初期化

int number = 5;
String text = "Hello World";

変数の値の代入は宣言と同時に出来る
この事を「変数の初期化」と呼ぶ。

 

・int型変数の計算

13
15

int number1 = 10;
System.out.println(number1 + 3);

int number2 = 5;
System.out.println(number1 + number2);

 

・String型変数の連結

こんにちは斎藤さん
こんにちは鈴木さん

String greeting = "こんにちは";
System.out.println(greeting + "斎藤さん");

String name = "鈴木さん";
System.out.println(greeting + name);

 

 ・変数の更新

Ao
Cattleya

String name = "Ao";
System.out.println(name);

name "Cattleya";
System.out.println(name);

※同じ処理内で同一名の変数は定義できない為、データ型を付けない(int、String)

 

・自己代入

3
5

int x = 5;
System.out.println(x);

x = x + 3;
System.out.println(x);

- 省略した書き方 -

x = x + 10;      →  x += 10;
x = x * 10;    →  x *= 10;

(他も同じ)x = x + 1;   →   x++;

 

変数名の注意

・2語以上の場合、単語の初めを大文字にして区切る(キャメルケース)

エラー:数字で始まる(エラー)
良くない:日本語、_ 、ローマ字

 

・double型

整数は「int」でしたが、小数点の場合は「double」を使う

double number = 3.14;
System.out.println(number);

 

 ・キャスト

double型で結果を表示したい場合は、どちらかをキャストする

int number1 = 13;
int number2 = 4;
System.out.println((double)number1 / number2);

 結果:3.25
片方がdouble型の場合は、もう片方が自動変換される為double型で表示できる

 

そんな感じで基礎出力部分を学びました。
現在はオブジェクト指向の「インスタンス化」「コンストラクタ」「カプセル化」「継承」「実装」までやっているのですが、概念なので詳しい説明はブログにはまとめづらいです...。

 

 

ところで一番最初に気になっていた事を調べてみた。
というかみんな普通にJavaをこのページみたいな事から学び始めるけど、
自分はまず気になってしかたなかった。

Javaでプログラムを書いて色々作っていくなら、そのjavaは何で作られているの?


ふんわりですが調べてみたので書いていきます。

機械語 → 0と1で構成されたコンピュータが理解できる唯一のプログラミング言語
アセンブリ言語 → 0と1を単語や記号に置き換え分かりやすくした機械語と一対一の関係にある低水準言語
アセンブラアセンブリ言語で書いたプログラムを機械語に変換するプログラム

アセンブラは当初、機械語からでアセンブラ自身でアセンブラを、アセンブラからC言語コンパイラが作成され、また今度はC言語自身で別のC言語コンパイラを作成する事が可能..。

そしてJavaC言語で作られたという事みたいですね、専門用語多すぎて分かりづらいですが機械語アセンブリ言語C言語Java 簡単に書くとこんな雰囲気ですかね。最初、宇宙創造までさかのぼれるかと