関数と引数(2)

大規模開発になってくると実際にコード書いてる時間って少ないです。
打ち合わせとか会議とか聴きこみ調査で八割ぐらい時間を取られます。

というわけでみなさまどうも。

続きまして『関数』と『引数』の注意点とか確認したり、もっと実用的な関数を作ってみたりとかして色々練習していきましょう。

前回作った関数はこんな感じでしたね。

function addition(x){
    var y;
    y = x + 1;
    console.log(y);
} 

変数xを『仮引数』にして関数を実行するたびに値を渡せるようになってます。

さて、ここで『あれ』がないことに気づいた方いらっしゃると思います。そうです、変数を使用するときに必ず記述するように言われた『var』ですね。

他の言語では仮引数にも型を宣言する必要があったりするので必要な場合もありますがJavaScriptでは仮引数に対しての『var』での宣言は必要ありません。

function addition(var x){ // これはエラーです。
    var y;
    y = x + 1;
    console.log(y);
} 

解説すると上記の場合の『x』は変数『x』ではなく仮引数『x』となるので『var』で変数宣言をする必要はない、といった感じになります。その中にある変数『y』に関しては仮引数ではなく通常の変数ですので通例通り『var』をつかって関数宣言する必要がある、といった流れです。

宣言してもしなくてもどちらでもOK、というわけではなく上記のように記述するとエラーになっちゃいますので仮引数に対しての『var』は記述しちゃダメです。注意しましょう。

あと変数の場合と同じで、ソースコードの中でより下に書いてある処理が優先されます。同じ関数名で定義すると上書きされてしまうので覚えておきましょう。

function addition(x){
    var y;
    y = x + 1;
    console.log(y);
}

function addition(x){ // こっちが優先されます
    var y;
    y = x + 2;
    console.log(y);
} 

さて、ではここで練習がてらHTML要素を操作する少し実用的な関数を作ってみましょう。

id名からHTML要素を取得し色々変更できたりする 『document.getElementById()』というのがありましたね。あれを使って『要素の文字色を変更できる関数』というのを作ってみます。
※『document.getElementById()』を忘れちゃった方はこちらへ

まず関数名を適当に決めちゃいます。今回は『changeColor』という関数名にしましょうか。大規模開発などでは関数名などのネーミングルールが厳密に定められていたりしますが今は練習中なのでJavaScriptの文法に則った名前ならなんでも構いません。関数名の命名方法は『addNumber』とか『remove_elems』みたいな感じで動詞から始まる句にするのが一般的ですね。

というわけでまずfunction文からカキカキします。

function changeColor(){

}

これで関数を宣言できました。続いて要素を取得する必要があるので 『document.getElementById()』を記述します。

function changeColor(){
    document.getElementById();
}

『document.getElementById()』の引数がポイントですね。『document.getElementById()』の引数に関数『changeColor』の仮引数を渡してあげることで関数を実行するたびにid名も指定することができるようになります。仮引数の名前(識別子)は何でもいいのですが今回は『id』としましょう。するとこんな感じになります。

function changeColor(id){
    document.getElementById(id);
}

ここまでは大丈夫でしょうか。

続いて文字の色を変更する、ということで『document.getElementById()』に『.style.color 』をくっつけます。

function changeColor(id){
    document.getElementById(id).style.color;
}

あとは『document.getElementById(id).style.color』へ指定したいカラーコードを代入すればOKです。これも関数を実行させるたびに色の指定ができるようにしたいので関数『changeColor』の仮引数を代入するようにしましょう。といわけでもう一つ仮引数を用意します。仮引数の名前は何でも良いのですが『font_color』としましょうか。再確認ですが複数の引数を記述するときは『,』を使って区切ります。

function changeColor(id, font_color){
    document.getElementById(id).style.color = font_color;
}

これでOKです。完成しましたね。一連の流れは問題なさそうでしょうか。

ちなみに実行させるときはこんな感じです。

changeColor("test", "#00f");

これはid名『test』となっている要素の文字色を『#00f』へと変更します。

注意点ですが、引数にはちゃんと文字列を渡してあげないといけないので『"』か『'』でくくるのを忘れないようにしてくださいね。ちゃんとくくらないと『test』という名前の変数扱いになってしまいます。『#00f』に関してはJavaScriptの変数名のネーミングルールで『#』が使えないため変数にすらならずエラーとなります。

changeColor(test, #00f); // これはダメです。動かないです。

頭が痛くなってきた方もいらっしゃると思いますので引数を使わないバージョンも書いてみましたので見比べてみましょう。

function changeColor(id, font_color){
    document.getElementById(id).style.color = font_color;
}

changeColor("test", "#00f");

↓　これは以下と同じ処理です。

function changeColor(){
    document.getElementById(“test").style.color = “#00f";
}

changeColor();

では最後にちゃんと動くか実行してチェックしてみましょう。id名『test』としたp要素なんかを用意して適当に動作させてみます。皆さんもぜひぜひご自身で書いてみて確かめてみてください。

<p id="test">test</p>

<script>
function changeColor(id, font_color){
    document.getElementById(id).style.color = font_color;
}

changeColor("test", "#00f");
</script>

ちゃんと動きましたか？ 動いたならばバッチリOKです。お疲れ様でした。

というわけで関数と引数の基礎は以上となります。いかがだったでしょうか。ちょっと慣れないと難しいところも多いかもしれません。

もし分からなかったら自分で処理を色々書いてみると良いかと思います。実際に手を動かして経験を得るのはとても大切です。

続いての記事ではイベント処理をやっていきたいと思います。引き続き頑張っていきましょう。ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア