Skip to main content

ペアプログラミングで他人からコーディング技術を学ぼう

今日もコーディングを進めていたでござるが、本当にこの書き方であってるでござるか?

いまいち非効率なコーディングな気がするでござる・・・

今日も頑張っていますね!

ちょっと行き詰まりを感じてますか?

そうでござるね・・・

なんだか、自分のコーディングの内容が、本当に効率的なのか、バグが混じっていないのか不安でござる。

じゃあ、ちょっとペアプログラミングをしてみましょうか。

ペア…?なんでござるか?それ?

では、まずはざくっとやり方を説明してから一緒にやりましょう!

①ペアプログラミングとは

ざくっというと、ペアプログラミングは以下のような感じで進めます。

  • 1台のパソコンを2人で使ってプログラミングを行う
  • 「ドライバー」というコーディングを行う人と、「ナビゲーター」と呼ばれるチェック・アドバイス担当の2人で行う
  • 30分単位や単体機能毎に「ドライバー」と「ナビゲーター」の役割を交代する。

なるほど!りょうじ殿のスキルを吸収することが出来るでござるね!!

②どういうときに行うか

では、このペアプログラミング、以下のようなときに行います。

  • 熟練者のスキルを初学者に教える
  • 属人化したスキルを、開発者同士で勉強し合う
  • アジャイル開発など、設計書が無い状態で認識を合わせて開発する場合
  • システムの状況を一緒に把握する

ふむふむ。

ここでもアジャイル開発という単語が出てきたでござるね。

アジャイル開発については、過去にこちらで記事にしてますので、ご興味あればお読みくださいね。

③メリット・デメリットは?

このペアプログラミング、良いことばかりでござるか?

物事は表裏一体なので、デメリットもあります。

メリット

  • 技術スキルを共有でき、全体のレベルがアップする
  • 実務の中で行うので、ナビゲーターのノウハウをふんだんに活用できる
  • お互いをサポートし合って作業を行うので、集中力を持続しやすい

デメリット

  • 熟練者が参加し、教える気が無いと効果が発揮しづらい
  • 必ずしも生産性が上がるわけでは無い(熟練者2名の場合、各自で動いた方が可能性)
  • お互いのスケジュールを合わせて行う必要がある

き、きっとりょうじ殿は、しっかり教えてくれるでござるよな?な?

ふふふ。どうでしょうか。(ニヤリ)

とりあえずは、一度一緒にやってみましょう。30分交代で、最初はお侍さんがドライバーでやってみましょう!!

​Visual Studio Codeを活用してみよう

お侍さん。

ひょっとしてですが、プログラミングを「メモ帳」機能でやっていますか?

うむ。拙者、シンプルイズベストでござってな。

な、なるほど・・・?

実はコードエディターというものがあるのは、ご存じですか?

コードエディター?うむ。知らん。

じゃあ、今回はコードエディターの一つである「​Visual Studio Code」についてざくっと解説します!

プログラミングが早くなるので、是非使ってみてください。

①コードエディターって何?

そもそも「こぉどえでぃたぁ」って何でござるか?

メモ帳は文字を書くことができますが、コードエディターはプログラムを書くことに特化したソフトウェアです。

VSCODE以外では「Sublime Text」や「Atom」もあります。

それって絶対使わないといけないでござるか?

絶対使わなければいけないというルールはありません。

お侍さんのようにメモ帳でもプログラムを作って、拡張子を変更すればコードは書けます。

しかし、以下のようなメリットが、「コードエディター」にはあります。

1.言語に合わせて間違った文字列を判別する
2.言語によって使用する関数など提案・表示してくれる
3.各種プラグインを利用することで、さらに使い勝手が向上する

ううむ。良いことづくめでござるな。

はい。
なので、まずはVSCODEをダウンロードして使用してみましょう!

②ダウンロード・インストール

以下のURLからダウンロードして自分のpcにインストールしましょう。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ちなみに、日本語への対応方法は以下を参照してみてください。

https://rfs.jp/sb/vsc/vsc-japanese.html

と、とりあえず、いんすとーるしてみるでござる。

③実際にプログラミングに使ってみる

操作に慣れてきたら、各種プラグインを導入していけばOKですが、試しにhtmlファイルを開いてみましょう。

おぉ。。。タグや属性に色がついてるでござる。

便利な機能で言うと、RGB値をマウスで選択することもできます。

