Home

【 ※JS初心者必見 】JS未経験者がJavaScript(JS)でつまずくポイントについてまとめてみた! - 「var」と「let」と「const」と、

はじめに 【随時更新】 ※ 本記事の対象読者は、JS初心者の方を想定しております。 個人的にJavaScript(JS)のプログラミングをしていて詰まった点について、Qiitaの記事にしてみました。 執筆経緯としては、 これまで言語問わず、プログラミングで分からないポイントがあれば、 随時、Google検索等で調べて解決してきましたが、どうも自分自身のスキルアップにつながっていないなと感じる日々が続いていました。考えられる要因としては、「その場しのぎの知識で対応し、調べた技術や知...

Font Awesome 5でjs+SVGとWeb Font+cssのどちらで描画するか問題

Font Awesome 5 公式ページ 具体的な導入の仕方は公式にも書いてますし、日本語で教えてほしかったらググったら先人の記事が出てきます。 この記事で書くこと versionが5系になってから導入方法(描画方法)が大きく分けて2種類選べるようになりました。 js+SVG Web Font+css WordPressで作成するときにFont Awesome 5を組み込むとなると、 どちらにせよファイルをDLする必要があるのですが、その話は置いときます。 んで、なんとなくでjs+SVGを選んでいたのですが訳あって最終的にはW...

JavaScript基礎 Switch

JavaScript勉強中につき、以下の書籍を読んでいるのですが、学んだことを残そうと思います。 JavaScript パターン(優れたアプリケーションのための作法) switchの書き方 読みやすさと堅牢さを考慮すると以下にするのがベストです。 var expression = 0, result = ''; switch(expression){ case 0: result = "zero"; break; case 1: result = "one"; break; default: result = "unknown"; } switchとcaseは揃えて、case内のコードのインデントを下げます。 caseの最後...

e.targetの扱いには注意しよう

Javascript(特にjQuery)でイベントハンドラとか、リスナを使うときに何も考えずにe.targetを使うとハマるよって話。 ES6が浸透して来て、アロー関数でリスナなどの関数を書く頻度が増えてきたことだと思います。 その関数内で、要素を取得してdata-idみたいな情報を取得したいなんてことはよくありますね。 そんなとき、以前はthisを使っていればよかったのですが、アロー関数ではthisはイベントの起こった要素を指さないのでイベントの関数の引数から頑張って持ってくる必要がありま...

nodemonで特定ファイルが変更された場合に特定プロセスを再起動するコマンドメモ

コマンド内容 scssが追加された場合や、package.jsonが追加された場合に再起動する $ nodemon -e scss --watch package.json -x 'webpack --watch'

【備忘録】id名やclass名を日本語で書いてみた結果

実際に使う場面が有るかどうかはさておき。。。 一応、こんなことも出来るのかというメモまでに。 参考サイト CSSのid,class名には日本語や記号が使用可能(すべてのブラウザで) | iwb.jp 【検証】id名やclass名に日本語を書いてみる 実際にどうなるか、CodePenにて書いてみたのがこちらです。 (CSSやJSをポチポチしながら、コードをご確認ください。) See the Pen 【検証実験】id名やclass名に日本語(漢字やひらがな)を使ってみる by kako3 (@kako3) on CodePen. 本当に、つかえた...

【備忘録】idやclassの先頭文字に数字は使えないけど、使いたいときにやること(使いたい時は、数字をエスケープする)

たまーにid名やclass名の先頭に数字を入れたいことが有るのですが、 CSSやjs側に数字をそのまま記載すると反映されません。 一応、どんな事になるか&どうやって対応するか そして、それをCodePenで実際に書いてみた結果も含めてメモを残します。 【問題】id名やclass名の先頭に数字を記載すると、反映されない id名やclass名の先頭に数字を記載すると、記載したstyleは反映されません。 なので、数字そのものをid名やclass名として記載すると、記載したstyleはやっぱり反映されま...

New Tab Draft - Clean and Convenient

A whole new way to use your Chrome Tab. Open a new tab to take notes, inspirations and make calculations New Tab Draft focus on cleaner & simpler writing experience on Chrome. Easy You can just open a new tab and write down whatever you want. Next time you open a new tab, things you typed last time will still be there. Note List You can create multiple drafts for your need. Protect your privacy New Tab Draft help you save it in your browser...

フロント周り 必要となる知識を広く浅く学ぶ01

