バッチャン 日常バッサバッサ

男子大学生の日常を便利にするブログです! 下宿・一人暮らし・SMAP・新しい地図 に関する情報を発信しています!

code3 <jQueryは工程だ!>主要なイベントと使い方

f:id:tsubasa8770:20190210224657j:plain

code programming


テックアカデミーでプログラミングを勉強しています。

僕の場合は、【PHP・Laravelコース】と【フロントエンドコースを両方勉強しています。

個人的には、オススメは【フロントエンドコース】です。

副業でコッソリ稼ぐことができる可能性があるからです。

 

今なら、『shokai伊藤翼』と申し込みフォームの備考欄に記入してもらえれば、1万円引きです!お試しください!

 

 

そして、途中からですが少しずつ勉強したことをアウトプットしようと思っています。

 

今日はその3回目になります!

 

自分なりのメモ・アウトプットが皆さんのお役に立てれば良いな と思っています。

 

詳しくまとめる<ザックリ大枠を掴む

 

 

なお、僕のメモで間違っている点や、もっと詳しく教えて欲しいことがあれば、コメントやツイッターにDMなどを送ってもらえると嬉しいです!

 

twitter.com

 

 今回のメインは『jQuery』です。

とってもJavaScriptフレームワークでありながら、とてもシャレオツなサイト制作

ができると共に、動きがつくのでユーザーにとって飽きさせない加工ができるモノです。

フロントエンドの人間には不可欠な動的なサイト制作なので、気合い入れて行きましょう!

と言っても、他のものに比べたら、そこまで複雑ではないので、楽しいですね。笑

 

学習内容

 

それでは、3回目の学習内容はこちらです。

 

テックアカデミー フロントエンドコース<jQuery>

PHP は見直し

  • syntax error は「構文エラー」という意味PHPの正しい文法書式に沿っていないために表示されるエラー
  • batcan_basa_basa はスネークケース

