【CSS】flexboxレイアウトを使用して要素を右側に配置する方法

目次

  1. flexboxを使って要素を右寄せする方法

  2. 基本的なHTML構造

  3. CSSでflexboxを適用する

  4. 結果と解説

  5. 追加のスタイリング

  6. レスポンシブデザインへの対応

  7. まとめ

flexboxを使って要素を右寄せする方法

ウェブデザインにおいて、要素を特定の位置に配置することは重要です。

今回は、flexboxを使って要素を右側に配置する方法を詳しく解説します。

基本的なHTML構造

まず、以下のようなHTML構造を想定しましょう。

<div class="container">
  <select id="sortOrder">
    <option value="desc">最新順</option>
    <option value="asc">古い順</option>
  </select>
</div>




画像


 





 



CSSでflexboxを適用する



この構造に対して、以下のようなCSSを適用します。



.container {
  display: flex;
  justify-content: flex-end;
}







このCSSの各プロパティの役割は以下の通りです。



    
	
  • 
	
    display: flex;: コンテナをflexコンテナにします。
    • 
	
  • 
	
    justify-content: flex-end;: 主軸（横方向）で要素を右端に配置します。
    • 




結果と解説



このようにスタイルを適用すると、select要素がコンテナの右側に配置されます。



画像


 





合は要素）が主軸の終端（右側）に寄せられます。



追加のスタイリング



さらに見た目を整えるために、以下のようなスタイルを追加することもできます：



#sortOrder {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
}







これにより、セレクトボックスがより洗練された外観になります。



レスポンシブデザインへの対応



この場合、レスポンシブ対応は比較的簡単です。コンテナの幅を調整するだけで、セレクトボックスの位置が自動的に調整されます。必要に応じて以下のようなメディアクエリを追加することもできます。



@media (max-width: 600px) {
  .container {
    padding: 0 10px;
  }
  
  #sortOrder {
    width: 100%;
  }
}







この設定により、画面幅が600px以下になった場合、セレクトボックスが画面幅いっぱいに広がり、左右に少しパディングが追加されます。



 









 



 



 



 
【JavaScript】画面のスクロールを止めたら画面の下の方にメニューを表示する
スクロールが停止した時にボタンを表示します。スクロールが停止した時にボタンを表示するだけの簡単なスクリプトを考えます。この場合、スクロールイベントが発生した後に一定時間（例：1000ミリ秒）スクロールが続かなければ、ボタンを表示するようにします。


HTML・CSS例


        .hidden {
            display: none;
        }
        #footerButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }







<button id="footerButton" class="hidden">Scroll Button</button>







HTML構造:



    
	
  • 
	
    固定位置に配置されたボタン（footerButton）があります。このボタンは初期状態で隠されています（class="hidden"）。
    • 




スタイル定義:



    
	
  • 
	
    .hiddenクラスはボタンを隠します（display: none）。
    • 
	
  • 
	
    #footerButtonは固定位置に配置され、スタイルが適用されています。
    • 




JavaScript



document.addEventListener('DOMContentLoaded', function() {
    var footerButton = document.getElementById('footerButton');
    var scrollTimeout;

    window.addEventListener('scroll', function() {
        // 一旦ボタンを隠す
        footerButton.classList.add('hidden');

        // 前回のタイマーをクリア
        clearTimeout(scrollTimeout);

        // スクロールが止まった時にボタンを表示
        scrollTimeout = setTimeout(function() {
            footerButton.classList.remove('hidden');
            console.log('スクロール停止'); // デバッグ用
        }, 1000); // 1000ミリ秒後に表示
    }, false);
});







    
	
  • 
	
    DOMContentLoadedイベントでスクリプトがDOM読み込み後に実行されるようにしています。
    • 
	
  • 
	
    footerButton変数でボタン要素を取得し、scrollTimeout変数でタイマーIDを保存します。
    • 
	
  • 
	
    scrollイベントリスナー内で、ボタンを一旦隠し（footerButton.classList.add(‘hidden’)）、前回のタイマーをクリアします（clearTimeout(scrollTimeout)）。
    • 
	
  • 
	
    1000ミリ秒後にボタンを表示するタイマーを設定します（scrollTimeout = setTimeout(function() { … }, 1000)）。
    • 




 