また、タグの数が足りない時や使用する属性候補なども予測で表示してくれます。(下図は <l のみ入力した時)

ひえー。いままで拙者がタイプミスしてきたのはなんだったでござるか。

このため、コードエディターを使うだけで、ケアレスミスによるコーディングミスを防いでくれます。

開発効率が絶対高くなります!!

今度からぜったいVSCODEを使っていくでござる!!

ちなみに、上述したように、他にもコードエディターはたくさんあるので、自分の好みで使ってください!!

初心者には、JavaScriptがお勧め!

HTMLとCSSでウェブサイトを作れたでござる。

この後、何をしようかでござる。

おお、いい感じのウェブサイトですね。

じゃあせっかくなので、JavaScriptでプログラミングするのはどうでしょうか。

じゃばすくりぷとっていうのがいいんでござるか?

じゃあ、プログラミング初心者のお侍さんに、なぜJavaScriptがお勧めなのか、ざくっと解説します。

①環境構築がほぼ要らない

プログラミング言語はたくさんあります。
その多くは「開発環境」を整備してあげる必要があります。

かいはつかんきょう・・・

プログラムというのは、人間に読みやすくできていますので、それを機械に読んでもらうために「コンパイラ」の使用が必要だったりします。
また、ライブラリという別のプログラムの塊を準備したりする必要があります。

ううむ・・・カタカナで頭痛が痛くなりそうでござる・・・

しかし、JavaScriptは普段から利用しているブラウザ(ChromeやSafariなど)があれば動きます。

また、メモ帳でも書くことでプログラミングもできます。
(できればVisual Studio Codeのようなエディタを使った方が効率的です)

おぉ!なんだか簡単そうでござる!

②HTMLを作った人ならば、いろいろできる

また、JavaScriptはHTML上で動作させます。

このため、WEB画面を作れた人は、JavaScriptで開発することで、さらにWEB画面を進化させられます。

おぉ。。。拙者のシステムが超進化するでござるな

実際どんなものを作れるんでござるか?

例えば・・・

A.Web画面を動的におしゃれに動作させたい
B.簡単なブラウザゲームを作る
C.ちょっとしたツールを作って、便利なものを公開したい

などがあります。

Cがよくわからんでござる・・・

じゃあ、私が最近趣味で作ったプログラムで見てみましょう!

③管理人が学生時代を思い出しながら作成したサンプル

作成途中で恥ずかしいのですが、学生時代を思い出して、ちょっとしたプログラムをJavaScriptで作成してみました。

その名も「積立投資の簡易計算つーる」です。
(税金計算が入っていなかったり、エラー処理がなかったりで半端ものです。すいません)

↓↓↓動作をお試しの際は、こちらをクリック↓↓↓

おぉ。銭の計算ができるでござる!

これくらいなら、拙者でも作れそうな気がするでござるよ!

(DOMの考えとかで時間かかるかもだけど、、、)
頑張って作成してみて下さい。きっとできますよ!!

上述したように、HTMLの次はJava Scriptを個人的にオススメしてます。

別の言語でもOKなので、どんどんコーディングしていきましょう!

物が出来上がるというのは、とても楽しいですよ!!

if文とは?

