同じ内容qiitaに投稿しても「いいね」0だけどdev.toにpostすると10分でリアクション10付く

個人的なメモとして残しておく

なぜVaillaJSを使うのか

なぜVanilla JSを使うのかというととにかくパフォーマンスがいいそうで。
下のサイトに書かれています。
http://vanilla-js.com/

爆速で有名のdev.toもVanllaだそうです。

https://dev.to/

Ajaxを実現してみる

• jQueryの場合

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});

• VanillaJSの場合

      var request = new XMLHttpRequest();
      request.open('GET', '/my/url', true);

      request.onload = function() {
          if (request.status >= 200 && request.status < 400) {
              // Success!
              console.log("成功")
          } else {
              console.log("失敗")
          }
      };

      request.onerror = function() {
          console.log("失敗")
      };

      request.send();

なにか間違ってたりしたらコメントください。お願いします😓

ソース

Changelog: Bookmarks!

これによると記事の下部に新しくしおりアイコンが設置され、クリックするとreadinglistに追加される模様です。

この変更に伴い考えるemojiと両手を挙げるemojiが削除されました。

ただ代わりになるような変更が近いうちにリリースされるようですので期待して待ちましょう

はじめに

表示速度が爆速で有名なプログラマ向け記事投稿サイト、dev.to。

そのdev.to が β 版ダークモード(Night Mode)を公開し始めたようです。

簡単に内容を紹介していきます。

tl;dr

dev.to にアクセスした後、おもむろに Webブラウザの開発者ツールを開き、Console から以下のコマンドを実行しましょう。

document.body.className = 'night-theme';

するとこの状態から…

ダークモードに変貌します！！！

直接 DOM の body class をいじって切り替えるあたり、β版っぽさというか隠しコマンド感があって良いですね…！

詳細について

以下の記事で紹介されていました。簡単に内容を要約します。

Previewing dev.to's Upcoming Night Mode - DEV Community 👩‍💻👨‍💻

• Night Mode はかねてよりあった要望だ
• ずっと backlog の issue に残っていたが、@rkichenama の PR によって動き始めた
• 残念ながら、CSS スタイル自体は未完成。単純に色を反転しただけの状態で、画像もグレースケールになってしまう状態
• しかし、何もない状態よりはずっと良い。Night Mode が利用できるようになったことを嬉しく思う
• 現在テストできないわけではない。β版 Night Mode として、ここから、今すぐにテストすることが可能だ！

すでにこの記事上でもPR上でも、フィードバックが多数飛んでいます…！

終わりに

Contributer がダークモードの PR を出し、未完成でも β版として公開していく dev.to チーム。アップデートの勢いを感じますね。

実際にダークモードを試してみてフィードバックを出してみるのも良いかも知れませんね。

https://dev.to/aspittel/moving-past-tutorials-8-tips-for-problem-solving-3e0p

本文

Trust yourself
Trust yourself to try writing the code without help at first -- you have your pseudocode and have gone through that tutorial. Before you start searching for an answer, trust your intuition and write some code. Then debug it methodologically if needed. Or think through why it isn't working as expected. Don't immediately jump back to the tutorial, Google, or a colleague -- try yourself first. It will have the biggest benefit to your learning process.

日本語訳（グーグル翻訳をちょっと修正）

自分を信頼してください
最初は自分自身を信頼し、助けを借りずにコードを書いてみてください - あなたはあなたの擬似コードを持っていて、そのチュートリアルを通過しました。あなたが答えを探し始める前に、あなたの直感を信頼してそして何らかのコードを書いてください。その後、必要に応じて方法論的にデバッグします。それとも、なぜ期待どおりに機能しないのかを考えてみてください。すぐにチュートリアル、Google、または同僚に戻ることはしないでください - まず自分で試してください。それはあなたの学習過程に最大の利益をもたらすでしょう。

他にもたくさんの内容が書いてあります。ぜひ、サイトの方をのぞいてみてください。
この記事を読むまで、私は自分の記憶力をあてにしていませんでした。すぐにグーグルを頼りました。
なんども検索することで、覚えることはできましたが、それは、早いとは言えませんでした。
最近は、少しでもわかるなら、まずコードを書いてみます。結局のところ、そのあとに、検索しなければいけないことの方が多いので、無駄な時間かもしれません。
しかし、記憶への定着は今の方が早いと感じています。

日本ではあまり目立っていませんが、freeCodeCampというオンライン学習サイトとして世界最大規模のコミュニティが存在します。
規模をわかりやすく言うとGitHubのスター数がトップです。

そしてここはブログ機能があるのですが、記事を自前で持ってるわけではなくMediumを使っていました。
しかし先日2019/05/27に、自ら運営する準備ができたようで、記事をMediumからfreeCodeCamp Newsに移行するという発表を行いました。

以下はそのことについてBen Halpernが書いたI'm concerned with the move that FreeCodeCamp just pulled by leaving Mediumという記事の日本語訳です。

I'm concerned with the move that FreeCodeCamp just pulled by leaving Medium

FreeCodeCampは素晴らしい組織であり、関係者達はみんな崇高な志を持っていると考えています。
しかし彼らが昨日発表したアナウンスと彼らの意図に、私は戸惑い、心配しています。

What they did

FreeCodeCampは、多くの適切な理由により、Mediumから移行したことを発表しました。

開発者コミュニティに伝えたいことを何でも書くことができる、独自のオープンソースパブリッシュプラットフォームがあります。
訪問者はこれまで以上に多くなります。
もうサインインを求めるポップアップで邪魔されることはありません。訪問者は自由にあなたの記事を閲覧することができます。
この移行計画は長期にわたる予定で、まだかなりの数のバグが存在します。

私はかつて、MediumのビジネスモデルやインセンティブとfreeCodeCampのそれのずれについて、懸念を表明したことがあります。
それがdev.toの存在する大きな理由です。
しかし、今回は別の話です。

私の考える最大の懸念は、FreeCodeCampが、Mediumや著作者が暗黙的または明示的に表明している合意条項に違反している可能性のある方法で、この移行をやってしまったのではないかと思われることです。

What I can tell

Mediumに投稿されたFreeCodeCampの全ての記事は、著者の項目がこのように表示されています。

"Visit author's page"を押しても、本来の著者は何処にも表示されません。

実のところ私は、それらの記事の作者がそのコンテンツをMediumから移動させることに同意していないことを知っています。

例えば、以下の記事はまずdev.toに投稿され、Mediumにクロスポストし、FreeCodeCampに公開されました。

dev.toの記事

Mediumの記事

Mediumの記事においては、canonical URLはオリジナルであるdev.toの投稿へとリンクされています。
ところが、FreeCodeCampへの移行においてはこの意思が尊重されませんでした。