addEventListener



addEventListenerメソッドは、指定したイベントがターゲット（例：DOM要素、ドキュメント、ウィンドウ）で発生したときに、指定した関数を呼び出します。ここでは、windowオブジェクトに対してscrollイベントリスナーを追加しています。



 



window.addEventListener('scroll', function() {
    // イベントが発生した時に実行されるコード
}, false);







    
	
  • 
	
    scroll：イベントの種類です。ここではスクロールイベントを指定しています。
    • 
	
  • 
	
    function()：イベントが発生した時に実行されるコールバック関数です。
    • 
	
  • 
	
    false：イベントのバブリングまたはキャプチャリングフェーズを指定します。通常はfalseでバブリングフェーズ（イベントがターゲットから親要素に伝播する）を指定します。
    • 




setTimeout



setTimeout関数は、指定した時間（ミリ秒）後に指定した関数を実行します。ここでは、スクロールが停止してから1000ミリ秒後にボタンを表示するために使用しています。



構文:



scrollTimeout = setTimeout(function() {
    footerButton.classList.remove('hidden');
    console.log('スクロール停止'); // デバッグ用
}, 200);



scrollTimeout：setTimeoutの返り値はタイマーIDであり、これをscrollTimeout変数に保存します。後でこのタイマーをクリアするために使用します。



    
	
  • 
	
    function() { … }：指定した時間が経過した後に実行される関数です。この関数内でボタンを表示しています。
    • 
	
  • 
	
    1000：遅延時間をミリ秒単位で指定します。ここでは1000ミリ秒後に関数を実行します。
    • 




clearTimeout(scrollTimeout)



clearTimeout関数は、指定されたタイマーIDのタイマーをクリアします。これにより、setTimeoutで設定された関数の実行をキャンセルできます。ここでは、新たにスクロールイベントが発生した時に前回のタイマーをクリアするために使用しています。



clearTimeout(scrollTimeout);



scrollTimeout：クリアしたいタイマーのIDです。setTimeoutの返り値であるタイマーIDを指定します。



scrollTimeout



scrollTimeoutは変数名で、setTimeoutによって返されるタイマーIDを格納するために使用されます。このIDを使って、clearTimeoutでタイマーをキャンセルしたり、他の処理を行います。



変数の使い方



var scrollTimeout;

// スクロールイベントリスナー内
scrollTimeout = setTimeout(function() {
    footerButton.classList.remove('hidden');
}, 200);

// 別の場所でタイマーをクリア
clearTimeout(scrollTimeout);



このように、scrollTimeout変数にタイマーIDを保存しておくことで、後でそのタイマーをクリアできるようにしています。



 









 



 



 
【WordPress】プラグインを使わずにWordPressの親ブロック全体にリンクを設定する方


今回は、プラグインを使わずにWordPressの親ブロック全体にリンクを設定する方法を考えてみます。




    
	
  1. グループブロックを活用する方法
    2. 
	
  2. カスタムCSSを使用する方法
    3. 
	
  3. ボタンブロックを活用する方法
    4. 
	
  4. まとめ
    5. 




グループブロックを活用する方法



まず、グループブロックを使用する方法です。



    
	
  1. 複数のブロックをグループ化します。
    2. 
	
  2. グループブロックを選択し、カスタムHTMLブロックに変換します。
    3. 
	
  3. 以下のようなHTMLコードを入力します：
    4. 




<a href="リンク先URL">
  <!-- ここにグループ化したブロックの内容を貼り付け -->
</a>



この方法では、グループ全体がクリック可能なリンクになります。









ただし、元のブロックの編集がやや難しくなる点に注意が必要です。



カスタムCSSを使用する方法



次に、カスタムCSSを使用する方法です。



    
	
  1. 親ブロックにカスタムCSSクラスを追加します（例：「linkable-block」）。
    2. 
	
  2. テーマのカスタムCSS欄に以下のようなコードを追加します：
    3. 










