SlideShare a Scribd company logo
0
© KAZUKI SAITO
アプリを開発
⼤学で学んだプログラミングで
⾃分⾃⾝でものづくり
自己紹介
齋藤 ⼀輝 / さいとう かずき
渋幕 中学・⾼校はテニス部
慶應
MAKEY
ADK
コンピュータの学科を卒業
コンピュータの基礎から
プログラミングまで学ぶ
広告のお仕事
今はプログラミングはしてない
1
© KAZUKI SAITO
Day 1
プログラミングってなに?
2
© KAZUKI SAITO
プログラミングの「地図」と「遊び方」を伝授! プログラミングのやり方を教える
授業の目的
プログラミングってなに?
Instagramだって作れる
遊びながら身につけよう
1
2
3
プログラミングの全体像と
何ができるものなのかを知ろう!
Webプログラミングの全体像をつかもう!
どうスキルアップしていくのがいいか
イメージしよう!
テーマ ゴール
3
© KAZUKI SAITO
プログラミングの「無限の可能性」を伝えたい
授業の内容
プログラミングってなに?
Instagramだって作れる
遊びながら身につけよう
1
2
3
• プログラミングってなに?
• プログラマーっぽいことしてみる
• プログラミングの勉強法
• Webページってなに?
• Webプログラミングの全体像
• htmlとは
• CSS, javascript, PHP, SQLとは
• 全部を駆使するとinstagramが作れる
• ブログを公開してみる
• ブログを自分好みにカスタマイズしてみる
• 気になったところの学び方/つまづいたときどうするか
• その先の可能性
テーマ 内容
ブログ
作成
Webプログラミング
プログラミング
1
2
3
4
© KAZUKI SAITO
パソコン・アプリ関係のこと、どれくらい知ってる?
本題に入る前に…
Word / Excel
メール
facebook LINE
TikTok
Twitter
YouTube Amazon
Mac
メモ帳
Windows
フォルダ /
ファイル
Webサービス ツール
Google
検索 / 地図
Instagram 画像加工アプリ
オンライン
ゲーム
ZOOM
ガラケー
Uber Eats
Netflix /
Abema TV
一太郎 iMovie
5
© KAZUKI SAITO
プログラミングってなに?
6
© KAZUKI SAITO
プログラムが機械を動かす。 プログラムを作る = プログラミング
機械とプログラムの関係
プログラムが機械を動かす 脳が人体を動かすのと同じ
プ
ロ
グ
ラ
ム 脳
7
© KAZUKI SAITO
身の回りは、プログラミングであふれている
プログラミングの重要性
プ
ロ
グ
ラ
ム
エアコン
プ
ロ
グ
ラ
ム
クルマ
信号機
プ
ロ
グ
ラ
ム
スマホ
プ
ロ
グ
ラ
ム
8
© KAZUKI SAITO
プログラミングの重要性は、今後もっと増す
将来のプログラミング
5G
量子
コンピュータ
ブロック
チェーン
人工知能
ロボット
仮想通貨
クラウド
VR
IoT
インターネット
次世代の技術は全てプログラムで動く
9
© KAZUKI SAITO
機械が理解できるのは 0 か 1 だけであり、プログラムの実体は01の羅列
プログラムの実体
プログラムの実体
10
© KAZUKI SAITO
01の羅列を、人間の言葉に翻訳したもの
プログラミング言語とは
if ( x > 0 ) then
shutdown
else
restart
01101010010010
10101010100010
00100101010101
0101001000010
機械語(01の羅列)
プログラミング言語
翻訳
人間が理解できる言葉 人間が理解できない言葉
11
© KAZUKI SAITO
より使い易い言葉を求めて、たくさんの人が言語を考案した
それぞれにメリット/デメリットがあるので、目的によって使い分ける
プログラミング言語の種類
プログラミング言語の種類
12
© KAZUKI SAITO
目的によって、よく使われるプログラミング言語は異なる
プログラムをチラ見せ
Swift(アプリ開発用)
PHP(Web開発用)
(差異の一例)PHPは行末に「;」をつけるが、Swiftは不要
13
© KAZUKI SAITO
ちょっと一息…
プログラマーぽいことしてみよう
14
© KAZUKI SAITO
ターミナルでフォルダを作成&名前の変更をしてみよう
Finder v.s. ターミナル
ターミナル
Finder
15
© KAZUKI SAITO
プログラムを書く専用のアプリ(エディタ)をインストールしよう
Atomの準備
Atom
「メモ帳」や「テキストエディット」のような
メモ作成アプリでも構わないが
こういった専用アプリの方が断然書きやすい
16
© KAZUKI SAITO
Hello Worldと表示するプログラムを書いてみよう(Ruby言語)
初めてのプログラミング (1/2)
hello.rb
Atomで図の通り入力し
「hello.rb」という名前をつけて保存
→ ターミナルにて「ruby hello.rb」
17
© KAZUKI SAITO
文字数を計算して表示するプログラムを書こう
初めてのプログラミング (2/2)
count.rb
Atomで図の通り入力し
「count.rb」という名前をつけて保存
→ ターミナルにて「ruby count.rb」
18
© KAZUKI SAITO
• 「ターミナル」は、コンピュータに言葉で命令を伝えられる画面
• コンピュータは、人の言葉は理解できない
• ターミナルは、人の言葉を0101に変換してコンピュータに伝える
• ターミナルへの入力は、「コマンド」と「引数」に分かれる
• 動詞と目的語みたいな感じ(例:動かせ 箱を)
• 「コマンド」はすぐに0101に変換される(実際に見てみよう!)
• rubyというコマンドは、ruby言語で書かれたファイルを0101に変換してくれる
• つまり、「ruby hello.rb」はすぐに「0101」に変換されてコンピュータに伝わった結果、
「hello world」と出力された
なぜhello worldと表示されたのか
hello.rb
ターミナルでの実行結果
コマンド
引数
19
© KAZUKI SAITO
プログラミングの勉強法
20
© KAZUKI SAITO
作りたいものを作れるように頑張る。その繰り返しが一番の勉強になる
勉強ではなく、挑戦
自分のWebページを
作ってみる
スマホアプリを
作ってみる
人工知能を作ってみる
自分なりの挑戦の繰り返しで
いつものまにかできるようになる
この授業では、Webでどんなことができるかを伝えることで、
どんなWebページを作りたいかを発想する手助けをしたい
21
© KAZUKI SAITO
Webページってなに?
22
© KAZUKI SAITO
Webページとは、ただの文字ファイルである
Webページの実体
Webページの実体
23
© KAZUKI SAITO
まずはWebページが文字ファイルにすぎないことを実感しよう
実践!Webページを作ってみる
ファイルを送るので
自由に書き換えてみよう
そしてブラウザで開いてみよう
24
© KAZUKI SAITO
「Webページを見る」=「遠くのパソコンからファイルを取ってくる」
実験!齋藤のPC内にあるファイルを遠隔で閲覧する
齋藤のPC
あなたのPC
saito.html
SafariでURL入力
126.40.34.191/saito.html
Webページとして
見れる!
25
© KAZUKI SAITO
実験で使った数字はIPアドレスと呼ばれ、電話番号のように通信できる
遠くのパソコンと通信する方法
電話番号
IPアドレス
080-1234-5678
http://172.217.175.78/
3ケタ 4ケタ 4ケタ
3ケタ未満. 3ケタ未満. 3ケタ未満. 3ケタ未満
26
© KAZUKI SAITO
IPアドレスのままだと人間が覚えづらいので、文字に変換したのがURL
IPアドレスとURLの関係
URL
IPアドレス
http://google.com/
http://172.217.175.78/
人間が覚えやすい
3ケタ未満. 3ケタ未満. 3ケタ未満. 3ケタ未満
実験!GoogleにIPアドレスでアクセスしてみよう!
27
© KAZUKI SAITO
世界のどこかにあるが、どこにあるかは分からない。形もちょっと違う
google.comのファイルが置いてあるパソコンはどこにあるか
Google.com
家
index.html
Safariで
URL入力
Webページとして
見れる!
Googleのパソコンは実際はこういう感じ
28
© KAZUKI SAITO
パソコンのこと。特にWebページのファイルを置いてあるパソコンのこと
おまけ:サーバーとは
Google.com
家
index.html
Safariで
URL入力
Webページとして
見れる!
Googleのパソコンは実際はこういう感じ
「サーバー」
と呼ばれる
29
© KAZUKI SAITO
Webページを置くためのパソコンを貸してくれるサービスのこと
おまけ:レンタルサーバーとは
Google.com
家
index.html
Safariで
URL入力
Webページとして
見れる!
Googleのパソコンは実際はこういう感じ
この「サーバー」を
貸してくれる人がいる
30
© KAZUKI SAITO
好きなように付けられるが早い者順。試しにひとつ取得してみよう
URLはどうやって決まる?
余ってるURLを調べられるサイト
31
© KAZUKI SAITO
まとめ
初めてプログラムを書いてみた
まずは身近なWebページを作れるようになるために、
Webページとはそもそも何なのか、学んだ
Webページの作り方
Webページにプログラミングがどう使われるか
次回は…
32
© KAZUKI SAITO
Day 2
Instagramだって作れる
33
© KAZUKI SAITO
プログラミングの「無限の可能性」を伝えたい
今日の内容
プログラミングってなに?
Instagramだって作れる
遊びながら身につけよう
1
2
3
• プログラミングってなに?
• プログラマーっぽいことしてみる
• プログラミングの勉強法
• Webページってなに?
• Webプログラミングの全体像
• htmlとは
• CSS, javascript, PHP, SQLとは
• 全部を駆使するとinstagramが作れる
• ブログを公開してみる
• ブログを自分好みにカスタマイズしてみる
• 気になったところの学び方/つまづいたときどうするか
• その先の可能性
テーマ 内容
ブログ
作成
Webプログラミング
プログラミング
1
2
3
(ゴール)Webプログラミングの全体像を掴む
34
© KAZUKI SAITO
前回の振り返り
35
© KAZUKI SAITO
機械を動かす プログラム を作る = プログラミング
プログラミングってなに?
プログラムが機械を動かす
プ
ロ
グ
ラ
ム 脳
脳が人体を動かすのと同じ
if ( x > 0 ) then
shutdown
else
restart
01101010010
01010101010
10001000100
10101010101
01001000010
機械語
プログラミング言語
翻訳
=
復習
プログラミング言語の種類
様々な種類
36
© KAZUKI SAITO
作りたいものを作れるように頑張る。その繰り返しが一番の勉強になる
プログラミングの勉強法
自分のWebページを
作ってみる
スマホアプリを
作ってみる
人工知能を作ってみる
(あくまで一例)
この授業のゴール 授業で扱うか悩み中…
LV. 1
LV. 2
LV. 3
復習
37
© KAZUKI SAITO
「Webページを見る」=「遠くのPCからファイルを取ってくる」
Webページってなに?
齋藤PC
あなたのPC
saito.html
SafariでURL入力
126.40.34.191/saito.html
Webページとして
見れる!
Webページとは、ただの文字ファイル
復習
38
© KAZUKI SAITO
遠くのPCと通信するために必要なIPアドレスを、分かりやすくしたもの
URLってなに?
電話番号 IPアドレス
080-1234-5678 http://172.217.175.78/
3ケタ 4ケタ 4ケタ 3ケタ未満. 3ケタ未満. 3ケタ未満. 3ケタ未満
携帯電話同士のやりとり PC同士のやりとり
人間が覚えやすく
するために…
URL
http://google.com/
復習
…ちなみに早いもの順!!
39
© KAZUKI SAITO
Webプログラミングの全体像
40
© KAZUKI SAITO
様々プログラミング言語があるなか、今回はWEBプログラミングに着目
今回の焦点
プログラミング言語の種類
他より簡単で
とりかかりやすい
41
© KAZUKI SAITO
Webページは5つの要素でできている
Webプログラミングの全体像
PHP, Ruby等
MySQL等
CSS
javascript
HTML
ログイン機能の無いWebページ ログイン機能のあるWebページ
Webページの5つの構成要素
データを溜めておく
(データベース)
ページの情報を組み替える
(プログラミング)
デザインに動きをつける
(プログラミング)
デザイン
土台
高度
単純
42
© KAZUKI SAITO
実践!
HTMLとは
PHP, Ruby等
MySQL等
CSS
javascript
HTML
43
© KAZUKI SAITO
Webページの土台となる、基本の型。そういうルール。
HTMLとは
(参考)手紙の書き方 Webページの書き方
<!DOCTYPE html>
<html>
<head>
ここに、いろいろ必要な情報を書く
</head>
<body>
ここに、ページの本文を書く
</body>
</html>
実践!cocoe.workのhtmlを確認してみよう
44
© KAZUKI SAITO
前回のtest.htmlを使って、いくつか試してみよう
実践!htmlの基本
<!DOCTYPE html>
<html>
<head>
ここに、いろいろ必要な情報を書く
①タイトル
</head>
<body>
ここに、ページの本文を書く
②改行
</body>
</html>
45
© KAZUKI SAITO
実践!カッコよくする方法
CSSとは
PHP, Ruby等
MySQL等
CSS
javascript
HTML
46
© KAZUKI SAITO
STEP 1 直接書く
STEP 2 クラスで分かりやすくする
STEP 3 階層構造
STEP 4 クラスの詳細は別ファイルにできる
実践!CSS
まず、やってみせます。
その後、ファイルを送るので
自由に書き換えてみよう
そしてブラウザで開いてみよう
47
© KAZUKI SAITO
実践!もっとカッコよくする方法
javascriptとは
PHP, Ruby等
MySQL等
CSS
javascript
HTML
48
© KAZUKI SAITO
難易度が高いので「そういうものもあるんだな」くらいの理解でいいです
実践!javascript
ファイルを少し書き換えてみよう
そしてブラウザで開いてみよう
49
© KAZUKI SAITO
よくあるWebページの構成
基本の3点セット
CSS
javascript
HTML
50
© KAZUKI SAITO
• よくあるWebページのフォルダ/ファイル構成
• index.html ←html
• css(フォルダ) ←css
• style.css
• images (フォルダ)
• aaa.jpg
• bbb.jpg
• ccc.png
• javascript (フォルダ) ←javascript
• ddd.js
よくあるWebページの構造
CSS
javascript
HTML
これまで学んだhtml、css、javascript、そして画像をそれぞれフォルダに
分けて構成されることが多い
51
© KAZUKI SAITO
ここからが本番!
Webプログラミング:PHPとは
PHP, Ruby等
MySQL等
CSS
javascript
HTML
52
© KAZUKI SAITO
例えば、同じURLを少しだけ変えて違うページを見せる
※これ以外にも、様々なことができる
見るだけ!PHPとは
http://126.40.34.191/PART2/program.php?name=coco
http://126.40.34.191/PART2/program.php?name=kazuki
53
© KAZUKI SAITO
データベース:MySQLとは
PHP, Ruby等
MySQL等
CSS
javascript
HTML
54
© KAZUKI SAITO
果物のデータベースを作ってみる
見るだけ!MySQL(データベース)とは
例)果物のデータベース
55
© KAZUKI SAITO
すべてを組み合わせると…
Instagramだって作れる
PHP, Ruby等
MySQL等
CSS
javascript
HTML
56
© KAZUKI SAITO
Html, css, javascript, php, mysqlを組み合わせることで、ユーザーが投稿
した情報を、ユーザーごとに出し分けることができる
見るだけ!すべてを組み合わせてみた例
例)お小遣いを記録するWebサイト
57
© KAZUKI SAITO
おまけ
Web制作で登場する人物紹介
58
© KAZUKI SAITO
登場人物
PHP, Ruby等
MySQL等
CSS
javascript
HTML
CSS
HTML
登場人物 担当領域
デザイナー
フロントエンド
エンジニア
バックエンド
エンジニア
Webサイトは、3つの職種の方が共同作業して作られることが多い
59
© KAZUKI SAITO
まとめ
Webページは5つの構成要素(html, css, javascript, php, mysql)
でできていることを学んだ
特に html, css, javascript の3つについて、
サンプルプログラムを自分で書き換えてみて、ちゃんと動くことを確かめた
自分のブログを作成&カスタマイズしてみる
プログラミングのレベルアップ方法を知る
次回は…
60
© KAZUKI SAITO
Day 3
プログラミングの遊び方
61
© KAZUKI SAITO
プログラミングの「無限の可能性」を伝えたい
今日が最終回
プログラミングってなに?
Instagramだって作れる
遊びながら身につけよう
1
2
3
• プログラミングってなに?
• プログラマーっぽいことしてみる
• プログラミングの勉強法
• Webページってなに?
• Webプログラミングの全体像
• htmlとは
• CSS, javascript, PHP, SQLとは
• 全部を駆使するとinstagramが作れる
• ブログを作成し自分好みにカスタマイズしてみる
• 気になったところの学び方/つまづいたときどうするか
• その先の可能性
テーマ 内容
ブログ
作成
Webプログラミング
プログラミング
1
2
3
(ゴール)今後の遊び方がイメージできている
62
© KAZUKI SAITO
これまでのおさらい
63
© KAZUKI SAITO
機械を動かす プログラム を作る = プログラミング
プログラミングってなに?
プログラムが機械を動かす
プ
ロ
グ
ラ
ム 脳
脳が人体を動かすのと同じ
if ( x > 0 ) then
shutdown
else
restart
01101010010
01010101010
10001000100
10101010101
01001000010
機械語
プログラミング言語
翻訳
=
復習
プログラミング言語の種類
様々な種類
64
© KAZUKI SAITO
Webページは5つの要素でできている
Webプログラミングの全体像
PHP, Ruby等
MySQL等
CSS
javascript
HTML
ログイン機能の無いWebページ ログイン機能のあるWebページ
Webページの5つの構成要素
データを溜めておく
ページの情報を組み替える
デザインに動きをつける
デザイン
土台
高度
単純
復習
65
© KAZUKI SAITO
Html, css, javascriptを、実際に触ってみた
実践
復習 htmlの書き方
<!DOCTYPE html>
<html>
<head>
ここに、いろいろ必要な情報を書く
</head>
<body>
ここに、ページの本文を書く
</body>
</html>
CSSの書き方
表示結果(例)
66
© KAZUKI SAITO
Webプログラミングの遊び方
67
© KAZUKI SAITO
作りたいものを作ってみる。その遊びの繰り返しが一番の勉強になる
勉強ではなく、挑戦
自分のWebページを
作ってみる
スマホアプリを
作ってみる
人工知能を作ってみる
自分なりの挑戦の繰り返しで
いつものまにかできるようになる
復習
68
© KAZUKI SAITO
html, css, javascript, php, mysql だけで、Webページなら何でも作れる
自分のWebページ、つくってみたいものはある?
Google のような 検索サービス
TikTok のような SNS
学校紹介のような ホームページ 雑誌のような 情報メディア
Google.com
Tiktok.com
Rikkyojogakuin.ac.jp Mery.jp
69
© KAZUKI SAITO
あくまで一案。むかし流行っていた「instagramの長い文章版」
例えば、自分の「ブログ」を作ってみる
例:Chikirinの日記
70
© KAZUKI SAITO
html, css, javascript, php, mysql すべての要素を満遍なく学べる
ブログの良さ
Webページの種類 難易度
TikTok, instagram
のようなSNS
ブログ
1ページだけの
シンプルなWebページ
PHP, MySQLを使い
大人数のユーザーを想定
難易度が高い
PHP, MySQLを使うが
基本的にはユーザー1人想定
中程度の難易度
PHP, MySQLを使わないため
簡単
71
© KAZUKI SAITO
ブログで遊びながらレベルアップし、次に作りたいモノを作る
提案
今日、
ブログの遊び方を知る
授業後、
自分なりに遊びながら、
徐々にレベルアップ
作りたいモノを
作ってみる
1 2 3
今日と、授業後のステップ
授業はココまで
授業後は自習(ひとり遊び)
Google のような 検索サービス
TikTok のような SNS
学校紹介のような ホームページ
雑誌のような 情報メディア
72
© KAZUKI SAITO
ブログを作ってみよう!
73
© KAZUKI SAITO
Instagramのマイページだけが切り出されたWebページ、というイメージ
ブログとは
ブログの基本機能
画像や動画を含んだ文章(=記事)を投稿することができる
過去の投稿を一覧・検索することができる
読んだ人から、コメントを受け付けることができる
74
© KAZUKI SAITO
ゼロから作るのは大変なので、すでに作られたモノを借りてカスタマイズ
ブログの作り方
Wordpressという「ブログの土台」がある
様々な形のブログや
ホームページの
土台を使わせてくれる
75
© KAZUKI SAITO
●●● の場所に、wordpressを用意しておきました
Let s Go!
あなたのPC SafariでURL入力
http:// ●●●
Wordpressを用意済
レンタルサーバー
①まずは、http://●●● にアクセスしてみよう (世界から見える所)
②次に、http:// ●●● /wp-admin/ にアクセスしてみよう (管理画面)
- ユーザ名: ●●●
- パスワード: ●●●
やってみよう!
76
© KAZUKI SAITO
Wordpress開発者からのお知らせが表示されたりする
管理画面の解説:ダッシュボード
最初のうちは使わないので、無視
77
© KAZUKI SAITO
記事を編集/投稿したり、記事に付与するタグ/カテゴリを編集できる
管理画面の解説:投稿
TikTok, instagramの投稿作成画面みたいなもの
78
© KAZUKI SAITO
記事に含めたい画像や動画を編集できる
管理画面の解説:メディア
TikTokやinstagramでは「①画像や動画」と「②文章」はまとめて投稿するが、
ブログ(html)では「①画像や動画」をまず保存しておいて、「②文章」の中で
「リンクする」というやり方をとるため、
「①画像や動画」の編集画面は「②投稿」の画面と分かれている。
79
© KAZUKI SAITO
記事の投稿とは別の、特設ページを設けたい場合に使う機能
管理画面の解説:固定ページ
イメージしづらいと思うので、参考ブログを見ながら解説する
80
© KAZUKI SAITO
ブログの投稿に他人からもらったコメントを承認したり削除したりできる
管理画面の解説:コメント
Instagramのコメント機能に近い
81
© KAZUKI SAITO
ブログのデザインを変更できる
管理画面の解説:外観
今日のメインテーマはこれ。
82
© KAZUKI SAITO
他の人が作った便利機能を追加できる
管理画面の解説:プラグイン
ポケモンの「わざマシン」みたいなモノ
83
© KAZUKI SAITO
ひとつのブログを複数人で更新していく場合に使う
管理画面の解説:ユーザー
最初のうちは使わないので、無視
84
© KAZUKI SAITO
別のブログのデータを持ってくる場合などに使う
管理画面の解説:ツール
最初のうちは使わないので、無視
85
© KAZUKI SAITO
その他の様々な設定をする場所
管理画面の解説:設定
まずはブログ名を設定してみよう
86
© KAZUKI SAITO
やってみよう(基礎編)
1) ブログ名を変更する
2) テスト的に記事を5つほど投稿してみる
1) 文章だけ(ビジュアルモード)
2) 文章だけ(テキストモード)
3) 画像つき(ビジュアルモード)
4) 画像つき(テキストモード)
5) Youtube動画つき
6) カテゴリとタグをつけてみる
3) カテゴリ名を編集してみよう
4) テーマを変えてみよう
5) カスタマイズ機能を使ってみよう
6) ウィジェット機能を使ってみよう
7) 1度スマホで見てみよう
87
© KAZUKI SAITO
Html, css, javascript, php, mysqlでできている
このブログの実体
レンタルサーバーの中のファイル一覧
PHPファイル(中にhtmlを含む)
裏側でmysqlと連携している
CSSファイル
このフォルダの中にjavascriptファイルがある
Wordpressの管理画面で
いじれる
88
© KAZUKI SAITO
やってみよう(ここからが本番)
1) テーマエディターのstyle.cssを少しだけいじってみよう
2) カスタマイズすべきCSS要素を知る方法(ブラウザの「検証」機能)
3) 更新するだけじゃダメ!キャッシュクリアのルーティーン
4) キャッシュとは
89
© KAZUKI SAITO
【原則】
Webページを見る
= このファイルを全て取ってくる
【課題】
毎回全部取ってくるのは大変
【「キャッシュ機能」が解決すること】
style.css等、頻繁には変わらないはずの
ファイルは、一度取得したら保存しておく
Webページの閲覧を高速化するために、データの一部を保存しておく機能
キャッシュとは
あなたのPC SafariでURL入力
http:// ●●●
レンタルサーバー
style.cssを変更しても、
閲覧者側には古いstyle.cssが残っている
90
© KAZUKI SAITO
「この部分のデザインを変えたい、どうすればよいだろうか?」でググる
これからの歩み方
挑戦の例
1) 「ある部分の文字に下線をつけたい」と思い立つ
2) 「CSS 下線」でググる
→「text-decoration: underline;」と書けばいいと知る
3) 変更したい部分の「CSSクラス名」を確認する
→ブラウザの「検証」機能
4) Wordpress管理画面のstyle.css編集画面の中で、
該当するCSSクラス名に関する記述を見つけ出し、
text-decorationについて追記
5) キャッシュをクリアしてうまくいくか試してみる
とはいえ、
まだhtml/cssの基礎も学びきれていない…
91
© KAZUKI SAITO
今後のスキルアップ方法
92
© KAZUKI SAITO
改めてhtmlやcss、javascript等について学びたくなったら…
ドットインストール
超オススメ!
3分動画でクイックに学習できる「ドットインストール」
93
© KAZUKI SAITO
無料版だけで、とても勉強になる
試しに3分で「#01 はじめてのCSSを書いてみよう」を今受けてみよう
まずは「はじめての●●●」
javascript
・html
・CSS
94
© KAZUKI SAITO
バグを見つけるのに、9割の時間がかかってしまう
プログラミングでつまづくポイント
考える時間
10%
バグを探す時間
90%
よくある時間の使い方
考える時間
80%
バグを探す時間
10%
先生に聴く時間
10%
オススメの時間の使い方
「なんで思うとおりにいかないんだろう?」
そう思ったら自分でバグを探そうとせず
速攻で先生に聴いてください!!!
95
© KAZUKI SAITO
まとめ
96
© KAZUKI SAITO
今日のまとめ
ブログでの遊び方を学んだ
今後興味が膨らんだ場合、どう学習を進めていけばいいか知った
気が向いた時に
遊びながら少しずつ
Webページづくりのスキルを高めていってほしい!
97
© KAZUKI SAITO
「Web制作って面白い!」
と思ってもらえてたら
嬉しいです
「なんかいろいろできそう!」というワクワク感は伝わっただろうか…?
3日間のふりかえり
プログラミングってなに? Instagramだって作れる 遊びながら身につけよう
1 2 3
Webでの遊び方
Webプログラミングの全体像
プログラミングの全体像
1
2
3
Webページを
作ってみる
スマホアプリを
作ってみる
人工知能を
作ってみる
1 2 3
ア
プ
リ
授業の目的
3つのテーマ
内容
これから
プログラミングの「地図」と「遊び方」を伝授! プログラミングのやり方を教える

