ソフトウェア開発者のための OSS、まとめてみました！

ソフトウェア開発を行なっている自分が、個人的に面白いと思ったプログラムの最新技術や、オープンソースソフトウェア（OSS）をまとめています！

MENU

何かアプリを作成したいと思っているが、何を作ればいいか決めかねているなら！「App Ideas」

articles

概要

何かアプリを作ってみたいと思うことはありますが、実際に何を作ったらいいのか迷ったりしたことはないでしょうか？

自分はよくこの状況に当てはまり、結局何も作らないということが多々あります。

そんな時に、アプリ案を提供してくれる OSS があったで、本日はそちらについて紹介したいと思います。

今回紹介する OSS は、具体的なアプリの開発案を提示してくれる「App Ideal」になります。

「App Ideal」で紹介されているアプリは以下のようなことを念頭に紹介されています。

  • コーディングスキルの向上に最適
  • 新しいテクノロジーを試すのに最適
  • ポートフォリオに追加して、雇用主・クライアントにインパクトを与えるのに最適
  • チュートリアルの例（情報記事・ビデオ）として利用するのに最適
  • 簡単に作成でき、新しい機能を簡単に拡張可能

なお、「App Ideal」で紹介されているプロジェクトは単にアイデアが羅列されているだけでなく、プロジェクトの詳細が説明されているので、内容を把握しながら開発に取り組むことができます。

それでは早速使い方などについて見ていきましょう！

利用手順

「App Ideal」の README にプロジェクト案の一覧が紹介されていますので、こちらを参照することになります。

github.com

使用感

早速自分もこちらの README を参照しました。

いろんなプロジェクト案があり、各案の記事構成は以下のようになっています。

  1. 明確な説明・目的
  2. 実装する必要があるユーザーストーリーリスト
    • ToDo といった強制的なリストというよりもガイドラインとして提供されている
    • 必要に応じて独自のストーリーを追加可能
  3. 基本プロジェクトの改善でなく、スキル向上も狙った機能リスト
    • 開発に必要なユーザーストーリーリスト完了後に実装することも可能
  4. プロジェクトを完成させるために参考となるリソース・リンク集

ここまで手厚いと開発しながら躓いても、前に進めそうですね！

また、本プロジェクトには開発する際のレベルも以下のように分けられていました。

  • Tier: 1（初心者プロジェクト）
    • 学習の初期段階にある開発者向け。ユーザー向けアプリケーションの作成に重点を置いている人向け。
  • Tier: 2（中級者プロジェクト）
    • 学習と経験の中間段階にある開発者向け。UI/UX、開発ツールの使用、API サービスを使用するアプリの構築に慣れている人向け。
  • Tier: 3（上級者プロジェクト）
    • 上記のすべてを備え、バックエンドアプリケーションやデータサービスの実相など、より高度な技術を学んでいる開発者向け。

上記のレベルも参考にしながら、ぜひ開発したいアプリケーションを探してみるといいですね。

まとめ

今回は、具体的なアプリの開発案を提示してくれる OSS 「App Ideal」を紹介しました。

何かアプリを作ってみたいが、実際に何を作ったらいいのか迷ったりする場合には、こちらの OSS を利用してみるとよい発見があるかもしれませんね。

また、レベル別にアプリケーションの具体案が紹介されていたり、アプリケーションを実際に作る場合のユーザーストーリーなども紹介されているので、実際に開発してみたいアプリケーションが決まったらこちらに沿って実際に作成してみてはいかがでしょうか。

ライセンス

MIT License

リンク

github.com

より速い Python コードコンパイラを探しているのなら！「Pycom」

概要

近頃は Python を使用してスクリプトを作成して様々な自動化やサーバー処理、機械学習などをされている方が多いかと思います。

Python はとてもシンプルで使いやすい反面、実行速度が遅いということが巷では言われていますよね。

そんな中、Python の実行速度を高速化するコードコンパイラを GitHub 上で発見しましたので、ご紹介しようと思います。

今回紹介する OSS は、実質的な Python コードのコンパイラで、C++ で作成された「Pycom」になります。