著者たちに記事の配布場所を提供するサービスの創設者として、このことは極めて深刻な問題であると考えています。
我々は利用規約、そしてFAQにおいて、その姿勢を表明しています。

あなたは、あなたが作成してdev.toに投稿するコンテンツに対する権利を所有し、あなたが適切と考えるように投稿・編集・削除する完全な権限を持っています。

Mediumの規約にも同じようなことが書かれています。

あなたは、あなたが作成してMediumに投稿するコンテンツに対する権利を所有する。

Hackernoonは現在、Mediumからの長期にわたる脱出計画を画策していますが、上記のような問題は全て考慮に入れているようです。
実際、HackerNoonについてMediumは以下のように述べています。

Mediumに関する出版物はMediumの規約によって制限されており、明示的に許可しないかぎり、彼ら(HackerNoon)にはあなたのコンテンツに対する権利はありません。
これには、Medium以外のWebサイトへのコンテンツのエクスポート、コピー、転載などが含まれます。
あなたのコンテンツをMediumから新しいHackernoon.comへ移動したくない場合は、メールに同意しないでください。
あなたの投稿は引き続きMediumで利用可能です。

FreeCodeCampは、全員のMediumのコンテンツを全て抜き取り、正規のURLを削除し、著者から記事の編集・削除・管理能力を奪い取りました。

私が何か間違っているようであれば、コメントで教えてください。

コメント欄

Ali Spittel

私はdev.toで働く前は、自分のブログからdev.toとMediumの両方にクロスポストしていました。
視聴者層の異なる3カ所に投稿することが私の戦略であり、それは非常にうまく行っていました。
そして、そのCanonical URLは私のブログを成長させるために本当に重要でした。

私がFreeCodeCampにクロスポストした投稿のいくつかは、あるキーワードで1位になっています。
もしCanonical URLがなかったら、Gooleはそれをスパムや盗用と考え、コンテンツにペナルティを科すでしょう。

私のコンテンツを読んだ人は、私がコンテンツ作成にどれくらい時間を費やしているか知っているかと思います。
おおむね8から10時間かけて(主に日曜日のレストランで)、そしてそして私はコンテンツをマネタイズしたことは一度もありません。

私の書いた記事がこの新しいサイトに置かれており、私の名前が非常に見つけにくいところにあり、そしてcanonical URLが正しいdev.ioを示していないことに、私は本当にがっかりしました。
壮大な計画の前では、私のキャリアなどたいして重要なことでもないかもしれませんが、しかし、プラットフォームはコンテンツ制作者のことを第一に考える必要があると私は思います。

私はこの新しいサイトが公開されるかどうか、フォーマットがどうなるのか、それともコンテンツを削除するのか、ということも何も知りませんでした。
新しいサイトへの移動の許可を求めるメールを見逃していないか確認するため、受信トレイを何度も検索しましたが、何も見つかりませんでした。
そして、おそらく他の著者に対しても同じことをやっているのでしょう。

HackerNoonがMediumをやめたときにも同じような経験をしましたが、それは非常に異なっていました。
彼らは私のコンテンツを移動する前に、私に許可を求めました。

幸いなことに私の読者はSNS、dev.toと来てSEOは3番目なので、影響はそこまで大きくありませんが、しかし、多くの新人コンテンツ制作者にとってSEOは本当に重要な要素です。
SEOは彼らのブログに注目を集める能力に多大な影響を与えます。

SEOの重要性についてはここで読めます。

Quincy Larson

我々は、既にDan Abramovが述べた理由によってMediumから脱出しなければなりませんでした。
freeCodeCamp NewsはGhostオープンソースプラットフォーム上にあり、非常にパワフルです。
記事へのフルアクセス権を与えるため、全ての著者へとアクセスします。
とりわけ、彼らはcanonical URLを更新し、記事を完全に分析できるでしょう。

これについてもう少し詳しく書きました。https://www.freecodecamp.org/forum/t/279929

我々はオープンウェブの支持者であり、そしてまたdev.toの大ファンです。
我々は、開発者が個人のブログに投稿した記事をクロスポストするもうひとつの場所がfreeCodeCamp Newsになることを願っています。

Ben Halpern

Mediumを辞める理由は知っていて、それについては立派だと思います。
しかし、透明性や同意無しに全員のデータを取り込んでコンテンツを再配布することが最大の問題です。
私は弁護士ではありませんが、膨大なコンテンツを抱える立場にしては、非常に不安定な足場だと思います。

その他

「いや、元のcanonical URLをそのまま使えよ。いちいち著者に変更させるのはどうなんだ。」「Mediumがcanonical URLを設定させませんでした。」「なわけねー。Mediumツールでインポートしたらcanonical URLはちゃんと指定される。」「そのような記事はありますか？」「この記事のAliの投稿がまさにこれ。Mediumではcanonical URLがdev.toになってる。freeCodeCampはなってない。」

「あなたが間違っているとは思わない。」
「私はコンテンツ制作で生計を立てていないが、そうしている人にとって、投稿からcanonical URLが消されたことは気の毒だ。」
「これはひどい・・・何かバグでもないかぎり、あなたが見逃したことがあるとは思えない。」
「この記事を読むまで、canonical URLが何のために存在するのか、本当には理解できていませんでした。」
「Wow！私はfreeCodeCampにたくさん記事を投稿しましたが、まさかこんなことをするとは思ってなかったよ。」
「これは、Quincyに記事をdev.toにクロスポストするよう説得するチャンス！」

「canonical URLを変更できることに驚いた。本人以外はできないと思ってた。」「Mediumに残ってる記事のcanonical URLはそのまま。新サイトにコピペされた記事のcanonical URLが書き換えられてる。」

解説

最初の記事は、元々外部サービスを使っていたところを、自分のところで運用することにした、という発表です。
これ自体はまあ、それまでYoutubeを使っていたニコニコ動画が自社でストレージを持つようにした、みたいなものでたいした話ではありません。

問題は、それに伴って『記事をMediumからfreeCodeCampにコピペした』『canonical URLを自サイトに書き換えた』『しかも著作者に無断で行った』というところです。
ニコ動の例で言うなら『Youtubeに上がっていた動画をニコ動にコピーした』『著作者表示を自分の名前に書き換えた』『しかもアップロード者に無断で行った』みたいなものです。
どうしてそれで問題が起こらないと思ったのか。

まず記事の表記名として、MediumのfreeCodeCampページでは各投稿者が投稿している記事が、freeCodeCamp上では全てFREECODECAMP.ORGが投稿したように見えています。

さすがに問題がありすぎたためか、この表示は早々に修正されました。

修正する前に、コメント欄でそのうち修正するとか言ってたんだけど、どう考えても公開前にやっておくべきことだったことだろ。

さらに問題なのはCanonical URLを勝手に書き換えていることであり、これは出自を奪い取るだけではなく、SEO的にも問題になります。
freeCodeCampは元々検索に強いこともあり、freeCodeCampの記事が優先され、元記事であるはずの本人のブログのほうが盗用扱いされてランキングが下がってしまう可能性が高いでしょう。

これらの問題について、本人が記事を修正できるようにすると言っていますが、修正するにはfreeCodeCampアカウントを作れとか巫山戯たことが書いてあってこりゃひでえ。

最初からオプトインにしておけば何の問題もなかったのに、オプトアウトにしたせいで問題噴出ってことですね。

感想

コメント欄にいるAli Spittelは、dev.toの中の人であり、本文中の例で出てくる"The most important non-programming skills for programmers"の記事を投稿した人です。
Quincy LarsonはfreeCodeCampを作った人です。

そして、この記事の著者Ben Halpernってのは誰なのかというと、dev.toを作った人です。
そりゃ懸念も示すわってかんじですね。

あとQuincy Larsonのコメントはなんか全体的にピント外れで、大丈夫なのかこの人？

やってる人と取り上げてる人からいって、もっと騒動になってもおかしくなさそうなのに、今のところだいぶ全体的に静かです。
現状これについて取り上げているメディアは、英語圏含め存在しないようです。
しかし今後の舵取り次第では激しく燃えそうな気配です。
果たしてどうなるでしょうか。

ちなみに途中で出てくるHackerNoonはこのあたりの話です。
ざっくり言うと、HackerNoonも同じようにMediumからの脱出を図っているけど、オプトインを選んだから同意しないかぎり記事が勝手に移動されることはないよ、というものです。

なお、個人的には、clap数表示がなくなった時点で魅力9割減。
Qiitaもですが、なんで一覧ページから評価を消すんですかね？

Gatsby？ああ、MovableTypeの翻案ね(間違い)

以下はMarc Grabanskiによる記事、What Front-End Developer Skills Should You Focus on Learning for the Rest of 2019?の日本語訳です。

What Front-End Developer Skills Should You Focus on Learning for the Rest of 2019?

こんにちは、私はFrontend MastersのCEO、Marcです。
このたびdev.toコミュニティのスポンサーになれることを嬉しく思います！😀

JavaScript and Front-End Engineering

我々は、地球上で最も急激に変化し、進化する、そして最も活発なコミュニティのひとつに居ます。

JavaScriptはES6以降、毎年多くの進化をし続けています。
Node.jsが現れて以来、多くの企業がサーバでもJavaScriptを使い始めました。
フロントエンドWeb開発者は、ツールやビルドツール、フレームワークの進化と共に変化し、進化し続けています。
その最先端の一部はWeb AssemblyとReact Hooksで、我々がやがて何を作り出せるかを見るのが楽しみです。

さて、2019年の残り時間に集中して学習すべきスキルは何でしょうか。
以下では3カテゴリに分けて紹介します。

1. Begin Coding Now
   これからコーディングを始める人。

2. Becoming a Professional Front-End Developer
   フロントエンドエンジニアのプロフェッショナルになりたい。

3. Becoming a Well-Rounded Engineer
   フルスタックエンジニアになりたい。

1. Begin Coding Now

手短に言うと、最初に正のフィードバックループを手に入れることが最も重要です。
何かを変更して、そうしたらすぐにその結果がわかる、ということです。

Get Started: Scratch, HTML/CSS/JS or Python

始めよう。Scratchでも、HTML/CSS/JSでも、Pythonでも。

私は、どの言語やツールからプログラミングを始めるかは問題ではないと考えています。
それがScratchでも、HTMLでも、CSSとJavaScriptでも、Pythonでも、あるいは何らかのフレームワークであっても。
大事なのは、正のフィードバックループを確立し、アイデアを構築し、プログラミングに興味を持つことです。

2. Becoming a Professional Front-End Developer

Mastering the Fundamentals of JavaScript

JavaScriptの基礎をマスターする。

Frontend Mastersは、JavaScriptの基礎とプログラミングパラダイムは、普遍的なものであると信じています。
スコープとクロージャの仕組み、プロトタイプシステム、および型システムは、あなたのキャリアにおいて何度も何度も学習することが必要になるでしょう。

Know Your Paradigm: Functional and Object Oriented Programming

自分のパラダイムを知ろう。関数型？オブジェクト指向？

JavaScriptはマルチパラダイム言語であるため、オブジェクト指向と関数型パラダイムの両方を学習することで、より高次のレベルに到達しやすくなります。
オブジェクト指向は大規模なアプリケーションを構築する一般的な手法です。
その次は関数型からmap、reduce、filter、純粋関数、コンポジションといった概念を取り込みましょう。

最後に、オブジェクト指向と関数型をどのように使い分けるかを身につける必要があります。

React or Vue?

プロフェッショナルなコードを素早く作成したい場合、最も早い方法はReactやVueといったフレームワークを使うことです。
大抵の仕事では、これらトップフレームワークの少なくともひとつを深く知っていることを要求されます。

多くの知識人は私がAngularに言及しなかったことに反応するかもしれません。
しかし、Angularは初めて扱うのに適したフレームワークだとは思いません。
なんでもかんでも入ってる、という思想を活かすのに十分な規模のプロジェクトは、最初のうちはやってきません。

Developer Tools

開発者ツールの使い方を習得し、コードをデバッグし、アプリケーションのパフォーマンスを向上させましょう。

TypeScript

開発者のエクスペリエンスを向上させるためにTypeScriptを導入する企業は年々増加しています。

CSS Grid and Flexbox

CSS GridとFlexboxは、あらゆるデバイスで動作するレスポンシブWebサイトをレイアウトするために不可欠です。

Webpack

Create React AppやParcelといったツールは導入を簡単にしてくれますが、より詳しくなるためにはWebpackを学んでください。
出力コードを最適化するためのカスタムビルドを作成しましょう。

3. Becoming More Well-Rounded

Design Skills

基本的なデザインスキルを手に入れることで、より望ましいオールラウンド開発者になることができます。

Node.js & Full-Stack Deployment.

Node.jsを学び、APIを構築する方法を学び、フルスタックエンジニアになりましょう。

アプリを自分でセットアップ・デプロイできるなら、さらに応用範囲が広がります。

現在はアプリのデプロイ先としてAWSが最も勢いのあるプラットフォームですが、Azureも人気を集めつつあります。

SVG

