ヒッキーブログ@プログラミング

プログラミングを学ぼう!!

【初心者向け】プログラミングを学ぼう! HTML&CSS編2

こんにちは。引地啓です。

今回はHTMLとCSSについてのまとめの第2弾で、HTMLとCSSの書き方の基礎を簡単にまとめました。

前回軽く触れましたが、CSSは、HTMLで書いた文章に色を付けたり大きさを変えたりレイアウトを変更したりできる言語です。

Webサイトを作成する上で必要となるので、ぜひ習得してほしい言語です。

HTMLで文章を書き込み、CSSで文字のレイアウトを変更したりします。

まずはHTMLで文章を出力する

まずは、メモ帳かエディタでHTML文を書き込みます。

f:id:puroguramuhikkki:20190829231044p:plain

このように書くと

f:id:puroguramuhikkki:20190829231018p:plain



 

Webではこのように表示されます。それぞれのタグに<>をつけて、中に意味のある文字を入力することによってWeb上で表示される形が変わります。

それぞれの文を解説します。

<!DOCTYPE html>

!DOCTYPE html宣言と言われ、HTML5で作成されたものであることを宣言するために文の先頭に記述するものです。

<html lang="ja"></html>

langはlanguageの略で、<html lang="ja">とは、HTML要素内で使われる言語をja(Japanese)に、つまり日本語にするという意味です。

これを入力することで、ブラウザに使用したい言語を認識させます。

そして、最後に</html>と入れることで、他の要素を囲みます。この/は「ここまでがこの要素ですよ!」という意味になります。

<head></head>

headは日本語で頭です。「ヘッダー・フッター」のヘッダーと同じ感覚で、頭のタイトルなどを入れる所です。この中には「<title>タイトルを入れます</title>」と「<meta charset="UTF-8"/>」を入れてます。

<meta charset="UTF-8"/>

metaはメタタグと言い、Webページの情報を検索エンジンやブラウザなどに伝えるタグのことです。こちらはHTMLのhead内に書きます。

charset="UTF-8"/と書くことで、「文字コード」を決める事ができます。

文字コードとは、コンピューター上で「文字」を表現するために決められたコードセットです。例えば、コンピューター上で日本語の「あ」と入力したい場合、UFT-8では「E38181」、Shift-JISでは「82A0」、EUC-JPでは「A4A2」とコードが決まっています。

これは、HTMLファイルのテキストをどの文字コードで書いているかを明らかにするために指定しています。指定しないとWeb上で文字化けします。

<body></body>

bodyはからだで、実際の中身の部分です。ここに本文を書き込んでいきます。

この中に<h1><h2><h3><p>などの要素を入れていきます。

<h1><h2><h3><p>

h1~h3には「見出し」を記述するもので、数字が大きくなると反比例して実際の文字が小さくなっていきます。pには本文を記述します。

<img>で画像を貼り付けよう

<img>タグで、画像を入れることができます。imgタグには様々な属性を付けることができます。属性を参照できるサイトがあるので、時間があるときに見てみてください

https://html-coding.co.jp/annex/dictionary/html/img/

書き方はこのような形です。

f:id:puroguramuhikkki:20190829234655p:plain

「src="画像のファイル名.拡張子"」で、貼る画像を決め、「width=」で横幅、「height=」で縦幅を決めます。結果はこうなります。

f:id:puroguramuhikkki:20190829235000p:plain

画像の保存場所は、index.htmlと同じ場所に保存しておきましょう。

「<ul></ul>」や「<ol></ol>」と「<li></li>」で箇条書きにする

箇条書きにするためのタグもあります。ul要素は列挙型の箇条書き、ol要素は順序付きの箇条書きです。箇条書きにする部分をこの要素でマークアップし、項目をli要素で並べます。

f:id:puroguramuhikkki:20190830001007p:plain

f:id:puroguramuhikkki:20190830000933p:plain

このような形になります。

リンクを貼り付けよう

Webサイトで大事なのは、ページごとにリンクを貼ってあっちこっちにページを行き来できることです。リンクは「<p></p>」内に書き込みます。書き方は以下の通りです。

f:id:puroguramuhikkki:20190830001902p:plain

f:id:puroguramuhikkki:20190830002024p:plain

このような表示になります。クリックすると、そのリンクに飛べます。

文字を強調する

文字を強調するタグもあります。代表的なものはem要素strong要素、数式などで必要な上付文字(sup要素)と下付文字(sub要素)、定義語を示すdfn要素などがあります。

f:id:puroguramuhikkki:20190830003606p:plain

f:id:puroguramuhikkki:20190830003643p:plain

 

このような形になります。

「<div></div>」を使ってグループ化とデータ

HTMLで提供される要素タイプはシンプルなものなので、それ以外に独自のグループやデータ部分をマーク付けしたい場合があります。

段落のようなブロックレベル要素をグループ化する場合は、div要素を用います。

f:id:puroguramuhikkki:20190830005045p:plain

「div class="   "」というように書きます。こうすることで、単に個別の段落としてしか扱えなかったものを、まとめて一つのブロック要素として扱うことができるようになります。

この例の中では、<h2>の中の「Pythonについて」と<p>の中の文章が、それぞれ単体でなく、まとめて一つのグループとなります。

さらに「class」でdiv要素に名前を付けることができます。

CSSは別ファイルにソースコードを書くのですが、classで付けた名前をCSS内に持っていくことができ、CSS側でdiv要素内の文字のデザインやレイアウトを変えることができるようになります。このあたりは次回記事に書きます。

 

以上が簡単に基礎をまとめました。次回はCSSをまとめます。CSSが書けるようになると、いよいよ簡単なWebページが制作できるようになります。本当に簡単なものですが。

 

 

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。