.linkable-block {
  position: relative;
}

.linkable-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



    
	
  1. JavaScriptを使用して、クリックイベントを設定します。
    2. 




document.querySelectorAll('.linkable-block').forEach(block => {
  block.addEventListener('click', () => {
    window.location.href = 'リンク先URL';
  });
});



別タブで開く場合は、以下のようにwindow.open()メソッドを使用し、第2引数に’_blank’を指定します。



document.querySelectorAll('.linkable-block').forEach(block => {
  block.addEventListener('click', () => {
    window.open('リンク先URL', '_blank');
  });
});



 



この方法では、ブロックの編集性を保ちながら、全体をクリック可能にできます。






ボタンブロックを活用する方法



最後に、ボタンブロックを巧みに使う方法をご紹介します。



    
	
  1. 親ブロックの下部にボタンブロックを配置します。
    2. 
	
  2. ボタンのスタイルを以下のようにカスタマイズします：
	
      
		
    • 幅を100%に設定
      • 
		
    • 高さを親ブロックと同じに設定
      • 
		
    • 背景色を透明に設定
      • 
		
    • ボーダーを削除
      • 
		
    • パディングを0に設定
      • 
	
    
	
    3. 
	
  3. ボタンの位置を絶対位置指定で親ブロックの上に重ねます。
    4. 




 





CSSの例：



.parent-block {
  position: relative;
  /* 親ブロックの他のスタイル */
}

.parent-content {
  /* 親ブロックの内容のスタイル */
}

.button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}

.button-overlay:hover {
  /* ホバー時のスタイル（オプション） */
  background-color: rgba(0, 0, 0, 0.1);
}






この方法では、見た目上は親ブロック全体がリンクのように機能しますが、実際にはボタンがクリック可能な領域となります。






 









 



 
【GAS】Googleスプレッドシートのデータを使ってHTMLメールを送信する方法


 


Googleスプレッドシートのデータを活用して、HTMLメールを作成し送信する方法をご紹介します。この方法を使えば、スプレッドシートの情報を基に、見栄えの良いメールを簡単に送ることができます。


目次


    
	
  1. 
	
    はじめに
    2. 
	
  2. 
	
    準備：スプレッドシートの作成
    3. 
	
  3. 
	
    Google Apps Scriptの作成
    4. 
	
  4. 
	
    コードの解説
    5. 
	
  5. 
	
    スクリプトの実行方法
    6. 
	
  6. 
	
    注意点
    7. 
	
  7. 
	
    まとめ
    8. 




はじめに



Google Apps Scriptを使えば、スプレッドシートのデータを基にHTMLメールを作成し、送信することができます。



今回は、週報などの報告をHTMLメールで送信する例を使って、その方法を詳しく解説していきます。



準備：スプレッドシートの作成



まずは、週報のデータを入力するスプレッドシートを作成しましょう。例えば、以下のような形式でデータを入力します：



A列（件名）B列（名前）C列（今週の成果）D列（来週の目標）週報（9/18-9/22）山田太郎プロジェクトAの完了新規顧客獲得3件



画像


 





Google Apps Scriptの作成



次に、Google Apps Scriptを作成します。



    
	
  1. 
	
    スプレッドシートのメニューから「ツール」→「スクリプトエディタ」を選択します。
    2. 
	
  2. 
	
    新しいスクリプトファイルが開きます。ここに以下のようなコードを入力します。
    3. 




javascriptfunction sendWeeklyReportEmail() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var subject = sheet.getRange("A2").getValue();
  var name = sheet.getRange("B2").getValue();
  var achievements = sheet.getRange("C2").getValue();
  var goals = sheet.getRange("D2").getValue();
  
  var htmlBody = `
    <html>
      <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
        <h1 style="color: #4A86E8;">週間レポート</h1>
        <p>こんにちは、${name}さん</p>
        <h2 style="color: #6AA84F;">今週の成果</h2>
        <p>${achievements}</p>
        <h2 style="color: #E69138;">来週の目標</h2>
        <p>${goals}</p>
        <p>今週もお疲れ様でした。来週も頑張りましょう！</p>
      </body>
    </html>
  `;
  
  MailApp.sendEmail({
    to: "boss@example.com",
    subject: subject,
    htmlBody: htmlBody
  });
}




 



