プログラムとはどんなものか、どう作っていけば良いか概念的な話をまとめました

1. Webの勉強会#4
超初心者向け、プログラムのお話
2016/2/5 Ver.1.0
1

2.  プログラムとは
 プログラミング言語の種類
 プログラムの基本
 フローチャートの作り方
 変数、四則演算
 制御構造
 配列、関数
 簡単なプログラム
2
アジェンダ

3. プログラムとは
3

4. 4
おおむかし

5. 5
人が遠くへ移動することは
大変でした
わーい
腰が
3日後

6. 6
なので

7. 7
他の生き物の力を借りたり
乗り物を作る工夫を行いました

8. 8
さらに

9. 9
人の生活を豊かにするため
複雑な計算も必要になり

10. 10
計算する機械が作られました

11. 11
例えばそろばん
もうかり
まっかー？

12. 12
こうして時代は進み
より高度な計算するための
機械

13. 13
コンピューターは生まれました
パパーン!

14. 14
ただ、コンピューターは
このままでは動かない
……。

15. 15
コンピューターには指示が必要
やってね
……。

16. 16
この指示にあたるのが

17. 17
プログラム
はいなーおねがーい

18. 18
プログラムする人を
プログラマー
プログラムで使う言語を
プログラミング言語
プログラムを書くことを
プログラミング

19. 19
プログラムは人に変わって
膨大な計算などの作業を
行うことで
物事の生産性を挙げる
作業の効率化を図る
などの大きなメリットが
得られる
まとめると

20. 20
今の世は情報社会

21. 21
至る所で
プログラムは動いてる

22. 22
この先はプログラムが
できるかどうかが重要

23. 23
現在のIT業界も同じ

24. 24
プログラム寄りの技術が必須

25. 25
Web業界に関わる人たちは
デザイナー問わず
覚えた方がいい

26. プログラミング言語の種類
26

27. 27
最近よく使われている
代表的な
プログラミング言語

28. 28
JavaScript
PHP
Ruby
C言語系
Java
1
2
3
4
5

29. 29
JavaScript1

30. 30
クライアントサイド型（フロントエンド
（Webページの表示を制御する部分））
用のプログラミング言語

31. 31
 初心者でも扱いやすい言語
 HTML、CSSなど
他規格を覚える必要あり
 Webブラウザやスマホなど
出力環境に左右される
1.JavaScript

32. 32
PCにエディターとブラウザがあれば
すぐに始められます

33. 33
PHP2

34. 34
サーバーサイド型
（バックエンド）の
プログラミング言語

35. 35
 Webサーバー上で動作する言語の一つ
 メールフォームなどが有名
 データベースとやりとりを行う
 CMSでもよく使われる
2.PHP

36. 36
PC内にWebサーバーの環境
を立てる必要性あり
プログラムが大味な傾向

37. 37
Ruby3

38. 38
国産のオブジェクト指向型
プログラミング言語

39. 39
 バックエンドで使用されることが多い
 Ruby on Railsという
フレームワークが有名
3.Ruby

40. 40
結構な盛り上がりを見せていますが
いじったことがないため
具体的な用途を見る機会が
ありません

41. 41
C言語系3

42. 42
中、大規模システム開発に使われる
汎用性の高い
プログラミング言語

43. 43
 現在は、C++、C#、Objectiv-Cなどの
派生言語が使われている
 iPhoneのアプリ開発などにも使われる
 習得難易度は高く、時間もかかる
3.C言語系

44. 44
クセが強いので
とっつきにくさがあります
オブジェクト指向を覚えるのには
いいです

45. 45
Java4

46. 46
中、大規模システム開発に使われる
汎用性の高い
プログラミング言語

47. 47
 C言語などをベースに開発されている
いいとこ取り
 現在は、Andoroid開発で使われている
 習得難易度は高い
4.Java

48. 48
まだ覚えやすい方ですが
やっぱり難しい
オブジェクト指向を学ぶのに
いいです

49. 49
プログラム初心者は
JavaScriptがやりやすい

50. 50
現在はアプリ開発が主流
C言語系、Javaの習得がよい

51. プログラムの基本
51

52. 52
プログラムには
3つの基本構造がある

53. 53
順次処理
条件分岐
繰り返し
1
2
3

54. 54
処理
（何かしら行う作業や命令）
を上から順番に行うこと
1.順次処理
処理1
処理2

55. 55
ある条件を設定して、この条件が満たさ
れた場合にあらかじめ指定した処理を行
い、そうでない場合には処理を行わない
で次の処理に進む
2.条件分岐

56. 56
違う場所へ案内する立て札
どっち？着いた！
ダメだった

57. 57
3.繰り返し
設定した条件が
満たされるまで、
同じ処理を繰り返す
ループとも呼びます
寝る
仕事

58. 58
プログラムは基本構造が
組み合わさって出来ている

59. 59
まずはこの3つの
約束事をしっかり覚えよう！

60. フローチャートの作り方
60

61. 61
プログラムを
組み立てる時
行き当たり
ばったりは
ダメ

62. 62
仕様という制作ルールなどを
決める必要があります

63. 63
その中でプログラムの流れを
図式化したもの

64. 64
フローチャート

65. 65
フローチャートは
処理を行う内容により
記号と線を使い分ける

66. 66
例えば

67. 67
朝起きて歯を磨いて
学校へ登校する
という1日があったとして

68. 68
これをフローチャート化

69. 69
開始
起床する
歯を磨く
登校する
終了
始まり
と
終わり 各項目

70. 70
先ほどの条件分岐を
フローチャートで表すと