More Related Content

What's hot

131207 NECTJ Workshop 2
131207 NECTJ Workshop 2131207 NECTJ Workshop 2
131207 NECTJ Workshop 2
NECTJ
 
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへアプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
Tomohiro Yamasaki
 

What's hot (20)

PWAのキホン~作り方から活用どころまで~
PWAのキホン~作り方から活用どころまで~PWAのキホン~作り方から活用どころまで~
PWAのキホン~作り方から活用どころまで~
 
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
 
リーンスタートアップとPWA
リーンスタートアップとPWAリーンスタートアップとPWA
リーンスタートアップとPWA
 
Hack言語に賭けたチームの話
Hack言語に賭けたチームの話Hack言語に賭けたチームの話
Hack言語に賭けたチームの話
 
Hack/HHVMの最新事情とメイン言語に採用した理由
Hack/HHVMの最新事情とメイン言語に採用した理由Hack/HHVMの最新事情とメイン言語に採用した理由
Hack/HHVMの最新事情とメイン言語に採用した理由
 
なぜ今PWAがきているのか 20190918
なぜ今PWAがきているのか 20190918なぜ今PWAがきているのか 20190918
なぜ今PWAがきているのか 20190918
 
Street academy
Street academyStreet academy
Street academy
 
How to develop a huge Single Page Application
How to develop a huge Single Page ApplicationHow to develop a huge Single Page Application
How to develop a huge Single Page Application
 
PHP7がリリースされたいま、 改めてHackについて考える。
PHP7がリリースされたいま、 改めてHackについて考える。PHP7がリリースされたいま、 改めてHackについて考える。
PHP7がリリースされたいま、 改めてHackについて考える。
 
KenmaLT
KenmaLTKenmaLT
KenmaLT
 
最短でエンジニアリングスキルを身につけるために必要な力
最短でエンジニアリングスキルを身につけるために必要な力最短でエンジニアリングスキルを身につけるために必要な力
最短でエンジニアリングスキルを身につけるために必要な力
 
Go言語のフレームワークRevelの紹介とサービスにおける活用事例
Go言語のフレームワークRevelの紹介とサービスにおける活用事例Go言語のフレームワークRevelの紹介とサービスにおける活用事例
Go言語のフレームワークRevelの紹介とサービスにおける活用事例
 
131207 NECTJ Workshop 2
131207 NECTJ Workshop 2131207 NECTJ Workshop 2
131207 NECTJ Workshop 2
 
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
 
第1回 CMS Fun Nagoya / a-blog cms 編
第1回 CMS Fun Nagoya / a-blog cms 編第1回 CMS Fun Nagoya / a-blog cms 編
第1回 CMS Fun Nagoya / a-blog cms 編
 
wankuma tokyo #27
wankuma tokyo #27wankuma tokyo #27
wankuma tokyo #27
 