このスクリプトは以下のような流れで動作します。



    
	
  1. 
	
    アクティブなシートを取得します。
    2. 
	
  2. 
	
    A2、B2、C2、D2セルからそれぞれ件名、名前、今週の成果、来週の目標を取得します。
    3. 
	
  3. 
	
    取得したデータを使って、HTMLメールの本文を作成します。
    4. 
	
  4. 
	
    MailApp.sendEmail() メソッドを使って、作成したHTMLメールを送信します。
    5. 




HTMLメールの本文では、見やすさを考慮して以下のような工夫をしています。



    
	
  • 
	
    <h1>、<h2> タグを使って、見出しを設定しています。
    • 
	
  • 
	
    インラインCSSを使って、フォントやカラーを指定しています。
    • 
	
  • 
	
    テンプレートリテラル（バッククォートで囲まれた部分）を使用して、動的にデータを挿入しています。
    • 




スクリプトの実行方法



スクリプトを実行するには、以下の手順を踏んでください。



    
	
  1. 
	
    スクリプトエディタの「実行」ボタンをクリックします。
    2. 
	
  2. 
	
    初回実行時は、認証を求められます。画面の指示に従って、必要な権限を許可してください。
    3. 
	
  3. 
	
    実行が完了すると、指定したメールアドレス（この例では “boss@example.com”）にHTMLメールが送信されます。
    4. 




 



画像


 





画像


 





 



メールが送信されました。



 



 









 
【WordPress】要素がふわっと現れるアニメーションの作り方


今回は、ウェブページにスクロールトリガーのアニメーション効果を追加する方法について、詳しく解説します。特に、ページをスクロールすると要素が下から滑らかに現れる効果の実装方法を、説明していきます。


目次


    
	
  1. 
	
    CSSでアニメーションの基礎を設定
    2. 
	
  2. 
	
    JavaScriptでスクロールトリガーを実装
    3. 
	
  3. 
	
    実装の結果
    4. 
	
  4. 
	
    まとめ
    5. 




CSSでアニメーションの基礎を設定



まず、CSSを使ってアニメーションの基本的な動作を定義します。



.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}






このCSSの各プロパティについて詳しく見ていきましょう。



    
	
  1. 
	
    .fade-up クラス：
    

	
      
		
    • 
		
      opacity: 0;: 要素の不透明度を0に設定し、完全に透明にします。
      • 
		
    • 
		
      transform: translateY(20px);: 要素をY軸方向（縦方向）に20ピクセル下に移動させます。
      • 
		
    • 
		
      transition: opacity 0.5s ease, transform 0.5s ease;: opacityとtransformプロパティの変化を0.5秒かけて行い、イージング関数としてeaseを使用します。これにより、滑らかな変化が実現されます。
      • 
	
    
	
    2. 
	
  2. 
	
    .fade-up.is-visible クラス：
    

	
      
		
    • 
		
      opacity: 1;: 要素の不透明度を1に設定し、完全に不透明にします。
      • 
		
    • 
		
      transform: translateY(0);: 要素を元の位置（Y軸方向に0ピクセル）に戻します。
      • 
	
    
	
    3. 




この設定により、.fade-up クラスを持つ要素は初期状態で透明かつ少し下にずれた位置にあり、.is-visible クラスが追加されると不透明になって元の位置に移動します。



JavaScriptでスクロールトリガーを実装



次に、JavaScriptを使用してスクロールイベントを検知し、要素が画面内に入ったタイミングでアニメーションを開始させます。



const fadeUpElements = document.querySelectorAll('.fade-up');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
});

fadeUpElements.forEach(element => {
  observer.observe(element);
});



 



このJavaScriptコードの各部分を詳細に解説します：



    
	
  1. 
	
    const fadeUpElements = document.querySelectorAll('.fade-up');
    

	
      
		
    • 
		
      document.querySelectorAll() メソッドを使用して、ページ内の全ての .fade-up クラスを持つ要素を選択し、fadeUpElements 定数に格納します。
      • 
	
    
	
    2. 
	
  2. 
	
    const observer = new IntersectionObserver((entries) => { ... });
    

	
      
		
    • 
		
      IntersectionObserver APIを使用して新しいオブザーバーを作成します。このAPIは、指定された要素が画面内に入ったかどうかを監視します。
      • 
	
    
	
    3. 
	
  3. 
	
    entries.forEach(entry => { ... });
    

	
      
		
    • 
		
      オブザーバーが監視している全ての要素（entries）に対して処理を実行します。
      • 
	
    
	
    4. 
	
  4. 
	
    if (entry.isIntersecting) { ... }
    

	
      
		
    • 
		
      isIntersecting プロパティをチェックし、要素が画面内に入ったかどうかを判定します。
      • 
	
    
	
    5. 
	
  5. 
	
    entry.target.classList.add('is-visible');
    

	
      
		
    • 
		
      要素が画面内に入った場合、その要素（entry.target）に is-visible クラスを追加します。これにより、CSSで定義したアニメーションが開始されます。
      • 
	
    
	
    6. 
	
  6. 
	
    fadeUpElements.forEach(element => { observer.observe(element); });
    

	
      
		
    • 
		
      全ての .fade-up 要素に対してオブザーバーを設定します。これにより、各要素が個別に監視され、画面内に入ったタイミングでアニメーションが開始されます。
      • 
	
    
	
    7. 




実装の結果



この実装により、以下のような動作が実現されます。



    
	
  1. 
	
    初期状態では、.fade-up クラスを持つ要素は不透明度0で、通常の位置より20ピクセル下に配置されています。
    2. 
	
  2. 
	
    ユーザーがページをスクロールし、該当要素が画面内に入ると、IntersectionObserverがそれを検知します。
    3. 
	
  3. 
	
    検知されると即座に .is-visible クラスが追加されます。
    4. 
	
  4. 
	
    CSSのtransitionプロパティにより、0.5秒かけて要素が徐々に不透明になり、同時に上方向に20ピクセル移動します。
    5. 




この手法を使用することで、ページスクロールに連動した滑らかな要素の出現エフェクトを実現できます。



 



 









 



 



 
【Notion】Notionを使って年間スケジュールを作る


 


Notionを使って年間スケジュールを作る方法をご紹介します。仕事やプライベートでも便利ですので、ぜひご参考ください。


目次


    
	
  1. 
	
    カレンダーの作成
    2. 
	
  2. 
	
    年間スケジュールの設定
    3. 
	
  3. 
	
    年間スケジュールの設定
    4. 
	
  4. 
	
    タスク管理の統合（活用例）
    5. 
	
  5. 
	
    ビューのカスタマイズ（活用例）
    6. 
	
  6. 
	
    活用のコツ
    7. 
	
  7. 
	
    まとめ
    8. 




カレンダーの作成



    
	
  1. 
	
    Notionの左側メニューで「ページを追加」をクリックします。
    2. 
	
  2. 
	
    新しいページの名前を「年間スケジュール」などと入力します。
    3. 
	
  3. 
	
    ページ内で「/タイムライン」や「/data」といった内容で入力し、タイムラインビューを選択します。
    4. 




 



画像


 





 



画像


 





これで基本的なベースが完成します。



年間スケジュールの設定



 



画像


 





 



年間スケジュールの設定



    
	
  1. 
	
    タイムラインビューの設定で、表示期間を1年に変更します。
    2. 
	
  2. 
	
    必要に応じて、以下のようなプロパティを追加します:
    

	
      
		
    • 
		
      タイトル
      • 
		
    • 
		
      開始日
      • 
		
    • 
		
      終了日
      • 
		
    • 
		
      カテゴリー（セレクト型）
      • 
		
    • 
		
      進捗状況（セレクト型）
      • 
		
    • 
		
      メモ
      • 
	
    
	
    3. 
	
  3. 
	
    タイムライン上で予定を入力していきます。クリックして新しい予定を追加できます。
    4. 




 



 