71. 71
開始
処理
終了
条件式
Yes
No
条件分岐
用の記号

72. 72
先ほどの繰り返しを
フローチャートで表すと

73. 73
開始
処理
終了
繰り返し開始
繰り返し終了
繰り返し
用の記号
繰り返しの記号
は条件分岐に
分解できます

74. 74
フローチャートを
作るするソフト

75. 75
ワープロソフト
表計算ソフト
プレゼンソフト

76. 76
サンプル紹介

77. 77
フローチャートが
しっかり書けると
プログラミングが楽になるよ

78. 変数、四則演算
78

79. たくさんの計算をしたいとき
手書きだと
79

80. 80
8+15=23
54+24=78
37+43=80
78+56=134
83+79=162
123+456=579
1+2=3
2+4=6
5+7=12
12+6=18
9+11=20
22+13=45

81. とても疲れる
81

82. こんな時
82

83. + = ?
83
こんな感じで式だけ
用意して数字を変えるよ
うにできれば良くね？

84. 84
この式に当てはめる
箱のようなものを
変数と呼びます

85. 85
変数には名前を付けたり、
値という数値や文字列を
入れることができます
12
“山田”
変数名

86. 変数を使うときには
宣言しないと
使えないのが基本です
86

87. 変数に値を格納する時には
代入＝を使います
87

88. 88
変数abcに数字12を代入する
12
abc

89. 次は四則演算
89

90. いわゆる
足し算、引き算
かけ算、割り算
90

91. +
91
プログラムは
ここの部分の
記号が重要

92. これらを行うときに
使われる記号の事を演算子
と呼びます
92

93. 足し算は ＋
引き算は ー
かけ算は ＊
割り算は ／
93
これらを
算術演算子と
呼んだりします

94. 割った余りを出す
剰余算％もあります
94

95. 変数、演算子、四則演算は
プログラムでは
基本中の基本です
95

96. 制御構造
96

97. 先ほど挙げた基本の構造3つを
制御構造と呼んだりします
97

98. 制御構造のうち
順次処理を除いた2つは
文という形で
用意されています
98

99. 99
条件分岐
IF文
1

100. 100
1.IF文
if(条件式){
処理;
}
もし～ならば、～を行い、
そうでないならば～を行う

101. 101
1.IF文
if(条件式){
処理1;
} else {
処理2;
}
else を追加して
別な処理を行わせることも
できます

102. 102
1.IF文
if(条件式1){
処理1;
} else if(条件式2){
処理2;
}
さらにelse ifを追加して
別な条件を設定することも
できます

103. 103
繰り返し
FOR文
2

104. 104
2.FOR文
for(初期値;条件式;増減){
処理;
} 書き方に特徴があるので
注意が必要

105. プログラム内で制御構造を
しっかりと書けるかが
重要
105

106. 配列、関数
106

107. 変数に100人の名前を
代入して管理したい
107

108. それをいっぺんに表示したい
108

109. 表示 変数A
表示 変数B
表示 変数C
……
109

110. やってられるか！
110

111. そんなときに
用意されている機能が配列
111

112. 一つの変数で
複数の値を管理する
ことができます
112

113. 配列という箱を用意して
箱を添字という番号で区切って
区切られた中に値を入れます
113
変数は一軒家
配列は長屋
0 1 2 3 4
配列名
添字

114. こうすることで
114

115. 100人の名前を
管理して表示
115

116. 100回繰り返す
表示 配列A[添字]
戻る
116
添え字を
0から99まで
変化させる

117. 関数
117

118. ある処理の塊を
色々なところで使いたい
118

119. 処理A
処理B
処理C
119
処理A
処理B
処理C
処理A
処理B
処理C
全部書いてみる

120. 120
処理Aを
書き換えなくちゃ!

121. 処理A
処理B
処理C
121
処理A
処理B
処理C
処理A
処理B
処理C
全部直さないと……

122. やってられるか！
122

123. こんな時
123

124. ある処理の塊を
まとめて
呼び出すことができれば
124

125. そんなときに
用意されている機能が関数
125

126. 126
配列
function 関数名(引数){
処理;
return 戻り値;
}
functionの中に
まとめたい処理を書きます

127. 127
処理A
処理B
処理C
処理をまとめて
グループ化

128. 128
処理A
処理B
処理C
処理が欲しい時に
呼び出す
処理1
処理2

129. 129
処理A
処理B
処理C
処理Aを直す時も
一箇所で済む
処理1
処理2

130. 配列、関数が分かると
作業の効率化が大幅アップ！
130

131. アペンド
131

132. 参考サイト、書籍など
132

133.  Cacoo
https://cacoo.com/lang/ja/
 MOZILLA DEVELOPER NETWORK JavaScript
https://developer.mozilla.org/ja/docs/Web/JavaScript
 高速でプログラミング言語をマスターするのに有効
な記事まとめ
http://matome.naver.jp/odai/2129649658966682001
133
参考サイト

134.  マンガで分かる JavaScriptプログラミング講座 第2版
http://crocro.com/write/manga_javascript/wiki.cgi
 プログラミング言語人気TOP10の簡易解説
http://www.mwsoft.jp/column/program_top10.html
 ドットインストール
http://dotinstall.com/
134
参考サイト

135.  3ステップでしっかり学ぶ JavaScript入門
 よくわかるPHPの教科書 【PHP5.5対応版】
 スッキリわかるJava入門 第2版
135
書籍

136.  Sublime Text 3
https://www.sublimetext.com/3
 XAMPP
https://www.apachefriends.org/jp/index.html
 Eclipse
https://eclipse.org/downloads/
136
ツール

137. 137
以上!!