「Pycom」は Python の実行速度高速化を目的として作成された OSS コードコンパイラで、以下の処理などを得意としているそうです。

反復回数の多いループ：

for i in range(1, 1000001):
    if i % 3 == 0:
        print(i)

def is_prime(n):
    if n == 1:
        return 0
    for i in range(2, n):
        if n%i == 0:
            return 0

    return 1

def main():
    total = 0
    for i in range(1, 101):
        total += is_prime(i)

    print(total)

ベンチマーク結果：

上記のベンチマークを見ると、「Pycom」は CPython と比較しても相当高速化が行えていますね！

それでは早速「Pycom」のインストール方法などについて見ていきましょう！

利用手順

前提

  • Python のバージョンは 3.10 以上が必要
    • colorama モジュールをインストールする際に必要

インストール方法としては、GitHub のリポジトリをクローンすることで利用することができます。

以下のコマンドを利用してインストールください。

git clone https://github.com/Omyyyy/pycom.git
cd pycom 
pip install -r requirements.txt
pip install -e .

なお、pip install -e . コマンドで作成される pycom.py.egg-info フォルダーには触れないよう注意してください、と但し書きがあるのでご注意ください。

インストール後は以下のように使用することができます（インストール作業後のディレクトリにいることを想定）。

cd src/pycom
pycom {実行したい Python スクリプト}

これにより、Python スクリプトを Pycom を利用して実行することができます。

使用感

実際に自分もインストールして使用してみました。

インストールしてしまえば、使い方は Python と同じ感じで利用できるので特にここで言及することもないですが、同じ使い方ができるという点はいいですね。

まとめ

今回は Python の実行速度高速化を目的として作成された OSS コードコンパイラ「Pycom」を紹介しました。

CPython と比較しても、実行速度は最高 20~30 倍も高速化されるということなので、これまで時間のかかっていた処理をこなす際は、こちらの「Pycom」の利用を検討されてみてはいかがでしょうか。

ただ、「Pycom」はまだまだ開発段階ということですべての Python バージョンとすべての Python 機能はまだ網羅されていないとあります。

  • サポートされている機能
    • Python の if、else、for、while など
    • f'' 文字列
    • 組み込み関数
    • 一部の数学ライブラリ関数
    • リスト内法表記
    • Python スタイルの任意の大きな整数、など
  • サポートされていない機能
    • 特定のブロックを Python で書く方法（1 行で if ... else を書く記法など）
    • 複数行の文字列リテラル
    • stdlib に含まれる多くのライブラリ
    • クラス
    • throw と finally キーワード
    • 複数のデータ型を含むリスト、など

上記に注意しながら今後の開発に期待し、ぜひうまく活用していただけたらと思います！

ライセンス

MIT License

リンク

github.com

UNIX、MacOS 環境で Node.js のバージョン管理を行うなら！「nvm」

articles

概要

Web アプリを開発している方にとって、JavaScript は切っても切り離せないプログラミング言語だと思いますが、さらに切り離せないのが、Node.js ではないでしょうか。

Node.js は、もともとは Web 上でしか動作することができなかった JavaScript のプログラムを、Python や Ruby のようにパソコン上で動かすことを可能としてくれる JavaScript 実行環境のことで、Node.js があるおかげで現在 Web フロント側の開発も JavaScript で簡単に行うことができるし、サーバーサイド側の開発も JavaScript で開発することができ、一貫して JavaScript で1 つのサービスを開発することができるようになりました。

nodejs.org

しかし、Node.js はバージョン依存（特に JavaScript を利用した React.js などのライブラリ・Next.js フレームワーク）が強い部分があり、バージョンが異なるとせっかく作成したプログラムを実行することもビルドすることもできない場合があります。

その都度、プログラムを動作させるために適した Node.js のバージョンをインストール・アンインストールするのはとても面倒ですしやりたくないですよね。

そこで、Node.js のバージョン管理を簡単に行うことができる OSS があります。

それが、今回紹介する OSS「nvm」になります。

github.com

「nvm」を利用することで、コマンドを 2、3 打つと簡単に Node.js のバージョンを切り替えることができます！

それでは早速使い方などについて見ていきましょう！

利用手順

「nvm」を利用するには、UNIX、MacOS での利用のみとなります。

インストールするには以下のインストールスクリプトを利用する必要があります。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

または

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

上記のいずれかのコマンドを利用して、「nvm」をインストールしてください。

なお、インストールが完了した後は nvm: command not found が表示されないことを確認してください。

command -v nvm

なお、インストールがうまくできない、エラーが表示されるなどの場合は、README の Troubleshooting を参照ください。

github.com

Windows で利用したい場合

Windows で 「nvm」と同様の操作を行いたい場合は、「nvm-windows」という OSS がありますが、あまり積極的に開発はされていません。参考までに参照ください。

github.com

使用方法

一般的な Node.js 利用者にとっては、LTS (長期サポート)版 Node.js の最新版をインストールするのがよいと思いますので、以下のコマンドを入力して Node.js をインストールします。

nvm install --lts

なお LTS 版でなく、各自で Node.js のバージョンを決めてインストールしたい場合は、以下のコマンドで利用可能な Node.js のバージョンを把握してから、利用したい Node.js をインストールします。

nvm ls-remote
nvm install 14.7.0

また、「nvm」でインストールされている Node.js 一覧を表示する際には、以下のコマンドを利用することで把握することができます。

nvm ls

また、端末に複数の Node.js がインストールされている場合は、利用したい Node.js のバージョンを指定することで、端末で利用したい Node.js のバージョンを設定することができます。

nvm use v16.15.0

現在利用している Node.js のバージョンを確認する際には、以下のコマンドを使用します。

nvm current

今回は 「nvm」を利用する際によく使うであろうコマンドについて紹介しましたが、ほかにも様々なコマンドがありますので、詳細については README などを参照ください。

まとめ

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

今回は、Node.js のバージョン管理を簡単に行うことができる OSS 「nvm」を紹介しました。

UNIX や MacOS を利用されている方で、Node.js の管理を簡単に行いたいと考えている方は、ぜひこちらの「nvm」を検討してみてはいかがでしょうか。

ライセンス

MIT License

リンク

github.com

設定不要ですぐに使える、マルチプラットフォーム対応のリモートデスクトップソフトウェアを探しているなら！「RUSTDESK」

articles

概要

ある PC を別の PC から操作したい場合、Windows ユーザーなら「リモートデスクトップ接続」を利用されることと思います。

こちらはリモート接続する PC の IP アドレスが把握できていれば簡単に接続することができますよね。

ただ、Windows の「リモートデスクトップ接続」は接続する OS が異なると接続することができないなど、いくつかデメリットがあります。

そこで、今回紹介する OSS は、最近話題を呼んでいるプログラミング言語 Rust で記述されたソフトウェア「RustDesk」になります。

「RustDesk」の特徴としては、公式ページに以下のような点が挙げられていました。

こちらの「RustDesk」はインストールをした後に簡単な操作を 1 つ 2 つ行うだけですぐに別 PC に接続することができるソフトウェアになっています。

それでは早速見ていきましょう！

利用手順

「RustDesk」をインストールするには、以下の公式ページから行うことができます。

rustdesk.com

執筆時点では、Windows、MacOS、Ubnutn、Andriod、iOS、Web といったマルチプラットフォームで利用することができます。

ご利用する端末の OS にあったプログラムをダウンロードし、各自の端末へインストールしてご利用ください。

インストール後、「RustDesk」を起動すると接続情報が表示され、こちらの ID と Password を別端末の「RustDesk」で入力することでリモート接続することが可能となります。

使用感

早速自分も使用してみました！（図は 「RustDesk」の README のものです）

今回は Windows 端末を別端末の Web から操作してみたのですがとても軽快に利用することができ、さらに無料のソフトウェアでここまでリモートデスクトップ操作を行うことができたことに驚きを感じました！

マウス操作やキーボード入力（日本語入力はできませんでしたが英語入力は可能）、ファイル転送、動画再生、音楽再生なども可能だったので、リモートデスクトップ操作を行うのに必須であろう操作はすべて網羅されていました！

