camp.trainocate.co.jp Open in urlscan Pro
183.181.81.43  Public Scan

Form analysis
2 forms found in the DOM

GET https://camp.trainocate.co.jp/course/search/

<form role="search" method="get" id="searchform" action="https://camp.trainocate.co.jp/course/search/" class="form-inline search">
  <input class="form-control" type="text" value="" placeholder="キーワードでコース検索" name="q" id="q">
  <input class="btn_search" type="submit" id="searchsubmit" value="">
</form>

GET https://camp.trainocate.co.jp/course/search/

<form role="search" method="get" id="searchform" action="https://camp.trainocate.co.jp/course/search/" class="form-inline search">
  <input class="form-control" type="text" value="" placeholder="キーワードでコース検索" name="q" id="q">
  <input class="btn_search" type="submit" id="searchsubmit" value="">
</form>

Text Content

   
 * コースカテゴリー
    * 開発
       * プログラミング言語
          * Javaプログラミング
          * 受け放題パッケージ
          * Pythonプログラミング
          * javascriptプログラミング
      
       * AI・データサイエンス
          * 機械学習・データ分析
      
       * WEBシステム開発
          * Springフレームワーク
          * DevOps
      
       * WEBサイト制作
          * フロントエンド
      
       * データベース
          * MySQL
   
    * IT活用
       * IT基礎
          * コンピューター基礎
          * IT業界
          * データ分析
          * システム開発
      
       * ネットワーク
          * ネットワーク基礎
      
       * セキュリティ
          * セキュリティ基礎
          * WEBセキュリティ
      
       * DX
          * 業務改善
   
    * ビジネス知識・スキル
      

   
 * コースカテゴリー開く
    * 開発開くプログラミング言語開くJavaプログラミング受け放題パッケージPythonプログラミングjavascriptプログラミングAI・データサイエンス開く機械学習・データ分析WEBシステム開発開くSpringフレームワークDevOpsWEBサイト制作開くフロントエンドデータベース開くMySQL
    * IT活用開くIT基礎開くコンピューター基礎IT業界データ分析システム開発ネットワーク開くネットワーク基礎セキュリティ開くセキュリティ基礎WEBセキュリティDX開く業務改善
    * ビジネス知識・スキル開く

   
 * 
 * サービスの使い方
 * コースマップ一覧
 * ブログ
 * 法人でのご利用
 * ログイン
 * 新規登録


 * プログラミング言語
    * Javaプログラミング
    * 受け放題パッケージ
    * Pythonプログラミング
    * javascriptプログラミング

 * AI・データサイエンス
    * 機械学習・データ分析

 * WEBシステム開発
    * Springフレームワーク
    * DevOps

 * WEBサイト制作
    * フロントエンド

 * データベース
    * MySQL



 * ホーム
 * トレノキャンプブログ
 * JavaScript
 * JavaScriptのsliceの使い方｜文字列・配列を切り抜く方法

JavaScript
2022.11.03
JavaScriptのsliceの使い方｜文字列・配列を切り抜く方法
2022.11.03





 * 1．JavaScriptのsliceメソッドとは？
 * 2．JavaScriptのsliceメソッドの基本構文
 * 3．文字列型のsliceメソッドの使い方
 * 4．配列型のsliceメソッドの使い方
 * 5．さまざまな引数のパターン
 * 6．sliceと似たメソッド
   


今回は、文字列・配列を切り抜くsliceメソッドについて学習します。


本記事では、


「sliceメソッドの基本構文は？」「sliceメソッドの使い方は？」


といった内容から


「文字列や配列から要素を切り抜く方法は？」「sliceメソッドと他メソッドとの違いは？」


といった内容まで、初級者エンジニア向けに詳しく解説していきます。






1.     JAVASCRIPTのSLICEメソッドとは？

JavaScriptのsliceメソッドとは、文字列や配列からデータの一部分を切り抜くメソッドです。

開始位置と終了位置を指定すると、その間の文字列を切り抜きます。

sliceメソッドは文字列型と配列型の両方に用意されています。






2．JAVASCRIPTのSLICEメソッドの基本構文


では、sliceメソッドの基本構文について解説していきます。


sliceメソッドの基本構文は次の通りです。


let str = "文字列";
str.slice( start[省略可能], end[省略可能] );



sliceメソッドは、対象文字列のstart位置からend位置までの範囲を切り抜いた文字列を返します。　


①引数

ここで、sliceメソッドの引数について説明します。



・START

切り抜きの開始位置を示す値です。


0から始まる数値で表し、対象文字列の長さより大きい数値を指定すると、空の文字列が返されます。

マイナス値を設定すると、対象文字列の末尾から指定され、引数を省略すると、対象文字列をそのまま切り抜きます。


サンプルコードで確認してみましょう。

let str = "slice()の引数についての説明";

//startのみ指定
console.log(str.slice(2));

//対象文字列の長さより大きい数値を指定すると空の文字が返される
console.log(str.slice(50));

//startにマイナスを指定すると末尾から数えられる
console.log(str.slice(-3));

//引数なしにすると、そのまま返される
console.log(str.slice());

実行結果：

ice()の引数についての説明


の説明

slice()の引数についての説明



切り抜きの開始位置の数値は0からスタートするため、slice(2)と指定すると、0番目の”s”から数えて2番目の”i”から切り抜かれているのがわかりますね。



・END


2番目の引数endには、切り抜き終了位置を指定します。

ただしend自体は含みません。


例えばslice(2,5)と指定すると、切り抜き開始位置が2文字目になりますが、切り抜き終了位置はend自体を含まないので4文字目になるので注意が必要です。


またマイナス値を使って、末尾からのオフセットとして指定することもできます。

例えばslice(2,-2)とすると、2文字目から、末尾から2番目までを切り抜きます。


サンプルコードで確認してみましょう。

let str = "slice()の引数についての説明";

//startとendを指定（2文字目から4文字目まで）
console.log(str.slice(2,5));

//endにマイナスを指定
console.log(str.slice(2,-2));

実行結果：

ice

ice()の引数についての





②返り値

sliceメソッドは、切り抜かれた文字列または新しい配列を返します。


配列に対するsliceメソッドのサンプルをみてみましょう。

let array = ['ロンドン','ニューヨーク','東京','パリ','シンガポール'];

//startとendを指定し、新しい配列を作成
let newarray = array.slice(2,4);

console.log(newarray);
console.log(array);

実行結果：

[ ‘東京’, ‘パリ’ ]

[ ‘ロンドン’, ‘ニューヨーク’, ‘東京’, ‘パリ’, ‘シンガポール’ ]



このように、sliceメソッドは元の配列は変更せず、元の配列から要素をコピーし新しい配列を返します。






3．文字列型のSLICEメソッドの使い方

ここで、文字列型のsliceメソッドの使い方を解説していきます。


①文字列を切り抜く

最初に文字列を切り抜いてみましょう。

let str = "slice()の使い方";

//切り取り開始位置を8番目に指定
console.log(str.slice(8));

実行結果：

使い方



サンプルコードでは、第1引数に8を指定しているので、0文字目の”s”から数えて8文字目の”使”から末尾までを切り抜いています。


②任意の範囲を切り抜く

終了位置を指定すると、任意の範囲を切り抜きます。

let str = "slice()の使い方";

//開始位置と終了位置を指定
console.log(str.slice(0,5));

実行結果：

slice



第2引数のend自体は含まないので、0文字目の”s”から4文字目の”e”までの範囲を切り抜きます。


③文字列の後ろから文字を取得

第1引数にマイナス値を指定すると、文字列の後ろから文字を取得できます。


サンプルコードで確認しましょう。

let str = "slice()の使い方";

//第1引数にマイナスを指定
console.log(str.slice(-1));
console.log(str.slice(-2));
console.log(str.slice(-3));

実行結果：

方

い方

使い方






4．配列型のSLICEメソッドの使い方


ここでは、配列型のsliceメソッドの使い方について解説していきます。


①配列の要素を切り抜く

配列型のsliceメソッドは、文字列でのsliceとは異なり配列のインデックス番号で位置を指定します。

let array = ['ロンドン','ニューヨーク','東京','パリ','シンガポール'];

//開始位置を指定
console.log(array.slice(3));
//開始位置と終了位置を指定
console.log(array.slice(1,3));
//末尾を取得
console.log(array.slice(-1));

実行結果：

[ ‘パリ’, ‘シンガポール’ ]

[ ‘ニューヨーク’, ‘東京’ ]

[ ‘シンガポール’ ]



配列での開始位置も、文字列と同じように0番目から数えます。

サンプルコードのようにslice(3)と指定すると、0番目の”ロンドン”から数えて3要素目の”パリ”以降を抜き出します。






5．さまざまな引数のパターン


sliceメソッドのさまざまな引数のパターンについて解説します。


①引数なしの場合

startを指定しなかった場合、0番目から切り抜きます。

endも省略されるので、対象の文字列や配列をそのまま切り抜きます。

let str = "引数なしのパターン";

//引数なし
console.log(str.slice());

実行結果：

引数なしのパターン





②マイナス値を指定した場合

次に、引数にマイナス値を指定した場合を紹介します。

引数にマイナスを指定すると、対象の文字列や配列の末尾から数えます。


サンプルコードで確認してみましょう。

let array = ['ロンドン','ニューヨーク','東京','パリ','シンガポール'];

//startとendを指定し、新しい配列を作成
console.log(array.slice(1,-2))

実行結果：

[ ‘ニューヨーク’, ‘東京’ ]



サンプルコードの引数は(1,-2)を指定しているので、1番目の”ニューヨーク”から、末尾から2番目の”パリ”より前までの要素を切り抜くので、返り値は[
‘ニューヨーク’, ‘東京’ ]になります。






6．SLICEと似たメソッド


ここからは、sliceと似た機能を持つメソッドを紹介します。

それぞれの特徴を把握し、用途に合った使い方をしましょう。



メソッド名特徴substring文字列に対して開始位置と終了位置を指定して抜き出すsubstr文字列に対して開始位置と、そこからの文字数を指定して抜き出すsplice配列の任意の要素を削除、置換する



以下で、これら3つのメソッドを詳しく紹介していきます。


①SUBSTRINGメソッド

substringは、sliceと同様に文字列を分割したり任意の箇所を切り抜いたりするメソッドです。


サンプルコードで確認してみましょう。

let str = "sliceとsubstringの違い";

//sliceの場合
console.log(str.slice(2,5));
//substringの場合
console.log(str.substring(2,5));

実行結果：

ice

ice



同じ結果になることがわかりますね。

では、このふたつの違いはどこにあるのでしょうか？

let str = "sliceとsubstringの違い";

//sliceの場合（マイナス値を指定）
console.log(str.slice(-3));
//substringの場合（マイナス値を指定）
console.log(str.substring(-3));

//sliceの場合（start >= end）
console.log(str.slice(5,2));
//substringの場合（start >= end）
console.log(str.substring(5,2));

実行結果：

の違い

sliceとsubstringの違い


ice



このように、substringの引数にマイナス値を指定すると0に変換され、先頭から抽出されます。


また、”start位置 >=
end位置”の場合、sliceメソッドは空文字を抽出しますが、substringは引数の(5,2)を(2,5)に自動で変換し、結果を抽出します。


②SUBSTRメソッド

次にsubstrメソッドについて解説します。

substrも文字列を抽出するメソッドです。

substrの第1引数はslice同様に開始位置を指定しますが、第2引数には開始位置から抽出する文字数を指定します。

let str = "sliceとsubstrの違い";

//sliceの場合
console.log(str.slice(3,6));
//substrの場合
console.log(str.substr(3,6));

実行結果：

ceと

ceとsub



実行結果から、substr(3,6)は、3文字目から6文字分を抽出していることがわかりますね。


③SPLICEメソッド

最後にspliceメソッドを見ていきましょう。

spliceメソッドはArray（配列）オブジェクトの組み込みメソッドで、配列の要素を置換したり、任意の要素を削除したりできます。

let array = ['slice','substring','substr','splice'];

//sliceの場合
let result1 = array.slice(1,3);
console.log(result1);
console.log(array);

//spliceの場合
let result2 = array.splice(1,3);
console.log(result2);
console.log(array);

実行結果：

[ ‘substring’, ‘substr’ ]

[ ‘slice’, ‘substring’, ‘substr’, ‘splice’ ]

[ ‘substring’, ‘substr’, ‘splice’ ]

[ ‘slice’ ]



sliceとspliceの大きな違いは、元の配列に影響を及ぼす点です。

sliceは元の配列を変更しませんが、spliceは元の配列から要素を削除し、その削除した要素が返り値となります。　








7．プログラミング学習ならトレノキャンプへ


トレノキャンプでは、プログラミングを実践的に学ぶためのコースをオンラインで提供しています。
オンデマンド配信なので、いつでも好きなときに受講が可能です。講座の詳しい内容は下記のバナーをクリックしてご覧ください。


※掲載された社名、製品名は、各社の商標及び登録商標です。

この記事をシェア

おすすめの受講コース
 * Git/Github入門 ～基礎から学習するバージョン管理～
   詳細はこちら
 * TRAINOCAMPプレミアムパック-データ分析からWEB開発まで専門コースを含むコンプリート版-(30日間)
   詳細はこちら
 * 絶対につまずかないWeb制作/開発
   詳細はこちら
 * はじめてのデータベース ～仕組みの理解とSQL～
   詳細はこちら

関連記事
JavaScript

TypeScript実践力を身につける！コードスニペットで学ぶ型付けとインターフェース

2023.06.22

JavaScript

Reactチュートリアルとフレームワーク比較！Vue.jsとAngularとの違い

2023.06.16

JavaScript

【最新】JavaScriptフレームワーク一覧｜おすすめ・人気はどれ？

2023.01.12
カテゴリ
 * Spring (26)
 * Python (52)
 * エンジニア育成 (24)
 * Java (47)
 * JavaScript (21)
 * アジャイル開発 (5)


 * 今すぐ学習をはじめましょう！
   無料アカウント登録で豊富な強力コンテンツを受講

 * コースカテゴリー
 * Javaプログラミング
 * Pythonプログラミング
 * Springフレームワーク
 * DevOps
 * データ分析/機械学習
 * DX/業務改善
 * ITリテラシー

 * サービス
 * コース一覧
 * 受講の方法
 * 法人のお客様

 * サポート
 * 会社概要
 * 利用規約
 * 動作環境
 * 個人情報保護方針
 * プライバシーポリシー
 * 特定商取引法に基づく表示

Copyright © TRAINOCAMP All Rights Reserved.