Functions and Arguments (Part 2) - Japanese Only

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

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

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

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

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です。お疲れ様でした。

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

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

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

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

Previous

Next

Tweet

シェアする