もし、リモートデスクトップ操作する端末の IP アドレスが分からなかったり、別 OS からリモート操作したいといった時などに、とても重宝するなと思いました！

まとめ

今回は、最近話題を呼んでいるプログラミング言語 Rust で記述されたソフトウェアで、設定不要ですぐに使えるリモートデスクトップソフトウェア「RustDesk」を紹介しました。

こちらの OSS は完全無料で利用でき、かつマルチプラットフォーム対応ということなので、OS の壁を無視して端末のリモート操作を行うことができる非常に素晴らしいソフトウェアだと思いました！！

もしリモートデスクトップ操作を行える無料ソフトウェアを探している方、OS の壁を越えてリモートデスクトップ操作を行うことができるソフトウェアを探している方、ぜひこちらの「RustDesk」を一度利用されてみてください！

こちらの OSS は非常にお勧めできます！！！

ライセンス

GNU Affero General Public License v3.0

リンク

rustdesk.com

github.com

30 日で徹底的に Python を学びたいなら（英語記事）！「30 Days Of Python」

articles

概要

皆さんは何のプログラミング言語を使っている、または使いたいと思っていますか？

私は普段 JavaScript を主に使用して Web アプリなどを趣味で開発したりしています。

そんな中、近年では AI や機械学習、人工知能などで Python が大変注目を浴びているので、今後私も Python を使って開発などを行いたいなーなんて考えていたりします。

そこで GitHub を色々見ていたら、Python を 30 日で徹底的に学ぶことができる OSS コースがあったので、今回はそちらを紹介しようと思います。

今回紹介する OSS は、30 日で徹底的に Python を学ぶことができる！と銘打たれている OSS「30 Days Of Python」になります。

ちなみに、説明書きには 30 日で Python を学ぶためのガイドと紹介されていますが、学習者によっては 100 日以上かかる場合もあると記載されているため、本気度がうかがえますね。

全編英語記事なので少し骨が折れそうですが、簡単な英語で記述されていますので、さっそく使い方や中身について見ていきましょう！

利用手順

本リポジトリの README にすでに 1 日目の学習内容が記載されていますので、こちらから始めてください。

github.com

使用感

早速自分も試しに利用してみました。

1 日目の記事ということで、Python の導入だけだろうと思っていたら、意外にサクサク進んで実際に Python コードを書いてスクリプトを作成するところまで進みました。

また、説明をしっかり読んだ後は、レッスンの最後のしっかりとした演習問題があるので、学んだことがちゃんと見についているか確認できるのもよいですね！（例によって、海外のテキストなので演習問題の答えなどはありませんが。）

1 日目に結構大事な部分が終わったので、このペースでいくと本当に 30 日で Python について一通りは学べそうな印象ですがやはり学ぶことも多いので、本当に 30 日で攻略しようと思うのであれば結構気を引き締めて取り組む必要がありそうです！

ちなみに、30 日のレッスンの内訳は以下のようになっています。

こちらを見ると、本当に Python の一通りのことを学べそうですね！

まとめ

今回は、30 日で徹底的に Python を学ぶことができる！と銘打たれている OSS「30 Days Of Python」をご紹介しました。

全編英語記事ですが、英語自体は簡単なもので書かれているので、英語を読むのが苦でなければ Python を効率よく学ぶのに最適なテキストかと思いました。

ただ、要領よくまとまっているので 1 回（1 日）に学ぶ量は相当多いので、本当に 30 日でやり切ろうとするには根気がいりそうでした。

自分は今後 Python を使って何か開発でもしたいと考えているので、「30 Days Of Python」を利用して、30 日で仕上げることは目標とせずマイペースに学んでいこうかなと思いました。

Python について効率よく学びたいと思っている方は、ぜひ一度こちらの OSS「30 Days Of Python」を参照されてみてはいかがでしょうか。

ライセンス

特に見当たりませんでした。

リンク

github.com

Android で YouTube などの動画サイトを広告なしにスムーズに閲覧・ダウンロードしたいなら！「NewPipe」

articles

概要

皆さんは普段スマートフォンで YouTube を閲覧されていますでしょうか？