【初心者向け】プログラミングを学ぼう!HTML&CSS編

こんにちは。引地啓です。

今回はWebの作成に欠かせないHTMLとCSSについてまとめました。

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。

普段、windowsであれば「Internet Exproler」や「Microsoft Edge」、Macスマホだと「Google Chrome」「FireFox」などのブラウザを起動して、Webサイトを見ますが、そのWebサイトのほとんどがHTMLで作れています。

Webサイトを開いた状態でキーボードの「F12」をクリックすると、以下のような画面が右側に表示されます。

f:id:puroguramuhikkki:20190829111427p:plain

真ん中の英文を「ソースコード」といい、ソースコードはHTMLで構成されています。

このソースコードをブラウザが読み込んでページが見れるようになっています。

Hyper Text(ハイパーテキスト

ハイパーテキストとは、高性能なテキストという意味です。

HTMLに、文章中にリンクを張って、他のページに飛ぶことができます。この機能をHyper Text Link(ハイパーテキストリンク)といいます。

HTMLの種類

HTMLの種類には「HTML」「HTML5」「XHTML」など、いくつかあります。

使えるタグに違いがあり、使いたいタグによって使う種類が違います。

HTMLファイルを作成する

HTMLのファイルを作成するときには、ファイル名の後ろに「.html」と拡張子を付けます。これを付けることで、HTMLファイルであることをコンピューターが認識してくれます。よく使う名前が「index.html」です。indexの部分は何でもいいです。適当に作ってみます。

①デスクトップにフォルダを新規作成

f:id:puroguramuhikkki:20190829130901p:plain

②フォルダ内でテキストを新規作成

f:id:puroguramuhikkki:20190829114413p:plain

③作成したファイルの名前を「index.txt」に変更します

f:id:puroguramuhikkki:20190829122702p:plain

④index.txtを開くとメモ帳が開きます。メモ帳にコードを書きます。
HTMLのソースコードは基本が決まっています。

f:id:puroguramuhikkki:20190829120231p:plain

⑤保存する際、下の文字コードを「UFT‐8」に変更して保存します。これをして文字化けを防ぎます。

f:id:puroguramuhikkki:20190829123659p:plain

⑥ファイルの拡張子を「html」に書き換えます。

f:id:puroguramuhikkki:20190829122903p:plain

⑦index.htmlを開くと、ブラウザが起動し、書いた内容が反映されていたらOKです。

f:id:puroguramuhikkki:20190829124112p:plain

このように、ブラウザ上で文字が表示されます。しかしこれはあくまでファイルをブラウザ上で表示させているだけで、Web上には公開されていません。Webで公開するにはこのファイルをサーバーにアップロードする必要があります。

公開する方法はのちに別記事にまとめます。

エディタを使う

上記に書いたのは、メモ帳にソースコードを書く方法ですが、ソースコードを書くための「エディタ」という便利なソフトがあります。

HTMLを書く上で大事なのがエディタ選びです。ソースコードを書きやすく、分かりやすくなっているソフトで、無料で使えるものばかりですので、これからプログラミングを始めようと思っている人は、エディタ選びにも少しこだわってみてはいかがでしょうか。

おすすめのエディタに関しては、また別の記事で紹介したいと思います。

CSSとは

次にCSSです。CSS(Cascading Styly Sheets カスケーディング・スタイル・シート)とは、Webページのスタイルを指定するための言語です。

HTMLと組み合わせて使用する言語で、Webページ内での文字の色、サイズ、レイアウトなどの表示スタイルうあ、印刷する際の出力スタイル、音声で読み上げられる際の再生スタイルなどを指定することが出来ます。

 

詳細はまた次回の記事で書きます。

 

 

 

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。

 

プログラミングを学ぼう!Javaの環境構築

こんにちは。引地啓です。

今回はJavaの環境構築方法についてまとめました。

Javaの環境構築(windows編)

まずはwindowsでの環境構築についてです。

windowsのビット数の確認

32bitと64bitでダウンロードするファイルが異なるので、まずはパソコンのビット数を確認しましょう。

①デスクトップの左下のwindowsマークをクリック

②左下の歯車マークをクリック

windows設定の「システム」を選択

④左メニューの下の「バージョン情報」をクリック

windowsのバージョン情報が表示されます。その中のデバイスの仕様内に、「システムの種類」に32か64と書いてあります。

Javaのインストール

Javaの環境開発であるJDKをダウンロードします。JDKのページにアクセスして、ダウンロードタブをクリック

https://www.oracle.com/technetwork/java/javase/downloads/index.html

Java-SE-Downloads-Oracle-Technology-Network-Oracle-620x349

Accept License Agrementにチェックを付け、該当するビット数のインストーラーをクリックします。

64bitの場合はx64を、32bitの場合はx86をクリックします。

Java-SE-Development-Kit-8-Downloads-620x399

JDKのインストール

java002

java003

↑の「インストール先」は、後でパスの設定に必要ですのでメモをしておきましょう。

インストールが完了したら、「閉じる」をクリック。

java001

環境変数の設定

次に、インストールしたJavaをりようするための環境変数を設定します。

windowsマークからwindowsシステムツールをクリックし、「コントロールパネル」を開きます。

ãwindows10 ã³ã³ãã­ã¼ã«ããã«ãã®ç»åæ¤ç´¢çµæ

②「システムとセキュリティー」をクリックし、「システム」をクリックします。

ãwindows10 ã³ã³ãã­ã¼ã«ããã«ãã·ã¹ãã ãã®ç»åæ¤ç´¢çµæ

ãwindows10 ã³ã³ãã­ã¼ã«ããã«ãã·ã¹ãã ãã®ç»åæ¤ç´¢çµæ

③「システムの環境設定」をクリック

ãwindows10 ã³ã³ãã­ã¼ã«ããã«ãã·ã¹ãã ãã®ç»åæ¤ç´¢çµæ

④「詳細設定」内の下の「環境変数(N)」をクリック

ãwindows10 ã·ã¹ãã ã®ç°å¢è¨­å®ãã®ç»åæ¤ç´¢çµæ

⑤「システムの環境変数(S)」内の「Path」を選択し、「編集(I)」をクリック

ãwindows10 ã·ã¹ãã ã®ç°å¢è¨­å®ãpathãã®ç»åæ¤ç´¢çµæ

⑥「新規(N)」をクリックし、インストールの時にメモした「インストール先」のパスに「\bin」を付け加えて入力し、OKをクリック

ãwindows10 ã·ã¹ãã ã®ç°å¢è¨­å®ãç°å¢å¤æ°åã®ç·¨éãã®ç»åæ¤ç´¢çµæ

環境変数の画面に戻るので、OKをクリック。システムのプロパティの画面もOKして設定を完了します。

⑧パス設定が正常に完了したかをチェックするため、コマンドプロンプトをクリックします。

ãwindows10 ã³ãã³ããã­ã³ãããã®ç»åæ¤ç´¢çµæ

コマンドプロンプトを開いたら「javac -version」と入力してEnterキーを押し、バージョン情報が表示されたらインストールは完了しています。

f:id:puroguramuhikkki:20190829003556p:plain

Eclipseのインストール

Javaの開発環境構築の最後はEclipse(エクリプス)という、統合開発環境IDE)をインストールします。

