【Angular】Zipファイルを解凍しよう【JSZIP】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はJSZIPを使う方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

AngularでJSZIPを使ってZIPファイルの解凍ができる
解凍したファイルを元のディレクトリ構成に合わせたオブジェクトにできる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

実行環境

実際に作ってみよう！
GitHubのサンプルコード
まとめ

実際に作ってみよう！

初期設定

ターミナルを開いて以下のコマンドを実行してください。

ng new my-app
cd my-app
ng serve -o

ng newした際のルーティング設定はどっちでもいいよ！
スタイルの設定はなんでもいいけど、本ブログでは一括してSCSSで記述するよ！

補足

ng new my-app   →   新規Angularアプリの作成
cd my-app       →   ディレクトリ移動
ng serve -o     →   作成したAngularアプリの起動

JSZIPのインストール

npm install jszip
npm install @types/jszip

JSZIPのインポート文

import * as JSZip from 'jszip';

JSZIPを使いたいファイルでインポートしてね！

app.component.html

<input type="file" accept=".zip" (change)="handleFileInput($event)" />

<pre>{{ directories }}</pre>

(change)で変更を受け取って関数を実行するよ！

app.component.ts

import { Component } from '@angular/core';
// jszipのインポート
import * as JSZip from 'jszip';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  directories: string = '';

  // ファイルのアップロードを処理するメソッド
  handleFileInput(event: any): void {
    const file = event.target.files[0];

    if (file) {
      // ZIPファイルの解凍と処理を実行
      this.unzipFile(file);
    }
  }

  // ZIPファイルを解凍して処理するメソッド
  unzipFile(file: File): void {
    // ディレクトリごとのエントリーを格納する配列
    const directories: { dir: string; files: string[] }[] = [];
    const zip = new JSZip();

    // ファイルを非同期で読み込む
    zip.loadAsync(file).then((zipContent) => {
      // 解凍されたファイルを処理するループ
      zipContent.forEach((filePath, file) => {
        if (!file.dir) {
          // ファイルのパスをディレクトリとファイル名に分割
          const pathSegments = filePath.split('/');
          // ディレクトリ名
          const directory = pathSegments.length > 1 ? pathSegments[0] : '';

          // ディレクトリごとにファイルをグループ化する
          const directoryEntry = directories.find((d) => d.dir === directory);
          if (directoryEntry) {
            // 既存のディレクトリエントリーにファイルを追加
            directoryEntry.files.push(filePath);
          } else {
            // 新しいディレクトリエントリーを作成し、ファイルを追加
            directories.push({ dir: directory, files: [filePath] });
          }
        }
      });

      // 文字列型かつ整形して表示
      this.directories = JSON.stringify(directories, null, 2);
    });
  }
}

実際に動かしてみよう！

このようにzipファイルを添付すると自動で解凍、
ディレクトレリごとに整理することが出来ました。

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/angular-jszip

Contribute to same-hack/angular-jszip development by creating an account on GitHub.

まとめ

JSZIPを使うとzipファイルの解凍ができる
MITライセンスなので自由に使用できる

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram