JavaScript を Web 上で効率よく学びたいなら！「30 Days Of JavaScript」

概要

JavaScript をWeb 上の情報だけで学ぼうと思ったことはありませんでしょうか？

もしそのようなことを少しでも考えたことがあるなら、「30 Days Of JavaScript」を検討してみるのはいかがでしょうか？

利用手順

以下の GitHub 上のページにアクセスすることで、まずは Day1 の資料を閲覧することができます。

github.com

使用感

記事は基本「英語」ですが、その他「スペイン語」「ロシア語」「アゼルバイジャン語」「韓国語」「ベトナム語」に翻訳されています。

※ 日本語翻訳はまだありません。もし関心があるのであれば、本サイトの翻訳をしてみるのはいかがでしょうか？

記事は意外と図での説明が多いため、英語が苦手な方でも取り組みやすいです。

また、ソースコードの例文や、その他 VSCode のプラグインの準備なども説明されているので、とても親切に説明されていました。

こちらのサイトを参考にして勉強を進めることで、JavaScript の基本以外にも Chrome の開発者ツールの勉強、VSCode の勉強もできそうですね。

まとめ

今回は JavaScript を Web 上で勉強できる Web サービス「30 Days Of JavaScript」を紹介しました。

私はまだ Day1 の内容しか見ていないのですが、とても分かりやすくてこれまでの開発方法を見直す良いきっかけとなったと思っています。

JavaScript に詳しい人も、これから JavaScript を学びたい人、その他フロントエンドの開発手法なども勉強したい方にとっても、良いサービスではないかと思っています。

（そして、将来的にはこのサービスに興味を持った翻訳家の方に、日本語訳ページを作成していただけたらななども思っています。。）

ライセンス

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

リンク

github.com

Rust が好きな有志が作った Rust だけで作成されたテキストエディタ「Lapse」

概要

純粋な Rust だけで作成された、パワフルなテキストエディタ。

現在はまだ開発中（pre-alpha Stage）のため、使いづらい部分も見受けらましたが、「モーダル編集が得意」「VSCode Remote のようなリモート開発サポート」「プラグインインストール機能」などが特徴として挙げられており、将来的にはとても強力なテキストエディタになるのではと期待しています。

なお、主な特徴は以下のようになっています。

利用手順

以下の紹介ページから、OS にあったソフトをダウンロードします。

lapce.dev

使用感

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

執筆現在でバージョンが v0.0.11（2022年3月20日時点）のため、動作がもっさりしていたり、日本語が入力できないなど、かゆいところに手が届いていないという印象でした。

ただ、Git 操作が行えたり Plugin インストールができるなど、全体的には VSCode に近い印象を受けました。

これからのさらなる開発に期待が高まります！

まとめ

今回は、Rust だけで作成されたテキストエディタ「Lapse」を触ってみました。

現時点では開発途中のため、全体的にもっさりした使用感でしたが、VSCode ライクなテキストエディタで、今後開発が進んでいく中で使いやすくなると思っています。

また、Rust で Web アプリを作りってみたい方にとっては、本 GitHub のソースを Fork して、ソースコードを読んだりプルリクしたりするなどして、勉強をしてみるのはいかがでしょうか。

ライセンス

• Apache License 2.0

リンク

TypeScript の型について学びたい・自分の知識を試したいなら！「Type Challenges」

概要

最近流行りの TypeScript、私も仕事や趣味で Web 系の開発を行っているとき、利用しています。

型を決めてきっちりかっちりコードを記述できるので、変なバグを生み出すことも少なく、とても書いていて気持ちのいいプログラミング言語です。

そんな TypeScript ですが、型についてある程度知識を身に着けるととても Happy な言語ですが、慣れるまでに時間がかかります。

利用手順

以下のサイトのタイトルを選択するか、「VIEW ON GITHUB」を選択します。

※ サイトを選択しても、結局は GITHUB のサイトに遷移します。

tsch.js.org

遷移後、日本語で力試しをしたい場合は、言語選択で「日本語」を選択しましょう。

ここでは「お試し」タグの Hello World に挑戦してみます。

チュートリアルにある通り、type HelloWorld = any の any を string に修正し、type cases = { ... } のエラー箇所（赤線）が消えるか確認してみます。

↓

見事に消えましたね！

もし解答を共有したい、解答を確認したいという場合も、Github ページ内にそれぞれタグがあるので、ほかの人の解答を確認して自分の考えと同じかどうか確認できるのもいいですね。

使用感

こういうプログラミングの問題を提供する Github 上の Web サービスは日本語対応していないものが多いと思っているのですが、こちらは日本語対応されているので、取り組みやすいですね。

また、Github のタグを頼りに自分の確認したい問題を選択して解答できるので、力試しをしたい方にとってはわかりやすい仕様になっています。

個人的にきれいに色分けされていて、きれいなのも Good と思っています。

まとめ

今回はTypeScript の型についての問題を解きながら勉強する「Type Challenges」を紹介しました。

こちらを利用しながら、楽しく TypeScript の型を勉強してみるのはいかがでしょうか？

ライセンス

• MIT License

リンク

tsch.js.org

github.com

Git の一連の流れを手を動かして学びたいなら！「LearnGitBranching」

概要

LearnGitBranching は Git リポジトリの一連の流れを視覚的かつ実践的に学ぶことができるチュートリアルゲームサービスです。

今や Git をコマンドを打たなくても GUI 上で操作することができるようになってきましたが、今後開発者として仕事や勉強をするにあたってはコマンドでの操作ができるとより便利です。

一度基本に立ち戻って Git の勉強を本 OSS のゲームにより勉強しなおすのはいかがでしょうか。

なお、本アプリは JavaScript （gulp）で作成されているようです。

利用手順

以下の公式サイトにアクセスすることで、LearnGitBranching サービスに触れることができます。

learngitbranching.js.org

使用感

自分もこの LearnGitBranching で遊んでみました！

Git コマンドを打ち込むには慣れていたのですが、知識の復習として、楽しく学べました。

また親切なことに、日本語に翻訳されているので、Git 初心者の方でも気軽にゲームを楽しめると思います。

まとめ

今回は Git リポジトリの一連の流れを視覚的かつ実践的に学ぶことができるチュートリアルゲームサービス「LearnGitBranching」を紹介しました。

日本語に翻訳されているので、気軽に何の障壁もなくサービスに触れることができるという点でも取り組みやすいですね。

Git コマンドをマスターしている方でも知識の復習に、また Git コマンド初心者でこれから学びたい方にとっても、視覚的にわかりやすく説明してくれているので、一度遊んでみるのはいかがでしょうか。

ライセンス

• MIT Lincense

リンク

github.com

シンプルでスタイリッシュなマークダウンエディタ！「MarkText」

概要

シンプルでスマートなマークダウンエディタです。本当にシンプルで無駄がなく、使っていてい気持ちが良かったです。

本アプリは vue で構築された electron アプリケーションで作成されているようです。

利用手順

以下に MarkText アプリのダウンロードページが紹介されているので、こちらからダウンロードします。

紹介ページもきれいでスタイリッシュですね。

https://marktext.app/marktext.app

使用感

特徴は以下のように記述されていました。

• WYSIWYGなリアルタイムプレビューと、執筆に没頭できるクリーンでシンプルなインターフェース
• CommonMark SpecとGitHub Flavored Markdown Spec、および一部のPandoc Markdownをサポート
• KaTeXを用いた数式表示、Front matterや絵文字が使用可能
• 段落とインラインショートカットを利用することで編集効率を向上
• HTMLファイルとPDFファイルを出力可能
• Cadmium Light, Material Darkなど様々なテーマ
• 選べる編集モード: Source Code mode, Typewriter mode, Focus mode

少し自分も触ってみたのですが、執筆に没頭できるクリーンでシンプルなインターフェースとあるだけに、とてもシンプルで使いやすかったです。

HTMLファイルとPDFファイルを出力可能 とあり、デフォルトでファイルを出力する機能があるのもよいですね！

また、設定ページもシンプルな UI でまとまっており、開発中ということらしいですが、非常に完成度が高かったです。

まとめ

私は普段マークダウンファイルを編集する際、エディタは VSCode を使っていたのですが、これからは MarkText を使おうかなと本気で思っているほど、良かったです！

使っていてい気持ちが良かったので、新しいマークダウンエディタを探している方は、ぜひ一度試し見見るのはいかがでしょうか。

ライセンス

• MIT License

リンク

• MarkText: https://github.com/marktext/marktext

github.com

ファミコン風のデザインを使いたいなら！「NES.css」

概要

ファミコン風デザインのウェブサイトを簡単に作れる CSS フレームワークです。

ボタンや入力フォームといった基本的な要素から、かわいらしいアイコン、任天堂のキャラクターなども用意されています。

利用手順

パッケージマネージャーを使う場合

npm を介して利用する方法が推奨されています。

npm install nes.css
# or
yarn add nes.css

AltCSS(sass, scss...)

npm install nes.css
# or
yarn add nes.css

JavaScript

// script.js
import "nes.css/css/nes.min.css"

HTML

<!-- index.html -->
<html>
  <head>
    <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
  </head>
  <body></body>
</html>

CDN を使う場合

<Link />要素を使って CSS をインポートします。

<!-- 圧縮版 -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- 最新版 -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- コアスタイルのみ -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />

使用感

実際にコードを書いてみたら、以下のようになります。

ただ、フォントはそのままですね。

// HTML (CDNを使用)
<html>
  <head>
    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
  </head>
  <body>
    <button type="button" class="nes-btn is-primary">Kewpie13</button>
</body>
</html>

フォントもファミコン風にしたいなら、ドキュメントでも推奨されている「Press Start 2P)」を使用するとさらに雰囲気がでます。

// HTML (CDNを使用)
<html>
  <head>
    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
       <!-- 以下を追加 -->
    <link href="https://fonts.googleapis.com/css?family=Press Start 2P" rel="stylesheet"> 
  </head>
  <body>
    <button type="button" class="nes-btn is-primary">Kewpie13</button>
</body>
</html>

ブラウザサポート

Readme には以下のブラウザの最新バージョンと互換性があります。

• Chrome
• Firefox
• Safari

未確認

• IE/Edge

まとめ

上記のように、簡単にファミコン風のデザインを作成することができました！

ファミコン風のデザインをかわいく簡単に作成したいなら、この NES.css を使ってみるのはいかがでしょうか。

ライセンス

• MIT License

リンク

• ES.css is a NES-style(8bit-like) CSS Framework.

github.com

はじめての OSS コントリビューター活動に最適！「First Contributions」

概要

5分で OSS コントリビューターになれる、すばらしい OSS プロジェクトです。

まだ OSS コントリビューターになったことがない人、これから OSS 活動に参加してみたい方、このリポジトリから参加してみるのはいかがでしょうか？

手順

日本語のインストラクションがあるので、こちらを参考に進めてみるといいでしょう。

github.com

画像付きで丁寧に説明されています。以下が大まかな手順です。

1. レポジトリをフォーク
2. レポジトリをクローン
3. ブランチを作成
4. コードを変更してその変更をコミット
5. GItHub に変更を push する
6. レビューのためにプルリクエストを送る

上記の手順通りに進め、プルリクエストがマージされると、以下のようなメールが届きます。

Hello, congratulations! You've successfully submitted a pull request. 🎉
Next steps
- Continue contributing: If you're looking for projects to contribute to, checkout our web app webapp.
- Join our slack group: We have a community to help/support contributors. Slack Join slack group.
- Share on social media: You can share this content to help more people. twitter tweet. twitter share

We'd love to hear your thoughts about this project. Let us know how we can improve my commenting or opening an issue here.

こんにちは、おめでとうございます。プルリクエストの送信に成功しました。🎉
次のステップ
- 引き続きコントリビュートしてください。貢献できるプロジェクトをお探しなら、私たちのウェブアプリ webapp をチェックしてみてください。
- slack グループに参加する。コントリビューターを支援するためのコミュニティがあります。Slack slack グループに参加する。
- ソーシャルメディアで共有する このコンテンツを共有することで、より多くの人を支援することができます。

このプロジェクトに対するご意見をお聞かせください。どのようにしたら改善できるか、コメントやissueをこちらで開いて教えてください。

これで初めての OSS コントリビューターになれました！

次のステップへ

初めての OSS コントリビューターになれたら、次のステップとしておすすめプロジェクトが紹介されています。

Beginer タグなどがあるプロジェクトが取り組みやすいかもしれませんね。または、興味のあるプロジェクトに参加してみて、OSS 活動に参加してみるのもよいかもしれません。

ライセンス

• MIT License

リンク先

First Contributions

github.com