Eclipseのダウンロードページでダウンロード

https://www.eclipse.org/downloads/

f:id:puroguramuhikkki:20190829010953p:plain

②もう一度ダウンロードをクリック

f:id:puroguramuhikkki:20190829011151p:plain

Eclipse IDE for java Developersをクリックします。

f:id:puroguramuhikkki:20190829011742p:plain

後で日本語化する時に使うので、Installation Folder(インストールフォルダ)をメモしておき、INSTALLをクリック

f:id:puroguramuhikkki:20190829012053p:plain

Accept Nowをクリックします

f:id:puroguramuhikkki:20190829012356p:plain


⑥インストール後、LUNCHをクリックしてEclopseを起動します。

f:id:puroguramuhikkki:20190829084225p:plain

ワークスペースを指定します。特に指定がなければ、そのままlaunchをクリック

f:id:puroguramuhikkki:20190829084607p:plain

Eclipseが起動します。

f:id:puroguramuhikkki:20190829084903p:plain

英語のメニューになっていますので、次は日本語化してみましょう。一旦、Eclipseは終了します。

Eclipseのを日本語化する

今度はPleiadesのダウンロードページにアクセスし、「Pleiadesプラグイン・ダウンロード」の「windows」をクリックします。

f:id:puroguramuhikkki:20190829085957p:plain

⑨ダウンロードファイルを開くとWinZipの展開する画面が開けます。WinZipは試用版でも結構です。

開いたら真ん中下にある「アイテム選択」ですべてのアイテムを選択します。

f:id:puroguramuhikkki:20190829100928p:plain
⑩右上の「展開先」の横の「v」のマークをクリックし、任意の場所に保存します。

保存したファイル内の「setup.exe」をクリックして開きます。

f:id:puroguramuhikkki:20190829101509p:plain

⑫日本語化プラグインのセットアップの画面が開いたら、日本語化するアプリケーションの「選択」をクリック

f:id:puroguramuhikkki:20190829101409p:plain

⑬ファイル選択画面が表示されるので、「Eclipse Java」選択して「開く」をクリック

Pleiadesの画面に、選択したファイルが表示されたら「日本語化する」をクリックし、「終了する」をクリックします。

f:id:puroguramuhikkki:20190829102612p:plain

f:id:puroguramuhikkki:20190829102906p:plain

 

エクスプローラーを起動し、「eclipse.exe -clean」を開きますf:id:puroguramuhikkki:20190829103727p:plain

⑯ワークベースが開きますので、起動をクリックして中身が日本語になっているか確認します。

f:id:puroguramuhikkki:20190829104310p:plain

 

中身が日本語になっていたら、インストールは完了です。

 

以上、windowsJavaの環境を構築する方法を紹介しました。

意外とここでつまづく人が結構いると思います。

僕も昔、Javaの環境構築をしたのですが、しばらくして一度パソコンを初期化しないといけない状況になって、初期化した後に再度Javaの環境構築をしたら、ダウンロードサイトの中身が変わったりしていて少し手こずりました。

分からない所があったら、できれば自分で調べながらすることをおすすめしますが、どうしても分からないときは、誰かに聞くことをおすすめします。

 

インストール完了したら、プログラミングスタートです。

まだまだつまづくことがたくさんあります。どうせつまづくことは目に見えているので、気負いすぎずに覚えていきましょう。

 

 

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。

【初心者向け】プログラミングを学ぼう! Java編

こんにちは。引地啓です。

今回はプログラミング言語Javaについてまとめてみました。

Javaプログラミング言語の中でも非常に人気で、Javaは昔からある言語です。覚えたら就職に非常に有利になります。

Javaを習得するだけでも十分ですが、資格があるとより有利となり、収入アップも狙えますので、おすすめの資格についてもまとめました。

Javaについて

f:id:puroguramuhikkki:20190910014857p:plain

まずは、javaとは何なのかについて書こうと思います。

Javaは、C言語の構文を元に作られたプログラミング言語で、色んな環境できるため、使っている企業が多いです。今だとAndroidアプリとかにも使われてます。

C言語についてはまた後日記事でまとめます。)