ヘビみたいに繋がってるからだな、絶対🐍

  • キャメルケースで表したら$batcanBasaBasa
  • var_dump($num); とすれば int(2) という データ型(数値) で見ることができる。 int は 整数型(まぁ数字のことよ)を表すキーワードです。
  • (数値)に文字を入れた場合→ string(バイト数)が出る。string は文字列型のキーワードです。(ちなみに、日本語は1文字3バイト

 

 

jQuery

  • load( )は、ページ内のすべての外部CSSや画像の読み込みが完了したタイミングで発生するイベント
  • ready()を使えばDOM操作を先に始めることができ、結果的に待ち時間を減らすことができる

「もう準備できてるよ〜」って状態にしておくわけだ。

  • append()は、要素の最後にHTMLなどを挿入できる。コイツの(引数)にはHTML文字列だけでなく、DOM要素やjQueryオブジェクトもを追加可能
  • 逆に削除するのはremove()

 

  • <input>(HTMLの話ね)に入力された値を取得するにはval()
  • val(値)で、フォームに値を入力できる

これは、たぶんよく使うからね!

  • サッ!と出てくるログイン画面の作り方 = CSSdisplay: none;として、JavaScript$( ).click(function(){
    $( ).fadeIn();
    });
  • $("セレクタ").attr("属性名")セレクタから、引数に指定した属性名の値を取得できる
  • keydownイベントはキーで入力したものを受け取る
  • 表示、非表示を切り替えたいtoggle()

 

  • slideDown()、slideUp()でスライドアップ、ダウンのアニメーションが使える
  • animate(プロパティ一覧, 時間)で変化のあるアニメーションができる
  • (時間)はミリ秒単位

 

 

$(document).ready(function() {

$(何を).text(どうする); });

 

短縮系も大事((document).readyがめんどくさくなって、なくなっただけ

$(function() {

 $(何を) . text(どうする);

});

 

prepend()は、引数に指定した内容を、要素の先頭に挿入するメソッド 

復習:Progate

PHP

PHP 学習コースⅠ

  • switch

 

その他

jQuery

jQuery 中級編

モーダルを表示しよう まで

 

 

 

 

まとめ

今回は  jQueryのイベント名と使い方ばかり載せてしまいました。

 

これを複合させて作る作業も増えてきました。。。キツイっすね。笑

でも、jQueryの場合は一つ一つは難しい動作はしていないということは理解できてるので、一個ずつ一個ずつ進もうと思います。。。

 

 

jQueryにおいて、大事なのは『工程』だと実感してできました。

 

例えば、『ボタンを押す』→『メニューが開く』→『入力したモノが違う』→『「違います。もう一度入力してください」とメッセージを出す』みたいな感じ。この工程を怠らず、JavaScriptjQueryで書いていくイメージですね。

 

最後まで読んでいただきありがとうございました。

バッチャン@特待生ブロガー (@basabasa8770) | Twitter

でした。

 

code2 <JavaScript>スコープについて <jQuery>チュートリアル

f:id:tsubasa8770:20190210224657j:plain

code programming


テックアカデミーでプログラミングを勉強しています。

僕の場合は、【PHP・Laravelコース】と【フロントエンドコースを両方勉強しています。

個人的には、オススメは【フロントエンドコース】です。

副業でコッソリ稼ぐことができる可能性があるからです。

 

そして、途中からですが少しずつ勉強したことをアウトプットしようと思っています。

 

今日はその2回目になります!

 

自分なりのメモ・アウトプットが皆さんのお役に立てれば良いな と思っています。

 

詳しくまとめる<ザックリ大枠を掴む

 

 

なお、僕のメモで間違っている点や、もっと詳しく教えて欲しいことがあれば、コメントやツイッターにDMなどを送ってもらえると嬉しいです!

 

twitter.com

 

 

 

学習内容

それでは、2回目の学習内容はこちらです。

 JavaScriptの電卓作成にはなかなか時間がかかりました。

 

今回なんとか自力でできた大きな理由を2点発見できました。

  1. カリキュラムに近いカタチで作成に臨むこと
  2. 『言語 作りたいもの』で検索すること(今回の場合『JavaScript 電卓』

この二点をこれからも意識しておくと、これからのプログラミング学習も効率がいいと理解できました。

 

特に2番は有効です。

なぜなら、同じ悩みのプログラム初心者の人間の意見に共感できますし、変にキレイすぎないコードなので、初心者にとってはわかりやすいからです。

もちろん全く同じコードで、同じ機能を作っているわけではないです。ただ参考にはなると思います!

 

ぜひ、お試しあれ!

 

テックアカデミー フロントエンドコース<JavaScript

 

Javascript 電卓作成

  • return false;は<a>タグを止める役割らしい。。。?
  • 関数の基本は 3種類
    ① 呼び出されて実行される関数
    ② 引数の有る関数
    ③ 戻り値の有る関数

・戻り値returnのつまづき →初心に戻って基礎理解にシフトしました。

 

戻り値return のわかりやすい例

水道管を作る  =function(関数名){} ←関数を作ること

水、そのもの  =return 戻り値

蛇口を開ける動作=関数名() ←関数の呼び出し

 

  • undefiendは戻り値(return)が存在しない時に現れる。
  • 戻り値(return)がある場合は、その戻り値の値がconsoleに表示される
  • もちろん、値の入っていない変数や、存在しないオブジェクトのプロパティにアクセスしたときにもundefiendは表示される。

 

つまり、undefiendが表示される可能性は4つパターンがある

  1. コンソールに入力して実行したコードが、結果を返していない
  2. 呼び出したメソッドや関数が、returnで戻り値を返していない
  3. アクセスした変数に、値がセットされていない
  4. アクセスしたオブジェクトのプロパティが、存在していない

1、2番は自分が間違えていなくても、undefiendが出る可能性がある。

しかし、3番の『値がセットされていない』・4番の『プロパティが存在していない』というのは、コードを書いている自分のミスの可能性がある。

下の二つの場合は、見直しが必要かと思われる。

 

 

・スコープ

  • スコープ = 変数のアクセス可能範囲のこと
  • なぜ必要か = アクセス範囲を決めて、大事なコードを変更してしまうなどの、トラブルを防ぐため
  • JavaScriptには『グローバルスコープ』と『ローカルスコープ』がある
  • グローバルスコープ = JavaScriptのコード内全体でアクセスできる変数のこと
  • ローカルスコープ = 関数内で定義された変数(別名:関数スコープ)

 

→『グローバルスコープ』:関数で定義される変数

→『ローカルスコープ』:関数で定義される変数

 

  • 同じ変数名をグローバルスコープにもローカルスコープにもつけた場合 → 優先順位 ローカル>グローバル 

 

〜〜〜 JavaScript終了 〜〜〜

jQuery

復習:Progate

PHP

PHP 学習コースⅠ

  • switch

switch ($remainder) {

case 0:
echo '大吉です。';
break;

case 1:
echo '中吉です。';
break;

この時の引数($remainder)が全てに必要だと思ってしまっていた。f:id:tsubasa8770:20190211174353p:plain

その他

jQuery

jQuery 初級編 終了

  • jQuery = 全てのブラウザに対応してくれる仲介役(ブログラマー → jQuery →ブラウザ)

基本的な使い方→ $( ' p ' ) . fadeOut(1500);

何を.どうするのか(どれだけの時間で) が基本形

 

  • イベント = 何か行動が起きること(クリックされた…など)
  • イベントの構文は、$('セレクタ').イベント名(function(){ });  でできる
  • hoverイベント $('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);

 

 

ドットインストール 

JavaScript> 

function 自分がつけたい関数名() { ←これを仮引数

省略したいことを書く場所

};

 

呼び出したい場所で

自分がつけた関数名(); ←これを実印数

 

戻り値とは、結果(答え)を自分に戻す

例)7+3=10 → 10が戻って来る。さらにそこから 10+7=17をしたりする。

 

まとめ

 我ながら頑張ったと言える2回目となりました。

はてなブログでアウトプットを始めてから、飲み込みが早くなった気がします!

このまま、鈍行ではありますが、少しずつ進めて行きましょう!

 

現在は、jQueryなので、CSSと似ているので、とてもやりやすい内容です。このままのペースが続くように努力します

 

 

最後まで読んでいただきありがとうございました。バッチャンでした。

 

code1 実はテックアカデミー通ってて。。。

f:id:tsubasa8770:20190210224657j:plain

code programming


実は僕、テックアカデミーでプログラミングを勉強しています。

僕の場合は、【PHP・Laravelコース】と【フロントエンドコースを両方勉強しています。

個人的には、オススメは【フロントエンドコース】です。

副業でコッソリ稼ぐことができる可能性があるからです。

 

そして、途中からですが少しずつ勉強したことをアウトプットしようと思っています。

 

今日はその1日目ということです!

 

自分なりのメモ・アウトプットが皆さんのお役に立てれば良いな と思っています。

 

僕の場合は、

詳しくまとめる<ザックリ大枠を掴む

上記のようなサイトにしたいと思っているので、お願いします。

 

なぜかというと、ザックリわかる・なんかわかる気がする というモチベーションで学習すれば、案外うまく行くものだと思っているからです。

 

それに、わかりやすいまとめは書籍でも、もっと詳しいブロガーの方がいらっしゃるので。。。

特にサルワカさんが有名ですよね。コンセプト『猿でもわかる』なので、図が素晴らしいですよ。

 

なお、僕のメモで間違っている点や、もっと詳しく教えて欲しいことがあれば、コメントやツイッターにDMなどを送ってもらえると嬉しいです!

 

twitter.com

 

学習内容

それでは、1日目の学習内容はこちらです。途中から初めてしまったので、DOMというマイナーなところからです。。。笑

 

テックアカデミー フロントエンドコース<JavaScript

・DOMとは
  • DOMとはDocument Object Model の略
  • 簡単に言えば、「要素」だと思えばいい
  • HTML は要素の集まり=『DOMツリー』とも呼ばれる
  • JavaScriptがHTMLを操作するためにあるもの

 

・documentオブジェクトについて
  • JavaScriptにオブジェクトがあるように、大元のブラウザにも『ブラウザオブジェクト』がある
  • windowオブジェクトにdocumentがある
  • console.log(navigator.userAgent); でどんな種類のブラウザかがわかる
  • console.log(window.innerWidth); で幅がわかる
  • console.log(window.innerHeight); で高さがわかる

復習:Progate

PHP 学習コースⅠ

  • if文
  • else elseif

まとめ

今日はゼミで大阪観光だったので、1セクションしかいけませんでした。

 

ゼミの観光でありながら、ご飯の時にお酒を飲まなくて正解でした。帰って少しでも進められてよかった。

 

僕の場合はPHPオブジェクト指向辺りから雲行きが怪しくなって。。。楽しいフロントエンドコースに力を注いでしまっているわけです。笑

 

次回は、テックアカデミーのJavascriptで簡易的な電卓を作る課題から始めることにします。

 

最後まで読んでいただきありがとうございました。バッチャンでした。

 

ブログ移転してますよ!!

 

こんばんわ。

 

このブログは移転をしました!

 

Color Free Map | 男子大学生を便利にするブログ! 下宿・色・SMAP・新しい地図 に関する情報を発信!

 

先日ワードプレスの勉強をしていると記事にしましたが、ついに!!作り終えました!!

(まぁまだ慣れませんけど…笑)

 

はてなブログから、ワードプレスの移行がとても辛かったです。

 

こういったことは、新しいブログにて書くことにして…

 

これからブログを続けていこうと思うので、応援のほどよろしくお願いします!

 

Color Free Map | 男子大学生を便利にするブログ! 下宿・色・SMAP・新しい地図 に関する情報を発信!

#15 Word Pressを勉強しますっ!!

 

 

 

 

ょっとこの頃ブログをあげれてない。。。

 

まぁいくつか理由はあります

  • いっぱい読みたい本がある。
  • 勉強したいことがある。
  • 荒野行動にはまってしまっている。
  • 部活に追われている。
  • 宿題に追われている。
  • バイトに追われている。
  • 教習所に追われている。
  • 泊まりなどの遊びが多発している。
  • 眠い!!

ホラ。イソガシイヤロ?

 

「勉強したいことがある」ですが…

もちろん、色彩検定Illustratorの資格を勉強したいと思っています。

(全然手をつけていないですが…。とっちらかっていますね。笑)

 

もう一つ勉強したいことがあります。

それは

WordPress

です。

ブログをやっている方ならば一度は耳にしたことのある言葉ではないでしょうか。

有料ブログが怖いから、無料ではてなブログでやってみようと思ったのではないでしょうか。

私もその一人でした。

 

ブログ始めてみて楽しいです。

友達などにはバカにされたりもしますが、上達していることを実感できています。

このことが一番楽しい。

 

どんな広告を貼ったら、クリックしてくれるんだろう。。。

どうやったらより多くの人に見てもらえるんだろう。。。

どんなタイトルだったら、興味を引くんだろう。。。

キャッチ画像は何が良いかな。。。

 

 

私は大学生です。

【広告】の仕事に就きたいと思っています。

ブログというのは実際に【広告】を様々な視点で学ぶことができるのだと思えます。

私のやりたいことと合っているのかなぁ〜。

そんな気がしています。

 

なので、より高みを目指すために

【Word Press】に挑戦しようと思います。

 

報告?宣言?挑戦状?

 

 

 

 オススメ記事

#8 色彩検定を1週間で合格する勉強方法 - バッチャン 日常バッサバッサ
#11 「 KISS is my life.」の作詞・作曲した”ぼくりり”のこと知りたくないですか? - バッチャン 日常バッサバッサ

#14 【新しい地図】の”コレカラ”

 

 

順調な地図

SMAP】から【新しい地図】に大きな一歩を踏み出した元SMAPの三人(香取慎吾稲垣吾郎草なぎ剛)はとても頑張っているようですね。

 

 

新しい地図のファンクラブ

【NAKAMA】

に私も加入しています。

 

三人が好きという気持ちもあります

「新たな一歩を踏み出した三人を応援したい」と思ったからです。

このご時世、どうしてもグループのブランド力が無くなって

日の目を浴びないなんてことも少なくないですからね…

 

彼らは経済効果を【地図ノミクス】なんて言葉すら出て来ています。

ネットのウワサによると

新しい地図の三人が出るCMなどは

1.5倍ほどの売り上げを出す

とも言われています。

 どれほどすごい経済効果なのかは下のリンクに貼っておきますね〜

 

【経済損失年間12億円】テレビ局とジャニーズ事務所が「新しい地図」を無視し続けると莫大な経済損失になる! – Brilliant Magical Box

http://www.teaandsoup-p.com/blog/?p=1886

 

 

 現状の地図

でもさ、みんな【新しい地図】ってどう思いますか?

 

 

【私はまとまりがないように感じます。】

 

新しい地図になってから一種のパターンを感じます。

 

つよぽんが自然体でボケをかます

慎吾ちゃんがツッコミ

吾郎ちゃんがフォローする

 

こんなパターンじゃないですか?

 

 

なぜこんなことを言うか…

今はチヤホヤされて

話題性を買われて

各メディアに引っ張りだこだと思いますが…

 

コレカラの地図

「コレカラ。。。ドウナルノ?」

 

私は応援しているからこそ、三人の将来が不安なのです!!

いなくなってほしくないのです!!

 

考察するに…

中居くんの存在が大きいのではないかと感じています。

 

SMAPにとって

木村くんは アイドル カッコイイの象徴

中居くんは リーダー まとめ

 

この”図”は大きい。そう感じました。

 

 

f:id:tsubasa8770:20180511170938p:plain

新しい地図】のマスコットキャラクター ”図っくん’



この記事が予言とならないことを祈っています!

ガンバレ!新しい地図

応援しよう!ファン!

 

新しい本が出ました。笑

なので買ってみました…

三人や周りのザキヤマなどの芸能人の言葉から考察されています。

 

 一度目を通してみると共感する人も多いかもしれませんね!

 

 
 
 

〜オススメ記事〜

 

#6「クソ野郎と美しき世界」クソ野郎の感想 - バッチャン 日常バッサバッサ

 

 

#13 【家庭教師バイト】のメリットとデメリット

 

大学生は様々なバイトをしていると思います。

 

その中であまり情報が入ってこないバイトの種類があります。

 

家庭教師もわかりにくいのではないでしょうか。

 

なので、今回は一年あまりですが

私が家庭教師のバイトをやってみての体験を踏まえて

メリットとデメリットを挙げてみたいと思います。

f:id:tsubasa8770:20180509114406j:image

 

【メリット】

  1. バイトシフトが自由
  2. 短時間で稼げる
  3. 説明する(プレゼン)能力が上がる

 

上から順に説明していきたいと思います。

 

 

1. バイトシフトが自由

家庭教師のバイトは[月4回以上指導]などという決め方が多いです。

そのため、家庭と自分とで4回以上指導できれば良いのです。

つまり、少しばかり部活や遊びがあれば、そっちを優先して振り替えてもらうことができてしまうということです。(笑)

これは遊びたい大学生には良いのではないでしょうか。

 

 

2. 短時間で稼げる

私は現在[家庭教師のあすなろ]というところで働いていますが

時給2000円です。(笑)

バカ高いですよね…なぜそんなに高いのでしょうか

それは兄弟を同時に教えているからです。

一対一でさえも、1750円です。(家庭教師のあすなろの場合)

これはとても効率的だと思います。

 

 

3. 説明する能力(プレゼン)能力が上がる

バイトと言えど、家庭教師ですので教えなければなりません。

家庭教師を受ける子というのは頭の良い、優秀な生徒というイメージがあるかもしれませんが、実際はそんなことありません。

集団塾ではついていけなかった子が多いため、基礎の基礎から指導しなければなりません。

なので、【参考書を読んで理解する】 このこと自体ができない子たちが多いのです。

そこではやはり、参考書よりももっとわかりやすい言葉で図で説明できなければ伝わりません。

【自分が分かっていることを、よりわかりやすく、みんなに説明する】

という点において大学でのプレゼンと大きく似ているため、必然的に説明する能力が上がると思います。

 

 

【デメリット】

  1. アタリハズレが大きい
  2. 移動時間がバカらしくなる
  3. プラン、方針を練らなければならない

 

では一方でデメリットをあげてみたいと思います。

 

1.アタリハズレが大きい

生徒をアタリだのハズレなどという言葉にするのは良くないかもしれませんが、本当にそうなのです。

 もちろん吸収の良い子であったり、ちゃんと宿題をやって来る子もいますが

私の体験では

教育熱心なお母さんと意見の食い違いが起きたり、もっとこうしてもらいたい という長文LINEだとかが来ました。笑(対処するのが辛かった。。。)

それだけではありません。

生徒のレベルもそれぞれなので、

例えば中学二年生にもなって通分ができない なんて子もいます。

こういう子は小学校から復習しなければなりません。

そうなると月4回程度ではどうしようもなかったり…。

生徒によって問題はそれぞれなのです。

 

2. 移動時間がバカらしくなる

 家庭教師の指導時間はの家庭が

2時間や1時間半です。

交通費も全額出してもらえることがほとんどだと思います。

家庭教師のバイトは何軒も持つ人が多いです。

たまたま自分の家の近くなら、移動時間もかかりませんが、そんなうまくばかりは行きません。

例えば、【片道30分、指導時間1時間半、時給2000円】だとすると…

バイト時間が少ない割に1日のバイトはこれしかできません。

1日で3000円ってことです。

つまり実質稼げないのです。

なんかバカらしいと思いませんか?(笑)

 

3. プラン、方針を練らなければならない

1 でも書きましたが、生徒のレベルがそれぞれ違います。

進度も人それぞれだと言いました。

それに集団塾と違ってカリキュラムが決まっているわけでもありません。

そのため、先生自身がこれからのプランを考えなければならないのです。

生徒が思わぬところで、つまづくことだってあります。

もしそうなったら、プランを変更しなければなりません。

生徒がなかなか成績をあげれなくても、良識ある保護者だったら、先生側を責めることはあまりないでしょう。何せ[月4回程度]ですから。

しかし、自分が責任を感じない人はいないと思います。

これはとても難しい問題だと思います。

 

 

まとめ

【メリット】と【デメリット】を挙げてみましたが、みなさんはどう思ったでしょうか。

オススメは違うバイトとの掛け持ちです。

家庭教師だけではなかなか稼ぎが悪いです。

塾講師:週2、3  家庭教師:1

という形が1番良いと思います。

ぜひ、みなさんの参考になることを望んでいます。

読んでいただきありがとうございます!!