私は毎日 1 時間くらいボーっと見ていることが多いです（笑）。

ただ、無料で利用しているために時々広告が流れてきて見ている動画が一時的に止まったりしてややストレスに感じてしまったり、無料ユーザーでも動画をオフライン再生出来たらいいなーなんて思ったりしています。

（無料ユーザーなので当たり前で、広告なし再生やオフライン再生を希望するなら有料会員になるのが一番ですが。。）

そんな中、Android 限定で上記の課題を解決してくれる OSS があったのでご紹介します。

今回紹介するのは、TouTube などの動画を閲覧することはもちろん、広告が流れることもないですし、検索した動画をダウンロードすることも行える Android アプリ OSS「NewPipe」です。

こちらの「NewPipe」は Google のフレームワークライブラリ及び YouTube API を使用していないため、Google サービスがインストールされていない Android 端末でも利用ができるということ、さらに NewPipe で YouTube を利用する際も YouTube アカウントの登録等は不要とのことです。

また、「NewPipe」では以下の機能が搭載されているようです。

それでは早速使い方などについて見ていきましょう！

免責事項

インターネット上から許可なくメディアコンテンツ（動画、音楽、画像）をダウンロードすることは、その Web サイトの規約違反となり違法となる場合があります。

今回紹介する OSS をご利用する場合は、一度 Web サイトの規約をご確認いただいて、ダウンロードしても問題ない場合のみご利用ください。

なお、利用する場合は自己責任で行う必要があり、本記事に掲載された内容によって生じた損害等の一切の責任を負いかねますので、ご了承ください。

利用手順

「NewPipe」をインストールするには以下 3 パターンがあります。

1. カスタムリポジトリを F-Droid に追加してインストールする方法

カスタムリポジトリを F-Droid に追加してリリースが公開され次第インストールする方法です。

詳細は以下のサイトの公式サイトから、QR コードなどを Android 端末で読み取って、apk ファイルをインストールしてください（執筆当時は v0.23.1 が最新だったので、私はそちらをインストールしました）。

newpipe.net

2. GitHub のRelease からインストールする方法

リリースが公開され次第、GitHub の Releases から APK をダウンロードし、端末にインストールしてください。

github.com

3. F-Droid から更新する方法

F-Droid から更新する方法がありますが、こちらは更新版をインストールするのに最も遅い方法のようです。

開発者側で APK をビルドし、署名、そしてユーザーに更新を届ける必要があるためです。

4. 自分でデバッグ APK をビルドしてインストールする方法

自分でソースをクローンし、ビルドしてから APK をインストールする方法ですが、操作性が他の方法と比べて複雑なため、1～3 の方法で行うのがよいとされています。

個人的には「1. カスタムリポジトリを F-Droid に追加してインストールする方法」で QR コードを端末で読み取り、リポジトリから APK ファイルをダウンロードする方法が一番簡単かと思います。

インストール後は「NewPipe」を開くだけで、さっそく YouTube を閲覧することができます！

使用感

さっそく私も Android 端末に「NewPipe」をインストールして動作させてみました。

README に記載がある通り、動画の再生はもちろん、広告なども流れないのでスムーズに動画を閲覧することができました！

また、「NewPipe」にはバックグラウンド再生、ポップアップ再生（ピクチャインピクチャ再生）、ダウンロード機能なども搭載されていますので、YouTube 有料会員で行えることが一通り行うことができそうです！

ちなみに、「NewPipe」は現在複数のサービスにも対応しているようで、例としては以下のサービスに対応しているということでした。

上記に挙げたサービス以外にも、さらに複数のサービスに対応することができるそうなので、詳細を把握したい場合は以下のドキュメントを参照してみてください。

teamnewpipe.github.io

まとめ

今回紹介は、TouTube などの動画を閲覧することはもちろん、広告が流れることもないですし、検索した動画をダウンロードすることも行える Android アプリ OSS「NewPipe」を紹介しました。

「NewPipe」では YouTube 有料会員で行える機能がほとんど行うことができそうな印象だったので、非常に使い勝手がよさそうな印象を受けました！