習得したい言語の1位に選ばれるくらいに人気な言語です。なぜ人気かと言えば、「Javaは多くの企業で使われている」ことと「OSに依存しない」などの理由があります。OSに依存しないという点は大きいです。作ったソフトが動く環境が、1つでも多いのは、大変重要なことです。

 

iOSWindowsなのかでさえもとても重要な問題です。そんな中でも動くプラットフォームが数多くあるJavaは人気が高いと言えます。

また、Javaから派生した言語はたくさんあるため、Javaを覚えることでほかの言語にも応用が利くことがあります。

開発にはJDKJava Development Kit)を使用します。これはJavaの公式サイトから無料でダウンロードすることができます。ダウンロードは以下のURLからできます。

ダウンロードや環境構築は、また別の記事にまとめようと思います。

www.oracle.com

Javaで何ができるのか

JavaはOSに依存しないため、どんな環境でもソフトを動かせます。

Javaはサーバーサイドでも活躍しています。サーバーサイドとは「サーバー側で動くアプリケーション」のことで、Web上のアプリケーションなどが例としてだと挙げられます。そのような意味でもJavaはWebと相性が良く、どんなものにも搭載されているマルチな言語であると言えます。

Javaを学ぶメリット

プラットフォームに依存しない

OSに関係なく、WindowsiOSLinuxなどのOSで動作させることができます。

処理速度が速い

Javaは、軌道にコンパイルを必要とするコンパイラ言語であるため、RubyPHPPythonなどの言語よりも処理速度が速いです。

オブジェクト指向である

ウィキペディアより)オブジェクト指向とは、現実世界をモデル化する手法のひとつであり、データ(状態)とそれに関連する振る舞い(処理)をまとめてオブジェクト(物体)として扱う。との事です。

プログラムの管理を細かく行えるので、複数の人で同じものを開発するときは効率が上がります。

Javaのデメリット

プログラミング以外の作業が面倒

Javaはプログラムを実行するためにコンパイルという作業をするなどWebアプリケーションを起動する時間がかかります。

JavaEclipseという環境で使われることが多い言語ですが、事前準備や開発環境を整える作業が多くなります。

Javaの書き方について

Javaとはオブジェクト指向型のプログラミングをするという事を覚えておきましょう。Javaは世界的に有名な言語で、世界中に書ける人が多くいます。

クラス

Javaではクラスと呼ばれるデータと処理をひとつにまとめたものを部品のように組み立てて開発を行います。

このとき、データのことをフィールド(インスタント変数)処理(振る舞い)のことをメゾットと呼び、これらをまとめてクラスのメンバと呼びます。

C++では「メンバー変数」「メンバー関数」と呼ばれているものに相当します。

クラスでは設計図のようなものがあり、そのままでは使用できないためそれを元にオブジェクトという実際のデータを生成します。このことをインスタント化と呼びます。

Javaを実行するまでの流れ

Javaが実行されるまでの大まかな流れです。

  1. ソースプログラムの生成
  2. ソースプログラムをコンパイルしクラスファイルを作成する
  3. クラスファイルを実行する

1、ソースプログラム(拡張子).javaのファイルの作成

まずは文字列を出力するファイル”Test.java”があるとします。

これをソースプログラムといいます。

【Test.Java

_____________________________________________________________________

class Test{

    public static void main(String[ ] ards){

    System.out.println("aaabbbccc")

  }

}

______________________________________________________________________

2、ソースプログラムをコンパイルする:クラスファイル(拡張子.class)の作成

このファイルをJava仮想マシンで実行に変換します。これをコンパイルといいます。

コンパイルはターミナルでソースプログラムのある場所に移動し、以下のコマンドを入力することで実行されます。

_______________________________________

javac ソースプログラムのファイル名.java

_______________________________________

今回は”Test.java”とします。ここでは拡張子が無いとエラーとなります。

コンパイルが完了すると、.classという拡張子で同じ名前のファイルがソースプログラムと同ディレクト内に作成されます。これをクラスファイルといいます。

ソースプログラムのあるフォルダを見ると”Test.class”というファイルが新たに作成されていると思います。

3、クラスファイルの実行

最後にこのクラスファイルを実行します。以下のコマンドをターミナルで入力します。

______________________________________

java クラス名(ファイル名)

______________________________________

今回の場合はTestを入力します。※ここでは拡張子.javaは入力しません。

コンパイラに使用するjavac、クラスファイルの実行に必要なjavaコマンドはいずれもJDKをインストールすることができます。

javaの基本構文

javaなどプログラミングでよく使う構文についての紹介です。

if文

if文は、「もし〇〇したら~する」といった条件分岐を作るのに使用する構文です。

______________________________________

if(sample1 && sample2){

     //sample1とsample2がどちらもtrueだった場合の処理

    System.out.println("sample1とsample2はどちらもtrueです");

}

______________________________________

for文

for分は、繰り返し処理をする際に使用します。例えば1~100までの数字を1つずつ主導で足していくのは面倒ですが、for文を使えば一瞬で処理が完了します。

_______________________________________

for(i = 1; i < 10; i++ ){

    //行う処理の繰り返し

}

_______________________________________

「i」は、数値や文字を入れる変数と呼ばれる箱

「i = 1;」は、箱に1という数値までの間繰り返し処理を行う

「i < 10;」は、10未満までの間繰り返し処理を行う

「i++」は、繰り返し処理が終わったらiを1つずつ増やしていく

 

上記のような流れで、$iの数値が10未満まで繰り返し処理が行われるといった内容になります。

今はまだ、なにをやっているか分からないかもしれませんが、学習を進めていく中で理解できるポイントが来ます。是非自分でも書いてみましょう。

Javaのおすすめの資格

f:id:puroguramuhikkki:20190910015109p:plain

 


プログラミング言語においてもやはり資格が大事です。就職を有利にする、おすすめの資格を紹介します。