F#で動かすraspberry pi+lego mindstorms
F#で動かすraspberry pi+lego mindstormsF#で動かすraspberry pi+lego mindstorms
F#で動かすraspberry pi+lego mindstorms
 
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへアプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
 
PWAのトレンド背景を考える
PWAのトレンド背景を考えるPWAのトレンド背景を考える
PWAのトレンド背景を考える
 
スマートフォンアプリエンジニアのための最新プロトタイピング講座
スマートフォンアプリエンジニアのための最新プロトタイピング講座スマートフォンアプリエンジニアのための最新プロトタイピング講座
スマートフォンアプリエンジニアのための最新プロトタイピング講座
 

Similar to プログラミングってなに?

11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料
Yuta Sayama
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
 

Similar to プログラミングってなに? (20)

初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座
 
11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料
 
20200817 プログラミングの基礎 その2
20200817 プログラミングの基礎 その220200817 プログラミングの基礎 その2
20200817 プログラミングの基礎 その2
 
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
 
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
 
ネットにつながれない君たちに贈る。ノンプログラミングでESP8266を15分でネットに繋げる方法@io tlt
ネットにつながれない君たちに贈る。ノンプログラミングでESP8266を15分でネットに繋げる方法@io tltネットにつながれない君たちに贈る。ノンプログラミングでESP8266を15分でネットに繋げる方法@io tlt
ネットにつながれない君たちに贈る。ノンプログラミングでESP8266を15分でネットに繋げる方法@io tlt
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
 
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
 
プログラミングが(好き|嫌い)な方のためのKlisLT
プログラミングが(好き|嫌い)な方のためのKlisLTプログラミングが(好き|嫌い)な方のためのKlisLT
プログラミングが(好き|嫌い)な方のためのKlisLT
 
20200803 プログラミングの基礎
20200803 プログラミングの基礎20200803 プログラミングの基礎
20200803 プログラミングの基礎
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
 
Serverless LT 20201202
Serverless LT 20201202Serverless LT 20201202
Serverless LT 20201202
 
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
 
UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
もっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Appsもっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Apps
 
ニフクラmobilebackend_セミナー_配布用.pdf
ニフクラmobilebackend_セミナー_配布用.pdfニフクラmobilebackend_セミナー_配布用.pdf
ニフクラmobilebackend_セミナー_配布用.pdf
 
Spath for enterprise
Spath for enterpriseSpath for enterprise
Spath for enterprise
 

Recently uploaded

Recently uploaded (8)

To obtain the status of Foreigners' Immigration Residence Operations Specifie...
To obtain the status of Foreigners' Immigration Residence Operations Specifie...To obtain the status of Foreigners' Immigration Residence Operations Specifie...
To obtain the status of Foreigners' Immigration Residence Operations Specifie...
 
デジタルコミュニケーション研究会立ち上げの趣旨と活動内容(2024年5月19日開催)
デジタルコミュニケーション研究会立ち上げの趣旨と活動内容(2024年5月19日開催)デジタルコミュニケーション研究会立ち上げの趣旨と活動内容(2024年5月19日開催)
デジタルコミュニケーション研究会立ち上げの趣旨と活動内容(2024年5月19日開催)
 
