JavaScript×ポケモン「フェアリータイプ」
前回HTML&CSSを「ノーマルタイプ」と関連付けました。
今回はHTML&CSSともつながりが深いJavaScriptを「フェアリータイプ」と関連付けたいと思います。
フェアリータイプを選んだ理由は、ポケットモンスターxyでフェアリータイプが初登場し、その際にノーマルからフェアリーに変更されたポケモンが何匹かいたからです。
ピッピやトゲピーがそれにあたりますね。
あくまで僕にとって覚えやすいものなので「こんなんじゃ覚えられんわ」という批判は受け入れます。
しかしきっとこの方法が覚えやすいオタクな人たちもこの日本には確実に存在すると思うのでそんな人たちにこの情報を伝えたいです。
以下が関連付けの成果です。
-----------------------------------------------
・フェアリーのタイプ色のピンクが際立った外見
・言語の代表にはメガシンカポケモンを使うようにしているため
2.変数-デデンネ
・let→red赤い頬
・var→頬からV字に生えてる髭
・const→噛む+ハムスター
・作画が「変」と言われ続けたから
3.配列やオブジェクト-メレシー
・オブジェクト(物質)的な外見より
・ディアンシーの配下→配列
4.function(){}、()=>{}-アシレーヌ
・methodメソッド→メソ→涙→水
・メソポタミア、川の間→水
・引数→引水
・上記の理由からmethodメソッド系は言語ごとに海っぽいポケモンを当てはめてる(swiftはルギア、JAVAはダダリンなど)
・アロー関数は頭部ヒトデのかざりと関連づける、もしくはサンムーンの{アロー}ラ
5.setInterval系-ガラルマタドガス
・Interval→長い煙突
・clearInterval→綺麗な空気
・setTimeout→out、外に出るガス
6.alert()系統-ブルー
・番犬→警告、アラート
・confirm→コーン、ファーム→黄色い足+OKダイアログ→O{まるい}、K{コーン}
・prompt→風呂→水玉模様+入力欄ダイアログ→入浴
7.イベント-ゼルネアス
・ストーリー上のイベントでゲットする伝説のポケモン
・addEventListener()→リスナー、角の下の耳
8.HTML要素取得-プリン
・ノーマルとフェアリー両方持つポケモン(HTMLはノーマルとしている)
・getElementBy...→げっと→トゲ→とんがった耳
・querySlector()→クエリ→カーリー→前髪のカール
・HTML要素.style...→スタイル変更→アニメで人の顔に落書きする癖
9.フォーム関係-マホイップ
・changeイベント→姿が様々に変わるところから
・FileReaderインスタンス→リーダー→いちごアメざいく(最も代表的なアメざいく)
・Blobオブジェクト→ブロブ→ブルー→ベリーアメざいく(ブルーベリー)
--------------------------------------------
今回はとりあえずこんな感じでメモっときます。
自分は使用頻度が高いのでJavaScriptが一番好きです、色々面白い動きを加えられますし。
上記の関連付けを一度頭に入れるとJavaScriptを使うって考えただけで一瞬フェアリータイプたちが頭に浮かぶようになりましたねww
ポケモン好きなら興味を持ってプログラミングに挑めるようになるのでおすすめです！
ちなみにJavaScriptで書いたウェブアプリがこれです
https://pushpuff-ac712.firebaseapp.com
https://pushpuffyourself.firebaseapp.com
学習用のサイトなのでよかったならどうぞ
HTML&CSS×ポケモン「ノーマルタイプ」
HTML&CSSはプログラミングで最も最初に学習する項目の一つだと思います。
最も最初で最も基本的なことなのでポケモンの「ノーマルタイプ」と関連づけて覚えました。
あくまで僕にとって覚えやすいものなので「こんなんじゃ覚えられんわ」という批判は受け入れます。
しかしきっとこの方法が覚えやすいオタクな人たちもこの日本には確実に存在すると思うのでそんな人たちにこの情報を伝えたいです。
以下が関連付けの成果です。
------------------------------------------------------------
・切っても切り離せない(HTMLとCSS:親と子)のイメージから
・ノーマルタイプ最強レベルの性能
・<head>や<body>もガルーラと関連づける
2.<h>タグ、<p>タグ-ハピナス
・合わせてhp、HPの化物と言えばハピナス
・{h}a{p}iナスとも読める
3.id、class-ザングース
・idは「#」マークで表され、傷跡と関連付けられる
・classはclawsクロウズ、爪と関連付けられる
4.<ul>タグ系統-ウールー
・<ul>をウールーと読める
・<li>-[l](棒)のeye(i)から、ウールーの瞳孔は棒型
・<ol>- 丸っこく(o)連なる(l)耳?より
5.<a>タグ-ポリゴン
・電脳世界を移動するポケモン→リンクで移動するイメージ
・href属性、HyperTextReference→ハイパー(向こう側)から同じく電脳世界のイメージ
6.<img>タグ-ドーブル
・そのまま絵描きのイメージから
・src属性→source(ソース)から、ドーブルの尻尾
7.borderプロパティ-ハトーボー
・margin-ケンホロウ→目の周りに余分な赤い部分→marginがある
・padding-マメパト→黒目でない部分が広い→padding部分が広い
8.<table>タグ-ムーランド
・ムー{r}aン{d}o→<t{r}><t{d}>タグ
・ムーランドは髭が垂れて「白い」部分が横に伸びている→<colspan>を[凍る]と読み、「白い」と関連づける。結果<colspan>は横に繋がるタグと覚えられる。逆に<rowspan>は凍っていない茶色の部分=生=raw→rowspanと覚えられる。
・機械的なイメージと送信のイメージのリンク
・type属性からタイプが様々に変化するイメージ
・value属性は尻尾の形状(V)より
・method属性は頭部の角後部のギザギザをMと読める、かつアンテナの送信のイメージ
・action属性は頭部の角先端部、矢のような形になっているため「送る」イメージ
10.<meta>タグ-メタモン
・metaからそのままメタモン
・柔軟なイメージもつく
11.position:relative-イエッサン
・頭部がオスメスで大きく異なる(相対的relative)、position:relativeは親要素につける
・体はそれほど変わらない(絶対的absolute)、position:absoluteは子要素につける
・ただし実際に動くのは子要素positon:absolute、つまり体の部分
12.floatプロパティ-ビーダル
・水タイプもふくまれるため水に浮くイメージ
・overflow:hiddenでフロート解除、overを大歯と読む→ビーダルの出っ歯
・伸び縮みできそうな見た目→flex
・justify-content、尻尾の形状がJになっている
・wrap、手のヒレの部分が折り返している→wrap
・まっすぐ伸びる首から髪の分け目→Road→row→flex-flow:row(縦線で分けて横並び)
・逆に頭髪部分に横線もある→絡む→column→flex-flow: column(横線で分けて縦並び)
------------------------------------
とりあえずこんな感じで書いてみました。
剣盾が出たので最近になって改造した部分も一部あります。
まあプログラミングはアウトプットが大事なのでインプットはそこまで気合を入れる必要はないと思います。
しかし最初にHTML&CSSに好感を持つためにはこの方法で覚えるのは間違っていないと僕は考えています。
どんどん忘れていって使おうとするたびに調べるのはめんどくさいですし、上記の方法で全部頭に入れてしまうのも一つの手ではないでしょうか？
「間接プライミング学習」始めました
はじめまして、メタルンと申します！
このブログでは僕が考えた、様々なものの一風変わった覚え方をメモしていきたいと思っています。
例えば原子番号53、ヨウ素をポケモンのクズモーと関連づける覚え方です。
ヨウ素は紫色で海藻に多く含まれています。クズモーは海藻がモチーフのポケモンで名前に「クズ」が入っています。53を「ゴミ」と呼ぶことで「クズ」との共通点を見出し、海藻や紫色という共通点も見つけられます。
もしクズモーを知っているならもうこの時点でなんとなくヨウ素は原子番号53で紫色と頭の中に入ってしまったのではないでしょうか？
こんな感じで興味のない「ターゲット」と興味のある「コンテンツ」を融合して物事を覚えやすくする方法をこれからどんどん紹介していきたいと思っています！
僕の趣味で基本的には「ポケモン」たまに「遊戯王」を使った物事の覚え方を紹介していくことになります。
ターゲットは化学、世界史などの受験科目やプログラミングです。
きっとこんな覚え方が性に合う人は僕以外にもたくさんいると思います。気に入ったら読者登録していただけるとうれしいです。
ちなみに脳科学的には間接プライミング効果と言うらしいですねw
これから「間接プライミング学習」ブログとしてゆるゆるやっていきたいと思います。
それでは本日はこんなところで
https://pushpuff-ac712.firebaseapp.com
↑僕が作ったウェブアプリです。
ブラウザの通知機能を利用して学習をサポートします。
GoogleChromeでしか使えないと思うのでお気をつけください。