資格は、その人の能力を可視化したものです。人を雇っても使い物にならないと、企業にとっては痛手です。雇う側からしたら、目に見える能力があると雇いやすいと思います。是非参考にしてみてください。

1、Javaプログラミング能力認定試験

ビジネス能力認定のサーティファイ株式会社が運営している、日本国内の民間資格です。Java入門者を対象とした3級から始まり、簡単なプログラムが組めるレベルの2級まで筆記試験で実施されます。

そして1級では、提示された変更・追加点をプログラムに反映した上で変更仕様書を作成する、実技試験が実施されるという特徴があります。

試験公式サイト

https://www.sikaku.gr.jp/js/jv/

2、Android技術者認定試験

 直接的なJavaの資格ではありませんが、Android開発にはJavaが用いられるため間接的にJavaの資格となっています。

JavaAndroidアプリ開発をしてみたい人は、是非資格に挑戦してみてください。

ベーシックとプロフェッショナルという2つの試験レベルが予定されているようですが、プロフェッショナルの試験は準備中であり、まだ実施していないようです。

試験公式サイト

http://ace.it-casa.org/ace/about/

3、Orace認定Javaプログラマ(旧Sun認定Javaプログラマ) 

もともとは、Javaの開発元であったSun MicroSystems社が運営するベンダー試験「SCP‐P」でしたが、2010年に同社がOracle社に吸収合併され、「OCJ‐P」として実施されていました。

その後2012年、Java SE7のリリースを機に区分名称などが現行の試験体制に刷新され、ブロンズ、シルバー、ゴールドの3種類となりました。

試験公式サイト

https://www.oracle.com/jp/index.html

 

 

f:id:puroguramuhikkki:20190910015444p:plain

 

 

 

以上、Javaとはどんなプログラミング言語なのか、そしてJavaのおすすめの資格を紹介しました。

Webやスマホアプリなどのいろんな所で使う言語ですので、Javaをマスターすれば就職に有利になると思います。

またjavaを勉強しておくと、ほかのオブジェクト指向の言語を習得しやすくなるかと思いますので、ぜひとも習得したい言語です。

 そして資格も取って、より有利な状況を作り上げていきましょう。

 

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。

プログラミング学習 人工知能

 こんにちは。引地啓です。

今回は、プログラミングを勉強する中で必ず聞く「AI」「人工知能」という言葉をピックアップし、記事に書こうと思います。

人工知能

f:id:puroguramuhikkki:20190910014331p:plain

人工知能という言葉を聞いて、どんなものを思い浮かべますか?

一番分かりやすいのは「ドラえもん」だと思います。ドラえもんには機械だけど自我があり、自分で考えたりしゃべったり、ロボットだけど人間と同じように行動するものを思い浮かべると思います。

あと個人的にめっちゃ大好きなアニメ「STEINS;GATE」です。

牧瀬紅莉栖という、天才科学者と言われるヒロインの記憶データを転用した、アマデウスという人工知能があります。そのアニメでは記憶に意識が連動しているという前提なんですが、ヒロインの記憶をプログラムに埋め込むことで、ヒロインと同じ思考の人工知能、つまりコピーを作り上げています。

どちらもフィクションの世界ですが夢のある話ですね。

 

ちなみに人工知能は、ウィキペディアにはこう書かれています。

「計算」という概念と「コンピューター」という道具を用いて「知能」を研究する計算機科学の一分野を指す語

言語の理解や推論、問題解決などの知的行動を人間に代わってコンピューターに行わせる技術

計算機(コンピュータ)による知的な情報処理システムの設計や実現に関する研究分野

などと書かれています。

つまり人工知能とは、「膨大なデータを記憶のように蓄積することができ、脳と同じかそれ以上の速度でそのデータを計算し、さらに我々人間のように答えまで出すことができるコンピューター」ということです。

人工知能の歴史

 

f:id:puroguramuhikkki:20190910014459p:plain


人工知能の発展によって、2045年にシンギュラリティーと呼ばれる人工知能が人類を超えるという話も出ていますが、実際、現状どうなっているのか、気になっている人が多いと思います。

現状を知る前に、人工知能の歴史をおさらいします。

最初のブームは1950年代後半から1960年にかけての第一次ブームです。

その後、1980年代にも第二ブームが来ましたが、そのいずれも今ほどの盛り上がりは見せず、本来の人工知能の可能性が理解されない状況のままブームが去っていきました。

そして2010年頃から第三ブームを皮切りに今の人工知能ブームが続いており、今後さらに盛り上がっていくと予想されています。

この第三ブームが依然の2つの人工知能ブームと決定的な違っているのは、実際のテクノロジー人工知能を実用的に活用するに足りるレベルにまで進化してきたという背景があります。

要するに、多くの人が「これはすごいんじゃないか?」とリアルに感じられる程度に技術革新が起こったということです。

人工知能の進化を支えるディープラーニングという技術

人工知能を語る上で無視できない技術にディープラーニングというものがあります。

ディープラーニング無しに今の人工知能ブームは無かったと言えるくらい人工知能の進化を中枢から支えている重要な技術がディープラーニングです。

ディープラーニングとは、「コンピューターがデータを元に、まさに人間が頭で考えるようにその物事の特徴を抽出して判断できるというニュートラルネットワークというものを用いた学習」のことです。

要するに、人工知能が人間の脳と同じような判断ができるようになったのが、このディープラーニングという技術ができたからということです。

これが実現に至った背景には、ビックデータと呼ばれる大量のデータを保存、処理ができるようになったことが影響しています。

人工知能の現状は

第三ブームを迎えてからもうすぐ10年が経とうとしている現在の人工知能がどのようになっているのかをお話ししたいと思います。

現在は開発競争の時代に突入

これから人工知能の盛り上がりがさらに大きくなっていくこともあり、現在はいろいろな企業によって人工知能の開発が行われています。IBMが開発したWatoson(ワトソン)や、iPhoneに搭載された「Siri」、amazon Echoの「アレクサ」、LINEの「りんなちゃん」などが有名だと思います。

世界的な企業から、中小企業まで、開発されている人工知能は数知れず。これからもっと増えてくる可能性もあります。

世界規模のIT市場の奪い合いが、今まさに行われている「歴史の転換点」に僕たちはいます。

人工知能の将来性は

f:id:puroguramuhikkki:20190910014658p:plain

今まさに、人工知能がものすごい勢いで進化している最中です。

2045年にシンギュラリティーが訪れるかもしれないと言われていますが、実際に僕たちの生活がどう変化していくのかを考えてみたいと思います。

人工知能がもたらすメリット

人工知能がもたらす最大の変化はもちろん「機械の自動化」です。例えば自動運転だったり、工場などの単純労働、農業なんかも自動化が進んでいます。

少子高齢化がどの国よりも進んでいる日本は、「大変なことになる」って思っている人が多いと思いますが、このITの世界で考えるとむしろ逆です。

早く人が少なくなるから、少子高齢化した国にテクノロジーを実装した結果のデータ」が、どこよりも早く日本が手に入れることができるんです。日本でIT改革を頑張って進めたらの話ですが。

この人口減少による労働力不足を、人工知能がまかなうことができると期待されています。

しかもこの労働力、人間と違い24時間動くことが可能ですので、ますます人が働かなくてもいい状況になるというわけです。

人工知能の成長により需要が増すAIエンジニア

IT市場が右肩上がりに成長していくのはほぼほぼ決まっているのですが、それと同時に需要が増すのがAIエンジニアです。

人工知能を開発したり、メンテナンスしたりなどの役割の人が必ず必要となります。

AIエンジニアの受け皿は増えることはほぼ確定しているので、今のうちにプログラミングを勉強しておくと、将来有利になるのは火を見るよりも明らかです。

 

 

今のIT業界で、人工知能は切っても切り離せない存在です。AIエンジニアになれば高収入も狙える上、画期的な人工知能を開発できれば、一攫千金も狙える可能性だってありる、ロマンのある世界だと、僕は思います。

興味が出たなら、すぐにでもプログラミングを勉強してみましょう。

 

 

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。

 

 

無料で学べるプログラミング学習サイトのおすすめ 6選

こんにちは。引地啓。

今回は、無料でできるプログラミング学習サイトを紹介します。

お金がかからずに勉強できるので、お金が無い人はぜひ参考にしていただければと思います。

 

おすすめのプログラミング学習サイト

f:id:puroguramuhikkki:20190910013903p:plain

「使いやすさ」「学びやすさ」「楽しさ」「学べる範囲の広さ」「学べる範囲の深さ」

これらをもとに、独学したい初心者の人に本当におすすめできるプログラミング学習サイトをまとめました。

今回紹介するものは、どれも全サービスを使う場合、途中から課金が必要になります。

①ドットインストール

https://dotinstall.com/

名前を聞いたことがある人が多いと思います。

プログラミングを動画で学びたいなら間違いなく「ドットインストール」が間違いないです。プログラミングに関わりのある人なら、知らない人はいないほど有名なサービスです。

動画なので、分からない単語があっても何となく進めていけます。テンポも早いので、つまづくことなくサクサクいけます。ひとつのことを突き止めて理解するというより、初心者が全体を俯瞰したいというニーズを満たしてくれます。

こんな人におすすめ

  • とにかく動画で学びたい人
  • 早口にもついていける人
  • スキマ時間を活用したい人

