タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。 Vanilla JS ＆ SPAとは？ Vanilla（バニラ） JSというのは何もフレームワークを使っていない素のJavaScriptのことです。 ただのJavaScriptなんですが、ジョークでフレームワーク風の公式サイト？っぽいものがあったりします。 SPAというのはシングルページアプリケーションの略です。 ページごとにHTMLを用意するのではなく、1つのHTMLの中でJavaScriptに
Vanilla JSでSPAやったるで
TL;DR JS史上最軽量フレームワークと名高いVanilla JSでSPAしてみました。 今回目指すSPAの仕様 URLに対応するページが表示される。アンカーリンクをクリックするとURLが変更され、ページが遷移する。その際、画面のリロードは発生しない。 ブラウザバックを押下すると、画面のリロードをせずに前表示していたページに戻る。 URLから変数を受け取り、画面に反映させる。 画面を用意 以下のようなindex.htmlを用意しました。 ヘッダー内ににアンカーリンクと、コンテンツにSPAの描画先としてid="app"のdivタグを配置しています。 <html> <head> <title>バニラでSPA</title> <meta charset="UTF-8" /> </head> <body> <header> <a href="/">TOP</a> <a href="/home">
GitHub - sachinchoolur/jquery-to-javascript-converter: Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.
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
【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ 2019 12/15 最近では脱jQueryの流れがきている、という情報を目にしてさっそく脱jQueryしてみることに。 ...と思ったのですが、いざやってみるとかなり苦労しました。 なので、今回はその備忘録としてjQueryからネイティブJS（Vanilla JS）への書き換え方をまとめていこうと思います。 というか、本当に脱jQueryしたほうがいいの？ ということは一旦置いておいて、好奇心の赴くままにやっていきましょう。 ちなみに、『Vanilla JS』というのはフレームワークとかの名前ではなく、ただのJavaScriptのことです。 ※ 書きかけの部分やら中途半端なもありますが、ご了承ください。
GitHub - wstaeblein/texthighlighter: Vanilla JS class to highlight search results in a textarea while maintaining the area's functionality
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
元々JQueryを多用していた物をVanilla JS（普通のJavascript)に徐々に書き換えていくポイントメモ的な物と関連記事を集めてきたもの。 書き換えの前提 時間がある時に、ちょっとずつ変えていく。一気に変更しない。 普通のJavascriptであれば５年以上は持ちそう。XMLHttpRequestなんて２０年前からある。 JQueryを無理に無くそうとはしない。JQueryじゃなくても良いところを書き換えていく。(ただしJQuery1.xは脆弱性があるので3.xにする） 中途半端に変えるとわかりにくくなる場合もある。時間と人に余裕があるなら最初から作り直すことも考える。 そのままでIE11でも動くようにする。Babelの使用までは考えない。 なるべく自力で書き換える場合の例なので、実際はある程度共通化したり、ライブラリ等を活用した方が良いかもしれない。 ブラウザによって未対応
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
HTML5とVanilla JSだけで作られたオープンソースのミニプロジェクト集「Vanilla Web Project」 Vanilla Web Project https://github.com/bradtraversy/vanillawebprojects Vanilla Web Projectの特徴 「Vanilla Web Project」は、HTML5とCSS、Vanilla JS（ピュアJS）だけで作られたオープンソースプロジェクト集です。 デザイン・機能もさることながら、フレームワークが一切含まれていない構成のため、再利用しやすいのが最大のメリットです。 Formバリデーター https://vanillawebprojects.com/projects/form-validator/ ビデオプレーヤー https://vanillawebprojects.com/pr
Last week, I started a series on how Reef, my 2.5kb alternative to React and Vue, works under-the-hood. First, we learned how to convert markup strings into real HTML elements. Then, we learned how to create a map of the DOM tree. Today, we’re going to learn how to put them both together to diff the DOM and selectively update just the things that need changing. Quick head up: this is a bit more co
GitHub - VanillaJSChess/VanillaJSChess.github.io: Simple Chess Engine Vanilla JS
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
【Vanilla JS】軽量かつシンプルなモーダルプラグイン『Micromodal.js』 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは。デザイナーの山田です。 激動の2020年が終わろうとしています。今年は本当に大変な1年でした。 来年の今頃はどうなっているのか、今の時点では全く想像ができません。 少しでも世の中が好転しているといいですね。 今回はプラグインのご紹介です。 JavaScriptの自己学習の中で色々なプラグインに巡り合うのですが、その中でも実務に取り入れたいと感じたものを見つけました。 今回の記事が、皆様の参考になれば幸いです。 Table of contents「Micromodal.js」の特徴インストール使い方オプションJavaScriptからモーダルを操作するおわりに「Micromodal.js」の特徴「Micromodal.js」は、jQueryを用いない、純粋なJavaScriptで作られています。 非常に軽量かつ、アクセシビリティにも対応しており、モダンなプラグインといえるでしょう。
Xtend UI is a powerful frontend library of Tailwind CSS components enhanced by vanilla js. It helps you build interfaces with advanced interactions and animations
Custom UI made easy with simplicity and total freedomXtend UI is a powerful frontend library of Tailwind CSS components enhanced by vanilla js. It helps you build interfaces with advanced interactions and animations.
GitHub - chakra-ui/zag: Finite state machines for building accessible design systems and UI components. Works with modern frameworks, and even just Vanilla JS
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
Vanilla.js チートシート - Qiita
document.querySelector('selectorName') document.querySelectorAll('selectorName')
GitHub - ssleptsov/ninja-keys: Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.
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
DOM diffing with vanilla JS
A couple of weeks ago, we looked at how to build reactive, state-based components with vanilla JS. How to create a state-based UI component How to add reactivity to a state-based UI component with Proxies How to batch UI rendering for better performance Today, we’re going to learn how to add DOM diffing to our component. If you haven’t yet, go back and read the first three articles, or today’s won
GitHub - beholdr/maska: Simple zero-dependency input mask for Vue, Svelte, Alpine.js and vanilla JS.
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ | WEMO
![まだ無くならない模造品SDカード、本物のSDカードと比べて真贋を判断する術を知ろう[Sponsored]](https://cdn-ak-scissors.b.st-hatena.com/image/square/51682374b3eecc2cba4db82950a42a4da240f8f7/height=288;version=1;width=512/https%3A%2F%2Fakiba-pc.watch.impress.co.jp%2Fimg%2Fah%2Flist%2F1629%2F193%2Fa01.jpg)
JQueryをVanilla JSに緩やかに置き換える - Qiita
GitHub - unjs/unctx: 🍦 Composables in vanilla JS
HTML5とVanilla JSだけで作られたオープンソースのミニプロジェクト集「Vanilla Web Project」
DOM diffing with vanilla JS: part 1
www.google.com
shirouto-name.com
www.asahi.com
shift-ai.co.jp
kaori0.ub.geo.jp
www.nishinippon.co.jp