peeks-blog

自分用メモ

If（条件分岐）とfor（繰り返し）が基本

ここに色々なロジックを加えて覚えていく

作成については、人間だったら
どのように処理するかを仮定して考える

フローチャートとは？

流れ図、処理の書かれた様々な種類の図式を
矢印で繋いで処理のステップを視覚的に表現する記法

プログラムの処理の流れを図に書き起こす事で
ロジックを視覚的に整理できる
そして正しい段取りでプログラムを記述する事ができる

現場でも難しいコードの時は
書いたりする時がある、ロジックを整理するために使う

※参考：クリエイティブ、プログラミング用語まとめ

・startとend
名称は「開始と終了」で、処理の開始と終了を表している
システム全体の処理からプログラム内の
ごく一部の処理まで、指定できる範囲は広い
自分で決められる、必ず矢印で終わらせる

・□
処理、通常の処理を表す「文字を表示する」「計算する」など
プログラムで行われる処理の基本形、
他に登場する記号すべてを包括している
実はフローチャートには様々な記号がある

・♢
判断、条件によって処理が分岐する
なお、条件分岐もただの処理の１つである
つまり条件分岐の行先にも条件分岐が書ける

条件分岐と繰り返しとは？

フローチャートで用いるのは
「条件分岐」処理と「繰り返し」処理の２つだけ
「ロジックを構築する」ことが
繰り返すか分岐させるだけだから、後は応用を理解する

簡単なフローチャートは、if文とfor文が
組み合わされて書かれる事が多い
→まずはこの２つを理解する！

条件分岐

ある条件が満たされているか否かによって
次に実行するコードを切り替える命令
「もし～だったら◯◯しよう」ということ
「もし変数Aの値が100以下だったら処理Bを、そうでなければ処理Cを実行しよう」

※参考：変数とは？名付け方のコツや定数についても解説

・if分岐
条件を指定して、それに合うか否かを判断して、
その判断に応じた処理をさせたい時に使う
条件が一致することを(真、True)、一致しないことを(偽、false)と呼ぶ

・if～else文
「もし～だったら◯◯しよう、そうでなければ●●しよう」
「もし晴れていたら外出しよう、そうでなかったら家にいよう」

※参考：条件分岐とは？プログラミング言語による書き方の違いや共通点など

繰り返し処理

決まった回数や条件を満たすまで同じ処理を繰り返し行う場合に用いるもの
たくさんの処理を手抜きで済ます、代表例に「for」文や「while」文がある
for文は繰り返す回数が決まっているが、while文は繰り返す回数が決まっていない

→for文：キーボードから10回出力されるプログラム
→while文：キーボードで0が出力されるまでデータを入力するプログラム

繰り返し処理は「ループ処理」とも呼ばれる

・ループ
特定の条件下において特定の処理を繰り返すこと、
又はそのように作られた制御構造
繰り返しを継続するか否かを
判断するための条件式(反復条件)がある

条件式＝反復条件がループ構造のはじまりに書かれたものが「前判定ループ」である
→for文やwhile文はこちら

条件式＝反復条件がループ構造のあとに書かれたものが「後判定ループ」である
→do-while文など

条件式が永久に成立し続ける場合ループは終了しない＝無限ループ
→while文は無限ループになる可能性が高い

※参考：配列、連想配列、for文、foreach文の違いや関係性

for文の繰り返し処理とは？

プログラミングでは「同じ処理を何回か繰り返したい…」
という場面がある
（例：取得した値の分、繰り返してリストを生成する…）

この時に使えるのが繰り返す処理

繰り返す処理を使うことで、
同じコードを数回繰り返して実行してくれる
（ブログの一覧を作る時にも使われる）

この「繰り返す処理」を実現できるのが、forなどの構文である

for文の使い方

for文の基本形は以下の通り

「for( 初期値; 条件式; 増減値 ) {
//繰り返す処理を書く
}

上記の３つの引数を与えるのが一般的
それぞれの意味は以下の通り

・初期値：繰り返す回数の初期値
・条件式：繰り返しを継続する条件
・増減値：「初期値」を増減する式

for ( var i = 0; i < 10; i++ ) {
//繰り返し処理
}

初期値：var i=0;
条件式：i<10
増減値：i++;



for ( var i = 0; i <= 50; i = sum + 1 ) {

}



var lists = ['佐藤', '伊藤', '鈴木', '木村', '田中', '高橋'];

console.log ( lists[0] );
console.log ( lists[1] );
console.log ( lists[2] );
console.log ( lists[3] );
console.log ( lists[4] );
console.log ( lists[5] );

「console.log()」を使って表示してるが、
同じ処理を６回も繰り返してるので、
非常に単調なプログラムになっているのが分かる


var lists = ['佐藤', '伊藤', '鈴木', '木村', '田中', '高橋'];

for ( var i = 0; i < lists.length; i++ ) {
console.log ( lists [i] );
}

プログラムがとてもすっきりした

条件式のところでは「lists.length」を使っている
これは配列の長さを取得できるメソッドで、
今回の場合は「i<6」と同じ意味になる

フローチャートで覚えるべき３つの構造

①順次構造
上から順番に処理する構造、四角と線で表現する
代入は「→」を使って表現する

②選択構造
処理を選んで実行する手順、if文がこれに該当する
ひし形「◇」で分岐を表現するのが一般的
YesやNoを置く位置は特に決まってない

③反復構造
同じ処理を繰り返す手順、for文やwhile文など

フローチャートの作成方法

①「人間だったらどうするか」を考える
現在行っている手作業の手順を細かく考えること
作業手順書や業務マニュアルは、フローチャートの原型でもある

②「コンピュータに作業させたら」を考える
人間がすること全てがコンピューターが出来る訳ではないので注意する
→人間がする作業とコンピュータに任せる作業をきちんと区分けする
人間が直感的に分かる事でもコンピュータは細かく分解しないと理解できない

③注意点
フローチャートの図示をもとにプログラミングをする
→そのまま解釈してプログラミングをするのではない
フローチャート通りにプログラミングをすると汚いコードになる場合もある

④まとめ
あらかじめしっかり作っておけばプログラミングの色々な場面で役立つ
→プログラミングが正しく動くかのテストにもフローチャートは役立つ
チームのメンバーや顧客にどんな流れかを共有する際も便利である

備忘録メモ

頭の中でプログラムがどういう動きをするかを想像するのは
ある程度プログラムを書くことに慣れてないと難しい

この場合、アルゴリズム（プログラム）の流れを図に起こすと良い
※参考：アルゴリズムとは？プログラミングとの関係や記述方法

この流れを表す図が「フローチャート」である
フローチャートを書く事は、こｒからプログラムを書くにあたって
考える時の助っ人となってくれるはず

フローチャートやアルゴリズムを書くにあたっては
紙とペンがおすすめ。大げさなツールは必要ない

まずは思考をまとめるために、書き出して整理することが重要
まとめた図はカメラで撮影して保存しておくと良い