VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita

はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。 Vanilla JS ＆ SPAとは？ Vanilla（バニラ） JSというのは何もフレームワークを使っていない素のJavaScriptのことです。 ただのJavaScriptなんですが、ジョークでフレームワーク風の公式サイト？っぽいものがあったりします。 SPAというのはシングルページアプリケーションの略です。 ページごとにHTMLを用意するのではなく、1つのHTMLの中でJavaScriptに

[ockeghem]

オフトピだが「jQueryは恥だが役に立つ」というフレーズが気に入ったw

[ultimatebreak]

jQueryは一般的なWebサイトだとバリバリの現役で、むしろReactやVueの方が影が薄い。なぜかというとそれで困ってないし零細レベルだと生でJSかける人がいなかったりするので下手にトレンド入れた方が後で困るケースがある

[peketamin]

“バニラならフレームワークが不要な分ダウンロードが速いかな、という考えでしたが、実はそこまででもないということが分かりました。 ”

[taguch1]

一回素手でやってみるの理解が進んでいいよね。

[yarumato]

外部依存なしで説明されると何やってるか理解しやすい。“VueやReactよりバニラの方が速い。npmでBabel,webpack使う。1コンポーネント1ファイルで画面構築。CSSをコンポーネントに閉じるSass。SPAでURL扱うルーティング。JS圧縮”

[cpw]

webpack使うならreactとか使ったほうが良いな。webpack使わないくらいまで振れるならvanillaの方が良いと思う。というか普通のページでSPAはやんないほうが良いと思う。

[hurafula]

数年前くらいのモダンなフロントすらよくわかってないおっさんなのでこのくらいがちょうどいい

[dalmacija]

これはこれで参考になる。尊い。

[atico]

この後でnext.jsやtypescriptを身につけると、各コンポーネントが型により守られることや、画面ごとにjsが分割してロードされるので初期画面が速かったり、静的ファイルに出来ることに対して、より感動できそう。

[odakaho]

jQueryはトランスパイルなんかしてられないペライチサイトで必須 “テキストボックス・チェックボックス・プルダウンなどの入力要素が１画面に１万個以上”

[ys0000]

軽い気持ちで開いたらめっちゃ長くて1/3も読まないまま離脱。読み返したくはあるが忘れてしまいそう。

[miragestlike]

すごく良くまとまってる

[hylom]

IE対応以外でjQueryが必要になる/jQueryの方が便利、というシーンってどの辺なのかが気になる

[onesplat]

なんか懐かしさがすごい…。

[hasiduki]

楽しそう！

[kobito19]

"vanillaつーかノーフレームワークでの開発は「ブラウザごとの差異を吸収してくれる」とかの丸めが無くなる" babelもpolyfillも入っとるがな

[s_rsak]

楽に書けてブラウザ差異も吸収してくれる jQuery を使わない人間は、一体、何と戦っているんだ。

[prjpn]

漢は黙ってGatsbyなんだよ

[rararoro-ryo]

とある理由でフレームワークが使えないので、vanillajsもしくはsvelteを使う

[Shinwiki]

Node.js入れてパッケージだくでもvanilla言うんだ

[mayumayu_nimolove]

jQueryは古い案件で人が作ったコードに手を入れる時結構使う。大体書き換えちゃうけど。