Libx Awesomeリスト

    このページの内容

    Awesome Elm

    Elmを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    学習ガイド

    この素晴らしいものについて学びましょう。

    :top: back to top

    Outdated Tutorials and books (Elm 0.18 or earlier)

    :top: back to top

    Learning Videos

    • Welcome to Elm - Elmのすべての基礎を学ぶためのビデオプレイリスト
    • Elm The Complete Guide - Elm UI、Elm Review、レスポンシブデザイン、テストなどを含むビデオチュートリアル
    • Egghead.io: Elm videos - EggheadのElmビデオトレーニング（多くが無料）
    • Elm Basics - Elmという一般的なプログラミング言語のすべての構文と基本的な概念を解説するチュートリアル
    • Greg Ziegan: Elm live coding videos - YouTube上のライブコーディング動画

    :top: back to top

    記事

    基本事項を読みましょう。公式Elmブログを確認してください： elm-lang.org/blog

    Why Elm?

    Miscellaneous articles

    Outdated articles (Not relevant for current Elm architecture)

    • Elm for Web Developers - Elmに移行を考えているウェブ開発者向けのノートのコレクション
    • Elm & Components - 関数型タイプを使ってTEAのボイラープレートを減らす可能性についてのブログ記事。コンポーネントライブラリや関数型タイプについて興味がある人にとって非常に役立つ.
    • Composing Features and Behaviours in the Elm Architecture - Elmアーキテクチャに従ったコードを独立した機能に分割し、機能間の通信方法、そしていくつかの機能をグループ化して大きな機能を構成する方法についての記事.
    • Getting Started with Elm - Elm教育チュートリアルのシリーズ.
    • Elm & Guarantees - Elmが他の選択肢に比べて優れている点とそうでない点についての現実的な見解.

    :top: back to top

    カンファレンス動画

    エルムについての素晴らしい講演を視聴してください

    これらは主に会議での講演です。エルムを学ぶための動画については、Learning Videosセクションをご覧ください.

    Playlists

    Miscellaneous videos

    ニュース

    • Official Elm News - 公式Elmブログ
    • Elm Weekly - Elmに関する週刊ニュースレター
    • Elm Bits - Elmに関する無料週刊ニュースレター。厳選されたニュース、記事、書籍、イベント、ツール、ライブラリを紹介。
    • Elm News - すべてのElmに関するニュースを一か所に集約
    • Elm Greenwood - エルムパッケージのリリース
    • Elm Reddit - Redditでのエルムニュース

    ポッドキャスト

    エルムについてのポッドキャストを聞いてください

    • Elm Radio - エルムエコシステムにおけるツールと技術についての番組
    • Elm Town - エルムコミュニティのメンバーについてのポッドキャスト（古い）

    Individual Podcast episodes

    :top: back to top

    テスト

    Elmアプリケーションのテストに使えるツールとライブラリ

    :top: back to top

    コード生成ツール

    • Elm Bridge - ハスケルからエルム型を生成
    • Elm CodeGen - エルムコードを生成
    • Elm TS Interop - エルムとTypeScript間のエンコーダー／デコーダーの構築
    • Elm TypeScript Interop - エルムからTypeScriptの定義を生成（Elm TS Interopはこの機能の改善版）
    • elm-gql - GraphQLクエリからGraphQLクライアントコードを生成
    • elm-graphql - GraphQLスキーマからGraphQLクライアントコードを生成
    • haskell-to-elm - Haskell型からElm型、エンコーダー、デコーダーを生成
    • HTML to Elm - HTMLをElm Htmlに変換。アプリケーションをElmに移植する際に便利。
    • JSON Schema to Elm - JSONスキーマ仕様からElm型、JSONデコーダー、JSONエンコーダー、およびフズテストを生成
    • OpenApi Generator - Elm用のOpenApi型を生成
    • PostCSS Elm Tailwind - ElmにTailwindを追加
    • Protoc Gen Elm - .protoファイルからProtobufエンコーダー／デコーダーを生成
    • Quicktype - JSONからJSONデコーダーおよびエンコーダーを生成
    • Travelm Agency - 翻訳ファイルから型安全なElmコードを生成

    :top: back to top

    パッケージマネージャー

    Elmライブラリを共有できる場所。

    • elm-package - Elmライブラリを共有するためのコマンドラインツール

    :top: back to top

    ライブラリ

    以下のサイトに、数百の高品質なパッケージがあります。

    • Elm packages - 公式リジストリ
    • Elm Catalog - カテゴリで分類されたパッケージを検索
    • Elm Search - オペレーター、関数署名など、Elmドキュメントを検索

    :top: back to top

    ボイラープレート

    新しいElmプロジェクトの良い出発点です。

    • create-elm-app - ビルド設定なしでElmアプリを作成
    • elm-boil - Elmのボイラープレートプロジェクトを作成するためのコマンドラインユーティリティ。簡単に実行・ビルド・デプロイできるように設計。
    • elm-live - Elm用の柔軟な開発サーバー。リアルタイムリロード機能付き。
    • elm-webpack-4-starter - Elm webpack 4のスタートテンプレート
    • example-elm-hot-webpack - Elm 0.19とWebpackでのホットモジュールリロードの例
    • Elm Batteries - Elm、Parcel、Cypress、Netlify用のプロジェクトテンプレートとジェネレーター
    • IHP + Elm - IHP Haskell Framework は、フロントエンドで elm を、バックエンドで haskell を使う場合に便利な Elm のテンプレートを内蔵しています

    Outdated Boilerplates

    • elm-webpack-starter - Elm アプリケーションを書くためのシンプルな Webpack 設定
    • elm-app-boilerplate - Elm アプリケーション用の完全機能のベースプロジェクト：Webpack、HMR、ES6、JS および Elm テスト、Semantic UI、サンプルコードなど
    • elmkit - 軽量な Brunch 基盤の Web アプリ設定。Brunch、Hot Module Replacement、Elm、Scss、Elm テストを含みます
    • elm-boilerplate - Elm アプリを作成できるシンプルな Makefile
    • elm-init - 新しい Elm プロジェクト用のインタラクティブ設定
    • elm-new - テンプレートに基づいて初期プロジェクトの構成を生成します
    • elm-webpack-starter-kid - 非常に非常に基本的な elm + webpack 4 テンプレート
    • generator-elm-mdl - Material Design を利用したシンプルな Elm アプリケーションを生成する Yeoman ジェネレーター

    :top: back to top

    フレームワーク

    Elmのフレームワークアプローチを実現するプロジェクト（スケルトン生成、ルート生成など）

    • elm-spa - Elm でシングルページアプリを作成するためのフレームワーク
    • Elm Land - Elm アプリケーションを構築するためのフレームワーク
    • Spades - 現実世界に即した Elm SPA を開始します

    静的解析

    • Elm Analyse - Elm プログラミング言語用のリーダー
    • Elm Review - Elm プログラミング言語用のコードレビューツール

    :top: back to top

    静的サイトジェネレーター

    • Elm Pages - HTML を事前にレンダリングし、Elm クライアント側アプリにハイドレートする静的サイトジェネレーター（） here is a brief comparison with elmstatic
    • Elmstatic - Elm 基盤の静的サイトジェネレーター
    • elm-starter - 既存の Elm アプリケーションに接続できる、Elm 基盤の実験的なスタートアップツール

    :top: back to top

    ショーケース生成ツール

    • Elm Book - Storybook および HexDocs をベースにした豊かなドキュメントビルダー
    • Elm UI Explorer - ビューと状態を紹介します

    :top: back to top

    Elmの実行

    • Ellie - Elm ライブエディタ
    • Elm Editor - Advanced Elm Live Editor
    • run-elm — コマンドラインからElmコードを実行
    • elm-instant - エディタからElmコードを試すためのAtomパッケージ。視覚的なREPLとプレビューパネルを提供。
    • Glitch - ブラウザ内で高速にフルスタックWebアプリを構築。
    • Elm Live - Elm用の柔軟な開発サーバー。リアルタイムリロードが含まれる！
    • Elm Watch - モードで高速かつ信頼性の高い動作。 elm make

    :top: back to top

    コンパイルとバンドル

    Unmaintained

    • grunt-elm - ElmファイルをJavaScriptにコンパイルするGruntプラグイン。

    :top: back to top

    その他のツール

    Elmに関連する便利なツール。

    • Elm Catalog - Elmツールの一覧。
    • Dependabot - elm.jsonの自動更新PR。
    • Elm Doc Preview - Elmオフラインドキュメントプレビューバー。
    • Elm Format - Elm Style Guideに従った自動Elmコードフォーマッター。
    • Elm JSON - Elm依存関係のインストール、アップグレード、アンインストール。
    • Elm Oracle - Elmソースファイル内の値に関する情報を照会。ほとんどのエディタプラグインで使用。
    • type-o-rama - JS型システムの互換性。
    • Html to Elm - HTMLをElmに変換。
    • elm-posix - Elmを使ってCLIプログラムを書く
    • Litvis - エリムによるliteraryな可視化

    :top: back to top

    エディタープラグイン

    コードエディタでElmをサポートするツール.

    Atom

    • atom-linter-elm-make - Atomエディタ用のエリムコードのリントツール
    • atom-elm-snippets - Atom用のエリムスニペット
    • atom-language-elm - Atomエディタ用の文法ハイライトと自動補完
    • elmjutsu - Atomエディタ用の自動補完、定義へ移動、使用箇所検索、シンボルのリネームなど
    • atom-elm-navigator - プロジェクト内の関数、型定義、ポートにアクセスするためのサイドパネル

    Emacs

    • emacs-elm-mode - エマックスエディタ用の文法ハイライト、エリムREPL、エリムmake、エリムフォーマットの統合

    IntelliJ

    • elm-plugin - IntelliJ IDEA用のエリムプラグイン

    Sublime Text

    Vim/Neovim

    Visual Studio Code

    Other editors

    • elm-light-table - ライトテーブルでの文法ハイライト、REPL、自動補完、パッケージ管理など

    :top: back to top

    サンプル

    Elmで書かれた良いアプリケーションの例.

    • Builtwithelm - Elmで構築されたウェブサイト。Elmで作成されたプロジェクトとアプリの一覧。
    • Elm SPA Example - フルスタックのElmアプリ。CRUD操作、認証、ルーティング、ページネーションなど。 Code / Article / Video
    • Elm Example App - Elmで構築された小さなSPA例（基本的な知識習得用）
    • TodoMVC - TodoMVCアプリの適切な実装。
    • TodoMVC with JSON API - JSON APIでデータを保持する、シンプルでモジュール化された、詳細にドキュメント化されたTodoアプリ。
    • TodoMVC/Firebase - TodoMVCをフォークしたアプリで、start-app、The Elm ArchitectureおよびFirebaseをバックエンドとして使用。
    • TodoMVC in Electron - Electronで実装されたElmのTodoMVCアプリ。ドキュメント化およびテスト済み。
    • Gipher - ElmとFirebaseを使って構築された、GIFを扱うTinderのようなアプリ！
    • Collection of examples - 現実世界のElmアプリに必要な高度な技術を示す、例集。
    • <elm-ement> – カスタム要素の最小限の例。
    • Elm Playground - 学習のための、小さなElmプロジェクト（例をもとに実装）。
    • Elm Architecture in Android - Kotlinプログラミング言語とAnkoライブラリを使用したElmアーキテクチャに基づくAndroidアプリの例。
    • Elm + Phoenix + Webpack - 最小限のElm + Phoenixのセットアップ。Brunchではなくwebpackを使用。
    • Spotify Mapper - Spotify APIと統合されたElmアプリ。新しいアーティストの検索と探索を可能にする。
    • Pokelmon - ElmプロジェクトがPokéAPIを消費している。
    • JWT auth with Django + Elm - Django（バックエンド）とElm（フロントエンド）を使用したJSON Web Token（JWT）認証。
    • Bitcoin BR Chrome Extension - Elmで構築されたChrome拡張機能。すべてのブラジルの取引所におけるビットコイン価格を表示。
    • Elmstagram - Instagram / Articlesの基本的なUIのクローン — Part 1 Part 2 Part 3
    • Kanban Board in Elm - ElmとHTML5 Drag & Drop APIを使って構築されたカンバンボード（Trelloに似たもの）。
    • Elm Playground - 純粋なSPA（ルーティングあり）でElmのさまざまな側面を探索。
    • Elm Hacker News PWA - エルムバージョン0.18を使用したプログレッシブウェブアプリ、公式のハッカー・ニュースAPIを用いて作成
    • Elm Narrative Engine - エルムでインタラクティブフィクション風のストーリーを構築するためのフレームワーク。詳細な例 elmnarrativeengine.com は「選択肢で進む冒険」ゲームの構築方法を示しており、初心者向けです。エルムv.0.19
    • Ari’s Garden - エルムパーサーを用いて構築されたSPA形式のレシピ site
    • Bolster - 端末暗号化されたジャーナルアプリ
    • Conway’s Game of Life - コイニンズのゲーム・オブ・ライフのエルム実装。エルムv.0.19
    • Regex Nodes - エルムで構築された node-based visual editor for fiddling with regular expressions

    Games

    • elm-games - エルムで作られたゲームの優れたリスト
    • TheSpace App - RedditのようなDAppで、ブロックチェーンとキャンバス（ポート経由）を統合したエルムアプリ

    :top: back to top

    コミュニティとサポート

    助けの場所。

    • Discourse - エルムディスクールインスタンス（公式フォーラム）
    • Reddit - エルムのreddit掲示板
    • IRC - elm freenodeで質問を投げましょう
    • Slack - エルムスラックコミュニティ

    :top: back to top

    カンファレンス

    :top: back to top

    Elmから着想を得たもの

    エルムに影響を受けたプロジェクト

    • Bolero - F#をウェブアセンブリでエルミッシュを使用
    • Bucklescript-TEA - OCaml / Reasonと Bucklescript をベースにしたエルムアーキテクチャ
    • Elchemy - 静的に型付けされたエルム風の構文を使用したElixirコードの記述
    • Elmish - F#アプリ向けのエルム風の抽象化
    • Fabulous - F#の機能型アプリ開発、宣言型動的UIを使用
    • Flame - 純粋なパースクリプトでエルムアーキテクチャを提供するライブラリ
    • Hyperapp - エルムアーキテクチャをJavaScriptで提供するライブラリ
    • Iced - Rustで跨平台GUIライブラリ。Elmをインスピレーションとして作られたもの
    • Indigo - Scala.js向けのElmをインスピレーションとしたゲームエンジン。Indigo
    • Lustre - GleamでElmアーキテクチャを提供するライブラリ
    • Miso - HaskellでElmアーキテクチャを提供するライブラリ
    • Mobius - Spotifyが開発したAndroidアプリ向けのElm風抽象構造
    • React-tea-cup - IBMが使用している、React向けにElmアーキテクチャを提供する薄いライブラリ
    • Redux - JavaScriptアプリ向けの予測可能な状態コンテナ
    • Roc - Elmをインスピレーションとして作られたWebAssemblyおよびマシンコード向けの言語
    • Sauron - Web向けにElmアーキテリクチャを提供するRustのライブラリ
    • SwiftUI
    • Tyrian - Scala.js向けのElmをインスピレーションとしたフロントエンドフレームワーク。Tyrian
    • MAUI - .NETマルチプラットフォームアプリUI
    • Oolong - Kotlinマルチプラットフォーム向けのElmをインスピレーションとしたモデル・ビュー・アップデート(MVU)実装

    :top: back to top

    DOM以外の用途

    現在、エルムはブラウザに強く向かっています。DOM以外でのエルムの使用に関する実験は以下の通りです：

    • iOS Elm 0.18を用いたネイティブiOSアプリのプロトタイプ
    • elmish-wasm ElmをWebAssemblyにコンパイルするプロトタイプ
    • elm-serverless Serverless Frameworkを使ってElm 0.18をクラウドファンクション上で実行
    • elm-posix - Elmを使ってCLIプログラムを書く

    :top: back to top

    その他のAwesomeリスト

    他の驚くべき素晴らしいリストも発見できます。

    素晴らしいElmは素晴らしいことの一部にすぎません。もっとはこちらから：

    :top: back to top

    ライセンス

    CC0