画像


 





 



 



基本的に、タイトル・日付・終了日、を入れておくと、ガントチャートのような状態でスケジュールが表示されます。



 



画像


 





 



画像


 





 



タスク管理の統合（活用例）



    
	
  1. 
	
    年間スケジュールとは別に、日々のタスクを管理するデータベースを作成します。
    2. 
	
  2. 
	
    タスクデータベースに以下のプロパティを追加します:
    

	
      
		
    • 
		
      タイトル
      • 
		
    • 
		
      日付
      • 
		
    • 
		
      進捗状況（ToDo, Done など）
      • 
		
    • 
		
      関連する年間目標（リレーション型）
      • 
	
    
	
    3. 
	
  3. 
	
    年間スケジュールの各予定に、関連するタスクをリンクさせることで、大きな目標と日々のタスクを紐付けることができます。
    4. 




ビューのカスタマイズ（活用例）



    
	
  1. 
	
    カレンダービューの他に、タイムラインビューやガントチャートビューを追加すると、長期的な計画が視覚的に把握しやすくなります。
    2. 
	
  2. 
	
    フィルターやソート機能を使って、特定のカテゴリーや期間の予定だけを表示することもできます。
    3. 




 



画像


 





 



活用のコツ



    
	
  • 
	
    毎日または毎週、スケジュールを確認し、必要に応じて調整します。
    • 
	
  • 
	
    年間目標と月間・週間の計画を連携させることで、より効果的なスケジュール管理が可能になります。
    • 
	
  • 
	
    Googleカレンダーと連携させることで、外部のスケジュールとも統合できます。
    • 




 



 





 
エジプトの昔話「ライオンとネズミ」｜古代エジプトの物語から学ぶ教訓
古代エジプトの物語「ライオンとネズミ」は、イソップ寓話として知られる話の原型とされる興味深い昔話です。この物語は紀元前800年頃に成立したとされ、イソップ寓話よりも古い起源を持っています。


 


 


あらすじ


強く恐れられていたライオンが、ある日狩りの途中で様々な動物たちに出会います。ヒョウ、馬、ロバ、牛、クマ、そして同じライオンまでもが、人間によって傷つけられたり捕らえられたりしていました。怒ったライオンは人間に仕返しをしようと決意します。


 


画像

 





そんな折、ライオンの足元に小さなネズミが現れます。ライオンがネズミを踏みつぶそうとすると、ネズミは命乞いをし、恩返しを約束します。ライオンはネズミを逃がしてやります。



 



画像


 





 



後日、ライオンは人間に捕まり網にかけられてしまいます。そこへ以前助けたネズミが現れ、網のひもを噛み切ってライオンを救出します。



 



画像


 





 



特徴と教訓



この物語の特徴は、ライオンとネズミの逸話の前に、人間による動物たちへの残虐な行為が詳細に描かれている点です。これにより、人間の自然に対する横暴さが強調されています。



物語の主な教訓は「小さな友も大きな友となりうる」というものです。弱小と思われる存在でも、時に大きな力を発揮することがあるという教えが込められています。



 



 



 









 
【Gmail】「has:attachment」検索演算子で添付ファイルが付いているメール検索する
目次


    
	
  1. 
	
    添付ファイルがあるメールを検索する
    2. 
	
  2. 
	
    特定のファイル形式の添付ファイルを検索する
    3. 
	
  3. 
	
    has:attachment larger:サイズ
    4. 
	
  4. 
	
    size:サイズ
    5. 
	
  5. 
	
    まとめ
    6. 




Gmailの「has:attachment」検索演算子は、メールに添付ファイルがあるメールを検索するために使用されます。例えばGoogleドライブの容量が増えてきた時に、添付サイズの大きなファイルを一気に削除したい時などに活用できます。



 



画像


 





 



添付ファイルがあるメールを検索する