最も能力に秀でていて、そして最も活用されていないグラフィックフォーマットのひとつがSVGです。
モバイルデバイスから看板サイズまで自在に拡縮することができる、非常に優れた形式です。

Testing

壊れたコードを作っていないことを保証したいですか？
Jestのようなテストランナーでテストを行い、壊れたデプロイを防ぎましょう。

Git

コードを失った？
あなたがGitマスターであれば、コードを失うことは決してなく、マージ時に問題が発生したとしても復旧することができます。
Gitのエキスパートは、開発チームの全員から崇拝されるでしょう。

Computer Science

計算量の求め方を計算し、正しいアルゴリズムとデータ構造の使い方を知ることで、エンジニアリング思考力を育て、より効率的なソリューションの開発ができるようになります。

Accessibility

WebサイトとWebアプリケーションがあらゆる人に開かれていることを確認するために、アクセシビリティの理解は重要です。
またナビゲーションにキーボードだけを使用するようなパワーユーザも満足させます。

Newer Skills

高パフォーマンスなWebサイトを作るため、Gatsbyが市民権を得つつあります。

ブラウザで3DのCanvasとWebGLが広くサポートされたため、ブラウザ上でクリエイティブコーディングが可能になりました。

GraphQLはRESTのようにAPIを複数のエンドポイントに分けるのではなく、クライアント側で欲しいデータを正確に指定できるため、APIの柔軟性を高めることができます。

2019年残りの期間に開発者が学ぶべきだと、あなたが考えるスキルは何ですか？

コメント欄

「アマ開発者とプロ開発者の境目はテストだと考えているので、全ての技術スタックでテストを考えるべき」「同意しかない。しばしばテストは後回しにされるけど、TDDは実際最優先されるスキルになりつつある。」
「ここ最近で学習コースを一通り渡り歩いて、FEMは私の人生に必須のツールボックスになったよ。」「それは良かった！あなたのキャリアに幸ありますように！」「あとフロントエンドハンドブックも手放せない。」「ナイス！2020年版も既に作り始めてるよ！」
「現在TypeScriptコースを受講してる。満足したらテストコースやCSコースも受けたい、楽しみ。」
「基礎を全く持ってない人はLinkedInやUdemyのような初心者コースから始めたほうがいい？」「FEMはまさにあなたのためのコースも用意してるよ！ラーニングパスも参考にしてね。」
「Svelteコースがみつからなかった。今後追加される予定はありますか？」「作者のRich Harrisと何かするつもりだけど、まだ決まってないんだ。」
「Accssibility！」「追加した！」
「Flutter…まだモバイルだけだけど、WebバージョンのHummingbirdが近付いてる。Dartはよいぞ。」
「JAMStackとサーバレスにも言及が必要。」

感想

FrontendMastersはフロントエンド中心の学習コースを提供しているサイトです。
費用は月$39、年間$390と決して安くはありませんが、評判は悪くないようで、特に中上級者向けだそうです。
英語のヒアリングが苦にならない人は試してみてはどうでしょうか。

それ以外の活動としては、毎年Front-End Developer Handbookを発表しています。
フロントエンドについてはかなり最強に近いところではないかと思います。

そんなところが勧めるのですから、半分はコースの宣伝だったとしても、学習方針としては適切な方向性を向いているのではないでしょうか。
コースを受講するかどうかは別として、出てきた技術を学習することは決して悪くないと思います。

Pythonでコードを書くときのGood/Badプラクティス

こちらの記事は、DuomlyによりDev.to上で公開された『 Good and Bad Practices of Coding in Python 』の邦訳版です（原著者から許可を得た上での公開です）

元記事：Good and Bad Practices of Coding in Python

（以下、翻訳した本文）

この記事は元々 https://www.blog.duomly.com/good-and-bad-practices-of-coding-in-python/に公開されたものです。

Pythonは可読性を重視した高水準のマルチパラダイムプログラミング言語です。Pythonは、「Pythonの禅」、別名ではPEP 20と呼ばれるルールに従って開発、保守され、幅広く使用されている言語です。

この記事では、頻繁に会う可能性が高いPythonでのコーディングの良い例と悪い例をいくつか示します。

アンパック（unpacking）を使用して簡潔にコードを記述する

パック（packing）とアンパック（unpacking）は強力なPythonの特長です。アンパックを使用することで、複数の値を複数の変数に割り当てることが可能です。

>>>a,b=2,'my-string'>>>a2>>>b'my-string'

この動作を利用して、コンピュータープログラミングの世界全体でおそらく最も簡潔でエレガントな変数スワップを実装することができます。

>>>a,b=b,a>>>a'my-string'>>>b2

アンパックは、より複雑な場合の複数の変数への割り当てに使うことができます。たとえば、次のように変数へ値を割り当てることはできます。

>>>x=(1,2,4,8,16)>>>a=x[0]>>>b=x[1]>>>c=x[2]>>>d=x[3]>>>e=x[4]>>>a,b,c,d,e(1,2,4,8,16)

しかし、代わりに、より簡潔で間違いなく読みやすいアプローチを使うことができます。

>>>a,b,c,d,e=x>>>a,b,c,d,e(1,2,4,8,16)

イケてますよね？でも、これはさらにイケてます。

>>>a,*y,e=x>>>a,e,y(1,16,[2,4,8])

ポイントは、*付きの変数が他に割り当てられていない値をまとめているという点です。

チェーンを使用して簡潔にコードを記述する

Pythonでは、比較演算をチェーンさせることができます。したがって、2つ以上の比較演算がTrueであるかどうかを使用して確認する必要はありません。

>>>x=4>>>x>=2andx<=8True

代わりに、数学者のように、これをよりコンパクトな形式で書くことができます。

>>>2<=x<=8True>>>2<=x<=3False

Pythonは連鎖割り当てもサポートしています。したがって、複数の変数に同じ値を割り当てる場合は、簡単に行うことができます。

>>>x=2>>>y=2>>>z=2

よりエレガントな方法は、アンパックを使用することです。

>>>x,y,z=2,2,2

ただし、連鎖割り当てを使用すると、状況はさらに改善されます。

>>>x=y=z=2>>>x,y,z(2,2,2)

値がミュータブルな型の場合は注意してください。すべての変数は同じインスタンスを参照します。

Noneのチェック

NoneはPythonでは特別でユニークなオブジェクトです。Cライクな言語でのnullと同じような目的があります。

変数がNoneを参照しているかは比較演算子の==および！=で確認することができます。

>>>x,y=2,None>>>x==NoneFalse>>>y==NoneTrue>>>x!=NoneTrue>>>y!=NoneFalse

しかし、よりPython的で望ましいのはisおよびis notを使うやり方です。

