構造化プログラミングには抽象という手法があります。この抽象を利用して自然言語から順にコードを書き下していくことができます。とりあえず書いてみようの精神による混乱が少なくなります。
抽象(abstraction):プログラムのブロックなどに名前をつけ、さらに中身を見ないで正しいと仮定することで検証作業を後回しにする操作
例えば選択されたファイルに応じてマーカーを選択されたファイルのリストと地図上の二つに追加する関数を考えます。
function add_selected_marker(filepath) {
//新しいマーカーのアイコンの決定
//マーカーのアイコンを選択されたファイルのリスト(selectbox)に追加して、更新をかける
//選択されたファイルの情報とマーカーのアイコンを地図の上に載せる
//地図の上に載せ終わっていたら、選ばれたファイルのリスト中のアイコンをクリックしたときのイベントを追加する
//地図の上に載せ終わっていたら、追加したマーカーの位置に画面中央を移動させる
}
リストに追加する際のアイコン以外の処理はここ以外で既にやってあります。このコメントを関数に置き換えます。
function add_selected_marker(filepath) {
const icon_index = marker_managements.get_new_icon_index();
update_icon_img_in_selectbox(icon_index);
add_marker_on_map(filepath, icon_index).then(() => {
add_event_click_marker_in_list(filepath, icon_index);
set_map_center_to_marker_point(filepath);
});
}
この関数自体では具体的なコードはさっぱりですが、抽象化された動作から何をする関数なのか大体わかります。抽象を利用するとこのような他で記述した関数をまとめる関数が作れます。