開発環境を触ってみよう
実際にプログラミングを体験してみよう
IDE -統合開発環境-
プログラミングに必要なツール
エディタ、コンパイラ、デバッガなどを1つにまとめたソフトウェア
Visual studio codeをインストールしよう
今回は Visual studio code をインストールしました。
・File > Open Folder で1つフォルダを作成して開きます。
・その中にindex.htmlというファイルを作って、コードを書いていきます。
2つの数を足し合わせるプログラム
画面の見た目を作ろう
まずはHTMLで→のような画像を作ってみよう
(=ボタンをクリックしたら計算結果が表示されるようにしてみよう)
HTMLから作成
古い書き方 <input type="button">
新しい書き方 <button>=</button>
type="button" がないとsubmitになる
Javascriptを書く
bodyにjavascriptを直接記述して
分かり易さ重視で説明いただきました。
上から順番に実行されるので、HTMが読み込まれてから実行されるように、scriptは下に書きます。
document → ページの全体
getElementById → IDからエレメントをゲットする
leftという名前の変数の中に<input type="text" id="input-left" />が入った状態
変数は他にも var / let があります。
代入された値を変えたくない時は constで変数宣言します。
イベント → アクション
リスナー → イベントを待ち受けるやつ
function() → 関数。クリックされた時に実行する内容を書きます。
value値をそのまま加算しようとすると
文字列なので、計算されないため
parseIntで数字化して取り扱います。
変数に条件式も入れられます。
繰り返し条件文を使う場合なんかに運用面でメリットがあります。
let result = null;
計算結果を格納するための変数をつくっています。
あとから変数の値を上書きするので、let
var と let は同じ感じ
var はあまり使わない方がいい
var は同じ名前で変数名定義できちゃうので、あとからバグが起こりやすい。
letは再定義できないので、うっかりミスを減らせる。
＊COMMENT＊
下川 春樹
＊コメント＊
本日は、最初から手を動かしコードを書いていく回でした。
OWLet内ではなく、久しぶりにVScodeを使用しての直？生？コードだったので、とても新鮮でした。
ぱっと画像を出され、見た目を作ってくださいとなりましたが、普段inputタグを全然使っていなかったので、CSS使わないのか？あれ？？？となってしまいました。
そこから右と左を足したり引いたりし、＝を押せば計算が出来るようにJSを書きました。要素を取ってきて変数に入れる、ぐらいまでは理解できたのですが、if文や再代入などから結構怪しかったです。まだまだ、基本の基本ですのでJSの理解は深めていきたいです！
＊コメント＊
高橋 かほ
＊コメント＊
今までの学校ではプログラミングを学ぶ上での基本的な用語の確認や仕組みについて学んでいましたが、今回はより本格的にコードを書いていきました。
私自身、右も左も分からないところからスタートしましたが、久保さんや他の参加者の方に丁寧に教えていただいて、楽しく手を動かしながら学ぶことができました。また、分からないことがあったときにすぐに質問できる環境で、初学者の私にとってはとても有難かったです。
個人的には、const、var、letの違いについて理解できていないままだったので、今回詳しく教えていただけてよかったです。今まで、コーダーさんの好みで使い分けていると思っていました…。
実際に上手く動かすことができると達成感があって、とても楽しく、あっという間の２時間でした！
次回も楽しみにしています。よろしくお願いいたします。
＊コメント＊
則岡 えり
＊コメント＊
今回は実際にプログラムを書いてみよう、という回でした。
1～3回の学校も楽しかったですが、やっぱり手を動かしながら学ぶのはわくわくするしとても楽しいです。
JSで簡単なプログラムを書いてみるという内容でしたが、
普段AIに頼りすぎていて、実際にコードを自分で書こうとすると、あれ？どうだったかな？となります。
AIにコードを書いてもらったとしても、ちゃんと1行ずつ理解に努め、
時間が許すのなら、コピペではなく自分の手で書いて学んでいきたいと思いました。
＊コメント＊
鶴田 れな
＊コメント＊
今回はVScodeを使用して、実際にコードを書いていきました。
私は普段サイト模写をしているので、HTMLは書くことができましたが
jsとなるとやはり「？？？」となってしまいました。
仕組みと記述を丁寧に教えていただいたので、今回やった記述は
なんとか理解できました！
自身でもjsは要勉強と感じているので、余暇の時間に
しっかりと学んでいきます。
＊コメント＊
鈴木 健太
＊コメント＊
JSの基本について教えていただきました。イベント処理など、基本は大事だなと思いました。
特に印象に残ったのはOWLのデータベースの構造についてです。いつも書いているコードとデータベースの構造が、自分の中でりんくりて面白かったです。
＊コメント＊
＊コメント＊