title | emoji | type | topics | published | ||
---|---|---|---|---|---|---|
宣言型プログラミングと命令型プログラミング |
👩🏼💻 |
tech |
|
true |
宣言型プログラミングのほうが命令型プログラミングより読みやすいです ReactやVueなど宣言型で記述されています📝
何をするのか(What)を記述するプログラミング言語です。 具体的な処理はメソッドによって抽象化されて隠蔽されるので、読むときはメソッドの名前を見ると何をしているのかわかりやすいです。React,Vueは宣言的に記述できます。
Reactで宣言的に書くと次のようになります。 HTMLが視覚的に表示されているためわかりやすいです。
const { render } = ReactDOM;
const Welcome = () => (
<div id="welcome">
<h1>Hello World</h1>
</div>
);
render(<Welcome />, document.getElementById("target"));
結果を得るための手順(How)を記述するプログラミング言語です。 処理を一つずつ書く必要があるためコメントがないと可読性が下がります。
素のjsで命令的に書くと次のようになります。 DOM操作をしていますが、ぱっと見何をしているかわかりづらいです。
const target = document.getElementById("target");
const wrapper = document.createElement("div");
const headline = document.createElement("h1");
wrapper.id = "welcome";
headline.innerText = "Hello World";
wrapper.appendChild(headline);
target.appendChild(wrapper);
:::message 素のjsでも宣言的に書くことは可能です。 詳しくは参考書籍をご覧ください📚 :::
Alex Banks、Eve Porcello 著『React ハンズオンラーニング 第 2 版』(オライリー・ジャパン発行)