普段 YouTube を Android で閲覧する際はこちらの OSS「NewPipe」を使っていきたいと思いました。

Android 端末で、YouTube 有料会員のような機能を使いたいと考えている方は、ぜひ一度試してみてはいかがでしょうか。

ライセンス

GNU General Public License v3.0

リンク

newpipe.net

github.com

美しい HTML/CSS/JavaScript プロジェクトをサンプルコードを見ながら学びたいなら！「50 Projects in 50 Days」

articles

概要

フロントエンジニアの方にとって、HTML/CSS/JavaScript を使えるようになることはとても大切だと思っており、ファーストステップとして捉えていただいても問題ないかと思います。

初めのうちは HTML や CSS、JavaScript とは何か、といったドキュメントや記事を見ながら勉強するのもよいかもしれませんが、個人的には自分の手を動かしながら実際にソースを書いてみるということが大切だと思っています。

そんな中、HTML/CSS/JavaScript のきれいな UI が紹介されている OSS があり、初心者の方がこちらのソースコードを見ながら勉強するには、とても参考になるのではないか、と思ったものになります。

今回紹介する OSS は、HTML/CSS/JavaScript の実際にデモとソースコードを見ながら勉強することができる「50 Projects in 50 Days」になります。

こちらの OSS はもともと以下の Udemy の講義で紹介されているサンプルみたいですが、ソースコードもシンプルかつ短く作成されているので、こちらの OSS を参照するだけでも大変勉強になると思っています。

参考：50 Projects In 50 Days - HTML, CSS & JavaScript

www.udemy.com

本記事では、GitHub に掲載されている内容について紹介していきますので、さっそく使い方などについて見ていきましょう！

利用手順

GitHub 上の README に、50 個のプロジェクトが載っていますので、勉強したいプロジェクト名をクリックしてソースコードを参照してみたり、実際にそのソースコードを動かすとどのような感じになるのかといったデモページもあるので、ぜひ確認してみるとよいでしょう。

また、デモだけを確認したい場合は公式ページからデモ一覧が記載されていますので、そちらを確認してみてもよいかもしれません。

50projects50days.com

使用感

ここでは、「#01 Expanding Cards」のソースコードとデモ画面を確認してみました。

デモ画面を見てみると以下のような画面で、マウスクリックした画像が広がって表示されるような Web 画面になっています。

こういう画面でシンプルですが、自分で作ろうと思うとなかなかどうしようかと迷ういますよね。

この Web 画面がどのように作られているか、とソースコードを見てみると非常に少ないソースコードで作成されていました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Expanding Cards</title>
  </head>
  <body>
    <div class="container">
      <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Explore The World</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Wild Forest</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
        <h3>Sunny Beach</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
        <h3>City on Winter</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Mountains - Clouds</h3>
      </div>

    </div>

    <script src="script.js"></script>
  </body>
</html>

const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  -webkit-transition: all 700ms ease-in;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

たったこれだけのソースコードだけで、デモ画面のような Web ページが作成できるのですね！

デモ画面やソースコードを把握出来たら、あとはどのようにして応用していくかということを考えていくことで、フロントエンドエンジニアとしてのスキルアップを伸ばすことができそうです。

まとめ

今回は、HTML/CSS/JavaScript の実際にデモとソースコードを見ながら勉強することができる OSS「50 Projects in 50 Days」をご紹介しました。

もともと（というか本来は）Udemy の講義とともに本ソースコードを確認して勉強していくという流れかと思いますが、ソースコードもシンプルで分かりやすいですし、デモ画面もフロントエンジニアとして知っておきたい画面描画方法なども出し惜しみなく掲載されていますので、本 OSS を参照するだけでも大変勉強になると思います。

今後 HTML/CSS/JavaScript について、サンプルコードを見ながら自分の手を動かしつつ勉強したいという方や、これからフロントエンジニアとして活躍していきたいという方にとって、とても参考になる OSS かと思います。

ぜひ一度、こちらの OSS について目を通してみたはいかがでしょうか。

ライセンス

MIT License

リンク

50projects50days.com

github.com