[B! JavaScript] hachiameのブックマーク

JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ - paiza times

どうも、まさとらん︵@0310lan︶です！今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前にこれからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。︻ The Modern JavaScript Tutorial ︼これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや

hachiame 2021/10/15

リンク

清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog

フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blogへの初めての投稿です。﹁サービス共通ヘッダ・フッタ﹂は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。この記事では、LIFULL HOME'Sのサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した﹁強く・堅牢に実装するためのノウハウ﹂を紹介します。どこにでも組み込めるように実装する重複しないクラス名ルールを設定する詳細度や継承とうまく付き合うプレーンな技術を使うブレークポイントや z-index 等をカスタマイズ可能にする

hachiame 2021/09/30

リンク

日本語の折り返しをJavaScriptで制御する - LIVESENSE ENGINEER BLOG

インフラエンジニアの中野(etsxxx)です。今回はWebのフロントの話です。稚拙な部分はご容赦を。はじめに前提知識解決案の候補解決案1: 手でspanタグをつける解決案2: サーバーサイドの処理解決案3: クライアントサイドの処理クライアントサイドで文節区切り実装結果と考察さいごにはじめに 2020年12月、リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあります。 Q by Livesenseはこういう見た目のブログです。 Q by Livesenseは縦書きということで、漢数字を使っていたり、写真やイラストを使わずに純粋な文体で記事を書いていたりと、書籍のような日本語らしさが求められるデザインとなっています。縦書きはWebエンジニアにとっても珍しい実装ですが、読者にとっても慣れないUI

hachiame 2021/02/25

spanタグでグルーピングする発想はなかったから驚き。コードもシンプルな設計で素敵。

リンク

JavaScriptでチェックボックスの選択状態を取得する

ここでは、JavaScript でチェックボックスがチェックされているかどうかを判定する方法について説明します。チェックボックスの状態を取得するためには、input 要素オブジェクトの checked プロパティを使います。チェックボックスに同じ name 属性が付与されている場合ひとまとまりのチェックボックスに対して同じ name 属性が与えられている場合、name 属性を使って各チェックボックスを特定し、それぞれのチェックボックスの checked プロパティが true か否かを順番に調べます。次のサンプルプログラムを見てみましょう。 HTML <form name="form1"> <input type="checkbox" name="fruits" value="りんご">りんご<br> <input type="checkbox" name="fruits" value

hachiame 2021/02/04

リンク

JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ

JavaScript QuestionsのLydia Hallie氏の﹁JavaScript Visualized﹂シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting︵巻き上げ︶など、GIFアニメを使用して詳しく解説しています。シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting︵巻き上げ︶の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの

hachiame 2020/12/16

リンク

フロントエンドから始めるアニメーション最強のライブラリGSAP3を手に入れよう - ICS MEDIA

今日では、ほぼすべてのウェブサイトにアニメーションが使われていると言っても過言ではないでしょう。派手な3Dアニメーションから、UIのマイクロインタラクションまで、その物量や時間のスケールはさまざまです。アニメーション技術もCSSやSVG、Canvasと多岐に渡り、こんな表現まで！？　と驚くようなものも増えました。しかし、複雑なアニメーションになるほどコードは煩雑になり人間の手には負えなくなります。イメージはあるのに具現化できない！　そんな悔しい思いを抱えたまま諦めるしかないのでしょうか？　いえ、道具です。道具を使うのです。本記事ではイメージをダイレクトに表現する手段としてのアニメーションライブラリGSAP3について紹介します。本記事を読むことで、以下の知識が手に入りますウェブにおけるアニメーションの重要性アニメーションライブラリとは？強力なアニメーションライブラリGSAP3

hachiame 2020/08/07

リンク

【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try

はじめに僕は仕事でRubyonRailsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。とくに、文法が一気にブラッシュアップされたES2015︵ES6︶以降の知識は﹁なんとなく把握はしているが、あくまでなんとなく﹂といった感じです。また、最近よく名前を聞くようになったTypeScriptも﹁名前は知っているが使ったことはない﹂というのが現状です。というわけで、﹁そろそろちゃんと勉強しておかないと﹂という思いから、以下の本を購入してみました。 JavaScript Primer　迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ

hachiame 2020/06/30

リンク

【JavaScript】スクロールに応じて文字の色を変える方法

今回は、スクールして到達した位置によって文字の色を変化させる方法を紹介します。まずはデモをご覧ください。DEMOウィンドウに固定された文字が黒の時、背景が黒になると見えなくなってしまいます。それを防ぐために、背景が黒いセクションに到達したら文字の色を白に変化させます。それでは実装方法を紹介していきます。 HTML <header class="header"> <h1 class="title">ここの色が変わります</h1> </header> <div class="wrapper"> <section class="section section--white" id="js-section-1"> <h1>SECTION1</h1> <p>スクロールしてみよう</p> </section> <section class="section section--black"i

hachiame 2020/04/15

リンク

【JavaScript】シングルページで現在地を示すドットのナビゲーションを実装する方法 | カタチップ

