ホームページ >ウェブフロントエンド >jsチュートリアル >2 人の開発者の物語: 賢者とクレヨンを食べる人
かつて、コードの国では、2 人の開発者がまったく異なる道を歩いていました。1 人は最高級のジャック ダニエルのロックを飲みながら、もう 1 人は DSL クレヨンの入ったレインボー ボックスを握りしめ、クールエイドをがぶ飲みしていました明日がなかったかのようなモクテル。
合唱する群衆で満たされた賑やかな王国で、クレヨンイーターは、魔法のショートカットと甘い構文を約束する、Angular、Vue、Svelte という輝く新しいフレームワークのボックスを発見しました。
クレヨンを食べる人は歓喜の声を上げ、デジタル羊皮紙に急いで落書きしました。
<!-- The Crayon-Eater's Favorite Scribble --> <div v-for="item in list" :class="{ active: isActive }" v-if="shouldDisplay"> {{ item }} </div>
彼は町の人々に自慢しました、「私の宣言的の傑作を見てください! 私には監視者、監視者の監視者、監視者の監視者がどれだけいるかを見てください!」
ビルド パイプラインに祈るたびに、新たな犠牲が要求されることを彼はほとんど知りませんでした:
npm run dev Compiling... Compiling... (∞ waiting time)
「それだけの価値はある!」 彼は、朝露のように蒸発していく時間にも気付かずに叫びました。
クレヨン王国の喧騒を遥かに超えた、山の上に佇む 賢明な開発者は、純粋な JavaScript の静かな流れを眺めながら瞑想していました。ジャックダニエルの瓶が彼の傍らに静かに置かれていた。
賢明な開発者は次のようなコードを書きました:
<!-- The Wise Developer’s Harmony --> <ul> {%renderList%} </ul>
renderList() { return this.getState('items') .map(item => `<li> <p>There were no frantic compile steps or ephemeral DSL syntax. <strong>No arcane watchers</strong>. No sacrifices to the pipeline gods. Just code that rendered directly in the browser, as nature (and JavaScript) intended.</p> <p>Sipping from the JD flask, the Wise Developer observed, <strong>"I see no reason to overcomplicate. JavaScript and HTML were born in the browser, so let them live freely."</strong></p> <hr> <h2> <strong>CHAPTER 3: THE CRAYON-EATER’S UNENDING QUEST</strong> </h2> <p>Meanwhile, back in the Crayon Kingdom, the poor Crayon-Eater found himself drowning in new rules and rituals. Every day, new framework overlords demanded new offerings: </p> <ul> <li> <strong>Vue Composition API</strong>: "Rewrite your entire code again or remain in the darkness." </li> <li> <strong>Angular RxJS</strong>: "Behold the many pipelines you must chain!" </li> <li> <strong>Svelte $:</strong>: "Reactiveness is bestowed upon you... but the debugging? That is your burden alone."</li> </ul> <p>The Crayon-Eater kept adding more crayons to his arsenal, from store libraries to CSS preprocessors, layering them like an over-stuffed burrito. He bragged to onlookers, "Look how advanced my setup is! I have an entire carnival of watchers, bundlers, and reactivity loops at my command!"</p> <p>But those same watchers kept him up at night, whispering, "Another update is coming. Another rewrite is looming..."</p> <hr> <h2> <strong>CHAPTER 4: A SIP OF REALITY</strong> </h2> <p>Word of the Wise Developer’s simpler path reached the Crayon-Eater. Curious (or perhaps desperate), the Crayon-Eater ventured forth to the mountain retreat. </p> <p>He arrived breathless, DSL crayons clutched in sweaty hands, and asked, <strong>“Wise Developer, how can you ship code so quickly and seamlessly? My pipeline prayers cost me half my life expectancy!”</strong></p> <p>The Wise Developer poured a glass of <strong>Jack Daniel’s</strong> and replied, <strong>"The path to clarity is in freeing yourself from magical frameworks. Once you see that HTML and JS alone can do the job, you no longer need to sacrifice your time to the Crayon gods."</strong></p> <p>Then, as if to demonstrate, the Wise Developer showed a simple event-binding technique—no cryptic DSL, no abstract watchers:<br> </p> <pre class="brush:php;toolbar:false"><button {@click=handleClick@}>Click Me</button>
handleClick() { alert('Button clicked! Simple, right?'); }
クレヨンイーターの目が見開かれました。 「ビルドステップがありませんか?監視者はいませんか?ただの JavaScript ですか?」
「その通りです」 賢者は答えました。 「さあ、これを飲んでください。甘いクールエイドのモクテルよりも滑らかです。」
クレヨンイーターは震える手でJDをすすりました。砂糖は入っていません。人工香料は入っていません。まさに本物の、力強いウイスキー。突然、クレヨンイーターは、その幻影のありのままの姿を目にしました。DSL 構文の虹の迷宮、中途半端なウォッチャー、かつてはとても魔法のように見えた余分な州ライブラリです。
彼の視点は打ち砕かれました:
クレヨンを食べる人はクレヨンを指から滑り落とし、涙をあふれさせました。 「わかりました。私のコードはあなたのいわゆる「魔法」に連鎖していましたが、あなたのコードは純粋な JS で自由に動き回っていました。」
その瞬間、HTML を混ぜた啓蒙の明るい光が、クレヨンイーターの心に突き刺さりました。
賢明な開発者は、この啓示を見て、比較を示しました:
Feature | Crayon Dev's Vue | Wise Dev’s JD Path |
---|---|---|
Conditionals | v-if="condition" | {%renderConditional%} |
Loops | v-for="item in list" | {%renderList%} |
Two-Way Binding | v-model="value" | {%input=value%} |
Event Binding | @click="handleClick" | {@click=handleClick@} |
Attribute Binding | v-bind:src="imageSrc" | src="{{imageSrc}}" |
Class Binding | v-bind:class="{ active: isActive }" | class="{{className}}" |
Style Binding | v-bind:style="{ color: textColor }" | style="{{textStyle}}" |
「クレヨンは決して必要ではありませんでした」 と賢明な開発者は言いました。 「私たちが必要としたのは基本的なものだけでした。砂糖を多く含むミキサーなしで自立する良質なウイスキーのようなものです。」
クレヨンイーターは圧倒されて膝から崩れ落ちました。 「光が見えてきた」彼はささやきました。 「もう、パイプラインの神様の前にひざまずいて、クールエイドのモクテルをがぶ飲みすることはありません。賢い開発者よ、あなたの方法を教えてください。私が自由にコードを書き、恥じることなく JD を飲めるようになります。」
賢明な開発者の顔に笑みが浮かびました。 「立ち上がれ、友よ。シンプルさの陽の光の中でコードを書く時間です。古いクレヨンは燃やしましょう。クレヨンはその役目を終えました。私たちは、無限のフレームワークの圧制から解放され、ブラウザーで直接実行される JavaScript を作成します。乾杯しましょう。」それ。」
彼らはグラスをカチャカチャ鳴らしました - 周りにはジャックダニエルがいます。新たに変身したクレヨンイーターは、正しく行われたコードのスモーキーで純粋な風味を味わいました。
この言葉はコードの国中に広まりました。中には電話を拒否し、頑固にクレヨンにしがみつき、DSL のおしゃべりでチャット ルームを埋め尽くし、ボタンを 1 つコンパイルするまで 47 秒も待った人もいました。他の人たちは光を見て、指令の入った箱を脇に放り出し、DSL の束縛から解放されて JD シッパーの仲間入りを果たしました。
そして、二人の開発者、賢者と元クレヨンを食べる人が団結して、世界に新しい道を示すことになりました。クールエイドのモクテルはもう必要ありません。きしむクレヨンも増え、終わりのないパイプラインの祈りも間違いなくなくなりました。
彼らは日没に向けてコードを書き、動作するアプリを作成しました。そして、DSL の複雑さの祭壇を未だに崇拝している人々はどうでしょうか?さて、彼らは次の大きな枠組みを祈りながら唱え続けました。しかし時折、彼らが物欲しそうに近くの山を見つめ、甘くて甘い JD のロックを一口だけ欲しがる姿を見かけることがありました。
終わり。
クレヨンやクールエイドに夢中になっているときは、純粋な JavaScript と HTML を使用するには許可が必要ないことを思い出してください。ジャック ダニエルをグラスに注ぎ、DSL クレヨンを落とし、賢者のようにコードを書きましょう。
以上が2 人の開発者の物語: 賢者とクレヨンを食べる人の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。