>>>xisNoneFalse>>>yisNoneTrue>>>xisnotNoneTrue>>>yisnotNoneFalse

さらに、より可読性の低い代替手段のnot (x is None）よりも、is not構文であるx is not Noneを使用することをお勧めします。

シーケンスと連想配列の繰り返し

Pythonでは、いくつかのやり方で繰り返しとforループを実装できます。Pythonはそれを容易にするためにいくつかの組み込みクラスを提供しています。

ほとんどすべての場合、範囲を使用して整数を生成するイテレータを取得できます。

>>>x=[1,2,4,8,16]>>>foriinrange(len(x)):...print(x[i])...124816

ただし、シーケンスを繰り返すより良い方法があります。

>>>foriteminx:...print(item)...124816

しかし、逆の順序で繰り返しをしたい場合はどうでしょうか？もちろん、範囲をまた使うことができます。

>>>foriinrange(len(x)-1,-1,-1):...print(x[i])...168421

シーケンスを逆にする方がよりエレガントなやり方です。

>>>foriteminx[::-1]:...print(item)...168421

この場合、Python的なやり方は、reversedを使用して、シーケンスのアイテムを逆の順序で生成するイテレーターを取得することです。

>>>foriteminreversed(x):...print(item)...168421

シーケンスの要素と対応するインデックスの両方が必要になる場合があります。

>>>foriinrange(len(x)):...print(i,x[i])...01122438416

enumerateを使用して、インデックスとアイテムを含むタプルを生成する別のイテレーターを取得するやり方の方が良いとされています。

>>>fori,iteminenumerate(x):...print(i,item)...01122438416

イケてます。しかし、2つ以上のシーケンスを反復処理したい場合はどうでしょうか。もちろん、範囲をここでも使うことができます。

>>>y='abcde'>>>foriinrange(len(x)):...print(x[i],y[i])...1a2b4c8d16e

この場合、またPythonはより良いソリューションを提供しています。zipを適用して、対となる要素のタプルを取得できます。

>>>foriteminzip(x,y):...print(item)...(1,'a')(2,'b')(4,'c')(8,'d')(16,'e')

アンパックと組み合わせることができます。

>>>forx_item,y_iteminzip(x,y):...print(x_item,y_item)...1a2b4c8d16e

範囲は非常に役に立つものであることを覚えておいてください。ただし、（上記のような）より便利な代替手段がある場合もあります。

辞書を反復処理すると、キーが生成されます。

>>>z={'a':0,'b':1}>>>forkinz:...print(k,z[k])...a0b1

ただし、メソッド.items()を適用して、キーと対応する値を持つタプルを取得できます。

>>>fork,vinz.items():...print(k,v)...a0b1

また、メソッド.keys()を使うことでキーを、.values()を使うことで値を反復処理することもできます。

0との比較

数値データがあり、数値がゼロに等しいかどうかを確認する必要がある場合は、比較演算子==および！=を使用できますが、そうする必要はありません。

>>>x=(1,2,0,3,0,4)>>>foriteminx:...ifitem!=0:...print(item)...1234

Python的なのは、ブール値のコンテキストで0がFalseとして解釈される一方、他の全ての数字はTrueとして見なされるという事実を利用するやり方です。

>>>bool(0)False>>>bool(-1),bool(1),bool(20),bool(28.4)(True,True,True,True)

これを念頭に置いて、if item ! = 0の代わりにただif itemを使えば良いのです。（注意点に関して訳注あり¹）

>>>foriteminx:...ifitem:...print(item)...1234

同じロジックに従い、if item == 0の代わりにif not itemを使用できます。

ミュータブルなオプション引数を避ける

Pythonには、関数とメソッドに引数を提供するための非常に柔軟なシステムがあります。オプション引数はこのシステムの一部です。ただし、注意が必要です。通常、ミュータブルなオプション引数を使用しない方が賢明です。次の例について考えてみます。

>>>deff(value,seq=[]):...seq.append(value)...returnseq

seqを指定しない場合、f()は空のリストに値を追加し、[value]のようなものを返します。これは一見すると、うまくいくように見えます。

>>>f(value=2)[2]

問題なさそうですね？そんなことはありません！次の例を検討してみましょう。

>>>f(value=4)[2,4]>>>f(value=8)[2,4,8]>>>f(value=16)[2,4,8,16]

驚いたでしょうか？混乱していますか？もしそうなら、あなただけではありません。
オプション引数（この場合はリスト）の同じインスタンスが、関数が呼び出されるたびに使われているようです。時には上のコードがしていることと全く同じことをしたい場合があるかもしれません。しかし、それを回避する必要がある場合の方がはるかに多いことでしょう。いくつかの追加ロジックを使うと、これを避けることができます。方法のうちの1つは次です。

>>>deff(value,seq=None):...ifseqisNone:...seq=[]...seq.append(value)...returnseq

さらに短いバージョンは次のとおりです。（※注意点に関して訳注あり²）

>>>deff(value,seq=None):...ifnotseq:...seq=[]...seq.append(value)...returnseq

ようやく、異なる動作が得られます。

>>>f(value=2)[2]>>>f(value=4)[4]>>>f(value=8)[8]>>>f(value=16)[16]

ほとんどの場合、これが欲しい結果です。

従来のゲッターとセッターの使用を避ける

Pythonでは、C++やJavaと同様にゲッターメソッドとセッターメソッドを定義できます。

>>>classC:...defget_x(self):...returnself.__x...defset_x(self,value):...self.__x=value

次が、ゲッターとセッターを使用してオブジェクトの状態を取得および設定する方法です。

>>>c=C()>>>c.set_x(2)>>>c.get_x()2

場合によっては、これがやりたいことを実現するための最良の方法です。ただし、特に単純なケースでは、プロパティを定義して使用する方が洗練されていることがよくあります。

>>>classC:...@property...defx(self):...returnself.__x...@x.setter...defx(self,value):...self.__x=value

プロパティは、従来のゲッターやセッターよりもPython的と考えられています。C#と同様に、つまり通常のデータ属性と同じように使用できます。

>>>c=C()>>>c.x=2>>>c.x2

したがって、一般的には、可能な場合はプロパティを使用し、どうしても必要な場合はC++ライクなゲッターとセッターを使用することがグッドプラクティスとされています。

保護されたクラスメンバーへのアクセスを避ける

Pythonには本当のプライベートなクラスメンバーはありません。ただし、インスタンスの外でアンダースコア（_）で始まるメンバーにアクセスしたり変更したりしてはならないという規約があります。Pythonのプライベートなクラスメンバーは既存の動作を保持していることが保証されていません。

たとえば、次のコードを考えます。

>>>classC:...def__init__(self,*args):...self.x,self._y,self.__z=args...>>>c=C(1,2,4)

クラスCのインスタンスには、.x、._y、._C__zの３つのデータメンバーが存在します。メンバーの名前が2つのアンダースコアで始まる場合は、難号化（mangled）され、変更されます。そのため、.__zの代わりに._C__zができます。（※訳注あり³）

.xには直接アクセスまたは変更しても問題ありません。

>>>c.x# OK
1

インスタンスの外部から._yにアクセスまたは変更することもできますが、これはバッドプラクティスと見なされています。

>>>c._y# 可能だが悪い
2

.__zにアクセスすることはできません。zは難号化されているからです。しかし、._C__zにアクセスまたは変更することはできます。

>>>c.__z# エラー！
Traceback(mostrecentcalllast):File"",line1,inAttributeError:'C'objecthasnoattribute'__z'>>>c._C__z# 可能だが、１個前の例よりさらに悪い！
4>>>

これは避けてください。クラスの作者は、おそらく名前をアンダースコアで始めて、「使用するな」と伝えています。

コンテキストマネージャーを使用してリソースを解放する

リソースを適切に管理するためのコードを記述する必要がある場合があります。これは、ファイル、データベース接続、または管理されていないリソースを持つ他のエンティティを操作する場合によく見られます。

たとえば、ファイルを開いて次のように処理することができます。

>>>my_file=open('filename.csv','w')>>># do something with `my_file`

メモリを適切に管理するには、ジョブ終了後にこのファイルを閉じる必要があります。

>>>my_file=open('filename.csv','w')>>># do something with `my_file and`
>>>my_file.close()

ファイルを閉じることは、閉じないよりもマシです。しかし、ファイルの処理中に例外が発生した場合はどうでしょうか？その後、my_file.close()は決して実行されません。

この場合、例外処理構文またはwithコンテキストマネージャーで対応できます。2番目の方法は、コードをwithブロック内に配置することを意味します。

>>>withopen('filename.csv','w')asmy_file:...# do something with `my_file`

withブロックを使用するということは、特殊メソッドの.__enter__()と.__exit__()が例外が発生した場合でも呼び出されることを意味します。これらのメソッドがリソースの面倒を見てくれるはずです。コンテキストマネージャーと例外処理を組み合わせることで、特に堅牢な構成を実現できます。

コードスタイルに関してのアドバイス

Pythonコードは、エレガントで簡潔で読みやすいものにする必要があります。それは美しいはずです。

美しいPythonコードの書き方に関する究極のリソースは、「Style Guide for Python Code」、またの名を「PEP 8」です。Pythonでコーディングする場合は、必ず読むべきです。

結論

この記事では、より効率的で読みやすく、より簡潔なコードを書く方法についていくつかのアドバイスを提供しています。つまり、Python的（Pythonic）なコードの記述方法を示しています。さらに、PEP 8はPythonコードのスタイルガイドを提供し、PEP 20はPython言語の原則を示しています。

Pythonicで役立つ美しいコードを書くことを楽しみましょう！

はじめに

本記事はTapas Adhikaryさんより許可を得て、『10 useful HTML5 features, you may not be using』をやっすんが日本語にまとめたものです。

完全訳ではないので、ご興味をもたれた方は、ぜひオリジナルもご確認していただければと思います。
10 useful HTML5 features, you may not be using

動画も用意しているので、動画でさらっとみたい方はこちらをどうぞ！

【YouTube動画】 あなたの知らない HTML5 10の機能

Detailタグ

では早速やっていきます！
Detailsタグを使うと、文字の折りたたみができます！

See the Pen Detail Tag by yassun-youtube (@yassun-youtube) on CodePen.

実はQiitaでも使えます。
以下のように、クリックすると折りたたんだ文章を展開できます！

helloworld!!!

こんな感じで書いてます。

<detail><summary>クリックしてみると...</summary><div><!-- 
表示したい内容
マークダウンも使えます
--></div></detail>

Content Editable

属性にcontenteditable="true"を追加すると、コンテンツの編集が可能になります。

See the Pen Content Editable by yassun-youtube (@yassun-youtube) on CodePen.

Map

(このタグはHTML4から使えた気がしますが、細かいことは忘れましょう！)

mapタグを設定して、coordsでリンク場所を指定することができます。
codepenで再現すると、戻れなくなるので、本家からお試しください！
https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0#map

<div><imgsrc="https://html5-tips.netlify.app/map/circus.jpg"width="500"height="500"alt="Circus"usemap="#circusmap"><mapname="circusmap"><areashape="rect"coords="67,114,207,254"href="https://html5-tips.netlify.app/map/elephant.htm"><areashape="rect"coords="222,141,318, 256"href="https://html5-tips.netlify.app/map/lion.htm"><areashape="rect"coords="343,111,455, 267"href="https://html5-tips.netlify.app/map/horse.htm"><areashape="rect"coords="35,328,143,500"href="https://html5-tips.netlify.app/map/clown.htm"><areashape="circle"coords="426,409,100"href="https://html5-tips.netlify.app/map/clown.htm"></map></div>

Mark

markタグを使うと、文字の背景にハイライトをつけることができます。

See the Pen Mark by yassun-youtube (@yassun-youtube) on CodePen.

data-* attribute

任意に設定した値にJS側でアクセスできるようになります。

See the Pen data-* attribute by yassun-youtube (@yassun-youtube) on CodePen.

Output

data-* attributeで入力値をJS側で計算して出力しなくても、HTMLだけで完結できます。

See the Pen Output Tag by yassun-youtube (@yassun-youtube) on CodePen.

oninputの部分を以下のように、textContentにすれば、outputタグ以外でも同じような使い方ができます。

oninput="x.textContent=parseInt(a.value) * parseInt(b.value)"

See the Pen ZEOMZrE by yassun-youtube (@yassun-youtube) on CodePen.

Datalist

datalistとoptionを組み合わせることで、データを選ぶことができます。
また、存在しない単語を入力すると、その単語が追加されます。

codepenで実行すると、警告画面がでますが、右下のRerunで元の画面に戻ります。
戻ると、先ほど入力した値が入っているのが確認できますね。

See the Pen Datalist by yassun-youtube (@yassun-youtube) on CodePen.

Range

HTMLだけでRangeバーが作れます。

See the Pen Range by yassun-youtube (@yassun-youtube) on CodePen.

Meter

今何%入力が終わりました... みたいな使い方ができます。

See the Pen Meter(Progress) by yassun-youtube (@yassun-youtube) on CodePen.

Pattern

pattern属性で正規表現を設定すると、HTMLだけでバリデーション付きの入力フォームを作成できます。

See the Pen Inputs by yassun-youtube (@yassun-youtube) on CodePen.

color picker

input type='color'で、カラーピッカーも使えます！

See the Pen Color Picker by yassun-youtube (@yassun-youtube) on CodePen.

まとめ

知っている、使ったことがあるHTMLの機能はいくつありましたか？

実際のプロダクトで使うのは難しそうですが、簡単なサイトで使えると楽しいですね。

興味をもった方はぜひ、本家もご確認ください！
10 useful HTML5 features, you may not be using

はじめに

今回はdev.toで話題の5 Javascript Projects You Should Build as Junior Frontend Developerを紹介します！

この記事では、自身のスキルを示すために作ると良いポートフォリオについて紹介しています。

HTML/CSSの知識をフル活用して作るもの、React/Vue/Angularなどのフレームワークを使って作るもの、外部APIとうまく連携させて作るもの、セッション管理を考えたり、NoSQLを使って作るものなど幅広い種類のアプリを作りながら、スキルの棚卸しができます。

YouTube動画

動画で確認したい方はこちらをどうぞ！
【YouTube動画】 フロントエンドエンジニアとして、働くまでに作るべき5つのポートフォリオ

HTMLとCSSでブログテンプレートを作る

こちらでテンプレートをみることができます。

フロントエンド技術を学び始めたばかりの頃はHTML/CSSの知識が非常に大切になってきます。
プログテンプレート作成で、それらのスキルを身に付けることができるので、オススメです。

試して欲しいこと、必要なスキル

• ホームページ、投稿ページ、問合せページを作る
• CSSのGridを使ってみる
• ウィンドウ幅で見た目が変わるレスポンシブサイトにしてみる

+α

• サイドバーも付けてみる
• 記事の内容もきちんと書く

○×ゲームをJavaScriptで作る

ブラウザゲーム作成はJavaScriptのスキルを確かめるのに役立ちます。
ユーザーイベントの検知やDOMの扱い、ゲームデータの保存方法を身に付けることができます。
また、開発できたら同僚や家族に見せて遊んでもらうこともできます！

試して欲しいこと、必要なスキル

• プレイヤー名を入力して、表示できること
• クリックを認識して○×を付けること
• 勝ち負けをきちんと判断すること

+α

• 得点をローカルストレージで保存して表示すること
• アルゴリズムを組んで、コンピュータと対戦できるようにすること

位置情報共有サイトをJavaScriptとマップサービスで作る

友達と位置情報を共有できるサービスは、自身も使うことができる便利なツールになります。
このアプリはJavaScriptとGoogle MapsやOpenStreetMapなどの外部サービスのAPIを使って実装します。

試して欲しいこと、必要なスキル

• 現在地をマップに表示させること
• シェアボタンを押すと、自分の現在地を示すリンクが生成されること
• 上記のリンクをクリックすると、現在地が表示されること

+α

• Firebaseなどを使って、リアルタイムに現在地を表示すること
• Webページにアクセスした人、それぞれの位置情報をリアルタイムで表示すること

TV情報まとめサイトを作る (React, Vue, Angularを利用)

このアプリはテレビ好きが情報収集するのに役立ちます。
使い慣れているJavaScriptフレームワークを使用する良い機会になります！

試して欲しいこと、必要なスキル

• 外部APIを使ってTV情報を取得すること (海外だとTVMaze APIなど)
• 好きなTV番組をお気に入りに登録でき、最新話をトップページに表示すること
• TV番組の概要ページが見れること
• お気に入りをローカルストレージに保存すること

+α

• 最新話が来たら、メールやプッシュ通知でお知らせすること

家計簿アプリを作る (React, Vue, Angularを利用)

家計簿アプリを作成することは、ジュニアフロントエンド開発にとって、究極とも言えるスキルチェックになります！
フォームを作成したり、様々な情報を保存したり、グラフを描画したりする技術が必要です。
また、このアプリを開発できれば、自身の節約にも役立ちます。

試して欲しいこと、必要なスキル

• カテゴリ機能を入れること
• 購入した商品の名前、数、値段を入力できること
• 月、カテゴリごとに費用を算出できること
• Firebaseなどを使って集計データを保存できること

+α

• サインアップ/サインイン機能を実装し、ユーザー管理できるようにする

おわりに

今回はフロントエンドエンジニアに絞って、働くまでに作ると良いポートフォリオを紹介しました。
元記事のSławek Kołodziejさんは他にも興味深い記事を書かれているので、興味のある方はそちらもご確認ください！
https://slawkolodziej.com

また、dev.toのコメント欄を見てみると、以下のリポジトリも学習にもってこいとのことでした。
力試しにいかがでしょうか？
https://github.com/florinpop17/app-ideas

何のための記事？

• 備忘録
• Gatsbyでポートフォリオサイトを作るのが割とサクッとできたことを伝えたい

※細かい環境構築は説明しません。

自己紹介

プログラミング歴1年半の美容師。ウェブサイト、業務アプリ、ウェブサービスの開発経験あり。

現在エンジニアになるべく転職活動中

きっかけ

エンジニアへの転職を決意し、ウェブサービスやアプリの開発、記事投稿などを始めていた。それらを一つのウェブサイトにまとめると、自己アピールにとても便利なのではないかと考えた。

技術選定

Nextjs の経験はあったので、Nextjsとよく比較されるGatsbyに挑戦してみたかった。GraphQLも面白そう！

なるべく早くポートフォリオサイトを作って転職活動をスムーズに進めたかったので、スターターキットが豊富で設定周りをうまくやってくれるというのもポイント。

Contentful と Netlifyは他のCMSやホスティングサービスと比較しても無料枠が大きめでメジャーであることから個人サイトには合っていると考えた。

成果物

ポートフォリオサイト

Gatsby プロジェクト作成

Gatsbyjs

GatsbyjsはReactで作る静的サイトジェネレーター。ビルドしたら静的ファイルのみになり、ホスティングが楽。かつ、ワードプレスのようにスターターキットが豊富で素早く高パフォーマンスのウェブサイトが構築できるという理解。

今回はこちらのスターターキットを使用。

gatsby-starter-mate

Contentful, Typescript対応。Netlify Deployment Friendlyとの記載もあったのでこちらを選択。レビューの★も多かったし。

コマンドラインでgatsby new <プロジェクト名> <パス>であっという間に雛形が完成。最初にyarnとnpmどっち使うの？と聞かれたので使い慣れているnpmにした。

Contentful アカウント登録

Contentful

非常にメジャーなCMS。用途に応じて様々なフィールドを追加、カスタマイズできる。サーバーサイドをこちらに任せることでフロント側Gatsbyでデータを読み込むだけでOK。サイトは日本語に対応してないが、CMS内では日本語に対応させられる。

まず、アカウント作成後に「スペース」を作る。

この「スペース」一つのサービスに紐づくものだということか。

Gatsbyjs から Contentfulを読み込む

スターターキットのおかげで細かい設定はnpm run setupのコマンドで以下3つ値をContentfulから以下を確認して入力するだけ。

• Space ID
• Content Delivery API - access token
• Personal Access Token

これでgatsby developするとあっという間に連携完了が確認できた！！

※ 私の設定なのか、選んだスターターキットのアップデートが追いついてないのかわからないが、最初GraphQLのqueryがおかしい場所があってエラーが出た。修正したら正常に動作した。

Netlifyの登録

Netlify

Netlifyは静的サイトのホスティングサービス。紐付けられたGithubにpushされると自動でデプロイされる。

アカウント登録後、GitHubのどのリポジトリを紐付けるか選択する。

これだけで後はうまくやってくれる...？

ひかかったところが2つあった。

Netlifyの環境変数を設定

先ほどと同じです。

• Space ID
• Content Delivery API - access token

ビルドコマンド

Error: Cannot find module './about.json'のえらーがでた

gatsby buildから npm run get-about && gatsby buildにした。

これらを設定後 masterにpushしたら。。。

慣れたらここまで1時間もかからなそう！

Qiita APIを使ってGatsbyで記事を読み込む

Qiitaの記事をGatsbyでGraphQLを使わずに取得して表示させたい。GraphQLとintegrateするのは大変そうだったから...。

流石エンジニア向けのプラットフォーム読みやすいドキュメント、わかりやすいAPIを用意してくださっている。

Qiita API v2

利用制限
認証している状態ではユーザごとに1時間に1000回まで、認証していない状態ではIPアドレスごとに1時間に60回までリクエストを受け付けます。

認証なしでも使えるが、一時間に60回ってちょっと微妙か？

認証のためのトークンはQiitaの「設定」 → 「アプリケーション」から取得しておいた。

gatsby-node.jsファイルがなければ作って、以下のように設定すると該当ページのpageContextで取得できる。

exports.createPages=async({actions:{createPage}})=>{constheader={headers:{Authorization:`Bearer ${process.env.QIITA_TOKEN}`,// トークンをヘッダーにセット},};constres=awaitfetch('https://qiita.com/api/v2/authenticated_user/items',// authenticated_userで認証されたユーザーの記事を取得できるheader,);constjson=awaitres.json();constqiitaData={// 取得したデータを加工title:json.title,// (略)}createPage({path:"/",// この場合トップページの pageContextで取得できるcomponent:path.resolve("./src/templates/index.tsx'"),context:{qiitaData},})}

※今回使用したgatsby-starter-mateではフォルダ構成が./src/templates/index.tsxではなく./src/pages/index.tsxになっていて、これだと動かなかった。気づくまで時間がかかったなぁ...。

参考
Why Gatsby Uses GraphQL

How to use Restful API when createPages

Dev API

Dev.toという英語版Qiitaのようなウェブサービスがあって、英語でプログラミング関連のことを検索するとヒットする。

Dev.to

こちらでも記事を書いたことがあったので（この記事を執筆時点でQiitaの英訳記事1つだけ）こちらもポートフォリオサイトへ読み込んでみたいと思いAPIを調べてみた。

DEV API (beta)

Qiitaに負けず劣らずシンプルで使いやすい。ドキュメントは英語でも非常に読みやすい。

こちらはTOKENなしで記事の読み込みが制限無しでできるかな？（記載を見つけられなかった）

gatsby-node.jsから、こちらも一緒にcontextに入れてあげる

exports.createPages=async({actions:{createPage}})=>{// 省略constres2=awaitfetch('https://dev.to/api/articles?username=kazuhideoki',);constjson2=awaitres2.json();constdevData={// 取得したデータを加工}createPage({path:"/",component:path.resolve("./src/templates/index.tsx"),context:{qiitaData,devData// 一緒にcontextに入れる},})}

これでサクッと両サイトから記事の読み込みをすることができた。

パフォーマンス

なかなか良い！！以前ワードプレスでウェブサイトを立ち上げたことがあったが、こんな数字は見たことないなぁ。

感想 まとめ

• Gatsbyを利用するとスターターキットのおかげで、少し設定すればすぐに使える形になって良い。デザインからCMSとの連携、デプロイ周りまでスターターキットが面倒を見てくれるのはありがたい。
• ContentfulもNetlifyもたくさん使われているだけ合って、使い勝手もカスタマイズ性も洗練されている印象。
• GatsbyにはGraphQLを使わなくてもRESTでデータを読み込んで、それをもとに静的サイトを生成してくれる機能もある。

さて、最低限のサイトができたので、ぼちぼち細かいところを修正していきます。

Gatsby楽しい！！

昨日 QiitaとZennに書くぞなんて書いておいて何だがもう1つチャレンジを始めたのでお勧めのため書きます。

dev.to

• 海外の投稿サイト (内容は大体QiitaかZennか辺り)
• 2016年オープン
• 阿部寛のホームページとのスピード対決で有名
• 記事
• insanely fast

ポイント

1. リアクションが多くて楽しい。dev.toにpostした感想を1行では割と本当。自己紹介スレに至っては投稿即いいね （そういう仕様）
2. お作法緩め（2～3行の挨拶でも割と許される）
3. 海外のトレンドを追える
4. 英語の勉強になる（本題ではないが）

2021年版記事

ひとまず、今年ならではの記事で高評価のものを読んでみる。

• 50+ Free Awesome Certificates to Earn in 2021 (2021年版、無料で獲れる資格50+)
• {FREE} Ultimate Resources for Front-End Development in 2021 + Giveaway(無料。2021年フロントエンド開発のための究極のリソース+オマケ付)
• 5 Must-Have Skills For Developers 2021 (2021年開発者が備えておくべき5つのスキル)
• My journey into software engineering role at Microsoft (Microsoftエンジニアへの旅)

登録は簡単

Twitter or Github アカウントがあればすぐ。好みのジャンルを選びます。

投稿5分でリアクション貰った

で、お試し投稿です。昨日の記事を簡単翻訳した版。

その後特に努力無しに勝手に良いね貰える。嬉しい。

この緩いノリは海外旅行や海外滞在で味わうそれに近いですね。
海外旅行が身近でなくなってしまった2021年年明けの今、こんなところで気軽に、広い海外と触れ合ってみるのもいかがでしょうかというお話。今年こそ良い年になると良いね。

（日本語勢も居るみたいだけど。）