【初心者向け】プログラミング言語を学ぼう！ Ruby編２ 環境構築
こんにちは。引地啓です。
今回は、プログラミング言語のRubyの環境構築についてまとめました。
Rubyのインストール
https://rubyinstaller.org/downloads/
１、インストール
まずはダウンロードページから、Rubyをダウンロードしましょう。
赤枠の文字をクリックします。
クリックすると左下に以下のファイルが表示されますので、クリックします。
次に以下のようなインストール画面が表示されます。赤線部分にチェックを入れて、NEXTをクリックします。
後は以下の画面通りに進めていきます。
最後「Finish」をクリックして完了です。以下のようなコマンドプロンプトの画面が表示されます。
この画面で、エンターキーをクリックすると、コマンドプロンプトでプログラムが動き出し、画面が勝手に消えます。
その後にコマンドプロンプトを開きます。windowsマークを左クリックし、windowsシステムツールの中にあります。
コマンドプロンプトを開き、「ruby -v」というコマンドを入力して実行すると、インストールしたらRubyのバージョンが表示されます。
バージョンが表示されたら、インストールは完了です。
２、MSYS2のインストール
次に、「MSYS２」というツールをインストールします。MSYS2はRubyとは関係ないツールですが、WindowsでRubyの開発を進める上で必須となるものです。
以下のリンクからインストールします。
真ん中のボタンをクリックします。
ダウンロードファイルが左下に表示されますので、クリックします。
すると、以下の画面が表示されます。
「次へ」をクリックしていき、進めていきましょう。
上の画面が表示されたら完了です。
３、Rubyを実行する
きちんとインストール出来ているかを確認するため、Rubyのコマンドプロンプトを開きます。
左下のwindowsマークを左クリックし、「Ruby 2.6.4～」があるのでクリックしますと、「Start Command Prompt with Ruby」とあるので開きましょう。
対話形式でRubyを実行してみます。
対話形式でRubyを実行するために、「Pry」というコマンドをインストールします。Rubyには標準で「irb」という対話形式のプログラムが添付されていますが、Pryの方が画面に色がついたり、補完機能が充実していたりと便利です。
Rubyで追加のコマンドやライブラリをインストールするには、「gem」というコマンドを使います。Rubyのコマンドプロンプトを起動して、「gem install -N pry」と入力します。
すると、以下のように表示されます。
インストールが終わったら、コマンドプロンプトに「Pry」と入力してください。
以下のようにPryが起動します。
pry(main)>の右側でカーソルが点滅しています。ここでRubyのコードを入力すると、pryがすぐにプログラムを実行して結果を返してくれます。
試しに「puts "Hello World!"」と入力してみましょう。画面にHello World!と表示されます。
「puts 1 + 2」と入力すると、コンピューターが計算して「３」と答えを表示します。
今度は「Hello」を4回出力してみます。
「4.times { puts "Hello" }」と入力しましょう。
上記のように表示されます。
環境構築は以上です。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
【初心者向け】プログラミングを学ぼう！ Ruby編
こんにちは。引地啓です。
Rubyは日本人が作った言語で、動的なオブジェクト指向の言語です。
書きやすくて柔軟性が高い言語ですので、是非習得したい言語です。
Rubyとは
Rubyとは、まつもとゆきひろ氏によって開発されたオブジェクト指向スクリプト言語です。日本で開発されたプログラミング言語としては初めて国際電気標準会議（IEC）で国際規格に認定された事例となっています。
Rubyでできること
Rubyを使うメリットとして大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。
Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。Rubyを使っている企業は増えていますが、そのほとんどがRuby on Railsを使っているので、エンジニアとして活躍することも可能でしょう。
オブジェクト指向とは
従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された概念です。一般的に、以下の特徴を持っています。
カプセル化
カプセル化とは指定の方法以外で外部からデータをにアクセスできないようにすることです。想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。
たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまうわけにはいきません。そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。
継承
継承とは、既にある機能を受け継ぎ、能率よくソフトウェア開発を行うための機能です。
例えば、既にあるプログラムを一部改修を加え新しく作り直したいことがあります。そうした際に、一から作り直すのはかなり面倒です。そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義するとこが出来るのです。
ポリモーフィズム（多態性）
ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。
例えば、スマートフォンは動画や音楽が再生できます。この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。
この時、ポリモーフィズムの概念がないプログラミング言語（C言語など）では、同じプログラムが二重に定義されていますとエラーが出てきます。ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。
このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。
Rubyが日本で人気な理由
国内のWebサービスとしては、クックパッドや食べログなどがRubyを利用しています。なぜRubyが使われているのでしょうか。
1つは、Rubyの開発能率の高さです。
Rubyは「Enjoy for Programing!」を掲げており、プログラマーにとってコーディングしやすいプログラミング言語となっています。
直感的に実装したい機能をコーティングできるためストレスフリーで開発を行うことができます。
次に、フレームワーク（Ruby on Rails）の存在です。
「Ruby on Rails」とはRubyのWebアプリケーションフレームワークであり、数回のコマンド入力を行うだけで、Webサイトが自動生成できるRuby on Railsは大幅な開発工程の短縮を実現しました。
この「Ruby on Rails」の登場により、開発コスト削減を図る企業などでの利用が増加しました。
また、スタートアップ企業などがWebサービスを立ち上げるために、Ruby on Railsを利用していることも多いです。
また、Rubyは日本で開発されたプログラミング言語であることも利用されている理由のひとつです。
C++やJavaといったプログラミング言語の最新情報は英語で書かれていることが多く、それら最新技術を利用するには、一定の英語スキルが必要になります。また、有用な参考書なども英語で書かれていることが多く、それらの翻訳されたものは、誤訳されたものもあります。
しかし、Rubyは開発者が日本語という事もあり、日本語で書かれた有用な参考書が数多く手に入ります。そのため、最新情報をいち早く活用することもできます
今回は以上です。
次はRubyの環境構築についてまとめようと思います。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
【初心者向け】プログラミング フリーテキストエディタ おすすめ
こんにちは。引地啓です。
今回は、プログラミングに欠かせない環境である「エディタ」のおすすめをまとめました。初心者でも使いやすいフリーテキストエディタを紹介していきます。
フリーテキストエディタを使いましょう。
テキストエディタとは、「文字情報の入力・編集・保存を可能とするソフトウェア」のことで、windowsだと「メモ帳」、Macだと「テキストエディット」が標準でインストールされていますが、機能が少なく、初心者には使いにくいです。
多くのエンジニアが標準テキストエディタではなく、別のテキストエディタを選ぶ理由は、以下の理由が挙げられます。
高性能である
標準テキストエディタにある機能はもちろんの事、エンジニアにとってあると大変便利な機能が備わっています。例えば、複数あるファイルの中から特定の文字列を抽出する「grep」や、2つファイルの違いを抽出して表示する「ファイル比較」といった機能があります。
エディタによって色々な便利な機能が備わっています。機能の有無によって作業効率が大きく変わってきます。
優れた視覚効果
テキストエディタで扱うのは文字ですが、文字数が多くなれば何を書いてあるかが分かりづらくなります。
そのような問題を回避するため、フリーテキストエディタには特定の文字を色分け・ハイライト表示できる機能があり、どの部分に何を書いているかが判別しやすいです。
また、複数のファイルを同時に編集する必要がある場合には、デスクトップにウィンドウが散乱してしまいがちですが、１つのウィンドウ内に複数ファイルをタブ形式で表示できるものもあるので、コード入力がしやすくなるというメリットもあります。
初心者におすすめのフリーテキストエディタ７選
それではリナックスアカデミーがおすすめする、フリーテキストエディタを紹介します。
①Visual Studio Code
https://code.visualstudio.com/
2015年11月に公開された、まだ歴史が新しいMicrosoft製のエディタです。
windows版だけでなく、MacOS版もLinux版も存在するクロスプラットフォームなエディタで、早くて軽いと評判です。
デバック機能も内蔵されていて、様々な拡張機能も利用できます。
OSに標準テキストエディタを除くとシェアも世界トップクラスです。
各種プログラミング言語にマッチした表示も可能でカスタマイズ性が高く、ユーザインターフェースも使いやすくてオススメです。
②Sublime Text
「Sublime Text」は海外製のフリーテキストエディタで「恋に落ちるテキストエディタ」というキャッチコピーが面白い。C#やPHPなどといった言語のハイライト表示やgrep機能に加え、同じ文字列を同時に編集できる機能や、プラグインの追加によりHTMLのコード補完機能が使えるなど、他のエディタにはない特徴も備えています。
windowsだけではなくMacやLinuxでも使えるため、環境を選ばずに利用できるのも特徴のひとつです。
Sublime Textは無料でも使えますが、本来は有料です。
③Atom
SublimeやVisual Studio Codeと同じように、こちらも新しめのテキストエディタだ。クロスプラットフォームのエディタで、windowsだけではなくMac・Linuxでも使えます。
起動も早く、拡張機能も非常に豊富です。こういう機能がほしいと思って検索をしてみると大体見つかる。補完機能も優れていて、質も高いです。
ユーザインターフェースもデザインセンスが良く、また使いやすい。初心者にとっては始めは難しいかもしれませんが、おすすめのエディタです。
④サクラエディタ
https://sakura-editor.github.io/
サクラエディタはオープンソースで多くの開発者によって機能追加されてきた日本語テキストエディタです。JavaやHTML、C/C++など15種類の言語に対応したハイライト表示や、grep機能、ファイル比較、よく使う機能を特定のキーに割り当てるカスタマイズなど豊富な機能を備えており、多くのエンジニアが使用している評判の高いエディタです。
初心者が一番初めに使うことが多いのも、このサクラエディタです。
⑤Notepad++
https://notepad-plus-plus.org/
windows標準の「メモ帳」の代わりとして、高機能なテキストエディタとして開発された「Notepad++」は、プログラマー向けに開発された海外でも人気のあるテキストエディタです。
JavaやJavaScript、C/C++やPerl、PHPなど主要言語を始めとして30種類以上の言語のハイライト表示に対応しており、grepやファイル比較といった機能も備えています。また、プラグインを追加することで拡張機能を利用することができる点も大きな特徴です。
⑥TeraPad
「TeraPad」は軽量な動作が特徴的な、シンプルな日本語テキストエディタです。
Java、JavaScriptやPerlなどのハイライト表示機能や行番号、ルーラーの表示、ドラッグ＆ドロップでの編集機能も備えており、初心者からベテランエンジニアまで幅広いユーザー層を持っています。
余分な機能は必要ないので、とにかく軽快に使いたいという方にお勧めです
⑦Visual Studio
https://visualstudio.microsoft.com/ja/
「Visual Studio」はMicrosoftが提供するwindows向けの統合開発環境(IDE)で、多くの
のシステム開発の現場で使用されています。言語別のハイライト表示はもちろん、コード補完やプロジェクトファイル管理など、およそシステム開発な機能を兼ね備えています。
エディションによっては有償となるが、まずは無償で提供されているExpressエディションを使うと良いと思います。
以上、おすすめのフリーテキストエディタでした。
プログラミングを書く上で、大事なパートナーとなります。自分で使いやすいテキストエディタを見つけ、プログラミングを学習していきましょう。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
【初心者向け】プログラミングを学ぼう！JavaScript編３
こんにちは。引地啓です。
今回はJavaScript言語第3弾です。
プログラミング初心者が知識として覚えておきたい所をまとめました。
イベント処理
イベント処理といって、マウスをクリックした時などに何かを実行させることができます。
まずは「index.html」の<body>に<input>を入れます。
赤線の「"button"value="push!"」でボタンを作成。
「onclick="push()"」で、もう一つのmain.js内のプログラムを埋め込みます。
次に、「main.js」ファイル内に実行するプログラムを書きます。
呼び出すものを「function(){}」で囲んで、呼び込むfunctionの名前をfunctionの隣に書きます。上記では「push()」です。これをindex.htmlに埋め込みます。
コンソールにHello worldを出力させます。
push!のボタンをクリックすることで、コンソールに「Hello world」が出力されました。
キーイベント
キーイベントとは、キーボードからの入力を受け取ることができるオブジェクトです。
キーボードを押すとされる処理のことです。キーイベントは以下のものがあります。
keydown
keydownは、「キーが最初に押されたときに発生」します。
keypress
keypressキーは、「修飾キー（ShiftやAlt、Ctrlなどのキー）でなかった場合に発生」します。
keyup
keyupは、「ユーザーがキーを離した時点で発生」します。
では、どのように動くか見てみましょう。
まず、コードはこのように書きます。
中身を説明します。
addEventListener()
「addEventListener()」は、様々なイベント処理を行うためのメゾットです。
今回はキーイベント処理を行うためにあります。
（）中は「( 種類, 関数, false)」を入力します。
種類には、keydownやkeyup等のイベントの種類を記述します。ここでは「keydown」にしています。
次に関数を入力し、最後はイベント伝搬の方式をFalseかTrueで入力します。
基本的にはFalseを入力します。
function checkKeyPress()
functionは、JavaScript言語でよく使うもので、「様々な処理をまとめて、名前を付けることができる」ものです。この場合のfunctionの名前は「checkKeypress」という名前を付けています。つまり、「checkKeypress」の名前を使えば、このfunction内の処理を呼び出すことができます。上の「addEventListener()」の2番目で呼び出しています。
if (key.keyCode == "65")
こちらは、「もし(クリックしたキーの)KeyCodeが ”65” だった場合、｛｝内の処理をします！」という意味です。
keyCodeとは、キーボードのキーそれぞれに番号が付いており、これを「keyCode」と呼んでいます。ちなみに65は「 a 」です。
つまり、「 a 」をクリックすると、if 内の｛｝の処理をしてくれます。
｛｝内の処理は「alert()」にしています。
保存したらindex.htmlを開き、キーボードの a を押しましょう。
alertが表示されたと思います。
ちなみに余談ですが、Webサーフィンをしているとたまに上記のような画面が急に表示されて「システムが破損しています」「ウイルスに感染している恐れが」等と出てくるものがありますが、alertのようなプログラムがWebページのプログラム内に書かれてある、詐欺表示ですので、十分気を付けてください。
JavaScript言語のまとめは以上です。
初心者の人がいきなりゲームを作るとなると、簡単なゲームでも挫折してしまうことがあると思います。ここで紹介したのは、動くWebページを作れる基礎の基礎の部分で、ある程度勉強してきた人には物足りない記事になると思いますが、今から始める人や始めたばかりの人が見る分には丁度良いと思います。
プログラミングもRPGと同じで、いきなり強い敵と戦おうとしても絶対に進めないように、難しい所からいきなり始めようとするとつまづいてしまい、前へ進めません。
できる所やできそうな所から始めてみることが、上達する第一歩だと思います。
そして知識と技術をしっかり身につけて難関に立ち向かっていきましょう。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
【初心者向け】プログラミングを学ぼう！JavaScript編２
こんにちは。引地啓です。
今回はJavaScript言語の記事第2弾です。
前回はHTMLファイル内に、scriptを書き込みましたが、今回はCSSの時のように別ファイルを作成して、そこにJavaScriptのソースコードを書き込み、HTMLに埋め込む方法で書きます。早速書いていきます。
HTMLファイルとJSファイルを作成する
まずはHMLファイルとJSファイルを作成します。デスクトップに新規でフォルダを作り、2つのメモ帳を保存しましょう。１つが「index.html」でもう１つが「main.js」と付けて保存します。
このようになります。
JavaScriptでソースコードを書くときは、基本的にはmain.jsの方です。
main.jsを編集するときは右クリックして、「プログラムから開く」で、メモ帳で開きましょう。
次はindex.htmlファイルにHTML言語でソースコードを書き込みます。
次にmain.jsにJavaScript言語でソースコードを書き込みます。
そして、index.htmlを開くと次のように表示されます。
varで、変数の宣言をする
var FONT = "48px monospace";で「FONT」に 「48px monospace」を代入するという意味になります。「monospace」というクラスを使用するとテキストが等幅で表示されるようになります。
ここでは「FONT」と「ca」と「g」という文字に、それぞれ＝で代入する文を書いています。FONTで文字フォントを48pxに決め、caに「document.getElementById('main');」を代入させ、ｇには「ca.getContext('2d');」を代入させます。
「getContext("2d")」オブジェクト
getContext("2d")はオブジェクトと呼び、getContext("2d")オブジェクトは、線、ボックス、円、などを描画するメソッドを持っており、2D描画コンテキストを取得します。ゲームを作るときなどに使います。
そして「g.fillText()」で表示させる文字を描画させます。
If文を使う
プログラミングを学ぶ上で必ず使用するもののひとつが、「If文」です。if文は、「もし～だったらA、それ以外はBになります」といった、分岐を作るためのものです。
先ほどのindex.htmlファイルを簡単にします。
そして、次のように書きます。
今度のvarでは、aとbに数字を代入してます。
「 if(a < b){} 」は、「もしも、aよりｂが大きい場合は、｛｝の中の処理をしますよ」という意味です。
｛｝には「document.write」とありますが、これは文字を描写するという意味です。
描写する文字を（）内に書き、描写する文字は「 ” ” 」で必ず囲みます。
これを実行したらこうなります。
aは10で、bは15なので、コンピューターがしっかりどちらが大きい数字か判断して文字を表示させてます。
なので、aを15にしてbを10にすると、なにも表示がでてきません。
aが大きかった場合の処理を書きます。
次の条件を書くときは「else」と入れて｛｝で処理する文を囲みます。これを実行するとこうなります。
数が同じの時の条件も加えることができます。
3つ目の条件が出てきた場合は、2つ目の条件は「else if( 条件)」をつけ、どちらも当てはまらない場合に「else｛処理｝」が表示されます。
結果はこうなります。
このように複数の条件にそれぞれの処理を行えるのが「 if 文」です。ゲームを作るときにはほぼ必ず使います。
例えば恋愛ゲームで、告白をするかしないかでストーリーを分岐させるとか、選ぶヒロインでもストーリーを分岐させないといけません。
格闘ゲームでも、ダメージを受けた後HPがゼロになった場合と、まだHPが残っている場合で分岐させたりしないといけません。
もちろんそれ以外でも使えるので、この if 文は必ずマスターしましょう。
switch case文を使う
これも if 文と同じように分岐させる文ですが、switch case文を使ったほうがいい場面もたくさんありますので、こちらも同時に覚えましょう。書き方はこんな感じです。
switch case文は、最後にbreakを必ず入れます。そして最後にcase以外の場合の「default」を入れます。
結果はこうなります。
whileループ（繰り返し処理）を使う
whileループは名前の通り、繰り返しの処理を行います。
whileで大事なのがカウント処理で、数値が増えないとループから抜け出せなくなり、延々と処理をし続けます。カウント処理は例えば「a++；」というように書きます。
５未満を表示させる処理を書きました。赤線がカウント処理です。
<br>で改行しています。
0から４まで「document.write」で表示させてます。
これは200とは300、10000でも、条件を指定して処理を続けさせることができるので大変便利です。
do whileループ
「whileループ」は頭に条件を入れるので、処理に入る前に条件判定しますが、「do whileループ」は最低1回は処理をした後に、条件判定するので、「必ず１回は処理をする」ようになっています。whileループは条件に満たなければ処理をしません。
２つの処理をそれぞれに書いています。それぞれの結果はこちらです。
このように全く同じ処理が行われます。
大事なのは,do whileは「最初は必ず処理を行い、その後条件に当てはまるか判断する」ことです。その時に合った処理になるように上手く使い分けてみましょう。
Forループ
ループはこちらのforループを使う事が多いと思います。
「for(初期化処理； 条件判定； インクリメント)」というような書き方をします。
インクリメントとは、「繰り返し処理が終わった後に実行されるものです。
大抵は「for(var a = 0; a<10; a++ )」というような形で書かれます。
これもゲームで良く使う文なので必ず覚えたいです。
forループはｂで書きます。
このように書きます。今回は10未満の条件にしています。
結果はこちらです。
Forループは10未満までループさせる処理にしているので、9まで表示されています。
「break；（ブレイク）」と「continue；（コンティニュー）」
ループを抜けるための「break；」と、ループを飛ばすための「continue；」があります。
Forループの中に if 文を入れて、条件を付けてbreak；を入れてループから抜けたり、continue；を付けてループを飛ばしたり出来ます。
上がbreakで6で処理終了、下がcontinueで2だけ飛ばします。
結果はこちらです。
このようになります。
他にもたくさんありますが、このあたりは少なくとも使えるようにしておきたいものです。この処理を、自分が思うように実行できるようになったらかなり楽しいです。
ちょっとしたゲームなら作れるようになれると思います。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
【初心者向け】プログラミングを学ぼう！JavaScript編
こんにちは。引地啓です。
今回はJavaScriptについてまとめようと思います。登場してから25年経つ言語で、ここ数年で需要が高くなっている言語です。
Web制作やアプリケーション開発など幅広く使われています。
JavaScriptを使用している企業も増えているので、就職・転職する方におすすめしたい言語のひとつですので、是非見ていってください。
JavaScriptの環境構築
まずは他の言語と同様に開発環境を構築する必要があります。しかし今回はJavaの時のように細かい作業は必要ありません。
Google Chromeのデベロッパツールで実行しよう
今やスマホにほぼ入っているブラウザのGoogle Chromeのデベロッパツールに搭載されているコンソール機能について学んでいきます。
デベロッパツールとは？
Chromeブラウザに搭載されているデベロッパツールについて見ていきましょう！デベロッパツールは、Web開発者がデバックや最適化を便利に行うために用意されたツールになります。
Chromeブラウザに限らず、FirefoxやEdgeなど様々なブラウザにも同様に搭載されている一般的な開発・実行環境です。
Chromeブラウザの場合であれば「Ctrl」+「Shift」+「I」でデベロッパツールを起動することができます。
このような画面が出てくると思います。
Webのソースコードを閲覧することはもちろんのこと、CSSなどのデザインを調整したりスマホでの表示を確認することも可能です。そして、JavaScriptをそのまま記述して実行できるコンソールという環境も備わっています。
コンソールを使ってみよう
デベロッパツールに搭載されているコンソールタブを以下のように表示します。
「Console」をクリックすると画面が変わります。この画面には「Console.log()」で実行した結果やエラーなどが表示されます。さらに、JavaScriptのコードをそのまま入力して実行させることも可能です。例えば、「alert(’こんにちは’)」と入力してみてください。
そうすると、このようにアラートのダイアログが表示されます。
コンソールは1行ずつの入力になりますが、しっかりとJavaScriptを実行させることができます。簡単なコードを試すには最適な機能ですので、是非使ってみてください。
ブラウザ以外の実行環境
次はWebブラウザを使わないJavaScriptの実行環境を紹介します。
Visual Studio Code
Visual Studio Codeは2015年にMicrosoftからリリースされたエディタです。他のエディタと比べて軽量なエディタながら、高機能であることが特徴です。
JavaScript以外にもJava、PHP、C/C++、C#、Ruby、Pythonなど多くのプログラミング言語に対応しています。
Eclipse
Eclipseは、Java編でも紹介したエディタです。JavaScriptの開発・実行をサポートするためのプラグインが開発されています。
Visual Studio
Visual Studioはmicrosoftが開発しているもので、JavaScriptの開発もサポートされています。
メモ帳を使ってブラウザで開く
HTMLでもそうですが、パソコン内のメモ帳を使ってソースコードを書き、ブラウザ上で実行することもできます。
流れはHTMLと同じで、まずはフォルダを作ってその中にテキストファイルを作成します。
次に、中にHTMLとScriptのソースコードを書きます。
JavaScriptは「<head>」内に「<script></script>」を書いて、その中にコードを書いていきます。
とりあえず、あいさつのボタンを作りました。
ファイルの拡張子を「.html」に変更してから開くとこうなります。
このボタンをクリックすると、alertの”こんにちは”が表示されます。
図形を書いてみよう
最後に、動く図形をWeb上に表示するプログラムを書いてみましょう。
’use strict’
まず、HTMLの<body>の中に「<Script>」を入れます。Scriptの最初には「’use strict’」を入れます。これは「厳格化」といって、エラーをより的確にチェックしてくれるようになります。
document.getElementById()
document.getElementById()は、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメゾットです。（）内にはid名を入力します。上記の場合は分かりやすくbbbと付けて、入力しています。
addEventListener()
addEventListenerは、JavaScriptでさまざまなイベント処理を実行することができるメゾットです。
上記では「（'click', () => {document.getElementById('bbb').style.background = "red";}）」と書いていますが、これは「クリックすると処理を行います」という意味です。
処理が「document.getElementById('bbb').style.background = "red";}」のことで、これは「図形のStyle（スタイル）をred（赤）にします」という処理です。
このスタイルは、<head>の次に<style>と書いて、中身には図形の高さや横幅を決める文を書いています。
「width」は横幅で、「height」は高さで、「background」は図形の色を決めます。
このように、JavaScriptをHTML内に書き込むことによって、動きのあるWebページが作れます。
次回は、JavaScriptのもっと細かい部分を書こうと思います。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
【初心者向け】プログラミングを学ぼう！HTML&CSS編３
こんにちは。引地啓です。
今回もHTMLとCSSについてのまとめで、CSSの基本的な書き方をまとめました。
このCSSまで習得して、HTMLでのWebサイト制作の基礎が完成されます。
CSSとは
CSSとはHTMLによって書いた文章や画像のレイアウトを編集したり、デザインをしたりする言語です。
HTMLファイルとは別に、メモ帳でCSSファイルを新規に作成します。拡張子は「.css」です。作成したら、メモ帳内にソースを書き込みます。
CSSファイルを作成し、HTMLファイルに埋め込む
まずはHTMLファイルを作成し、CSSファイルを作成したら、HTMLファイル内に埋め込みましょう。
CSSファイルを作成する
h1を文字の色を赤にして背景の色を黒にし、pの文字の色を青にしてフォントサイズを40pxにしてます。
ファイルに保存したら拡張子を「.css」に変更します。適当にooo.cssとしました。
HTMLファイルにCSSファイルを埋め込む
これで保存し、index.htmlをブラウザで開くとこうなります。
CSSファイルに書くときは｛｝と；を使う
CSSでは、まずは装飾したい文のタグを頭に付けて、｛｝を付けます。
h1{}
｛｝の中に、文字の色を変えたり大きさを変えたりレイアウトを変える文を書きます。
「color:red;」は文字を青色にします。
「background-color:black」は、背景を黒くします。
そして文の最後には；を付けましょう。
実際にWebページを作成する
では実際にWebページを作ってみましょう。簡単に自己紹介ページを作成します。
HTMLファイル：index.html
CSSファイル：ooo.css
細かい所は端折りますが、このように書くと、Web上ではこんな表示になります。
div classでタグを囲む
div =classでタグを囲み名前を付けることで、名前ごとに違う編集ができます。
名前は、classの属性を付けるのですが、今回は分かりやすくするためにaaaやpppなどと名前を付けています。
あまり参考にならないかもしれませんが、これで基礎の基礎くらいはできていると思います。
中央寄せにするための「text-align:center;」
タグをブロックで囲むための「display: inline-block;」
余白を調整するための「margin: 0;」
などを今回使っておりますが、もっとたくさんの装飾する属性があります。
ぜひ、色々試してみてください。
ここまで出来れば、色気のないWebページが作れるようになっていると思います。
簡単なWebページが書けるようになれば、Web関連の企業への転職が有利になると思いますので、ここまでできるように頑張りましょう。
企業でもっと具体的で実践向きな技術を学べば、独立も不可能ではありません。
大事なのは、就職や独立などの明確な目標があることですので、目標を作って、HTMLとCSSを習得しようとすれば、おのずと効率良く勉強できると思います。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
