📣：プログラミングを学び始めたばかりの人や、学習や業務を続ける上でモチベーションを探している人に向けて書きました ✍️
はじめに🖐️
まずは、とある２人の話から
- オードリー若林は、ASIAN KUNG-FU GENERATIONの『ブラックアウト』のギターリフを聴き、その繰り返しの中に新たなインスピレーションを見出しました。
この瞬間は、同じボケを何度も繰り返しても良いという彼らの漫才スタイルの原点になったのです。 - 人工知能の父と言われるマービン・ミンスキーの名言：
"2つ以上の方法で学ばなければ何かを理解することはできない"。
（You don't understand anything until you learn it more than one way.）
「俺には関係ないかな」と思った方！まだ離脱しないでください！
この考えは、異なる分野からの知識がいかに私たちの理解を豊かにするかを表しているんです。
この記事では、
芸術と技術がどう絡み合い、互いにどう影響しあってるか、そしてそれが私たちのプログラミングの学びにどう役立つか、どう手助けになったかを書いていきます。
免責事項
あくまで私見です。
少し強引さが伺えるかもしれません。
目的 🧠
- 芸術と技術の分野がどのように相互に影響し合い、共通の原則を共有しているかを探っていきます。
背景 🌅
- 私も実際に、中学から現在に至るまで音楽を作ったり、学生の頃デザインを専攻した経験からプログラミングの学習の際に何か類似点を感じ、どのように学習や実践に役立ったかの個人的な視点を言語化したいなと感じたことが発端です。
1. 共通の原則 📝
芸術と技術は、それぞれ異なる分野のように思えますが、実は共通する原則や考え方を持っています。
改めてそれぞれの原則を挙げてみると...
『プログラミングの原則』
1. 上から下(線形):
処理の流れは直線であり、順序立てて記述する。
例) 関数やクラスを組み合わせて、複雑な処理を分割し、順序立てて記述することで、プログラムの理解しやすさと可読性を高めることができる
// 左から右に表現されることも同様
// 関数
function add(a, b) {
return a + b;
}
// コンポーネント
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<h1>{count}</h1>
</div>
);
};
2.分岐:
条件に応じて異なる処理を行う。
例) if文やswitch文を使用して、条件に応じて異なる処理を行うことで、プログラムの処理を柔軟に制御することができる
const App = () => {
const age = 21;
if (age >= 20) {
return <h1>あなたは成年です。</h1>;
} else {
return <h1>あなたは未成年です。</h1>;
}
}
3. 繰り返し:
同じ処理を条件に応じて繰り返す。
例) for文やmapを使用して、同じ処理を繰り返すことで、処理を効率化したり、統一感や連続性を表現したりすることができる
const App = () => {
const names = ["山田太郎", "鈴木次郎", "佐藤三郎"];
return (
<div>
{names.map((name) => (
<h1>{name}</h1>
))}
</div>
);
}
『音楽の３原則 (3大要素)』
1. メロディー:
旋律は音楽の核となる要素。音の高低・長短の変化の連続した流れ。
2. リズム:
律動は音楽の時間的な構造を形作る。拍子・ビート、一定周期またはパターンの音。
3. ハーモニー:
和声は異なる音の組み合わせによって深みを加える。複数の高さの音が重なり合いながら変化し、進行していく。
(詳しい例は以下をご覧ください👇)
『デザインの４大原則 (グラフィック)』
1. 近接:
関連する要素をまとめる。
2. 整列:
要素を規則正しく配置する。
3. コントラスト:
情報に強弱をつける。
4. 反復:
同じパターンを繰り返す。
(詳しい例は以下をご覧ください👇)
共通点の探求🧐
これらの原則は、それぞれの分野で
「構造」、「流れ」、「調和」、「バランス」といった共通のテーマを持っています。
プログラミングの 「上から下」 は、音楽のリズムやデザインの整列原則と同様に、作品の構造と流れを形成する重要な要素です。処理の流れを順序立てて記述することで、プログラムの理解しやすさと可読性を高めることができます。
同様に、プログラミングの分岐や繰り返しは、音楽のハーモニーやメロディー、デザインのコントラストや反復と共鳴します。
「分岐」 は、音楽の「リズム」や「ハーモニー」のように、表現が変化する原則です。プログラミングでは、条件分岐や繰り返し処理によって、プログラムの流れに変化を加えることで、表現が変化しプログラムの効果を高めることができます。音楽では、リズムやハーモニーの変化によって、音楽のテンポ感や雰囲気などを柔軟に変えることができます。
「繰り返し」 は、デザインの「反復」や音楽の「メロディ」のように、統一感や連続性を表現する原則です。プログラミングでは、繰り返し処理によって、プログラムの処理を効率化したり、統一感や連続性を表現したりすることができます。
これらの原則は、異なる分野においても創造的な思考や問題解決のプロセスを支える基盤となっているのです。
具体的な例💡
音楽のコード進行とプログラミングの制御構造の類似性
コード進行1は、音の組み合わせによって音楽の感情や雰囲気を表現します。
例えば、ハ長調のⅠ-Ⅴ-Ⅵ-Ⅳというコード進行は、明るく楽しい雰囲気を表現します。
Ⅰ-Ⅴ-Ⅵ-Ⅳの解説 💬
このコード進行は、Ⅰ（トニック）の音が安定感を与え、Ⅴ（ドミナント）の音が緊張感を与え、Ⅵ（サブドミナント）の音が緩和感を与え、Ⅳ（サブドミナントの５度下）の音が安定感を与えることで、明るく楽しい雰囲気を表現しています。👇 Ⅰ-Ⅴ-Ⅵ-Ⅳ進行の例
同様に、プログラミングの制御構造も、条件分岐や繰り返しなどによって、プログラムの流れや挙動を表現します。
例えば、if-else文は、条件によって処理を分岐させる。while文は、条件が満たされるまで繰り返し処理を行います。
このように、コード進行とプログラミングの制御構造は、どちらも組み合わせによって、感情や雰囲気、流れや挙動を表現するという共通点があります。
デザインのレイアウトとプログラミングの構造設計の類似性
デザインのレイアウトは、要素の配置によって視覚的な印象や効果を表現します。例えば、水平方向に要素を配置すると、安定感や安心感を与えます。同様に、プログラミングの構造設計も、要素の配置によってプログラムの可読性や保守性を高めます。例えば、モジュール化によって、プログラムを小さな単位に分割すると、各単位の役割を明確にし、変更や拡張が容易になります。
コンポーネント指向の考え方
近年のプログラミング界では、Reactのようなライブラリやフレームワークが重要な役割を果たしています。Reactは、コンポーネントベースのアーキテクチャを提供することで、開発者が複雑な処理を隠蔽し、再利用可能なパーツとして効率的に扱えるようにします。さらに部品ごとに小さく分けることにより、開発者はパズルを組み替えるようにしてアプリケーションを構築することができ、開発の効率化や品質向上が実現されます。
function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}
(引用：コンポーネントからユーザインターフェースを作成)
音楽においても同じようにパーツを使い回したり、パズルを組み替える感覚で作曲をすることができます。DAW2では、音源やエフェクトなどの素材を組み合わせて、曲を作成することができます。
例えば、ドラム音源やベース音源などの素材を組み合わせることで、簡単にリズムトラックを作成することができます。また、ギターやピアノなどの音源を組み合わせることで、メロディを作成することができます。さらに、エフェクトを組み合わせることで、音色や音質を調整することができます。
2. 音楽制作からの学び🎹
目先のテクニックよりも構造に目が向いた
楽曲制作をしていると、特に全体を把握するという考え方が身についていることが多いです。音楽を作る過程で、徐々に演奏技術を超え、曲全体の構造に焦点を当てるようになります。
たとえば、一流のシンガーやギタリストの技術を真似ることから始めても、実際に自分の曲を作ることで、メロディー、リズム、ハーモニーといった要素のバランスや組み合わせに注意を払うようになります。これは、各要素がどのように全体に貢献するかを理解することで、より洗練された音楽を作るための重要なステップです。
これは、プログラミングの学習や実践においても、テクニックにとらわれず、全体の構造を理解することに注力することで、より効率的かつ効果的なプログラムを作成することにもつながります。
3. プログラミング学習への応用🧑💻
まずは全体の構造を理解すること
私自身、新しいフレームワークなどを勉強する際も大切にしているのが、全体を把握してから細かい部分を理解するという考え方です。
初学者の頃は、デザインの経験でUIの観点が頭の片隅にあったため、HTMLやCSSを学ぶ時は構造からすんなり頭に入ってきましたが、そういったコーディングテクニックを超えて、アプリケーション全体の構造を理解することが重要です。
例えば、初心者の時には、チュートリアルを参考にしながら、一つのWebアプリを丸々完成させることが推奨されます。
これにより、単にコードを書くことだけでなく、アプリケーションがどのように機能するか、各部分がどのように連携するかを理解することができます。全体の流れを捉えることで、より効果的なプログラムを設計し、開発する能力が養われます。
学習の助けとなる視点 👀:
- 要素の組み合わせ：
特に抽象化、モジュール化、など、Reactの学習においての理解に役立ちました。
音楽では、コード進行やメロディーなどの要素を組み合わせて、音楽全体の雰囲気や印象を表現します。同様に、プログラミングでは、変数や関数などの要素を組み合わせて、プログラム全体の構造を理解することが重要です。
先ほどの例にも出したようにReactの設計思想や構造は、コンポーネント指向を体現しています。Reactでは、コンポーネントと呼ばれる小さな単位を組み合わせて、画面全体を構築します。このコンポーネントは、それぞれが独立した役割を持っており、全体の構造を意識して設計することで、複雑な画面でもわかりやすく、保守性の高いプログラムを作成することができます。
4. 相互作用・影響 👊
音楽経験による問題解決能力の向上
音楽制作とプログラミングの分野は、異なる表現形式を持ちながらも、目標達成のための問題解決プロセスという共通の原則を共有しています。音楽制作では、曲を作る際に特定のイメージや目標があり、作曲家やアーティストはこの目標に到達するために楽曲をアレンジし、構築します。例えば、特定の感情を表現するために適切なメロディーやハーモニーを選び、聴衆に特定の反応を引き出すためにリズムやダイナミクスを調整します。
一方、プログラミングでは、特定の要件を満たすソフトウェアやアプリケーションの開発が目標です。開発者は、これらの要件を実現するために最適な技術的解決策を見つける必要があり、ユーザーフレンドリーなインターフェースの構築や効率的なコードの記述などが求められます。
デザインとプログラミングにおける情報整理と優先順位付け
デザインでは、要素の配置や色使いによって視覚的な印象や効果を表現します。ここで重要なのは、どの情報に強調を置き、それをどのように視覚的に表現するかです。対照的に、プログラミングではコード内の情報を整理し、各要素の役割や関係性を明確にすることが重要です。これにより、コードの可読性と保守性が向上します。
これらの分野では、情報を整理し優先順位を付けるプロセスが重要です。どちらの分野でも、クリアで整理された構造は作品の理解と操作を容易にし、効率的な問題解決を促進します。このアプローチは、視覚的な表現と技術的な実装の両方において、より効果的でユーザーフレンドリーな結果を生み出す基盤となります。
私は実際に、コードを書く前に設計として簡単に絵や図にして紙に書き出したりする習慣があるのですが、学生時代の経験が活きているなと実感します。
5. まとめ 🤲
クリエイティブな経験がプログラミングの学習と実践に与える影響の重要性を再確認できました。
芸術と技術は、それぞれ異なる分野のように思われますが、共通する原則や考え方を持っています。個人的には芸術の経験は、プログラミングの学習と実践において、問題解決能力の向上、コード設計の改善、情報整理力の向上、優先順位を付ける習慣付けなど、さまざまなメリットをもたらしました。
プログラミングを学習している人は、ぜひ自分の好きな分野との共通点を探し、その知識や経験をプログラミングに活かしてみて欲しいです。
6. おわりに🦶
日々のコーディングを仕事として割り切るのもありですが、どうせやっているなら楽しんでプログラミングをすることで日々のスキルアップであったり、ライスワークの充実に繋がるはずなんです。もし、今後別の職業に就く場合でもこの考えが皆さんの役に立てばとても嬉しく思います。
参考/引用
プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則 - 上田勲 (著)