ゲーム理論 BASIC 演習108 -フリーライダー② -#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習108 -フリーライダー② -#ゲーム理論 #gametheory #数学ゲーム理論 BASIC 演習108 -フリーライダー② -#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習108 -フリーライダー② -#ゲーム理論 #gametheory #数学
 
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
 
modul belajar bagasa jepang pemula -N5.pdf
modul belajar bagasa jepang pemula -N5.pdfmodul belajar bagasa jepang pemula -N5.pdf
modul belajar bagasa jepang pemula -N5.pdf
 
〔第27回日本高等教育学会年会発表〕IRにおける教務概念のオントロジー化 − 情報科学からのアプローチ −
〔第27回日本高等教育学会年会発表〕IRにおける教務概念のオントロジー化 −	情報科学からのアプローチ −〔第27回日本高等教育学会年会発表〕IRにおける教務概念のオントロジー化 −	情報科学からのアプローチ −
〔第27回日本高等教育学会年会発表〕IRにおける教務概念のオントロジー化 − 情報科学からのアプローチ −
 
東京工業大学 大学院 6学院入試説明会資料 2024年度受験者向け
東京工業大学 大学院 6学院入試説明会資料 2024年度受験者向け東京工業大学 大学院 6学院入試説明会資料 2024年度受験者向け
東京工業大学 大学院 6学院入試説明会資料 2024年度受験者向け
 
2023年度卒業時成長実感調査 - 上智大学
2023年度卒業時成長実感調査 - 上智大学2023年度卒業時成長実感調査 - 上智大学
2023年度卒業時成長実感調査 - 上智大学
 

プログラミングってなに?