勉強できること

  • ホームページ作成
  • アプリ開発
  • ブログサイト(Wordpress
  • サーバーサイト言語
  • フロントエンド言語
  • データベース

②Progate

prog-8.com

2018年、最も注目を集めたプログラミング無料学習サービスかもしれません。

あの堀江貴文さんも、Twitterで褒めているほどのサービスです。

とにかく見た目がオシャレで可愛い!さらに、学習レベルやスキルグラフなど、まるでゲームをやっているかのようにプログラミングを楽しく学べるんです。

初心者の最初の難問となる「開発環境構築」や「コンソール」の使い方など、「つまらない&つまづく」ポイントは一切排除されているようなものです。

プログラミングって楽しい!と思える遊び心や工夫がしてあります。

こんな人におすすめ

  • これからプログラミングを学んでみたい超初心者の人
  • プログラミング学習したけど、つまづいて諦めてしまった人

勉強できること

③Schoo

schoo.jp

Schooは無料で学べるオンライン動画学習サイトです。プログラミングのみならずデザインや経営、英会話など様々なビジネススキルを学べるインターネット上の学校のようなイメージです。無料で学べるのは「生放送」のみで、過去の動画は980円/月の会員費が必要になります。

どの分野も業界屈指の「先生」が教えてくれるので、ものすごい安心感を得られます。1本60分と長めの動画になるので、腰を据えて学習されたい人に適しています。

ただ、無料で学習できる範囲は限られています。

こんな人におすすめ

  • ちょっとした学校気分を味わいたい人
  • 動画学習をしたい人
  • 業界屈指の「先生」から学びを請いたい人

勉強できること

  • デザイン
  • プログラミング
  • ビジネス英語
  • ビジネス
  • スタートアップ

④Paiza動画ラーニング

paiza.jp

Paizaはプログラミングのクイズを解くことによって、自分のプログラミングの手腕を証明して各種IT企業からスカウトがもらえるという転職サイトです。

そんなPaizaが作っている学習サイトなので、自分の現段階の実力を測るための演習課題もしっかり作られています。

動画の長さも3分以内で、ブラウザ内にプログラミングできる場所があるので、サクサク学んでいくことができます。

PHP以外の新しいRubyPythonは本当の基礎の基礎のみになっていますが、入門者の人にもスムーズに始められます。

こんな人におすすめ

  • ITに自信が無いから動画で学びたい人
  • 資格学習など力試しをする場が好きな人
  • 自分のペースで基礎から学びたい人

勉強できること

⑤コードモンキー

codemonkey.jp

CodeMonkeyでは感覚的にプログラミングの考え方が身に付きます。意外と頭を使わないとクリアできないようになっていますが、PCを触れるお子様も楽しく学習できます。

また、Twitterでもサポートしてくれるので安心です。

こんな人におすすめ

  • お子様と一緒に学びたい人
  • 「プログラミング」という言葉に抵抗のある人
  • ゲームが好きな人

勉強できること

  • プログラミングの組み立て方
  • 論理的な考え方

⑥CODEPREP

codeprep.jp

 CODEPREPの学習スタイルは穴埋めスタイルは穴埋めドリル式で、反復することで知識が身につけます。

基礎をしっかり学んだ後に演習する流れなので、効果的に実力をつけることができます。

演習はブラウザ上でコードを書いて確認できるため、環境構築の手間も省けます。

コースは、入門編・基礎編・実践編と、レベルに合わせた教材が用意されているので、段階を踏んだ学習ができます。

また、それぞれにディスカッションボードが用意されているので、技術や質問をみんなで共有し、情報やヒントを得ることもできます。

こんな人におすすめ

  • 実際に手を動かしながら学習したい人
  • 基礎から実践レベルまで身につけたい人

勉強できること

 

 

f:id:puroguramuhikkki:20190910014139p:plain

 

この記事を読んで、それでもまだどのサイトで学ぶのか決めあぐねている人には、ドットインストールをおすすめします。

2011年のサービス開始以来、年々登録者数を増やし、なんと総登録ユーザー数が16万人まで上がりました。プログラミング学習をしている人ほとんど登録しているんじゃないのかと思えるほどの登録者数です。

ドットインストールはプログラミング学習サービス界の重鎮といっても過言ではありません。迷ったらドットインストールを選んだら間違いないと思います。

 

個人的にもドットインストールがおすすめです。

僕はWebサイトを作ってみたことがあるんですが、自分で作ってみると達成感があってやる気が出ます。

とにかく迷ったらドットインストール!

 

 

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。

 

 

プログラミングをアプリで学びましょう

こんにちは。引地啓です。

今回は、プログラミングを学べるアプリについて紹介したいと思います。

プログラミングは地味?

f:id:puroguramuhikkki:20190910013118p:plain

プログラミング学習は、環境構築・文法学習・サーバー周りの知識など理解しなければならないことがたくさんあります。

プログラミングを学び始めた人は感じているかと思いますが、プログラミング学習はすごく地味なものです。この地味な勉強を、楽しく学べる方法の一つが「アプリ」です。

アプリで学べるなら、子どもだって楽しくプログラミングを覚えることができると思います。

覚えてしまえば、プログラミングで自分が思い描いたことがコンピューター上で実現することができるようになり、よりプログラミングが楽しくなると思います。

プログラミングをアプリで学ぶメリット

f:id:puroguramuhikkki:20190910013156p:plain

学習のハードルが下がる

アプリで学習することで、学習のハードルは大幅に下がります。特にPCで学習するより、心理的なハードルが低いです。スマホアプリであれば、PCを立ち上げたり、テキストエディタを開く必要もありません。スマホゲームをする感覚で、アプリを開いて学習を始めることができます。

特に子どもの場合、飽きやすく集中力を維持するのも難しいため、遊び感覚で学習できる点は魅力的です。

いつでもスキマ時間にできる

アプリはスキマ時間で学習できるというメリットもあります。

学校までの通学時間、会社までの通勤時間など、目的もなくスマホを見続けている人も多いのではないでしょうか。

アプリでプログラミングを学べば、その時間を学習時間にあてることができます。

短い時間かもしれませんが、積み重ねることで「プログラミング的思考」や「文法の知識」が自然と身につくでしょう。

小さい子どもでもわかりやすい

アプリは、かわいいイラストやゲーム形式で学習が進められるため、小さな子どもでも分かりやすいです。

プログラミングの概念や専門用語も分かりやすく解説してくれるので、お子様が学ぶ時に使うのはもちろん、プログラミングに一切触れたことのない人や初心者の人が、まず始めてみるための手段としても最適です。

アプリで学ぶデメリット

基礎部分しか学習できない

アプリではあくまで基礎部分しか学ぶことが出来ません。そこから先は、自分で環境構築などを行い自分で学習していくこと必要があります。

簡単すぎる場合がある

プログラミング学習アプリは「楽しく学ぶこと」に重きを置いているので、人によっては簡単すぎると感じることがあると思います。

そう感じている人は、書籍を購入して学ぶか、スクールに通うなどしてプロの人に学ぶステップに進んでください。

 

子ども向けのプログラミングアプリ

f:id:puroguramuhikkki:20190910013319p:plain

まずは子ども向けのアプリを紹介します。IT業界は高収入です。お子様がいる人がもし見ているなら、子どもを高収入になるために、今のうちにアプリで誘導しておくのもいいかもしれません。笑

プログラミング教育の必須化が2020年から始まります。つまり、成績に影響します。なので子どもにプログラミングを学ばせたい保護者の人も多いと思います。ですが、「子どもがプログラミングに興味を持たないのではないか?」と不安だと思います。

そこで、スマホにアプリをダウンロードして子どもに遊ばせてみることで、子どもが興味を持つことがあるかもしれません。

低学年向けのプログラミングアプリ

・自分で描いた絵を動かせるプログラミングアプリ「ビスケット」

https://play.google.com/store/apps/details?id=air.com.viscuit.viscuit10app

こちらのアプリでは、お子様が描いた絵を、タブレット上で動かせます。

命令ブロックを組み立てるプログラミングとは違い、より感覚的に楽しめるアプリです。

・CodeSparkアカデミー:FOOSとCodeSparkアカデミー

https://play.google.com/store/apps/details?id=org.codespark.thefoos

Codeアカデミーは、4歳から9歳の子どもを対象としたゲームアプリです。

言語や文法ではなく、あくまで「プログラミング的感覚を養うもの」なので、小さな子どもでも遊ぶことができます。

フーというゲーム内のキャラクターをアクションコマンドで動かし、「ドーナツを取る」「階段を登る」などを行い、最終的にゴールまでたどり着ければクリアとなります。

 

・プログラミングゼミ

https://play.google.com/store/apps/details?id=com.programmingzemi

プログラミングゼミは、小学生の1年生から3年生向けに行ったプログラミングの授業を通じて生まれた教材です。現場の先生や実際に利用した子どもたちの意見を取り入れて開発されています。

プログラミングゼミでは、「右を向く」「少し待つ」といった動作を表すブロックを組み合わせることで行いたい動作をキャラクターに指示します。

このように、コードを書くのではなく、指示内容を表すブロックなど視覚的にものを用いてプログラムを組むことをビジュアルプログラミングと呼びます。プログラミング初心者にとっては、英数字のコードではなく、視覚的なプログラミングを通してプログラミングの基礎を学ぶことで、プログラミングに対する苦手意識を払拭することができるでしょう。

・ロボットが可愛いプログラミングアプリ「LightBot」

https://play.google.com/store/apps/details?id=com.lightbot.lightbothoc

ロボットに指令しを出してステージをクリアしていくアプリです。英語版ですが、そこまで難しい表現はありません。

「右を向く」「進む」「ライトを光らせる」といった命令がブロックにイラストで描いてあります。これらのブロックを組み合わせてロボットを動かし、青く色付けられた部分でライトを光らせ、ステージをクリアしていきます。

高学年&中学年向けのプログラミングアプリ

f:id:puroguramuhikkki:20190910013443p:plain

 

次にやや難易度の高い、小学校高学年から中学生以上向けのアプリを紹介します。

 

・Swift Playgrounds(iOSのみ)

Swift PlaygroundsはAppleが開発したプログラミング言語「Swift」を学べるプログラミングアプリです。2017年3月から、日本版がリリースされました。

基本的なプログラミングの概念を体系的に学ぶことができる内容となっており、キャラクターを動かしながら宝石を集める課題に取り組む。宝石を集めたら次の課題へという具合で進めていくことができます。

小学校高学年から中学生向けとなっており、やや難易度は高いと思います。

 

・Codebelle(iOSのみ)

Codebelleは、チャット形式で学習を進めるプログラミングアプリです。Swiftが学習できまます。

Codebelleはチャットで会話を進めるような感覚でスイスイと問題を解いていきます。ひとつのレッスンはおよそ3分で終了するので、空いた時間にサクッと勉強ができます。全くプログラミングについて知らない人でも楽しめると思います。

大人(初心者)向けのプログラミングアプリ

ãã¹ãã ã¤ã©ã¹ããã®ç»åæ¤ç´¢çµæ

 

プログラミングを始めた初心者にはもちろんですが、お子様にプログラミングを習わせる保護者の方向けでもあります。

子どもにプログラミングを習わせる際に、自分もある程度プログラミングを理解しておこうという保護者の方も多いです。全くITやプログラミングのことが分からないという人に、おすすめのアプリを紹介します。

 

・プログラミング基本中の基本入門 あなたの素質をチェック(iOSのみ)

そもそも自分はプログラミングに向いているのか、できるのか。そういった部分で迷っている人はこちらのアプリを使ってみることをおすすめします。

このアプリは、「プログラミングの基本的な概念・代入・分岐・ループに関する問題」が出されます。

これらの概念はどの言語を学ぶ場合でも必要になるので、是非試してみてください。

・Progate ‐楽しく学べるプログラミング学習アプリ

https://play.google.com/store/apps/details?id=com.progate

可愛らしいキャラクターとの会話形式で学習が進められますので、初心者にとって分かりやすい内容になっています。学習を進めていくに連れレベルが上がっていくので、育成ゲームの感覚で学習を進めていくことができます。

Progateアプリではスライドで文法を理解して、演習画面で実際にコードを書いていきます。実際に文字を打つのではなく、選択式のコーディングを行っていくため、タイプミスなども気にせず、文法の本質的な理解を深めていくことができます。

・論理演算学べる「トライビットロジック」

https://play.google.com/store/apps/details?id=jp.himacs.smartapp.trybitlogic

https://play.google.com/store/apps/details?id=jp.himacs.smartapp.trybit

https://play.google.com/store/apps/details?id=jp.himacs.smartapp.trybit2

トライビットロジックは、脳トレ感覚で「論理演算」が学べます。論理演算とは、「コンピューターで使われる」計算のことです。

トライビットロジックは論理演算の基礎である「OR」「NOT」「AND」「XOR」を使います。

ブロックを使ってバグを倒していくのですが、組み合わせる順番を間違えると倒せません。

かなりゲームっぽいのでおすすめです。

アプリの種類が色々出ているようです。

 

 

プログラミングアプリの一例を紹介させていただきました。

入り口としてはとても良いものだと思いますので、是非試してみてください。

ただ、紹介したアプリが、iOSしか対応していないものもあります。ご容赦ください。

 

 

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。