例えば、以下の検索クエリーを使用することで、添付ファイルがあるメールを検索できます。



has:attachment






この検索クエリーは、添付ファイルがあるメールをすべて返します。



 



特定のファイル形式の添付ファイルを検索する



特定のファイル形式の添付ファイルを検索するには、以下のように「filename:」を使用します。



filename:pdf
filename:mp4
filename:jpg



has:attachment larger:サイズ



例えば、10MB以上のファイルを検索するには、「has:attachment larger:10M」と入力します。



1MB以上のファイルを検索するには、「has:attachment larger:1M」と入力します。



has:attachment larger:1M



size:サイズ



例えば、5MB以上のファイルを検索するには、「size:5m」と入力します。



size:5m













 
【JavaScript】仮引数（かりひきすう）とは？
目次


    
	
  1. 
	
    仮引数とは？
    2. 
	
  2. 
	
    仮引数の基本的な役割
    3. 
	
  3. 
	
    仮引数の例
    4. 
	
  4. 
	
    複数の仮引数について
    5. 
	
  5. 
	
    デフォルト引数の活用
    6. 
	
  6. 
	
    エラーハンドリングと仮引数
    7. 
	
  7. 
	
    まとめ
    8. 




仮引数とは？



仮引数は、プログラミングにおいて、関数やメソッドに渡される値を受け取るための変数です。仮引数は関数内で使用され、実際の引数と結びついています。



この記事では、仮引数の基本概念や使い方について詳しく説明します。



仮引数の基本的な役割



仮引数は、関数が呼び出された際に、その関数内で使用される変数を定義します。



実際の引数が関数に渡されると、仮引数にその値が代入され、関数 internals の処理に利用されます。



仮引数の例



以下は、JavaScriptでの仮引数を使った基本的な関数の例です。



二つの数字を足し算する簡単な関数を作成します。



function add(x, y) {
  return x + y; // x と y を足して結果を返す
}

var result = add(3, 5);
console.log(result); // 出力: 8






この例では、x と y が仮引数であり、呼び出し時に実際の引数（3 と 5）が代入されます。



例えば、お菓子作りのレシピを想像してみてください。



レシピには「材料」の欄があって、例えばこんな感じです。



    
	
  • 
	
    小麦粉 _____ グラム
    • 
	
  • 
	
    砂糖 _____ グラム
    • 




この空欄（_____）が、プログラミングでいう「仮引数」です。



function makeSweets(flour, sugar) {  // <- この flour と sugar が仮引数
    return flour + sugar;
}



 



レシピの空欄は、実際にお菓子を作るときに具体的な量を入れます。



例えば、



    
	
  • 
	
    小麦粉 200グラム
    • 
	
  • 
	
    砂糖 100グラム
    • 




これと同じように、関数を実際に使うときは具体的な数値を入れます。



makeSweets(200, 100);  // <- この 200 と 100 が実際の値（実引数）



つまり、



    
	
  1. 
	
    レシピの空欄（仮引数）は、「ここに後で具体的な量を入れてね」というプレースホルダー（置き場所）
    2. 
	
  2. 
	
    実際に料理するとき（関数を呼び出すとき）に、その空欄に具体的な数値（実引数）を入れる
    3. 




このように考えると、仮引数は「後で具体的な値が入る予定の箱」のようなものだと理解できます。



複数の仮引数について



関数は複数の仮引数を持つことができ、任意の数の引数を処理できます。



以下の例では、名前と挨拶を受け取る関数を作成しています。



function greet(name, greeting) {
  return greeting + ', ' + name + '!'; 
}

console.log(greet('山田', 'こんにちは')); // 出力: こんにちは, 山田!



 



デフォルト引数の活用



JavaScriptでは、仮引数にデフォルト値を設定することも可能です。



これにより、引数が渡されなかった場合でも、関数が適切に動作します。



function multiply(x, y = 1) {
  return x * y;
}

console.log(multiply(5)); // 出力: 5 (5 * 1)
console.log(multiply(5, 2)); // 出力: 10 (5 * 2)