for文に続き、if文にも触れていきたいと思います。(過去のブログはこちら

このif文はよく見るでござる。

Excelの式とかでも見たことがあるでござる。

if文は、言葉の通り「もしも」という意味で、条件を付けてあげることで、のちのプログラム処理を変えてあげることができます。

割とシンプルでござるな。

上の図のように、多くのプログラムでは、条件部分が正と誤で、別の処理を行います。

言語によっては、Switch分、case分など複数の条件と処理ルートを一度に表現するものもあります。

とりあえずこのif文さえ扱えれば、いろんな処理の分岐が出来るので、プログラムっぽくなります。

なるほど。でもこのif文、やっぱりHTMLでは出てこないでござるよな?

はい。HTMLやCSSはWEB画面のデザインを担当しているので、このように条件が変わった時の処理などを扱いません。

その代わりにJavaScriptやphpなどのプログラミング言語で、HTMLで入力されたデータを処理しましょう。

その辺りは、また解説していきたいですね。

繰り返し処理(for文)の意義

今回は、プログラミングの基本である繰り返し処理(for文)についてざくっと解説していきたいと思います。

拙者は、HTMLとCSSを知ってるが、繰り返し処理なんか知らないでござる。

その二つの言語の場合は、「ウェブ画面を作る」と言う意味合いが強いので、繰り返し処理は活用しないですよね。

でも、JavaScriptやC言語などのメジャーな言語では、この繰り返し処理は基本の基本です。

超基本ですので、HTMLやCSSを中心で書いている人も、一応覚えておきましょう。

for文の書き方は、言語によって多少異なりますが以下のような書き方となります。

この3つのコード全てで、”Hello World”という文字列を5回表示させるプログラムになります。

これって別にfor文使わなくても、5回同じ文章をコピペすればよいのでは?

確かに、それでも同じように表示することができます。

しかし例えば、数万行の文字列を表示させようと思った時に、一つ一つコードを書いて表示させることは大変です。

一方、「for文を活用して1行目から数万行目まで表示させる」ってしてしまえばプログラムもシンプルですし、簡単に表示させてあげることができます。

な、なるほど。。。

for文は、プログラミングの基本です。
違う言語でもちょっとルールが違うこともありますが、基本的に同じです。
自分の好きな言語で、どんどんコーディングしていって、理解を深めましょう!

HTMLで簡単に実装できるJavaScriptでやってみるでござる!!

相対パスと絶対パス

作成したHTMLファイルをサーバにアップするでござる。

あれ・・・?URLリンクが開けないでござる・・・。

お侍さん、順調・・・じゃなさそうですね。
どれどれ・・・あー絶対パスでリンクを設定してそうですね。
相対パスで記載すれば解決すると思いますよ。

ぜったい?そうたい?

じゃあ基本からざくっと解説しましょう!

絶対パス

絶対パスは、完全なファイルやURLの場所といったイメージです。

例えば、このブログサイトは「https://rakuraku-ict.com/zakutto/」というパスになります。

フルパスとも呼ばれます。

うむ。ブラウザに表示されているものを全部コピーでござるな。

相対パス

相対パスは、「とある地点からパスという場所を指定する」感じです。

表記が楽になったでござる!

でも、簡略化できるだけでござるか・・・?

パスの形式の使い分け

それぞれ、以下のように特徴があります。

特徴を理解して使い分けましょう!

<絶対パス>

  • パスのすべてを表記するので、確実にパスを指定できる
  • 階層型のもの(ファイルやURL)等では、逐一パスを記載していると大変
  • 外部WEBサイトを参照するときに使用

相対パス

  • 自分のWEBサイトなど、ファイルの配置場所が分かっている場合は相対パスが圧倒的に楽
  • ./や..などの相対パス特有の記号の使い方を学ぶ必要がある
  • 外部のWEBサイト参照には使えない

ふむふむ。拙者外部リンクも、自分のWEBサイト内のリンクも絶対パスにしてたでござる。

パソコン内部の絶対パスと、サーバ上の絶対パスは表記が変わるので注意しましょう!
(PCだと「C:\Users\Yorimichi\HTML」みたいなのが、サーバだと「D:\ServerX\HTML」みたいな感じで前半の部分が絶対パスだと間違ったりします。)

光の三原色を知って、WEBページの色を設定しよう

さて、CSSで画面をデザインするでござる

今日もお侍さんはやる気満々ですねー!
どれどれ。コードを見てみると、、、色はRGBで、設定しないんですね。

なんかBlueとかredとかあるので、それで設定してるでござる。

では、今回はRGBを活用したCSSの色設定をざくっと紹介します。

まず光の三原色をご説明します。
色の原色には、赤、緑、青の三種類があり、この組み合わせであらゆる色(厳密には人間が見えることができる色の範囲)を作ることができます。

まず光の三原色をご説明します。
色の原色には、赤、緑、青の三種類があり、この組み合わせであらゆる色(厳密には人間が見えることができる色の範囲)を作ることができます。

なるほど、これを活用すればオシャレカラーも使えるでござる。

でも、どんな色の組み合わせが良いのかわからんでござる。

私もセンスがないので、色の組み合わせはよくわかりません。
ですが、今の世の中、見やすいウェブサイトのサンプルが大量に公開されてます!
以下のサイトは、私的に使いやすく感じていますため、ご紹介させて戴きます。

なるほど!このリンク先から好きな色をコピーしてCSSに設定すればいいでござるな!

その通りです!!
なので、色のセンスは無くても、前人達の知識を活用させてもらって、自分のCSSでrgbで設定してください。

余裕や興味がある人は、カラーコーディネートや色について学んでみてください。
心理学や服装、マーケティングなど幅広い分野に活かせる知識ですよ!

教科書で定数ってあったけど使ってない。。。

プログラミングも、だいぶ慣れてきたでござる。

こんにちは。お侍さん。順調のようですね!
綺麗にプログラミングコードも書けていますね!

そうでござろう?楽勝でござるよ!

あ。でもここは変数ではなくて、定数にした方がいいかもしれませんね。

定数?教科書にあったが、特に使ってこなかったでござるな。

じゃあ、今回ざくっと定数について説明しましょう。

なるほど。じゃあ入力データのフォルダURLは定数に変更するでござる!

定数を活用すると、データを上書き保存できないので、プログラムの保守性が上がります。

また、定数はプログラミングの前半に記述すると、後で定数の値を変更しやすくなります。
コメントアウトで、この定数が何者でどこで使用するものかも書いておくと、後で見直した時に分かりやすくなります。

こういった細かいテクニックは、他人のプログラミング内容をみて、ぜひぜひマネしてみてくださいね。

プログラミング勉強してたら、配列って出てきた。いつ使うの?

ううむ。変数に定数に配列。。。

お侍さん。今日もプログラミングを頑張っているようですね!
大分慣れてきましたか?

パソコンは慣れても、プログラミングは躓いているでござる。

基本は、調べながら作っていくものですからね。
今はどこで困っているんですか?

配列の使いどころがいまいちわからんでござる。

じゃあ、今回は配列の使い方についてざくっと解説しますね。

上の図のように、通常の変数は1つの変数に1つのデータを格納しますが、配列は1つの配列に複数のデータを格納します。
これは、以下のような用途で活用します。

・for文を活用して、配列の添え字(上図では1~4)のデータを全部表示する。
・ジャンルが似ているデータを、一つの配列で管理したほうが分かりやすい。
・Excelのように多数のデータを管理するときは、二次元配列というものを作って、そこにデータを格納します。

拙者が勉強している言語は、添え字が0からでござるが・・・

その辺りは、プログラミング言語によって変わってきます。基本的には0か1から添え字が始まることが多いです。

うむ。じゃあExcelのデータを取り込む処理をするから、配列でやってみるでござる!!

引き続き頑張ってくださいね!
プログラミングは、共通している考え方が多いので、一つの言語で勉強したら他の言語に応用できます。
なので、どの言語でもまずは触ってみて、不明点を一つ一つ解消してきましょう!

プログラミングの変数ってなんか数学と違う?

元々プログラミングをやりたくて、専門の学校に通った管理人のりょうじです。
今回から、プログラミングのちょっとした話をざくっとしてみようと思います。

おぉ。拙者は初心者なので助かるでござる。

どの言語から勉強しても良いのですが、プログラミングを勉強すると、変数というものをほぼほぼ利用します。
数学でいうところのxやyなどの、何かデータが入っている記号というものが変数です。

数学のx,yみたいにネーミングルールはあるのでござるか?

変数は基本的には自由に名前を付けることができます。

しかし、変数の名前には注意があります。
予約語と呼ばれる、すでにそのプログラミング言語で使われている言葉は使ってはいけません。

C言語ではprintfという関数があるのですが、その名前と同じ変数を使ってはいけません。プログラムがprintfがどちらのことを指すのか分からず、エラーになります。

なるほど。同一人物を作っちゃいけないのでござるな。

最後に1点。プログラミング初心者にはわかりづらいことを説明します。
Osamurai_age(お侍さんの年齢)という変数があって、誕生日を迎えた場合、1という数字を足すことになります

来年で22歳になるでござる!

(意外と若いよね)
その時、プログラミング言語によっては、以下のように足し算をします。

Osamurai_age = Osamurai_age + 1

これって、右辺と左辺が一致していないから数学的におかしいでござる!!

そうなのです。数学的に見た時には絶対に成り立たない表現です。
しかしプログラミングでは以下のような感じになります。

Osamurai_age = Osamurai_age + 1
↑将来の年齢   ↑今現在の年齢

将来の年齢という箱に、今現在の年齢に1足して保存するという命令になります。

数学をしているのではなく、命令をしているという風に考えてください。

このように、プログラミング言語に限らず、慣れないとわかりづらい事ってのがあります。

今後もこのようなことをご紹介してくので、ぜひ一緒に勉強していきましょう!