長野高専 情報技術研究部 2024年度資料
これは情報技術研究部の新入部員に向けた講座の資料です。皆さんの役に立つような内容をまとめてみました。随時追記お待ちしております！
はじめに
この部活に興味をもってくれてありがとうございます！「プログラミング、チョットデキル」な人はもちろん、「なにもわらないよ~」な人でも大歓迎です。
突然ですが、これから少しの期間、講座を行っていきます。皆さんには基本となるツールの使い方等を覚えてもらいます。「なにもらかわなよ~」は人はきっと成長できるし、「プログラミング、チョットデキル」な人もなにか得ることができると思います(逆に教えてくれてもいいんですよ~)。
ではまず、基本的な知識から身に付けてきましょう。
基本的な知識
ここではこれからどの分野に進んでも必要になるであろう知識をまとめていきます。(偏見が混じる可能性があります)(どの項目も巨大な氷山の一角いや、それにも満たないので詳しくは本などを手に取ってみましょう！)
os
みんな大好きオペレーティングシステム！皆さんはどんなものを知っていますか？
ここではみなさんがこれから使っていくであろうosについて種類などの説明をします。
windows
長野高専で指定されるosです。高専で使用する特殊なソフトウェアはwindowsでしか動かないことがあるため使用されています。
linux
厳密には意味が違うのですが、これもまたosの一種として使われています。windowsと違い、自由に使うことができるので様々な場所で活躍しています。おそらくwebアプリケーションの講座で使用すると思います。
ちょっと先取りですが、皆さんはWSLというかたちでlinuxを使用するでしょう。いろいろな方法がありますが、これで簡単にlinuxを導入できるのでオススメです。
プログラミング言語
コンピューターを動かす際に使用されるものです。様々な種類があり、分野によって使い分けられます。この情報技術研究部ではprocessingという楽しいツールを使って、プログラミング言語の講座を行います。
皆さんはおそらく、javaを使用したandroidアプリの開発を行うでしょう。javaとprocessingの言語は似た部分が多いため、この講座を通して学んだことがきっと役に立つはずです。(もちろん今からjavaでもいいんですよ！)
イベント
一人でなにかを作ることもいいですが、次のようなイベントにチームで出場することで自身の成長や将来に役立てることができるでしょう。
ごく一部ですが、参考になるウェブサイト等も載せておきます。(めちゃくちゃハードルの高いものもあるので注意)
コンテスト
開発やテクニックで競い合うイベントです。よい成績を勝ち取ると、賞金や豪華な景品を貰うことができます。高専プロコンもその一種といえます。基礎をある程度身に付けられたら腕試しで出てみるのもいいかもしれません。
勉強会・LT会
技術者をお招きし、講義を行っていただく会です。とても勉強になったり成長につながるため機会があれば参加していきましょう。また、LT会という短い発表をしあって、知見を共有するといった文化も盛んです。情報技術研究部でも行います。どんな発表でもいいので、気楽に登壇しましょう。
資格
様々な資格があるのでその勉強をしながら学んでいくのもいいかもれません。特に基本情報技術者の教科書等を読むと理解の助けになると思うので覗いてみましょう。
ターミナルの操作
ここではターミナル（いわゆる黒い画面）との対話の仕方を学びます。
なんでつかうの？
かっこいいから
世界が広がる1
windowsだとそこまで使わないのですが、linuxの操作で多用します。便利なツールが多く存在しており、様々なことができるという利点があります。最初は慣れないと思いますが、使っていくうちに身に付くと思います。
ここでは便利なツールのひとつであるgitを使用するための下準備をしていきます。まずは、このページを見ながらwslをインストールしてみましょう！
個人的にあながち間違いでもないと思っています。
シェルの使い方
では、キーボードのwindowsキーを押して、「wsl」と入力してみてください。なにやら黒っぽい画面が立ち上がりましたね。ここからはコマンドというものを使って操作をしていきます。ここで使用するコマンドは「よく使うコマンド集」としてまとめていますので、参照するようにしてください。
操作の練習
これからコマンドの練習をしますが、今回はあえてprocessingで作成したコードがある場所で行います。
まず、そこへ移動するために、cdコマンドを使用します。
cd <移動したい場所>
移動ができたら、lsコマンドでコードがあるか確認しましょう。
ls
ありましたか？では次にディレクトリ(フォルダー)を作成してみましょう。
mkdir <ディレクトリの名前>
またlsコマンドで作成されたか確認できたら、cdコマンドでそこへ移動しましょう。次に新しいファイルを作成してみます。作成方法はいろいろな方法がありますが、ここではtouchコマンドを使用します。とりあえず、2つファイルを作ってください。
touch <ファイルの名前>
ではせっかく作成したファイルですが、rmコマンドを使って、1つ削除しましょう。
rm <ファイルの名前>
lsすると消えてしまったことを確認できるでしょう。このような操作ではゴミ箱のような機能は利用できないので、気をつけましょう。最後に今作成したファイルの名前をmvコマンドで変更してください。
mv <先ほどのファイルの名前> ignore_me.txt
next
皆さんはprocessingでコードを書いてきましたが、なにか変更があったけど取り消したい場合などがあったことでしょう。そんなときに便利なのが次に紹介するgitです。講座ページ
よく使うコマンド集
| コマンド | 説明 |
|---|---|
| cd | ディレクトリを移動する。 |
| ls | 現在のディレクトリにどのようなファイルやディレクトリがあるかを見る。 |
| mkdir | ディレクトリを作成する。 |
| touch | 空ファイルを作成 |
| rm | ファイルの削除などを行う。 |
| mv | ファイルの名前を変えたり場所を変えたりする。 |
| pwd | 現在自分のいるディレクトリを確認する。 |
| man | コマンド等の使い方を調べる。 |
これらはほんの一部にすぎません(ヌーコアユニッツmanは違います)。たくさんあって覚えられたいよ~と思うかもしれませんが、普段から使用していると身に付いていくのでどんどん使っていきましょう。(逆に抜けだせなくなるかも！？)
ちょっとできるようになったら、ぜひこのサイトでどこまでいけるかためしてみましょう！
cd
基本的な使い方
cd <ディレクトリの場所>
知ってると便利なもの
| コマンド | 説明 |
|---|---|
| cd .. | 一個前のディレクトリに移動 |
| cd - | 前回cdコマンドを実行したディレクトリに移動。 |
| cd / | ルートディレクトリに移動 |
| cd ~ | ホームディレクトリに移動 |
ls
基本的な使い方
ls
プログラミング界隈ではフォルダはよくディレクトリ(directory)と呼ばれます。（呼ばれたり呼ばれなかったり）
使い方は簡単でlsと打つだけです。最初はアイコンや色はついていないと思いますがカスタマイズするのはとても楽しいのでぜひやってみて下さい。画像で使っているはexaです。
しかしlsだけでは見えないファイルがあります。（名前がピリオド.から始まってるもの）
そのディレクトリにあるすべてのファイルやディレクトリを見るには-aオプションを使います。
すると一気に表示されるファイルやディレクトリが増えました。
他にもオプションがあるので調べてみてください。
mkdir
基本的な使い方
mkdir <ファイルやディレクトリ>
-pを使うと、階層の深いディレクトリを一回で作ることができます。
mkdir -p hoge/foo/bar
touch
基本的な使い方
touch <ファイルの名前>
本来はファイルの最終アクセス時間を編集するために使用されます。
rm
基本的な使い方
rm [オプション] <ファイルやディレクトリ>
ディレクトリを消すときは-rオプションが必要ということを忘れないようにしましょう。
mv
基本的に下記のように使います。
mv [オプション] <どれを/なにを> <どこに/なにに>
apple.txtファイルがbanana.txtファイルに名前が変わっている事が確認できました。
名前と場所を両方変えることもでき、banana.txtがttディレクトリの中にapple.txtとして保存されています。
pwd
基本的な使い方
pwd
man
基本的な使い方
man <調べたいコマンド名など>
英語ですが、検索する手間を省けるので、慣れていきましょう。そのコマンドにどんなオプション等があるのかが一覧できるので、様々な操作を早く覚えることができると思います。
man自体についても調べることができます。
webサイトを作ってみよう!
概要
ここでは静的なウェブサイトを作ってみます。
静的・動的（static・dynamic）
ウェブサイトは主に静的(static)なサイトと動的(dynamic)なサイトに分かれています。 これらの違いを見ていきましょう。
静的 static
静的なサイトというのはあらかじめ用意されているHTMLなどのファイルを提供します。 つまり、どのユーザーがそのサイトを閲覧しても内容は変わりません。 例えば学校のホームページなどが挙げられます。
動的 dynamic
静的なサイトはどのユーザーが閲覧しても内容は変わりませんでした。 それに対し動的なサイトというのはユーザーのリクエストや、操作によって内容が変わるサイトの事です。 例えばGoogle Driveなどが挙げられます。
早速作っていこう！
今回作成するのは静的なサイトです。
環境構築
最初にこれからのサイトを作るうえで必要なアプリケーションをインストールしましょう。 今回、開発に用いるアプリケーションは1つだけです。
vscode
インストールするアプリはvscodeです。下記のリンクから自分の環境に合う物を選んでダウンロードしましょう。（自分のお気に入りのエディタがあるよという人はそれを使っても構いません。しかしこれからの講座はすべてvscode前提でプラグインなども使っていきます。）
- vscode（正式名称 Visual Studio Code）
これがvscodeです。（まっさらなvscodeを使うために画像ではinsiderバージョンを使っています。アイコンの色とかが違うと思いますが気にしなくていいです。）
プラグインのインストール
先にこの講座で使うvscodeのプラグインをインストールします。 左側のところから四角が四つあるところを押すとプログインを検索できます。
- live server
これは作成したhtmlファイルを参照して自動でローカルサーバーを立ち上げブラウザから見れるようにしてくれます。検索したときの画像
これで必要な環境構築は終了です。
ファイルを作る
まず最初に作業を行うフォルダをvscodeで開く必要があります。 左上のFileからOpen Folderを選択します。
そして自分の開きたいフォルダーを選択します。画像
フォルダーを開くと左上に開いたフォルダの名前が表示されていると思います。
そのフォルダーの名前の右側ににファイルとフォルダーなどのアイコンがあります。 これらをクリックすることでファイルやフォルダーの作成が行えます。
htmlファイルの作成
htmlはウェブページを作成するためのマークアップ言語です。(厳密にはプログラミング言語ではない。) htmlはタグで要素を定義します。 どのタグを使うかでウェブサイトにどの要素が表示されるのかが変わります。
<> 開始タグ
</> 終了タグ
<p>段落</p>
<h1>見出し</h1>
<img src="xxx" alt="画像" />
ウェブサイトの実際に見える部分というのは<body></body>タグの中に書かれます。
step 1
htmlファイルを作成します。
step2
では実際にhtmlファイルを書いていきましょう。
htmlファイル上で!を入力します。画像
画像の状態でEnterを押すとvscodeがひな形を書いてくれます。画像
ひな形で作成されるコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
ではbodyタグの中に書いていきましょう。
以下のコードをbodyタグのなかにコピペしましょう。
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<button>this is button</button>
Ctrl + sでファイルを保存します。
そうするとファイル名が表示されているところの白い点が消えます。画像
step 3
結果をブラウザで確認しましょう。
ここで追加したプラグインを使用します。
vscodeの左下にあるGo Liveをクリックします。
するとブラウザが立ち上がりウェブサイトが表示されます。🎉
cssファイルの作成
cssはウェブサイトの外観やスタイルを変更するためのスタイルシートです。 html要素の定義でしたがcssはそれを装飾します。
step 1
htmlの時と同じようにcssファイルを作成します。
ファイル名はstyle.cssです。
step 2
では実際にcssを書いていきます。
最初は以下のコードをstyle.cssにコピペしてください。
後ほど書き足します。
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(#e66465, #9198e5);
width: 100%;
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
}
cssを読み込む
ここからは実際にcssを適用させていきます。
ここから編集するファイルはhtmlファイルです
htmlファイルのheadタグの中でlinkと打つと補完が表示されます。
そこでlink:cssを選択しenterを押します。
そうすると<link rel="stylesheet" href="style.css">このように補完されます。
このhref="<hogehoge>"のところではcssファイル名を入れます。
（このままでも動くのですが）
試しに""の中(style.css)を消して./と打ってみましょう。
そうすると現在のフォルダにあるファイルの候補を表示してくれます。
そこでstyle.cssを指定します。
bodyタグのなかも編集します。
<div class="main">
<h1>Hello World</h1>
</div>
最終的なhtmlファイルのコードを示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main">
<h1>Hello World</h1>
</div>
</body>
</html>
これでcssの読み込みは終了です。
cssの編集
.をつけることでhtmlのclassを指定することができます。
.main {
color: blue;
font-style: italic;
}
このようにするとサイトのほうではHello Worldの色が変わり斜体になっているのがわかると思います。
cssのプロパティはたくさんあるので調べながらコツコツ覚えていきましょう。