3/24 インターン11回 制御構文を学ぼう
ほんとだったら今ライブに行ってたんだな～！！と思いながらブログを書いています。当初思っていたよりウイルスの影響が大きく、私の生活の中でも、実際に色んなものが中止になって悲しいけどしょうがないなあ、と思います。ライブの振替日までには収まればいいなあ。
今回は制御構文制御構文制御構文を学んでいきます。複雑になってきました。
1.制御構文とは
ループ、繰り返しをしてくれるものです。例えば、1～100の数字を出力する際、制御構文を使えばそれらすべてを呼び出していかなくてよくなります。便利。
2．for文
<?php
for($i = 0; $i <= 5; $i++ ){
echo ("アメは").$i.("個です。<br>");
}
?>
この結果は、
アメは0個です。
アメは1個です。
アメは2個です。
アメは3個です。
アメは4個です。
アメは5個です。
となります。＄i++なので、１ずつ増えた文章が、0～5まで出力されます。
for文の中はカウンタ・条件設定と論理演算子が入っています。
カウンタ→変数の初期値
条件設定→iがどこまでか
そのため、今回は０からの5までということになってます。条件を満たすまで繰り返してくれる構文です。
3.while文
<?php echo ('<br>'); $i = -5; while ($i <= 5){ echo("アメは").$i.("個です。<br>"); $i++; } ?>
結果は、
アメは-5個です。
アメは-4個です。
アメは-3個です。
アメは-2個です。
アメは-1個です。
アメは0個です。
アメは1個です。
アメは2個です。
アメは3個です。
アメは4個です。
アメは5個です。
となります。
while文はほとんどif文と一緒です。書き方が違いますが。for文は初期値を必ず計算するけど、while文は条件式に合わないと計算しない場合があるのも違いみたいです。このとき、変数加算がないと無限ループになるので注意。
4．foreach文
<?php echo ('<br>'); $likefruit = array( "1位" => "林檎", "2位" => "オレンジ", "3位" => "柿", "4位" => "桃"); foreach ($likefruit as $name ){ echo("私の好きな果物は").$name."<br>"; } ?>
私の好きな果物は林檎
私の好きな果物はオレンジ
私の好きな果物は柿
私の好きな果物は桃
これは最初に設定したものを順にすべて繰り返して表示してくれます。
asを忘れないように注意！
5．break
<?php echo ('<br>'); $i = 0; while($i < 10){ if($i === 5){ break; } echo $i."<br>"; $i++; } ?>
0
1
2
3
4
これは、if文にある条件になったら処理を中断することができるコードです。そのため、今回5になった時に処理を中断するため、１～４までの数字が出力されています。
6．continue
<?php echo ('<br>'); $i = 0; while($i <= 5){ echo("ここが始めです").$i."<br>"; $i++; echo("1増えて".$i."<br>"); //偶然なら処理を中断 if($i%2 == 0){ echo("偶数なので処理を中断します<br><br>"); continue; } echo("今のアメは").$i.("個です<br><br>"); } ?>
ここが始めです0
1増えて1
今のアメは1個です
ここが始めです1
1増えて2
偶数なので処理を中断します
ここが始めです2
1増えて3
今のアメは3個です
ここが始めです3
1増えて4
偶数なので処理を中断します
ここが始めです4
1増えて5
今のアメは5個です
ここが始めです5
1増えて6
偶数なので処理を中断します
これは処理が2つあり、3行のうち2行分の処理①と、最後の1行分の処理②があります。処理②
continue;
}
echo("今のアメは").$i.("個です
");
}
に部分は、もし偶数だった場合実行されません。こちらは初めの偶数２になった瞬間に２以降の処理がすべてとまるのではなく、＄iが5になるまで処理が続くのが特徴です。
複雑になってきてますが、いろいろ試しながら勉強していきたいと思います。へー！ってことばかりでまだどんなふうに実用していくかまだ想像しきれてませんが、特に、breakやcontinueなど、最近は外出できないので頑張ってわかるようになりたいです～！
3/18 インターン10回目 演算子は難しい
誤字によってインターン中に大量のエラーコードを発生させました。私です。今回はPHP二回目です
目次
1エラー連発原因
2配列
3演算子
4条件分岐
1エラー連発原因
めちゃくちゃエラー連発したのでなんで？って考えてみました。課題の部分とか打ち込みながら気づいたのは、全角を打った後、半角で打ち込まなくちゃいけないところまで全角で打ち込んでいるということです。“や）などはエラーが出た後わかりにくくてなかなか気づきませんでしたが、このミスをたくさんしていたっぽい。
それを踏まえて、
①<p>と</p>で囲む
②<?php と ?>で囲む
③；や．を忘れない
④全角の後半角に切り替えるのを忘れない
を気を付けていきたいです。
2配列
配列はarray関数をつかって、keyによって認識するものです。変数とルールは同じ。これを使うと、たくさんデータがあっても任意のものを簡単に取り出したり出来るようになります。例えば、
<?php
$number =array(10,20,30);
print_r($number);
echo ('<br>');
echo $number[0];
echo ('<br>');
echo $number[1];
echo ('<br>');
echo $number[2];
?>
このコードだと
Array ( [0] => 10 [1] => 20 [2] => 30 )
10
20
30
こんな結果になります。echo $number○○；でArrayで入れといた要素が好きな時に簡単に出せますね。
他にも人名や、
<?php
$name = array("one" => "青木",
"two" =>"井上",
"three" =>"内田");
print_r($name);
echo('<br>');
echo("1番目の人は").$name[one].("さんです。").('<br>');
?>
→「1番目の人は青木さんです。」と表示される。
☆．を使うと繋げられるように！
人のデータとかでも応用できます。
<?php
$user = array(
"name" =>"はる",
"age" => 5,
"height" => 110
);
echo $user[name].('<br>');
echo $user[age];
?>
これだと、名前と年齢の 「はる ５」という風に表示されます。
3演算子
次は前回見た演算子の続きです。なんとなくここからややこしくなるイメージ。
＋やーの演算子の後に＝が付いたものです。例えば、
-＝だと$a-=$bとしたとき、「$aに$bの値を減算して代入($a=$a-$bと同じ）」という意味です。実際にしてみると
<?php
echo ('<br>');
$b = 100;
$a = 150;
$a -= $b;
echo $a;
echo ('<br>');
?>
となり、50が表記されます。
.=だと「連結して代入」なので
<?php
$c = "私は";
$d = "あなたのことが";
$e = "好きです";
$c .= $d;
$c .= $e;
echo $c;
echo ('<br>');
?>
だと、＄cが＄dとくっついて、そのくっついた状況の＄cと＄dがくっついて…というようになって、「私はあなたのことが好きです」と表示されます。
こんな感じ。
これらは後の分岐条件で。
③加算子・減算子
個人的に、一番これが良くわからなくて難しかったです。
++$a→最初に$aに1を加えて$aを返す
$a++→最初に$aを返して、$aに1を加える
個人的に、結果同じになるんじゃないの？って思いました。どう違うんだろう、て。実際やってみると、
<?php
echo ('<br>');
$before = $a = 1 ;
//$aに1を足した後に、$beforeに値を代入する
$before = ++$a;
echo"前置は".$before."<br>";
$after = $a = 1 ;
//$afterに代入した後に、$aに1を足す。
$after = $a++;
echo"後値は".$after."<br>";
?>
で
前置は2
後値は1
という結果になります。両方2になるんじゃないの？タイミングが違うってどういうこと？っておもって調べてみたら、下のサイトの解説を見てなんとなくわかりました。
タイミングが違うってそういうことだったんだなあ、と思います。後値の方もう一回$afterをよびだしたら２ってでるって理解しました。
4条件分岐
条件を満たしているか？でかわる文です。「もしも～だったら、～する。」という形。
if文とswitch文の二種類があります。
①if文
if（条件式）｛処理・関数；｝
が基本の形。
<?php
$a = 5;
if($a === 5){
echo("aの値は5です。");
}
?>
だと、aは５なので「aの値は5です。」と表示されます。
他にも、if else文やelseif文で条件が多いものもできます。
<?php
echo ('<br>');
$kao = 7;
$konomi = 8;
if($kao > 6 && $konomi > 6){
echo("顔OK&私の好みです");
}elseif ($kao < 6 || $konomi < 6 ){
echo("後1歩です");
}else{
echo("ない");
}
?>
→7，8で6より大きいので「顔OK&私の好みです」になります。
②switch文
こちらも同じ感じ。こちらは、条件が多いと使われます。
witch-(case -break) -default
で一セット。また、caseのまとまりをブロックと呼びます。どの条件にも当てはまらない場合に最後のdefaltに飛びます。
<?php
$konomi =8 ;
switch ($konomi){
case 3 ;
echo"ないわ～";
break;
case 8 ;
echo"はあと";
break;
default;
echo"問題外";
break;
}
?>
→この場合「はあと」になります
今回、条件式が出てきて、本格的にプログラミング！って感じになってきたな、と思います。結構覚えることも増えてきたので、少しづつ頑張って、疑問はつぶしていきたいです。
3/11 インターン9回目 PHP言語を学ぼう
最近花粉症にやられています。そんな中インターンがありました。今回からPHP言語に入ります。
・PHP言語とは
web開発に使われるスクリプト言語のことで、Wikiとか、slackとかに使われているみたいです。ゲームとかwebアプリ向け。そして、htmlと組み合わせて使えます。CSSみたいに、スクリプト分けなくていいのは楽かも？
できることとしては、
「お問い合わせフォーム」や「SNS」、「予約システム」などユーザーからも情報を受け取れるものが作れることが特徴です。確かにhtmlとかでは情報を相手から受け取るモノは作れませんでした。htmlと組み合わせればできることがぐっと増えますね。
・使い方
コードの書き方です。基本的に
<？php→？>というかたちです。→の部分に色々入れていきます。例えば、その部分が
echo（”文字列”）；
とすると、その文字列が表示されます。もしも、これを2個使って列を分けたい場合は、改行コード<br>を打たなくてはなりません。打たないと2個分横にならんじゃう。
//と#は一行分のコメントアウトができます。またしたのでは
/*（この間のコメントアウト）*/
ができます。長いのは下で書くのがよさそう。
〇計算
計算はこんな感じです。
上四つは他の言語でもちょっと見たことがある四則計算です。一番下は何だろう、って思ってたら余りを出す計算みたいです。ちょっとどういう場面で使うのか気になります。
〇日付とか
よくサイトとかにある日付は
<?php echo date("Y/m/d");?>
で表示させれます。年、月、日ってことですね。
・変数
中学校でよく見たやつです。phpでは＄マークを使います。例えば、
＄x＝５ とすると ＄x＋7＝12 って感じです。
変数の決まりとしては、以下のものがあります。
数字や文字もいれることができるので、たくさん使う文字などを変数にしておくと後で書き換えが出たときにすごく便利。下の例だと、
一行目にはうえ部分の計算で12って表示が出て、二行目には「変数分かんねぇ」という文字が追加されます。もう一個便利なのは、
こんな風にすると変数の上書きができできます。らくちん～～！
・定数
他には、変数と違って再定義、上書き不可能な定数があります。これはdefine関数を使います。こんな風に、消費税の計算などにこれは便利。
・データ型
phpにはデータ型があります。こんな感じ。
4つでよかったなあ、と思います。他の言語だともっとあって覚えきれなかったので…。この辺使いながらしっかり覚えていきたいなあ。
ちょっとずつ勉強するごとにできることが増えたり、色んなページのコードを見たときになんとなくわかるようになって楽しい。phpも頑張ります～！
3/2インターン7回目 ワードプレス色々してみよう
インターンでした。今回はワードプレスの分からなかったところをきく回です。
1.プラグインすごい
今回の感想としては、プラグインすごいなあ、と思いました。めちゃくちゃやりたいことができるようになるプラグインが無料で公開されてる。インターネットとかで調べてみて、色々試してみたいです。すごく便利になります。
2.テーマ選びの大切さ
個人的には、「こんな感じに作りたい！」っていうものが強くはなかったので気にしてなかったのですが、ワードプレスは簡単に作れる代わり、コードで1から作るのでなくテーマを使っています。そのため、かなりテーマによって、「こうしたいけどできない・難しい」ということがおきて、テーマを変えた方がいいかも？ってなるので、実際に作るときはかなり重要になる部分だなあ、と思いました。思い切って変えるのも大切ですね。
3．色々やってみることが大事
今回私はそこまでいろいろ疑問が出てきていなかったんですが、もっと色々やっているメンバーがいっぱい疑問を持ってきたりしてて、もっと色々やってみておけばよかったなあ、と思いました。全部の機能試してみるとか。まだすべての機能使ってないので、やっぱりやればやった分慣れるし疑問も出るし、上達できるよなあ、とアタリマエだけど思いました。
ほんとに今回もだけれど、このインターンで色々な確認ができたり、勉強ができたりしてるな、と思います。例えば、いっつもザーっと課題部分ぐらいしかできてないけどもっと色々試してみたほうがいいよね、ギリギリにしない方がいいよね、ってことだったり。先日やらかしたコミュニケーションのことだったり。なかなかコミュニケーションは時間だったりお願いであったり、相手のことを考えなくちゃいけなくても、大学生同士だとなあなあになって、注意やアドバイスをもらえることがないのですごく勉強になります。コミュニケーションと気遣いが下手なので…！
技術的な面以外も、インターン通して勉強していきたいです。短いですが今回はおわり！
2/13 インターン6回目 WordPressを学ぶ
ポケモンやってたらインターンの日になりました。剣盾はいいぞ。今なら感想文書けそう。
さて、インターンもついにワードプレスまでやってきました。ついにって感じもするけど、もう！？って感じもします。
〇初めに（前回の宿題）
まず、宿題だったところ。メディアクエリのやつです。たぶん、コードはあっているのになぜかうまく反映されなくて、頭を抱えていたのですが、原因はコードの単語と単語の間に半角スペースがないことでした。なんか前もあったぞ…。
・コードの間の半角スペース
・｛｝の閉じ忘れ
・誤字脱字
よくこの三点でうまくいっていないことが多いので、これから気を付けていかないといけないなあ、と思います。思ってても見落としがちになる…。
〇CMSとは
Contents Management Systemのこと。主にphp言語とデータベースの組み合わせで構成されたもののこと。今回習うwordpressもCMSの一つです。
メリットとしては、すべてのブラウザ上で操作できたり、プログラミング知識が不要だったり、プラグインによって拡張ができるという点があるけど、
デメリットとしては、システムの癖になれる必要があったり（作った人の癖がシステムに出るため）、セキュリティ上の脆弱性がある。確かにパスワードとかめっちゃ頑張れば突破されそう。
・テーマ
有料と無料のものがある。イメージに合ったテーマを探す。
・メディア
画像ファイルは容量に注意。１０MB以上はアップできない。大き目でも１～２MBで十分。
PDFのアップ、ユーチューブ動画の埋め込み、動画のアップロードもできる。
・メリット
世界中の人が使っているので、検索で問題解決がしやすい。追加CSSでアレンジ可能。
実際に使ってみて思ったのは、めっちゃ簡単に、時間をかけずにできる、ということです。htmlとCSSだと、全部細かく打ちこまなくちゃいけなかったのに、書いてあるように入れていけば、すぐデザイン（テーマ）に反映されていく。すごーい！！確かに、プログラミングの知識がなくてもできる！これなら私でもがんばればできそう。
今回やってみて、実際にwordpressで作業していくのが楽しみになりました。CSSとかでいじることもあるだろうから、それも忘れないようにしつつ、楽しんで出来ていければいいなあと思います～
あともっとタッチタイピングも頑張ろうね…
1/30 インターン5回目 グリッドを学ぼう
最近omoinotakeというバンドにはまりました。今も聞きながらブログを書いています。サブスクって色々聞けて素晴らしい…。さて、インターンですがテストを挟んでかなりお久しぶりな感じです。今回はCSSの続きです。
○グリッド
格子状の線のこと。余白とかが一定になるように使われています。下のは左側がグリッドのおかげで揃っててみやすい。
ウエブサイトとかにも使われてるやつ。福大のホームページとか動画サイトとかでも。
それを実装するには以下のコードを組みます。
htmlとCSS両方にちゃんと組めたら反映‼
また、そこで大事になるのが列（column)と行（row)です。上記のコード中にも出てきてます。列が↓で行が→。セルがこれで表せます。
また、エリアを決めて、色を指定したりできます。そのためにまず、classを指定します。今回はone~sixまでclassを指定しました。
そこからCSSでエリアを指定します。今回はthreeのエリアをスタイル指定します。
ここでコード内に出てくる番号はグリッドライン番号です。この番号でエリアのcolumnとrowを指定しています。ここがちょっと自分はごちゃごちゃなりやすく苦手なので、ちゃんとわかるように頑張りたい。
＊気を付けること
・：や；の付け忘れ
・綴りのミス
今回うまく反映されなかったのは大体ここだったので気を付けたいです…めちゃくちゃそれで今回うまくいかなかったので、宿題では気を付けてみようと思います。
あとは、gapを使って、セルの間隔を指定したりできます。あるとめっちゃきれいにみえる。
○レスポンシブデザイン
これはスマホやパソコンなど違うデバイスで見たときに、ブラウザ・サイズに合わせて表示を適応することです。スマホ・フレンドリーは必須。
Viewportを設定することで、ページをレスポンシブデザインに適応させることができます。
○ライブラリ
これは完成コードがあつまっている場所のことです。オープンソースとして有段活用できるし、無料ってすごい。
今回レスポンシブデザインを学んだりして、どんどん自分が作るホームページが豪華になってくるのが楽しい。もっと応用できるようになりたいです。
1/9 インターン4回目 CSSってなんだ？
＊CSSってなんだ？？
CSSってHTMLみたいに1から作るというか独立してる個体の言語かと思ってたら、同時に使うらしい。
CSSのほうで、「HTMLで○○ってコードが出たら☆☆にするんだよ！」って指示を出すみたいなイメージで理解しました。
これをつかうと、HTMLで同じコードを使うと、指示した仕様にすべての箇所がなります。楽！HTMLの方も、何回もごちゃごちゃ書かなくて良くて、見やすくなってよきです。
＊使い方
まず、headにこのコードをいれます。これでこのCSSをこのページに反映しますよ〜みたいな！
こんな感じにCSSは指示を出します。半角スペースやセミコロンに注意！
実際に書くとこんな感じ。ここに書かれた指示通りに反映されます！
＊色々できるよ
このセレクタやプロパティを組み合わせると色々できます。すごーい！正直イメージついてないものもあるので、宿題の時に色々してみたいです。
＊tabキー
コード書く時にいい感じのスペースをあけてくれる。めちゃくちゃみやすくなる。使おう。
＊レイアウト
マージンなどはSTUDIOのワークショップで習ったぞ…！！ノンデザイナーズ・デザインブックにも載ってたような。この辺まだ使いこなせてない感いっぱいなので、勉強したいです。
ちょっとずつだけど色々できてきて楽しい。このまま楽しみながら頑張れたらいいなあ。宿題がんばろう！