目的 フロント周りで必要となる知識を広く浅く学び、実務に生かす。 内容 HTML HTMLとは Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ) Webページを作るための最も基本的なマークアップ言語のひとつ。他にはXML、XHML、SGMLなどある。 マークアップ言語の種類と特徴 HTMLができた理由 研究者が研究状況の確認や資料を探すなどの行為を、簡単に探して見ることができる方法はないかと考えて生まれた。生まれた場所は、スイス・ジュネーブにあるCERN(欧州原...

loopback.jsフレームワーク

loopbackとは IBMが2015年に買収したAPI用のフレームワーク Android、Objective-Cにも対応している インストール $ sudo npm install -g strongloop アプリケーション作成 $ mkdir loopback-tutorial & cd loopback-tutorial $ slc loopback アプリ名を入力する アプリケーションを起動 $ node .

【Laravel】eventを2回以上呼ばないようにjQueryで制御する

「送信ボタンを押してメールを送る」実装を以下のようにeventで実装している。 このままだと、ボタンを押した数だけeventが発動してしまうのでメールが何通も送られてしまう。 public function postMail() { event(new MailEvent()); return redirect()->route("index"); } これを解消する1つの手段として、jQueryを使ってクリック時のeventを制御する方法がある。 ポイントとしては click dblclick(ダブルクリック)の2つの場合を考慮しておくこと。 $(()=>{ var...

jsプラグイン「iziToast」で超簡単にトースト(通知バー)を表示

iziToastのモーダルウィンドウ版はこちら iziModalで超簡単にモーダルウィンドウを作成 - Qiita 0.はじめに 「ねえ、ちょっと通知バー作ってみてよJavaScriptで」 そんなこと言われて「え?」となった経験はありませんか? 「ほら、あのサイト行ったら最初に出てくるでしょ。あんな感じで作ってくれない?」 「は、はあ…」 と行った感じで作り始めるわけですが、 「そもそもJavaScriptよくわからんし、どうすりゃいいんだ…」 となった時に、iziToastを使えばその悩みを解決できるかも...

[MDN]JS基本文法のまとめ

JavaScriptを改めて基礎から学び直そうとJavaScript | MDNを片っ端からやっています!今回は文法について学んだのでメモとして書いています。下記ページをなぞりながら進めていますが、興味本位でコードを足したりしています。 文法とデータ型 - JavaScript | MDN コメントアウト // 一行のコメント /* 複数行からなるコメント 複数行からなるコメント */ 宣言 var: 変数を宣言し, ある値に初期化することもできる let: ブロックスコープのローカル変数を宣言し, ある値...

フロント周り 必要となる知識を広く浅く学ぶ02

目的 フロント周りで必要となる知識を広く浅く学び、実務に生かす。 内容 WHATWG WHATWGとは Web Hypertext Application Technology Working Group HTMLとWebアプリケーションに必要なAPIの開発に取り組んでいるコミュニティ About WHATWG 設立した背景 2004年、既存団体であるW3C(World Wide Web Consortium)が考えているXHTMLについての方向性、Webサイト構築現場のニーズへの対応に対して不満を表明した、Apple、Mozilla、Operaに所属するメンバーにより設立 実務 HTML5/CSS3の...

async/awaitでErrorをGoっぽく書きたかった

非同期のエラー処理 フロントでは非同期処理でエラーを捌くことが多い。 普通だったら Promise で catch すればいいが・・・ 複雑なエラー処理 「複数の非同期 を 直列 で実行したい」 こういうとき、どうなるか Promise でやる これを見て欲しい。 function foo() { return new Promise((resolve, reject) => { let result_1; fetch('/foo') .catch(() => { reject({ errorType: 1 }); return new Promise(() => {}); }) .then...

お手軽にWeb廃墟を作成するためのTips

どうもこんにちは、 某会津大学で意味不明なものを作成しているB3 飛ばすはとバスと申します。 いつもはArduinoやESP series, Rasoberry piなどを利用して、頭の悪い工作をしています。 ELECTRICAL COMMUNICATION引き裂かれてる IMAGINATION誰にも 邪魔させないSparkしてる ROCK ACTION打ち砕け MEDITATION狂った現実(いま)を焼き捨てたい pic.twitter.com/qriS4L4seB— 飛ばすはとバス (@flying_hato_bus) 2017年9月3日 こんなものを作ったり 藁にもすがるような思いでアンキパンを印...

HTML/CSS/JSのリファレンス

せっかちな人のために 読まなくて良い。 スキャンして。 https://www.w3.org/TR/html/ https://developer.mozilla.org/ja/docs/Web/CSS/Reference https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference http://api.jquery.com/ この記事、何なの? 書籍は入門にはちょうどいいし、Webの記事は特定の問題を解決してくれる。 けれど、未知の何かを自分で作れるようになるには「Webで使える部品」を把握してそれを好きなカタチに組み立てられないといけない。 その部品集であ...

スライダー・カルーセル

スライダー Vegas Vegas Background SlideShow ken burns 効果でスライド切替え可能 切替時のエフェクト多数 Smoothslides Smoothslides Demo ken burns 効果でスライド切替え可能 ただし画像が拡大される。 slick slick - the last carousel you'll ever need ・レスポンシブ対応 FlexSlider FlexSlider 2 ・Carousel ・ bxSlider jQuery Content Slider | Responsive jQuery Slider | bxSlider

【即時関数&タイマー処理(setInterval,setTimeout)】JavaScriptのお勉強

即時関数とは その場で関数を定義して,直後に使いたいときなどに使う. 書き方 即時関数.html /* 即時関数 */ (function plus(number) { var x = 10, y = 5; console.log(x + y + number); })(20); 即時関数.html /* 定義後即座に呼び出すので関数名を定義しなくてもいい */ (function (number) { var x = 10, y = 5; console.log(x + y + number); })(20); 実行結果 これをscriptタグの中で...

星の軌跡のような描画をCanvasで実装してみた。

続編。変更点は・描画開始位置をランダムに・線の太さをランダムに・スタート、ストップ、リセット機能を追加 pic.twitter.com/f4lCrw9uLN— らいと (@moshi1121) 2018年4月4日 訳があって、ゆるキャンΔOPのパロディ動画を作成することになりまして。OPチェックしていたところ、サビ前に富士山と星の軌跡が描かれている部分がありました。 これを作らなければいけないと考えたところ、めんどくさいなパラメータがみるみる上昇してきまして。 だったら、JavaScriptでコード書いてCanvas...