こんにちは。Sorakimeです。

タイトルにありますが、jQueryに匹敵するくらいのフレームワークを自作してみたいと思います。ただ、さすがにそれは難しいので、とりあえず実用的なフレームワークをjQueryを一切使ったことのないわたくしSorakimeが作ってみたいと思います。

開発に至った経緯

ずっと生のJavaScriptを書いてきました。ところが、Electronやその他のWeb技術を用いてアプリケーションを開発することがかなり多くなったと思ったので、効率化を図ったほうが良いと思ったからです。しかし、自分は脱jQuery派人間、というか既存のものの再利用よりできることなら何でも自作しようとする人間なので、自分で自作しました。自作しています。まだ開発中です。また、自分で作ったほうが仕組みや問題点、ソースコードなどがわかりやすい・見やすいと思ったからです。

仕組みというか・・・設計？

ソースコードの作り、というか。なんと説明すればよいのかわかりませんが、中身についてこのセクションでは書きます。
ですが、詳細が必要なのでここに示しておきます。ただし、かなり基本的な情報です。

項目	内容
フレームワーク名	ShortWrite.js
バージョン	自称1.0
言語	JavaScript(ネイティブ)
開発者	Sorakime
メインの変数名	_$
エイリアス	_$

まず、骨組みだけのソースコードを以下に表示します。これを実行しても、合うソースコードを書いたとしても、ユーザに直接見える形では動作しません。

shortwrite.js

var _$={}
window._$=_$;

はい、かなり単純です。まず一行目で_$というオブジェクト、というかハッシュとか連想配列とか言われてるやつを作ります。その中に機能を書いていきます。で、その下の二行目に、ほかのJavaScriptファイルでもこのフレームワークを実行できるようにするなんか呪文みたいなやつがあります。
そんな形になっています。

追記(2020年11月30日)：
最後のwindow._$ですが、もし一番後ろでこのフレームワークを読み込んでいる場合に正常に動作させるために書いております。動作確認したところ、正常に動作しなかったので一応ここに書かせていただいております。なお、一番上の<head>要素内の書かれている分にはwindow._$=_$という文を書かれていなくても動作させることは可能でした。

外からアクセスしてみよう

ほかのファイルからこのshortwrite.jsファイルを読み込んで、実際に使えるようにします。
といっても、さっきのwindow._$=_$;で宣言で来ているのは事実ですけどね。
まずは、さっき作った_$オブジェクトの中身を書きましょう。ここでは、versionというものを用意しました。こういったソースコードになります。

shortwrite.js

var _$={
  version: '1.0'
}
window._$=_$;

というものが出来上がります。では、HTMLファイルからこのフレームワークにアクセスしてみましょう。
では、以下の内容でさっき作ったshortwrite.jsファイルがある階層にhtmlファイルを作ってみましょう。名前は何でもOKです。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="shortwrite.js"></script>
  </head>
  <body>
    <p>Version: <script>document.write(_$.version);</script></p>
  </body>
</html>

開いてみてください。開いたら、この場合Version: 1.0と表示されるはずです。

取り敢えず、記事が長くなりすぎても悪いので、ここらへんで終わります。最後のところ分からなければ、コメント欄へ。
最後まで読んでくださりありがとうございました。

jQueryに匹敵するフレームワークを作ってやる (それはさすがに無理)

目次

開発に至った経緯

仕組みというか・・・設計？

外からアクセスしてみよう