フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク
5分でわかるReact Hooks - Qiita
はじめに フックって何がすごいの？クラスと何が違うの？って感じたので学習したことをここにまとめます。 Reactをこれから学ぼうと考えている方でも、 < なるほど！みんなが言っているフックについて理解できたぞ！ と思って頂けるような、わかりやすい記事を目指しました！ 少しでも参考になればとても嬉しいです フックとはなんぞや？ 状態管理などのReactの機能を、クラスを書かずに使えるようになる機能、それがフックです フックとは関数で、React16.8(2019/2~)で追加された機能となります。 フックの具体的な使い方を説明する前に、フックは何ができて、どんなメリットがあるのか。なぜ注目されているのかについてお話します。 フックの登場で何が変わった？ Reactには書き方が二種類あります。 クラスコンポーネントと関数コンポーネントです。 フック登場前のReactではクラスコンポーネントで書
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
kubectl に統合された Kustomize をさわってみた - Qiita
はじめに Kubernetes 1.14 がリリースされました。 kubernetes-1-14-release-announcement によると、kubectl に統合予定とされていた Kustomize が kubectl に統合されたとのことです。 早速さわってみました。 検証環境 macOS High Sierra 10.13.3 kubectl v1.14.0 kubernetes v1.11.8-eks-7c34c0 検証 kubectl に統合された Kustomize には、 kubectl kustomize dir/ のようにして、カスタマイズしたマニフェストを標準出力に出す kubectl apply -k dir/ のようにして、カスタマイズしたマニフェストを即座に適用する といった使い方があるようです。 それぞれ試しました。 用意したファイル 以下のような構成で
おまえはReact hooksを知っているか - Qiita
よく来たな。おれは毎日すごい量のコードを書いているが、誰にも読ませる気はない。しかし今回はReact hooks という真の男のためのAPIを発見したのでいてもたってもいられずQIITAに記事を書くことにした。 （この記事の文体は、逆噴射聡一郎先生のパロディです。） お前は毎日VUEだとかREACTだとかPWAだとかBBBFFだとかそういう流行に常に振り回されながらフロントエンドというメキシコを生きている。フロントエンドで生まれてくる技術のほとんどは、マッチの火より儚くすぐ消えてなくなるものだ。しかし、流行に乗り遅れるのを恐れているおまえはそういった技術にとびつき、チュートリアルをよみ、すべてを理解したと息巻いてプロダクトに導入し・・・やがてそれの流行がおわり・・・メンテをするのが辛くなり・・・しぬ。フロントエンド界隈ではへなちょこな技術がもてはやされ、しばらく経ってそれが全く使い物になら
技術書典7のM5Stackサークル一覧 - Qiita
目的 2019/9/22(日) に行われる技術書典7で、M5Stackに関係がありそうな、サークルを整理してみた。 前回；技術書典6のM5Stackサークル一覧 https://qiita.com/nnn112358/items/bbdec532a6d42c8b29fa 会場が、3FホールCと2FホールDがありますが、 M5Stack関係は、2FホールDに集まっています。 M5Staff け33D M5Stack, M5Stick を多方面に使い倒す同人誌 1. け33D 2. 今回も新刊あります！M5Stack, M5Stickの環境設定から作例まで、多方面に使い倒した一冊です。 3. #技術書典 #推し祭りDの陣 #M5Stack 4. @techbookfest 5. https://t.co/TaaHhtM1vg pic.twitter.com/Av0IqfIa8P — ajimi
Array.fromは実は有能ではないか？ - Qiita
Array.fromは配列風オブジェクトや反復可能オブジェクトから配列を作る標準組み込み関数です。 主な使い道1 イテレータからの変換 javascriptでは、mapやreduceと言った便利な高階関数がArrayにしか標準実装されていない割に、 MapやSetと言った組み込みオブジェクトから要素を順番に取り出そうとすると大体イテレータや列挙可能オブジェクト経由です。 (それ自体は良い抽象化だと思うんですが、whileとかfor ofになるのが辛い) イテレータを配列に変換したい場合がしばしばあります。
新Edgeブラウザ登場に伴うIEサポート終了についてチームのコンセンサスを得るためのシンプルなテンプレ - Qiita
ポエムです。コードは一行もでてきません。 Chromiumベースの新Edgeブラウザもベータに突入し、いよいよ IE のサポートを切れるタイミングが見えてきました。 とはいえ、私が関わっている現場のように、既にリリースしているサービスの場合は IE のサポートを突然切るわけにも行かず… そのような場合は、まずはチーム内への根回しやコンセンサスからになるでしょうか。 かれこれ2年前(2017年)。 今のサービスがまだ設計段階だったころに、 「2年後の2019年にはIEシェア1%とかなんだから、あらかじめ IE 対応だけは切らせてくれぇぇ」 と訴えていたのですが、 ちょうどサービスのグロースや顧客層を最大化して考える時期(風呂敷を大きめに広げている時期)というタイミングの悪さもあり、 「今の段階でIE切るとか、事業というか、ビジネス的にありえないでしょ!!」 という、 なかなか強烈な拒否反応が
宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対
【forが嫌い！可読性を上げたい！】楽するために学ぶ配列の高階関数(map, filter, reduce等) - Qiita
【forが嫌い！可読性を上げたい！】楽するために学ぶ配列の高階関数(map, filter, reduce等)JavaScriptリーダブルコード高階関数 複雑すぎるforの処理に悩まされたことはありませんか？ プログラミング習いたての頃、forに悩まされた記憶はありませんか？ また、業務で複雑すぎるfor文を見て、これくらい理解できないとやっていけないのか…と悩んだ記憶はありませんか？ 実はそのfor…もっと読みやすい書き方が出来て、簡単に読めるとしたら楽じゃないですか？ いやいや、単にもっと楽したくありませんか？ 今回は個人的に「苦手なfor文」の書き換え(map, filter, reduce等)について、短くなるだけじゃないところを紹介したいと思います。 コードを読む事に神経をとがらせて疲弊したくない人には、オススメしています。(頭を使う労力が減ってると信じたい...) 本記事につ
JavaScriptのエキサイティングな新機能7選 - Qiita
以下はMostafa Gaafarによる記事、7 New Exciting JavaScript Features You Need to Knowの日本語訳です。 7 New Exciting JavaScript Features You Need to Know JavaScript ( ECMA Script ) は進化する言語であり、たくさんのproposalやアイデアが出番を待ち受けています。 TC39 (Technical Committee 39) という委員会がJavaScript標準と新機能の定義を担当しています。 そして今年は彼らの活動が活発になっています。 以下は、現在ステージ3にある提案の一部の紹介です。 ステージ3は完成する直前の段階です。 これはつまり、この機能がブラウザやその他のJavaScriptエンジンにすぐに実装されることを表しています。 実際、以下の
JavaScript開発者のための優秀なVSCodeツール26選 - Qiita
以下はjsmanifestによる記事、26 Miraculous VS Code Tools for JavaScript Developers in 2019の日本語訳です。 26 Miraculous VS Code Tools for JavaScript Developers in 2019 Visual Studio Code(一般的にはVScodeと呼ばれる)は、デスクトップ上で動作する軽量で強力なクロスプラットフォームのコードエディタです。 TypeScriptやChrome Debuggerなどの開発ツールがサポートされています。 最初は自分のプロジェクトを構築するためにVScodeを使ったのですが、すぐに惚れ込みました。 VScodeには、誰もが開発することができ、誰もが使用することができる莫大なオープンソースの拡張機能が存在します。 開発に使える便利なツールを探している
Vimのターミナルの真の力お見せしますよ - Qiita
端末の内容をヤンク VimのターミナルウィンドウでCTRL-W Nを押下するとターミナルの出力を一時的に保留します。 この状態をターミナルノーマルモードと言います。このモードは普通のウィンドウと同様カーソル移動、ヤンク、検索を行うことができます。 ただ、iやAなどのコマンドは挿入モードではなく、通常のターミナルモードに戻るようになっています。 ターミナルノーマルモードを使用することで、lessやtailコマンドの出力、また作業ログを簡単にメモに残すことができます。 外部コマンドとの連携 Vimでは:!echo gorillaというように:!を使用することで外部コマンドを実行することができます。しかし、それだとコマンドの実行が完了するまでVimを操作できないです。とてもツライ。 そこでターミナルを使えば非同期で外部コマンドを実行することができます。 コマンドを実行している間にVimの操作がブ
【2019年版】macのターミナルにFishとFishermanを導入する - Qiita
何ができるのか ターミナルの画面が綺麗に なる , コマンドがとっても 使いやすく なる。 補完機能がすごかったり、コマンドに色が付いてわかりやすくなったり なんだか嬉しい気持ちになれル 目的 fishやfisherを導入する為のコマンドの情報が新しいのや古いのが混在していて知らないとハマる。 しっかりその罠に引っかかったので備忘録として あと自分的には知りたい情報が散ってて困ったので、ここでは画面を綺麗にすることと使いやすくすることを目的に、シンプルにFishとFishermanを導入してテーマを変えるところまでをまとめました 環境条件 ・Macのターミナル ・Homebrew 2.1.9 Fishをインストール
Excelで誰でも簡単言語処理 (感情推定, 固有表現抽出, キーワード抽出, 文類似度推定 etc...) - Qiita
Excelで誰でも簡単言語処理 (感情推定, 固有表現抽出, キーワード抽出, 文類似度推定 etc...)ExcelAPIVBA自然言語処理COTOHA 3行まとめ Excel関数一発で高度な言語処理を使えるようにしました 感情推定、固有表現抽出など日本語を分析・整理するのにいろいろ使えます Windows + Officeユーザならマクロファイルで誰でも簡単に使えます ※Macだと多分動かないと思います。VBAのHTTPリクエストを有効にできないため。。。 9/1追記: コメント頂きましたが、64bit版OfficeだとjsonParseが動かないようなのでアップデートしてみました。動作確認できていないので自己責任でお願いします https://github.com/korinzuz2/excelcotoha/blob/master/COTOHA公開用64bitExcel対応版.xls
Vuex型推論・最終章 - vuex-guardian - - Qiita
Vue.js に TypeScript を導入する障壁の一つに、状態管理の定番である Vuex が TypeScript と相性が良くないという課題があります。状態管理はアプリケーションの中枢（モデル）とも呼べ、型システムによる保守担保が求められます。この課題に対し、これまでコミュニティから様々なアプローチが試みられました。 Vue.js 界隈における TypeScript の型推論といえば、クラスベースによるものが一般的です。先行きの不透明なデコレーターだけでなく、関数型の流行によるクラスベースへの不安感は、いっそうユーザーを困惑させて来ました。いま Vue.js 界隈は、型推論と標準準拠の板挟みに葛藤していると言っても過言ではないでしょう。 私はこれまで TypeScript 芸人としてこの Vuex 型課題に取り組み続け、書籍執筆などで提案を行なって来ました。その過程で得た知見から、
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
プログラミングマスコットのドット絵を書いた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? プログラム言語のマスコット、ロゴ あなたはPCにステッカー貼ってますか？ 利用言語を愛していますか？ 言語のOSSにプルリクエストを送るためなら睡眠時間を削れますか？ そんなあなたに送るプログラムマスコット`sです。 きっかけはUTme!で自作Tシャツを作りたいと思っていた時に、プログラマーが目にするマスコットアニマル`sという記事を見たこと。 あと、三連休なのに予定がないからだZE(2019/07/14) Gopher （Go） マスコットといえばgopherくん。 ドット絵と寸胴ボディの親和性がGood。 "gopher" by R
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
slackのIncoming webhookが新しくなっていたのでまとめてみた - Qiita
会社では通知したい情報をIncoming Webhook経由でSlackに通知しているのですが、項目を変更しようと思ってドキュメントを調べたところ、Webhook周りの方針がいつの間にか変更になっていたようです。 思ったより苦戦したので（とりわけドキュメントが英語しかなく）、把握できたところをまとめてみました。 1. Webhookの設定方法の変更 まず全体的な方針変更として、Incoming Webhookの設定方法が「Webhookアプリによるインテグレーション」から「個別アプリからの登録」に変更になったようです。 旧方式 これまでWebhookは https://{workspace-name}.slack.com/apps のアプリ画面からWebhookアプリにアクセスし、各チャンネルに対してカスタムインテグレーションなるもので設定するようなフローでした。 この方式ではインテグレー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