公開日：2018年05月06日最終更新日：2021年06月06日【JavaScript】シングルページで現在地を示すドットのナビゲーションを実装する方法コーディングテクニックの実装内容今回はWeb制作におけるJavaScriptの実装でナビゲーションに関する内容です。縦長のシングルページでよく目にする、右側に固定されたドットのページネーション（正式名称不明）。「セクションのカレント（現在地）表示」と「セクション間遷移」の機能を持ったモノを作成しました。スクロールした時の位置によって、ドットのカレントが変化し、ドットをクリックするとアンカー移動機能を持っています。コーディングテクニック使いどころ縦長のシングルページで使用することが非常に多いです。必ず使えるようにしておいたほうがよいでしょう。実装難易度・必要なスキルコーディングとjQueryの基礎的な知識があれば実務未経験のコー

hachiame 2020/04/15

リンク

javascriptでinnerHTMLで指定する対象にダブルクォーテーションが含まれている場合、HTML変換がうまくいかないようなのです... - Yahoo!知恵袋

javascriptでinnerHTMLで指定する対象にダブルクォーテーションが含まれている場合、HTML変換がうまくいかないようなのですが、どなたか解決方法をご存じないでしょうか？ javascriptでinnerHTMLで指定する対象にダブルクォーテーションが含まれている場合、HTML変換がうまくいかないようなのですが、どなたか解決方法をご存じないでしょうか？ HTMLのテーブル内要素に次のような記述があります。 Sort()は自作のjavascriptの関数で、初期表示時は正常に動作します。 <td> <img src="./a.jpg"title="上に移動" onclick="Sort(0, 'up');"> </td> この記述を変更するために、javascriptで次のようにinnerHTMLで代入しています。 cell.innerHTML = '<img src="./a

hachiame 2020/02/18

“シングル（ダブル）クォーテーションをエスケープする”

リンク

バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita

WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア︵フリーランス、非正規雇用に非ず︶です。コンポーネント、ルーティング、スタイル周りの続編を作成しました︵編集が困難になるほど容量圧迫してたので、それぞれで独立させています︶。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン

hachiame 2020/02/05

それぞれの言語での記述例が載っているのと、解説が的確で面白かった。去年買ったVue.jsの本読んでもっと勉強しよう。

リンク

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita

こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト﹁made withvue.js ﹂があります。面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggableドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demovuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Charts vue-cart ショ

hachiame 2020/01/30

リンク

20 年代のフロントエンド.md

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

hachiame 2020/01/30

“IE を言い訳に、最新仕様を勉強しないことへのインセンティブが強く残った。”フロントエンドが発展しない本質だと思う。本当はもっと便利で使える機能があるのに使えないのほもったいない。IE対応はもうやめよう。

リンク

Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita

この記事を読むと VSCode 拡張機能を入れて、下記のようなことが実現します・VSCodeとは別にterminal︵Command Line︶の画面を開かなくても、VSCode内から直接terminal操作ができる︵例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる・インデントが一眼で分かる・htmlタグの開始タグと終了タグを同時に修正できる・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう︵そして、その選択は間違いではないと保証できます︶。さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ

hachiame 2020/01/06

リンク

2020年にJavaScriptフレームワークをちゃんとはじめるために。｜榊原昌彦

結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。・ Angularは、HTMLとJavaScript︵TypeScript︶を分割してかきます。・ Reactは、JavaScriptの中にHTMLを書きます。

hachiame 2020/01/06

“Angularは、HTMLとJavaScript︵TypeScript︶を分割してかきます。Reactは、JavaScriptの中にHTMLを書きます。Vueは、HTMLにJavaScriptを書きます。” この解説、ざっくりしてるけどイメージが掴みやすく、わかりやすくて良かった。 ●JavaScript ●フレームワーク

リンク

ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz

手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。グラフやチャートは、現在7種類に対応しています。棒グラフ︵垂直︶棒グラフ︵水平︶ドーナツ折れ線グラフ円グラフ散布図

hachiame 2019/12/20

手書き風のグラフイラスト、かわいいなー　学校関係とか食事関係とかやわらかい表現の時に使えそう

JavaScript

リンク

React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL

この記事はコネヒト Advent Calendar 2019の11日目の記事です！qiita.com はじめに半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1﹁Full Stack Open 2019﹂という教材がとても良かったので紹介したいと思います。﹁Full Stack Open 2019﹂とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・Mongo DB・GraphQLが一度に学べる教材となっています。教材

hachiame 2019/12/12

リンク

そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。｜榊原昌彦

﹁jQueryはオワコン﹂﹁いや、jQueryは便利！﹂議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。ちなみに結論を先に書いておくと・レンダリングブロックしない構成、かつ最新版を使おう・ jQueryはいいものだけど、脱jQueryした方が手っ取り早いです。 1. 保守しないといけないサポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。 jQuery1, 2 は、Officially End of Life︵公式に廃止︶が名言されてます。ですので、﹁jQuery におけるクロスサイトスクリプティングの脆弱性﹂みたいな報告も修正されていません。EOLのバージョンはやめましょう。ちなみにj

hachiame 2019/11/20

この手の話題ってjQueryが悪者扱いされるケースが多いけど、使う場面に応じて切り分けたら良い話。ライブラリーの豊富さなど良い面もある。

リンク

2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita

以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。もちろんVueとAngularにも多くのフォロアーがついています。さらにはSvelte、Next

hachiame 2019/11/13

リンク

ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition

日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。特に、Reactのフックについて具体的な使い方が解説されています。Icreated the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点隣の家の芝生は青く見える ReactとVueで作成し

hachiame 2019/10/18

リンク

はてなブックマーク

タグ

関連タグで絞り込む (31)

JavaScriptに関するhachiameのブックマーク (358)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス