Javascript_l console.log/変数/定数
console.log
JavaScriptの標準的な実装に組み込まれている機能の一つで、実行環境に用意された文字による入出力画面(コンソール)に指定された文字列を出力(表示)するもの。
基本的な書き方
//「Hello World」と出力される
console.log(“Hello World”);
console.log(5 + 2);
↓ 足し算の結果である7が出力される
7
console.log(“5 + 2”);
↓ 文字列と解釈されそのまま出力される
5 + 2
掛け算「*」、割り算「/」
console.log(5 * 2);
↓
10
console.log(6 / 3);
↓
2
余りの計算「%」
console.log(9 % 2);
↓ 9割る2は、4余り1
1
変数
変数とは、さまざまな文字列や数値を入れておく箱とイメージするとわかりやすい。
その箱に便宜上の名前(変数名)をつけ、中身のデータの代わりに変数名を書き入れ使い回すことで、同様の処理が簡単におこなえるようになる。
- 同じ値を繰り返し使える
- 変更に対応しやすい
- 値の意味がわかりやすい
定義
変数は「let 変数名 = 値」として定義する。
プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味。
「let」は「これから変数を定義します」という宣言で、その後ろに変数名を書き、値を代入する。
//let...変数の宣言 //name...変数名 //John...代入する価 let name = “John”;
使い方
「"John"」という値が代入された変数nameを出力すると、「"John"」という値が出力される。
変数を使うと変数の部分は代入した値に置き換わる。
let name = “John”;
console.log(name);
↓
John
命名ルール
変数名は自由に決めることができるが、できるだけ分かりやすい名前をつけるようにする。
また、ES6では変数の名前にいくつかのルールがある。(数字開始はエラーがでる。日本語やローマ字も望ましくない。)
- number…◎英単語を用いる
- oddNumber…◎2語以上の場合は大文字で区切る
更新
変数は一度代入した値を変更することができる。
一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされる。
定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書く。
let name = “John”;
console.log(name);
name=“kate”;
console.log(name);
↓
John
kate
変数自身を更新
(例)すでに定義している変数numberの値に3を足したいというときは...
numberに3を足して、再びnumberに代入することで実現できる。
「=」の右側のnumberは値に置き換わり、計算された結果が左のnumberに代入される。
let number=2; console.log(number); //numberに3を足す number=number+3; //再びnumberに代入する console.log(number);
「number = number + 10」の省略した書き方
定数
定数とは、一度指定すると変更する事ができない値のこと。なので変数のように変数の値を上書きする事ができない。
<メリット>
値が変わらないためエラーを防ぐ事ができる
<デメリット>
上書きができないという点は自由度が減る
定義
定数は「const 定数名 = 値;」として定義する。
//const…定数の宣言 //name=定数名 //John…代入する値 const name=“John”;
HTML/CSS_lll レスポンシブデザイン
Media Queries(メディアクエリ)
ブラウザの画面サイズに応じてCSSのスタイルを設定できるMedia Queries(メディアクエリ)という手法を用いて、様々なデバイスや画面サイズに合わせてコンテンツのレイアウトを調整する。
書き方
@media (条件) { .... }
:指定された条件が当てはまるときにのみ{ }内のCSSが適用されるhead
タグ内にviewport
を設定する
条件
- max-width:○○px:○○pxまで
- min-width:●●px :●●pxから
ブレイクポイント
デザインが切り替わる画面幅のポイントをブレイクポイントと呼ぶ。
max-width: ◯◯px
(またはmin-width: ◯◯px
)のようにメディアクエリの条件を指定するとき、「◯◯px」の部分。
<端末別画面サイズ>
<一般的なブレイクポイント>
<head> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> </head>
/* 480px以下の場合h1はgreenになる */ @media (max-width:480px) { h1{ color:green; } }
HTML/CSS_ll
opacity
要素の中身全てを透明にする
rgba
背景色のみを透明にする
rgbaは4つの値をコンマ(,)区切りで入れる。
4つ目の値が透明にする度合いで、0 ~ 1の数値で指定する(値が小さいほど透明になる)。
/* 0.5が透明度 */ .box{ Background-color:rab(255,147,30,0.5); }
rgb
rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決める。
色を指定するときは今まで使用してきた#ffffffのような記法を使ってもrgbを使っても構わない。
/* 以下は同じ色 */ .box{ Background-color:rab(255,147,30); } .box{ Background-color:#ff931e; }
transitionとhover
transitionを使うと「変化の対象」や「変化にかかる時間」などを指定しアニメーションをつけることができる。
「変化の対象」にはcolorなどのプロパティを指定するが、allを指定すると全てのプロパティに適用出来る。
/* all=変化の対象,1s=変化の時間 */ Div{ Transition:all 1s; } Div:hover{ Background-color:red; }
position: absolute;
HTMLの要素同士は通常重なって表示されることはないが、position: absolute;
を使うと、要素同士を重ねて表示することが出来る。
サイト全体の左上部分を基準とし、そこからの位置をtop
とleft
を用いて指定する。また、right
やbottom
を併用することも可能。
画面上に要素を固定する
position: fixed;
を使うと、常に要素を画面上の指定した位置に固定させておくことができる。
位置は、top
、left
、right
、bottom
を使って指定する。
<img src=“aaa.png” class=“fixed-img”>
.
.fixed-img{ position:fixed; top:10px; left:40px;
要素の重なりの順序を指定する
z-index
プロパティは、要素の重なりの順序を指定する。z-index
は整数値で指定し、値が大きいほど上に表示される。z-index
プロパティは必ずposition
プロパティと併用する必要がある。
/* <header>のpositionプロパティをfixedに、topを0に指定→固定 */ header { position:fixed; top:0; /* z-indexを10に指定→最前面 */ z-index:10; }
HTML/CSS_ll ボタン
Progate「HTM &CSS中級編」ボタン作成時に覚えておきたいポイントがあったのでメモしておく。
インライン要素
a
タグなど- width・height:指定できない
- margin・padding:左右のみ指定できる
- 配置:横並び
ブロック要素
- width・height:指定できる
- margin・padding:指定できる
- 配置:縦並び
インラインブロック
ブロック要素とインライン要素の特徴を併せ持つ。
- width・height:指定できる
- margin・padding:指定できる
- 配置:横並び
display
a
タグは初期状態でインライン要素になっているが、displayプロパティを使うと、インラインブロック要素に変更することができる。
displayプロパティはblock(ブロック要素), inline-block(インラインブロック要素), inline(インライン要素)を指定することができる。
クリック時にボタンがへこんで見えるようにする
box-shadow
をnone
にするposition: relative;
とtop
によって影の分だけ位置を下げる
.
/* messageクラスのボタンをクリック時にへこんで見えるように */ .message:active{ box-shadow:none; position:relative; top:7px; }
HTML/CSS_l
Progateで「HTM &CSS 初級編」をした。見返したいポイントがあったのでメモしておく。
class
要素にはclassを使って名前をつけることができる。classをつけることにより、それぞれの要素を識別し別々のCSSを適用することができる。
class名でCSSを指定する場合、先頭に「.」が必要なので注意する。
<div class="header"> </div>
.
.header { background-color: #26d0c9; color: #fff; height: 90px; }
ブロック要素・ インライン要素
HTMLの要素には、改行される要素と改行されない要素がある。
前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素という。
- ブロック要素:
div
要素、h1
要素、p
要素 - インライン要素(改行されない要素):
span
要素、a
要素
paddingとmargin
- padding:borderの内側の余白を作る
- margin: borderの外側に余白を作る
ボックスモデル
border, padding, marginは、ボックスモデルという概念に基いている。
HTMLの全ての要素には、border(初期状態では表示されない)があり、その外側の余白はmargin, 内側の余白はpadding。
input,textarea
input
要素:1行のテキスト入力を受け取るための要素(終了タグが不要)textarea
要素:複数行のテキスト入力を受け取るための要素
学習ロードマップ|PHP独学
はじめに
このブログはPHPを独学で習得するための学習内容を記録していく。
なぜPHPを学習するのか
- 多くの企業が開発に採用している言語のためスキルを身に付けておきたい
- メジャーなプログラミング言語のため情報が多く学習を進めやすいと考えた
短期目標
PHPスキルを身につける(その他付随する知識も含めて)
長期目標
PHPエンジニアとして就職する
学習ロードマップ
現在、学習ロードマップは下記の流れを考えている。
実際に学習を進めていく中で不足している知識を補えるようにプラスαする予定だ。
1.HTML/CSS/JavaScriptの基礎を学ぶ
PHPの文法に入る前に、まずはHTML/CSS/JavaScriptの基礎を(基本的な記述方法や文法がわかる程度に)学習する。
- HTML/CSS/JavaScriptは、『フロントエンド言語』といって、ユーザー側(ブラウザ側)で処理が行われるプログラミング言語
- PHPは『サーバーサイド言語』といい、サーバー側で処理が行われるプログラミング言語
ポイントPHPでサーバー側の処理を行っても、実際にユーザーの目に触れるのはブラウザ側の処理。最終的に出力されることになるHTML/CSS/JavaScriptの基礎が理解できないと、PHPを使いこなすことはできない。
2.PHPの基本文法を学習
基本的な文法を理解する。抑えておきたいポイントは下記だ。
3.PHPの環境構築
オンライン学習サービスProgateを用いて学習予定なのでこの環境構築はひとまずいらない。学習を進めていくといずれ必要になるのでチャレンジする予定。
PHPの環境は「Windows」「Mac」「Linux」といった色々なOS上への構築が可能。
環境構築の方法は主に3つ。
初心者にオススメの構築方法は、OSがMacなら1.MAMP、OSがWindowsやLinuxなら3.XAMPPでの構築です。MAMPやXAMPPはWebサーバ・データベース・プログラミング言語がセットになっているパッケージソフト。インストールするだけで全て使えるようになるため、初心者にも始めやすい構築方法。
4.ファイル操作・HTTPリクエストを学習
ファイル操作とは、データを読み込み、書き込みをすることで、データを保存したり、利用する時に必要となる処理。ファイル操作を行うときは必ず「開く」→「閉じる」という流れが必要。
- ファイルを「開く」:fopen
- ファイルを「読み込む」:fgets または ファイルを「書き込む」:fwrite
- ファイルを「閉じる」:fclose
HTTPリクエストとは、Webページを取得する際に、サーバーに対して「ページを表示して!」と要求すること。
- GET送信
- POST送信
これら2つのリクエストを使い分けることにより、たとえば検索機能を作ったり、お問い合わせフォームやログインフォームを作ることが可能。
これらは実務で頻出する知識なので、ログインフォームなどを実際に1から実装してみて、GET送信、POST送信の概要と違いを掴んでみることをおすすめ。
5.データベースを学習
データベースの知識は、バックエンドエンジニアには必須の知識と言える。
データベースは、送信した情報を保存したり情報を取り出したりすることができる箱のようなもの。特に、一般的に使われているのがリレーショナルデータベース(RDB、表の結合が可能なDB)で、その管理システムの代表的なものがMySQL。
MySQLを使用して、PHPでのデータベースの使い方について学んでいく。
6.フレームワークに触れる
フレームワークとは、効率的に開発を進めるためにさまざまな処理を自動化、パッケージ化したソフトウェア。フレームワークを使うことで、1からサービスを構築するよりも、格段に早く効率的に開発が可能になる。
中でも全世界で最も人気が高いPHPフレームワークは、『Laravel(ララベル)』。まずはこのLaravalに触れてみる予定。